@snippetify/book-reader-component/dist/collection/components/my-component/my-component.js

Book Reader Component

import { Component, Prop, h, Listen, State } from '@stencil/core';
import { ContextMenuAction } from '../../events/events';
import { Decorator } from '../../models/decorator';
import { Page } from '../../models/page';
export class MyComponent {
  constructor() {
    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 is() { return "my-component"; }
  static get originalStyleUrls() { return {
    "$": ["my-component.css"]
  }; }
  static get styleUrls() { return {
    "$": ["my-component.css"]
  }; }
  static get properties() { return {
    "first": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The first name"
      },
      "attribute": "first",
      "reflect": false
    },
    "middle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The middle name"
      },
      "attribute": "middle",
      "reflect": false
    },
    "last": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The last name"
      },
      "attribute": "last",
      "reflect": false
    }
  }; }
  static get states() { return {
    "pages": {},
    "decorators": {}
  }; }
  static get listeners() { return [{
      "name": "selection",
      "method": "selectionHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "decorator",
      "method": "decoratorHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "comparison",
      "method": "comparisonHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "stopScrolling",
      "method": "stopScrollingHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "contextMenuItem",
      "method": "contextMenuItemHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "scrollDirection",
      "method": "scrollDirectionHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "bookReady",
      "method": "bookReadyHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "bookUpdated",
      "method": "bookUpdatedHandler",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}