opds-web-client
Version:
68 lines (67 loc) • 2.81 kB
JavaScript
;
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 seedrandom = require("seedrandom");
var BookCover = (function (_super) {
__extends(BookCover, _super);
function BookCover() {
_super.apply(this, arguments);
}
BookCover.prototype.render = function () {
var _a = this.props.book, title = _a.title, authors = _a.authors;
var titleStyle = Object.assign({
display: "table-cell",
height: "120px",
width: "150px",
verticalAlign: "bottom",
color: "#444",
backgroundColor: "#eee",
fontWeight: "normal",
padding: "10px",
}, this.computeFontStyle(title, 40));
var authorStyle = Object.assign({
paddingTop: "10px",
color: "#fff",
padding: "10px"
}, this.computeFontStyle(authors.join(", "), 25));
var hue = this.seededRandomHue(title);
var bgColor = "hsla(" + hue + ", 40%, 60%, 1)";
var cellStyle = {
float: "left",
width: "150px",
height: "200px",
backgroundColor: bgColor,
border: "1px solid #888",
fontWeight: "normal",
fontFamily: "Georgia, serif",
position: "relative",
textAlign: "left"
};
return (React.createElement("div", {className: "autoBookCover", style: cellStyle}, React.createElement("div", {style: titleStyle}, title), React.createElement("div", {style: authorStyle}, authors.join(", "))));
};
BookCover.prototype.computeFontStyle = function (text, baseFontSize, minFontSize) {
if (baseFontSize === void 0) { baseFontSize = 40; }
if (minFontSize === void 0) { minFontSize = 15; }
// decrease size as max word length increases
// decrease size as word count grows beyond 3
var words = text.split(/\s/);
var wordCount = words.length;
var maxLength = Math.max.apply(Math, words.map(function (word) { return word.length; }));
var fontSize = Math.max(minFontSize, baseFontSize - maxLength * 2 - Math.max(0, wordCount - 3) * 2);
var lineHeight = fontSize + 5;
return {
fontSize: (fontSize / 13) + "em",
lineHeight: "1em"
};
};
BookCover.prototype.seededRandomHue = function (seed) {
return Math.round(360 * seedrandom(seed)());
};
return BookCover;
}(React.Component));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = BookCover;