@snippetify/book-reader-component
Version:
Book Reader Component
119 lines (118 loc) • 3.44 kB
JavaScript
import { Component, Host, h, Prop, Event } from '@stencil/core';
import { parse } from 'node-html-parser';
import defaultConfig from '../../config/config';
import { Paragraph } from '../../models/paragraph';
export class BookPage {
constructor() {
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 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 is() { return "book-page"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() { return {
"$": ["book-page.css"]
}; }
static get styleUrls() { return {
"$": ["book-page.css"]
}; }
static get properties() { return {
"page": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Page",
"resolved": "Page",
"references": {
"Page": {
"location": "import",
"path": "../../models/page"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"config": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "PageConfig",
"resolved": "PageConfig",
"references": {
"PageConfig": {
"location": "local"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "defaultConfig.page"
}
}; }
static get events() { return [{
"method": "langComparison",
"name": "langComparison",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "Paragraph",
"resolved": "Paragraph",
"references": {
"Paragraph": {
"location": "import",
"path": "../../models/paragraph"
}
}
}
}]; }
}