opds-web-client
Version:
78 lines (77 loc) • 4.87 kB
JavaScript
"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;