@venite/components 0.16.7 → 0.16.13

package/dist/collection/components/bible-reading/bible-reading.js

@@ -0,0 +1,328 @@
+import { alertController, loadingController } from '@ionic/core';
+import { Component, Element, Prop, Event, Watch, State, h, Host, Method } from '@stencil/core';
+import { BibleReading, Change, Heading, versionToString } from '@venite/ldf';
+import { getComponentClosestLanguage } from '../../utils/locale';
+import EN from './bible-reading.i18n.en.json';
+import ES from './bible-reading.i18n.es.json';
+import { fetchReading } from './fetch-reading';
+const LOCALE = {
+  'en': EN,
+  'es': ES
+};
+export class BibleReadingComponent {
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new BibleReading(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new BibleReading(newDoc);
+      }
+      this.processIntro();
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new BibleReading();
+    }
+    this.loadVerses();
+  }
+  // Lifecycle events
+  async componentWillLoad() {
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+    this.loadVerses();
+    this.processIntro();
+  }
+  processIntro() {
+    var _a, _b;
+    // process intro
+    if ((_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.intro) {
+      try {
+        this.obj.compileIntro();
+        this.obj = new BibleReading(Object.assign({}, this.obj));
+      }
+      catch (e) {
+        console.warn(e);
+        console.warn(this.obj);
+      }
+    }
+  }
+  // Private methods
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  async changeReading() {
+    var _a;
+    const localeStrings = this.localeStrings || {};
+    const alert = await alertController.create({
+      header: localeStrings.changeReading,
+      inputs: [
+        {
+          name: 'citation',
+          type: 'text',
+          value: (_a = this.obj) === null || _a === void 0 ? void 0 : _a.citation,
+          placeholder: localeStrings.newCitation
+        },
+      ],
+      buttons: [
+        {
+          text: localeStrings.cancel,
+          role: 'cancel',
+          cssClass: 'secondary'
+        },
+        {
+          text: localeStrings.ok,
+          handler: async (data) => {
+            var _a, _b, _c;
+            this.ldfDocShouldChange.emit(new Change({
+              path: this.path,
+              op: [
+                {
+                  type: 'set',
+                  index: 'citation',
+                  oldValue: (_a = this.obj) === null || _a === void 0 ? void 0 : _a.citation,
+                  value: data === null || data === void 0 ? void 0 : data.citation
+                }
+              ]
+            }));
+            const loading = await loadingController.create({
+              message: localeStrings.loading
+            });
+            await loading.present();
+            const newReading = await fetchReading(data.citation, versionToString((_b = this.obj) === null || _b === void 0 ? void 0 : _b.version));
+            await loading.dismiss();
+            this.ldfDocShouldChange.emit(new Change({
+              path: this.path,
+              op: [{
+                  type: 'set',
+                  index: 'value',
+                  oldValue: (_c = this.obj) === null || _c === void 0 ? void 0 : _c.value,
+                  value: (newReading === null || newReading === void 0 ? void 0 : newReading.value) || []
+                }]
+            }));
+            this.obj = new BibleReading(Object.assign(Object.assign({}, this.obj), { citation: data === null || data === void 0 ? void 0 : data.citation, value: (newReading === null || newReading === void 0 ? void 0 : newReading.value) || [] }));
+            this.loadVerses();
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+  loadVerses() {
+    this.verses = this.obj.value || [];
+  }
+  paragraphs() {
+    const paragraphs = new Array();
+    let currentParagraph = new Array();
+    this.verses.forEach(verse => {
+      if (verse.hasOwnProperty('type') && verse.type === 'heading') {
+        paragraphs.push(currentParagraph);
+        currentParagraph = new Array();
+      }
+      else {
+        currentParagraph.push(verse);
+      }
+    });
+    paragraphs.push(currentParagraph);
+    return paragraphs;
+  }
+  // Render
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    const localeStrings = this.localeStrings || {};
+    if (this.verses) {
+      /* Editable version */
+      if (this.editable) {
+        const template = Object.assign(Object.assign({}, this.verses[0]), { text: '' }), templateMaker = (text) => (Object.assign(Object.assign({}, template), { text }));
+        return (h("div", { lang: (_a = this.obj) === null || _a === void 0 ? void 0 : _a.language, class: `editable bible-reading ${((_b = this.obj) === null || _b === void 0 ? void 0 : _b.display_format) || 'default'}` },
+          this.editable && h("ldf-label-bar", null,
+            h("slot", { slot: 'end', name: 'controls' },
+              h("ion-buttons", null,
+                h("ion-button", { onClick: () => this.changeReading() },
+                  h("ion-icon", { name: "swap-horizontal", slot: "start" }),
+                  h("ion-label", null, localeStrings.changeReading))))),
+          h("ldf-label-bar", null,
+            h("h3", { class: "editable-label", slot: "start" },
+              h("ldf-editable-text", { id: "label", text: (_c = this.obj) === null || _c === void 0 ? void 0 : _c.label, path: `${this.path}/label`, placeholder: localeStrings.label })),
+            ((_d = this.obj) === null || _d === void 0 ? void 0 : _d.citation) && h("button", { class: "citation-button", slot: "end", onClick: () => this.changeReading() }, this.obj.citation)),
+          ((_f = (_e = this.obj) === null || _e === void 0 ? void 0 : _e.metadata) === null || _f === void 0 ? void 0 : _f.compiled_intro) && h("ldf-liturgical-document", { editable: true, doc: this.obj.metadata.intro, path: `${this.path}/metadata/intro` }),
+          h("section", { class: "verses" }, this.verses.map((verse, verseIndex) => [
+            verse.hasOwnProperty('type') && verse.type === 'heading'
+              ? h("ldf-heading", { editable: true, doc: verse, path: `${this.path}/value/${verseIndex}` })
+              : h("div", { class: "editable-verse" },
+                h("div", { class: "editable-citation" },
+                  h("ldf-editable-text", { class: "book", id: `verse-${verseIndex}-book`, text: verse.book, path: `${this.path}/value/${verseIndex}/book`, placeholder: localeStrings.book, short: true }),
+                  h("ldf-editable-text", { id: `verse-${verseIndex}-chapter`, text: verse.chapter, path: `${this.path}/value/${verseIndex}/chapter`, placeholder: localeStrings.chapter, short: true }),
+                  " :",
+                  h("ldf-editable-text", { id: `verse-${verseIndex}-verse`, text: verse.verse, path: `${this.path}/value/${verseIndex}/verse`, placeholder: localeStrings.verse, short: true })),
+                h("ldf-editable-text", { id: `verse-${verseIndex}-text`, text: verse.text, path: `${this.path}/value/${verseIndex}/text`, placeholder: localeStrings.text, short: false, template: template, templateMaker: templateMaker }))
+          ]))));
+      }
+      /* `short` renders a few verses, with a response and citation. */
+      else if (this.obj.style == 'short') {
+        const shortResponse = (((_h = (_g = this.obj) === null || _g === void 0 ? void 0 : _g.metadata) === null || _h === void 0 ? void 0 : _h.response) || localeStrings.amen).length <= 5;
+        let responseNode;
+        if (!((_k = (_j = this.obj) === null || _j === void 0 ? void 0 : _j.metadata) === null || _k === void 0 ? void 0 : _k.response)) {
+          responseNode = h("span", { class: "response" },
+            " ",
+            localeStrings.amen);
+        }
+        else {
+          responseNode = h("span", { class: "response" },
+            " ",
+            this.obj.metadata.response);
+        }
+        return (h(Host, null,
+          ((_l = this.obj) === null || _l === void 0 ? void 0 : _l.label) && h("ldf-heading", { doc: new Heading({ type: 'heading', metadata: { level: 3 }, value: [this.obj.label] }) }),
+          h("div", { lang: (_m = this.obj) === null || _m === void 0 ? void 0 : _m.language, class: `bible-reading ${((_o = this.obj) === null || _o === void 0 ? void 0 : _o.display_format) || 'default'}` },
+            h("p", null,
+              this.verses.map((verse, verseIndex) => {
+                var _a;
+                return verse.hasOwnProperty('type') && verse.type === 'heading'
+                  ? h("ldf-heading", { doc: new Heading(verse) })
+                  : h("ldf-string", { citation: { book: verse.book, chapter: verse.chapter, verse: verse.verse }, id: this.obj.uid, text: verse.text, fragment: this.path, dropcap: ((_a = this.obj) === null || _a === void 0 ? void 0 : _a.display_format) == "force_dropcap" && verseIndex === 0 ? "force" : "disabled" });
+              }),
+              shortResponse && !((_q = (_p = this.obj) === null || _p === void 0 ? void 0 : _p.metadata) === null || _q === void 0 ? void 0 : _q.omit_response) && responseNode,
+              h("span", { class: "citation" }, this.obj.citation)),
+            !shortResponse && !((_s = (_r = this.obj) === null || _r === void 0 ? void 0 : _r.metadata) === null || _s === void 0 ? void 0 : _s.omit_response) && h("p", null, responseNode))));
+      }
+      /* `long` render a typical Bible reading in the liturgy */
+      else {
+        const paragraphs = this.paragraphs();
+        return (h("div", { lang: (_t = this.obj) === null || _t === void 0 ? void 0 : _t.language, class: `bible-reading ${((_u = this.obj) === null || _u === void 0 ? void 0 : _u.display_format) || 'default'}` },
+          h("ldf-heading", { doc: new Heading({ type: 'heading', metadata: { level: 3 }, value: [this.obj.label], citation: this.obj.citation }) }),
+          ((_w = (_v = this.obj) === null || _v === void 0 ? void 0 : _v.metadata) === null || _w === void 0 ? void 0 : _w.compiled_intro) && h("ldf-liturgical-document", { doc: this.obj.metadata.compiled_intro }),
+          paragraphs.map((paragraph, paragraphIndex) => h("p", { lang: this.obj.language }, paragraph.map((verse, verseIndex) => verse.hasOwnProperty('type') && verse.type === 'heading'
+            ? h("ldf-heading", { doc: new Heading(verse) })
+            : [
+              h("sup", null, verse.verse),
+              h("ldf-string", { citation: verse, dropcap: paragraphIndex == 0 && verseIndex == 0 ? 'force' : 'disabled', id: `${verse.chapter}-${verse.book}-${verse.verse}`, text: verse.text, index: verseIndex, fragment: this.path })
+            ])))));
+      }
+    }
+    else {
+      return this.loadingError ? h("pre", null, this.loadingError) : h("p", null, localeStrings.loading);
+    }
+  }
+  static get is() { return "ldf-bible-reading"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["bible-reading.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["bible-reading.css"]
+  }; }
+  static get properties() { return {
+    "doc": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "BibleReading | string",
+        "resolved": "BibleReading | string",
+        "references": {
+          "BibleReading": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An LDF BibleReading object."
+      },
+      "attribute": "doc",
+      "reflect": false
+    },
+    "path": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A JSON Pointer that points to the Collect being edited"
+      },
+      "attribute": "path",
+      "reflect": true
+    },
+    "editable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the object is editable"
+      },
+      "attribute": "editable",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "obj": {},
+    "localeStrings": {},
+    "verses": {},
+    "loadingError": {}
+  }; }
+  static get events() { return [{
+      "method": "ldfDocShouldChange",
+      "name": "ldfDocShouldChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Change",
+        "resolved": "Change",
+        "references": {
+          "Change": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "changeReading": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "doc",
+      "methodName": "docChanged"
+    }]; }
+}