@snippetify/book-reader-component
Version:
Book Reader Component
76 lines (71 loc) • 3.38 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { d as dist } from './index2.js';
import { d as defaultConfig } from './config.js';
class Paragraph {
constructor(no, page, abbr, content) {
this.no = no;
this.page = page;
this.abbr = abbr;
this.content = content;
}
}
const bookPageCss = ".sc-book-page-h{display:block}a.sc-book-page,a.sc-book-page:active,a.sc-book-page:visited{color:#1488cc;text-decoration:none}blockquote.sc-book-page{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-page{background-color:yellow !important}.reference.sc-book-page{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}.comparison.sc-book-page{font-size:75%;margin-left:4px}.note-icon.sc-book-page{color:#4caf50;font-size:80%}.bookmark-icon.sc-book-page{color:#ff5722;font-size:80%}";
const BookPage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.langComparison = createEvent(this, "langComparison", 7);
this.config = defaultConfig.page;
}
dispatchLangComparison(ev, paragraph, content) {
ev.preventDefault();
this.langComparison.emit(new Paragraph(paragraph, this.page.no, this.page.abbr, content));
}
getReference(paragraph) {
if (this.config.reference.enabled) {
return (h("span", { class: "reference" }, this.config.reference.template
.replace('page', `${this.page.no}`)
.replace('no', `${paragraph}`)
.replace('abbr', this.page.abbr.toUpperCase())));
}
}
getLanguageComparison(paragraph, content) {
if (this.config.languageComparison.enabled) {
return (h("a", { href: "#", onClick: e => this.dispatchLangComparison(e, paragraph, content), class: "comparison" }, h("i", { class: this.config.languageComparison.icon }, "compare")));
}
}
build() {
let paragraph = 0;
return dist.parse(this.page.content).querySelectorAll('> *')
.filter(item => item.nodeType !== 3)
.map((item, i) => {
const Tag = item.rawTagName;
const itemId = `${this.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(paragraph), this.getLanguageComparison(paragraph, item.innerHTML)));
}
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())));
}
static get style() { return bookPageCss; }
}, [2, "book-page", {
"page": [16],
"config": [16]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["book-page"];
components.forEach(tagName => { switch (tagName) {
case "book-page":
if (!customElements.get(tagName)) {
customElements.define(tagName, BookPage);
}
break;
} });
}
export { BookPage as B, defineCustomElement as d };