UNPKG

opds-web-client

Version:
78 lines (77 loc) 4.87 kB
"use strict"; var __extends = (this && this.__extends) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; var React = require("react"); require("../stylesheets/collection.scss"); require("../stylesheets/subtle_list.scss"); require("../stylesheets/visually_hidden.scss"); var Book_1 = require("./Book"); var CatalogLink_1 = require("./CatalogLink"); var Lanes_1 = require("./Lanes"); var FacetGroup_1 = require("./FacetGroup"); var SkipNavigationLink_1 = require("./SkipNavigationLink"); var Collection = (function (_super) { __extends(Collection, _super); function Collection(props) { _super.call(this, props); this.fetch = this.fetch.bind(this); } Collection.prototype.render = function () { var _this = this; var hasFacets = (this.props.collection.facetGroups && this.props.collection.facetGroups.length > 0); var bodyClass = hasFacets ? "body with-facets" : "body"; return (React.createElement("div", {className: "collection"}, hasFacets && (React.createElement("div", {className: "facet-groups", role: "navigation", "aria-label": "filters"}, React.createElement(SkipNavigationLink_1.default, null), this.props.collection.facetGroups.map(function (facetGroup) { return React.createElement(FacetGroup_1.default, {key: facetGroup.label, facetGroup: facetGroup}); }))), React.createElement("div", {className: bodyClass, role: "main", "aria-label": "books in " + this.props.collection.title}, React.createElement("a", {className: "main-anchor", name: "main"}), (this.props.collection.lanes && this.props.collection.lanes.length > 0) ? React.createElement(Lanes_1.Lanes, {url: this.props.collection.url, lanes: this.props.collection.lanes}) : null, this.props.collection.books && React.createElement("ul", {"aria-label": "books", className: "subtle-list"}, this.props.collection.books.map(function (book) { return React.createElement("li", {key: book.id}, React.createElement(Book_1.default, {book: book, collectionUrl: _this.props.collection.url})); })), this.props.collection.navigationLinks && React.createElement("ul", {"aria-label": "navigation links", className: "navigation-links subtle-list", role: "navigation"}, this.props.collection.navigationLinks.map(function (link) { return React.createElement("li", {key: link.id}, React.createElement(CatalogLink_1.default, {collectionUrl: link.url}, link.text)); })), this.isEmpty() && React.createElement("div", {className: "empty-collection-message"}, "No books here."), this.canFetch() && React.createElement("button", {className: "next-page-link visually-hidden", onClick: this.fetch}, "Load more books"), this.props.isFetchingPage && React.createElement("div", {className: "loading-next-page"}, React.createElement("h3", null, "Loading next page..."))))); }; Collection.prototype.componentWillReceiveProps = function (nextProps) { if (this.props.isFetching && !nextProps.isFetching && !nextProps.error) { document.body.scrollTop = 0; } }; Collection.prototype.componentDidMount = function () { window.addEventListener("scroll", this.handleScrollOrResize.bind(this)); window.addEventListener("resize", this.handleScrollOrResize.bind(this)); // the first page might not fill the screen on initial load, so run handler once this.handleScrollOrResize(); }; Collection.prototype.componentWillUnmount = function () { window.removeEventListener("scroll", this.handleScrollOrResize.bind(this)); window.removeEventListener("resize", this.handleScrollOrResize.bind(this)); }; Collection.prototype.canFetch = function () { return !this.props.hidden && !this.props.isFetchingPage && this.props.collection.nextPageUrl; }; Collection.prototype.fetch = function () { if (this.canFetch()) { this.props.fetchPage(this.props.collection.nextPageUrl); } }; Collection.prototype.handleScrollOrResize = function () { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if ((scrollTop + window.innerHeight) >= document.body.scrollHeight) { this.fetch(); } }; Collection.prototype.isEmpty = function () { return this.props.collection.lanes.length === 0 && this.props.collection.books.length === 0 && this.props.collection.navigationLinks.length === 0; }; return Collection; }(React.Component)); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = Collection;