@snippetify/book-reader-component
Version:
Book Reader Component
108 lines (107 loc) • 2.96 kB
JavaScript
import { Component, Host, h, Prop } from '@stencil/core';
import { parse } from 'node-html-parser';
import defaultConfig from '../../config/config';
export class BookPagesComparison {
constructor() {
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 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 is() { return "book-pages-comparison"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() { return {
"$": ["book-pages-comparison.css"]
}; }
static get styleUrls() { return {
"$": ["book-pages-comparison.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": ""
}
},
"page2": {
"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": "import",
"path": "../book-page/book-page"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "defaultConfig.page"
}
}; }
}