@snippetify/book-reader-component
Version:
Book Reader Component
141 lines (136 loc) • 7.15 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$2, c as ContextMenuAction } from './context-menu2.js';
import { D as Decorator, P as Page, d as defineCustomElement$3 } from './book-reader2.js';
import { d as defineCustomElement$5 } from './book-page2.js';
import { d as defineCustomElement$4 } from './book-pages-comparison2.js';
const myComponentCss = ":host{display:block}";
const MyComponent$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.pages = [];
this.decorators = [];
}
selectionHandler(event) {
console.log(event.detail);
}
decoratorHandler(event) {
console.log(event.detail);
}
comparisonHandler(event) {
console.log(event.detail);
}
stopScrollingHandler(event) {
console.log(event.detail);
}
contextMenuItemHandler(event) {
console.log(event.detail);
const decs = this.decorators;
const style = event.detail.action === ContextMenuAction.HIGHLIGHT ? { color: '#1c1c1c', backgroundColor: 'red' } : {};
decs.push(new Decorator(Object.assign(Object.assign({}, event.detail.payload), { uuid: 'jhjdhfjh', type: event.detail.action, style: style })));
console.log(decs);
this.bookReader.setDecorators(decs).then(() => {
console.log('deco set...');
});
}
scrollDirectionHandler(event) {
console.log(event.detail);
}
bookReadyHandler(event) {
console.log(event.detail);
}
bookUpdatedHandler(event) {
console.log(event.detail);
}
componentWillLoad() {
this.pages = this.getPages();
// this.decorators = [
// new Decorator({
// "content": "psam quidem at pariatur tempo",
// "pages": [1,1],
// "serialized": "type:TextRange|125$154$2$selection$",
// "references": [1,1],
// "type": "highlight",
// "uuid": "jhjdhfjh",
// "style": {"color": "#1c1c1c","backgroundColor": "red"}
// })
// ];
}
goToPage() {
(async () => {
console.log(await this.bookReader.getReadStyle());
await this.bookReader.goToParagraph(5, 3);
})();
}
getContent() {
return `
<h2>Lorem ipsum</h2>
<p>Lorem ipsum <b>dolor</b> sit amet consectetur adipisicing elit. Quas ipsam quidem at pariatur tempora eligendi veritatis nam quibusdam ullam? Quisquam, labore! Corrupti voluptatem minima dolorum atque repellat ipsum magni ipsa?</p>
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ipsam quidem at pariatur tempora eligendi veritatis nam quibusdam ullam? Quisquam, labore! Corrupti voluptatem minima dolorum atque repellat ipsum magni ipsa?</blockquote>
<h2>Amet sin dolor</h2>
<blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ipsam quidem at pariatur tempora eligendi veritatis nam quibusdam ullam? Quisquam, labore! Corrupti voluptatem minima dolorum atque repellat ipsum magni ipsa?</blockquote>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ipsam quidem at pariatur tempora eligendi veritatis nam quibusdam ullam? Quisquam, labore! Corrupti voluptatem minima dolorum atque repellat ipsum magni ipsa?</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum <b>dolor</b> sit amet consectetur adipisicing elit. Quas ipsam quidem at pariatur tempora eligendi veritatis nam quibusdam ullam? Quisquam, labore! Corrupti voluptatem minima dolorum atque repellat ipsum magni ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ipsam quidem at pariatur tempora eligendi veritatis nam quibusdam ullam? Quisquam, labore! Corrupti voluptatem minima dolorum atque repellat ipsum magni ipsa?</p>
<h2>Amet sin dolor</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ipsam quidem at pariatur tempora eligendi veritatis nam quibusdam ullam? Quisquam, labore! Corrupti voluptatem minima dolorum atque repellat ipsum magni ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ipsam quidem at pariatur tempora eligendi veritatis nam quibusdam ullam? Quisquam, labore! Corrupti voluptatem minima dolorum atque repellat ipsum magni ipsa?</p>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum <b>dolor</b> sit amet consectetur adipisicing elit. Quas ipsam quidem at pariatur tempora eligendi veritatis nam quibusdam ullam? Quisquam, labore! Corrupti voluptatem minima dolorum atque repellat ipsum magni ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ipsam quidem at pariatur tempora eligendi veritatis nam quibusdam ullam? Quisquam, labore! Corrupti voluptatem minima dolorum atque repellat ipsum magni ipsa?</p>
<h2>Amet sin dolor</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ipsam quidem at pariatur tempora eligendi veritatis nam quibusdam ullam? Quisquam, labore! Corrupti voluptatem minima dolorum atque repellat ipsum magni ipsa?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ipsam quidem at pariatur tempora eligendi veritatis nam quibusdam ullam? Quisquam, labore! Corrupti voluptatem minima dolorum atque repellat ipsum magni ipsa?</p>
`;
}
getPages() {
return [1, 2, 3, 4, 5].map(v => new Page({ no: v, abbr: '1TG1', content: this.getContent() }));
}
render() {
return (h("div", null, h("h1", null, "Book reader component"), h("button", { onClick: () => this.goToPage() }, "Go to page"), h("book-reader", { ref: v => this.bookReader = v, pages: this.pages, decorators: this.decorators })));
}
static get style() { return myComponentCss; }
}, [0, "my-component", {
"first": [1],
"middle": [1],
"last": [1],
"pages": [32],
"decorators": [32]
}, [[0, "selection", "selectionHandler"], [0, "decorator", "decoratorHandler"], [0, "comparison", "comparisonHandler"], [0, "stopScrolling", "stopScrollingHandler"], [0, "contextMenuItem", "contextMenuItemHandler"], [0, "scrollDirection", "scrollDirectionHandler"], [0, "bookReady", "bookReadyHandler"], [0, "bookUpdated", "bookUpdatedHandler"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["my-component", "book-page", "book-pages-comparison", "book-reader", "context-menu"];
components.forEach(tagName => { switch (tagName) {
case "my-component":
if (!customElements.get(tagName)) {
customElements.define(tagName, MyComponent$1);
}
break;
case "book-page":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "book-pages-comparison":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "book-reader":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "context-menu":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const MyComponent = MyComponent$1;
const defineCustomElement = defineCustomElement$1;
export { MyComponent, defineCustomElement };