@snippetify/book-reader-component
Version:
Book Reader Component
58 lines (54 loc) • 2.94 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as dist } from './index2.js';
import { d as defaultConfig } from './config.js';
const bookPagesComparisonCss = ".sc-book-pages-comparison-h{display:flex}.sc-book-pages-comparison-h>div.sc-book-pages-comparison{width:50%;margin-right:15px;word-wrap:break-word}.sc-book-pages-comparison-h>div.sc-book-pages-comparison:last-child{margin:0 0 0 15px}a.sc-book-pages-comparison,a.sc-book-pages-comparison:active,a.sc-book-pages-comparison:visited{color:#1488cc;text-decoration:none}blockquote.sc-book-pages-comparison{font-weight:bold;margin-block-start:0em !important;margin-block-end:0em !important;margin-inline-start:0px !important;margin-inline-end:0px !important}mark.sc-book-pages-comparison{background-color:yellow !important}.reference.sc-book-pages-comparison{color:#ff5722;font-weight:normal;font-size:70%;border:4px solid transparent;background-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}";
const BookPagesComparison = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.config = defaultConfig.page;
}
getReference(page, paragraph) {
if (this.config.reference.enabled) {
return (h("span", { class: "reference" }, this.config.reference.template
.replace('page', `${page.no}`)
.replace('no', `${paragraph}`)
.replace('abbr', page.abbr.toUpperCase())));
}
}
build(page) {
let paragraph = 0;
return dist.parse(page.content).querySelectorAll('> *')
.filter(item => item.nodeType !== 3)
.map((item, i) => {
const Tag = item.rawTagName;
const itemId = `${page.no}.${i + 1}`;
if (['p', 'blockquote'].includes(Tag)) {
return (h(Tag, { "data-id": itemId, "data-pos": ++paragraph }, h("span", { innerHTML: item.innerHTML }), this.getReference(page, paragraph)));
}
return h(Tag, { "data-id": itemId, innerHTML: item.innerHTML });
});
}
render() {
return (h(Host, null, h("div", { "data-no": this.page.no, "data-abbr": this.page.abbr }, this.build(this.page)), h("div", { "data-no": this.page2.no, "data-abbr": this.page2.abbr }, this.build(this.page2))));
}
static get style() { return bookPagesComparisonCss; }
}, [2, "book-pages-comparison", {
"page": [16],
"page2": [16],
"config": [16]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["book-pages-comparison"];
components.forEach(tagName => { switch (tagName) {
case "book-pages-comparison":
if (!customElements.get(tagName)) {
customElements.define(tagName, BookPagesComparison);
}
break;
} });
}
export { BookPagesComparison as B, defineCustomElement as d };