opds-web-client
Version:
132 lines (131 loc) • 5.78 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");
var Book_1 = require("./Book");
var CatalogLink_1 = require("./CatalogLink");
var LaneMoreLink_1 = require("./LaneMoreLink");
var Lane = (function (_super) {
__extends(Lane, _super);
function Lane(props) {
var _this = _super.call(this, props) || this;
_this.state = { atLeft: true, atRight: false };
_this.scrollBack = _this.scrollBack.bind(_this);
_this.scrollForward = _this.scrollForward.bind(_this);
return _this;
}
Lane.prototype.render = function () {
var _this = this;
var visibleBooks = this.visibleBooks();
if (visibleBooks.length === 0) {
return null;
}
return (React.createElement("div", { className: "lane" },
React.createElement("h2", null,
React.createElement(CatalogLink_1.default, { className: "title", collectionUrl: this.props.lane.url }, this.props.lane.title)),
React.createElement("div", { ref: "container", className: "lane-books-container" },
!this.state.atLeft &&
React.createElement("div", { className: "scroll-button left", "aria-label": "Scroll back in " + this.props.lane.title, onClick: this.scrollBack }, "\u25C1"),
React.createElement("ul", { ref: "list", className: "lane-books", "aria-label": "books in " + this.props.lane.title },
visibleBooks.map(function (book, index) {
return React.createElement("li", { key: index },
React.createElement(Book_1.default, { book: book, collectionUrl: _this.props.collectionUrl }));
}),
!this.props.hideMoreLink &&
React.createElement("li", { key: "more" },
React.createElement(LaneMoreLink_1.default, { lane: this.props.lane }))),
!this.state.atRight &&
React.createElement("div", { className: "scroll-button right", "aria-label": "Scroll forward in " + this.props.lane.title, onClick: this.scrollForward }, "\u25B7"))));
};
Lane.prototype.visibleBooks = function () {
var _this = this;
if (!this.props.hiddenBookIds) {
return this.props.lane.books;
}
return this.props.lane.books.filter(function (book) {
return _this.props.hiddenBookIds.indexOf(book.id) === -1;
});
};
Lane.prototype.getContainerWidth = function () {
return this.refs["container"].clientWidth;
};
Lane.prototype.getScrollWidth = function () {
return this.refs["list"].scrollWidth;
};
Lane.prototype.getScroll = function () {
return this.refs["list"].scrollLeft;
};
Lane.prototype.changeScroll = function (delta) {
var _this = this;
var oldScroll = this.getScroll();
var newScroll = oldScroll + delta;
var scrollWidth = this.getScrollWidth();
var containerWidth = this.getContainerWidth();
if (newScroll > (scrollWidth - containerWidth)) {
newScroll = scrollWidth - containerWidth;
}
if (newScroll < 0) {
newScroll = 0;
}
var increment = 25;
if (delta < 0) {
increment = increment * -1;
}
var animationFrame;
var incrementScroll = function (time) {
var scroll = _this.getScroll();
var remainingScroll = newScroll - scroll;
var list = _this.refs["list"];
if (Math.abs(remainingScroll) < Math.abs(increment)) {
list.scrollLeft = newScroll;
window.cancelAnimationFrame(animationFrame);
}
else {
list.scrollLeft = scroll + increment;
animationFrame = window.requestAnimationFrame(incrementScroll);
}
};
animationFrame = window.requestAnimationFrame(incrementScroll);
};
Lane.prototype.scrollBack = function () {
var containerWidth = this.getContainerWidth();
var delta = -containerWidth + 50;
this.changeScroll(delta);
};
Lane.prototype.scrollForward = function () {
var containerWidth = this.getContainerWidth();
var delta = containerWidth - 50;
this.changeScroll(delta);
};
Lane.prototype.updateScrollButtons = function () {
var atLeft = false;
var atRight = false;
var scroll = this.getScroll();
var scrollWidth = this.getScrollWidth();
var containerWidth = this.getContainerWidth();
if (scroll <= 0) {
atLeft = true;
}
if (scroll >= (scrollWidth - containerWidth)) {
atRight = true;
}
this.setState({ atLeft: atLeft, atRight: atRight });
};
Lane.prototype.componentDidMount = function () {
var list = this.refs["list"];
list.addEventListener("scroll", this.updateScrollButtons.bind(this));
window.addEventListener("resize", this.updateScrollButtons.bind(this));
this.updateScrollButtons();
};
Lane.prototype.componentWillUnmount = function () {
var list = this.refs["list"];
list.removeEventListener("scroll", this.updateScrollButtons.bind(this));
window.removeEventListener("resize", this.updateScrollButtons.bind(this));
};
return Lane;
}(React.Component));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Lane;