opds-web-client/lib/components/Collection.js

OPDS web client

"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");
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 styles_1 = require("./styles");
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 leftPanelWidth = 190;
        var padding = 10;
        var collectionBodyStyle = {
            padding: padding + "px",
            height: "100%"
        };
        if (this.props.collection.facetGroups && this.props.collection.facetGroups.length) {
            collectionBodyStyle.marginLeft = (leftPanelWidth + padding) + "px";
        }
        var leftPanelStyle = {
            width: leftPanelWidth + "px",
            position: "fixed",
            left: "0px"
        };
        var linkStyle = {
            textAlign: "center",
            backgroundColor: "#ddd",
            margin: "25px",
            padding: "10px",
            overflow: "hidden",
            fontSize: "500%",
            display: "block"
        };
        var loadingNextPageStyle = {
            clear: "both",
            height: "50px",
            textAlign: "center",
            padding: "10px"
        };
        return (React.createElement("div", {className: "collection"}, this.props.collection.facetGroups && this.props.collection.facetGroups.length > 0 && (React.createElement("div", {className: "facetGroups", style: leftPanelStyle, 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: "collectionBody", style: collectionBodyStyle, role: "main", "aria-label": "books in " + this.props.collection.title}, React.createElement("a", {className: "mainAnchor", 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", style: styles_1.subtleListStyle}, 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", style: styles_1.subtleListStyle, role: "navigation"}, this.props.collection.navigationLinks.map(function (link) {
                return React.createElement("li", {key: link.id}, React.createElement(CatalogLink_1.default, {collectionUrl: link.url, style: linkStyle}, link.text));
            })), this.isEmpty() &&
            React.createElement("div", {style: { padding: "1em", textAlign: "center", color: "#888", fontSize: "3em" }}, "No books here."), this.canFetch() &&
            React.createElement("button", {className: "nextPageLink", style: styles_1.visuallyHiddenStyle, onClick: this.fetch}, "Load more books"), this.props.isFetchingPage &&
            React.createElement("div", {className: "loadingNextPage", style: loadingNextPageStyle}, 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;