@venite/components 0.16.7 → 0.16.13

package/dist/collection/components/meditation/meditation.js

@@ -0,0 +1,409 @@
+import { Component, Prop, Watch, State, Method, Element, Event, Host, h } from '@stencil/core';
+import { Meditation } from '@venite/ldf';
+import { getComponentClosestLanguage } from '../../utils/locale';
+import EN from './meditation.i18n.en.json';
+const LOCALE = {
+  'en': EN
+};
+export class MeditationComponent {
+  constructor() {
+    this.started = false;
+    this.paused = false;
+    this.startingDuration = undefined;
+    /** Liturgical color to use in display */
+    this.color = "#3333ff";
+  }
+  docChanged(newDoc) {
+    try {
+      if (typeof newDoc == 'string') {
+        this.obj = new Meditation(JSON.parse(newDoc));
+      }
+      else {
+        this.obj = new Meditation(newDoc);
+      }
+    }
+    catch (e) {
+      console.warn(e);
+      this.obj = new Meditation();
+    }
+  }
+  // Lifecycle events
+  async componentWillLoad() {
+    // parse doc we're passed
+    this.docChanged(this.doc);
+    this.loadLocaleStrings();
+    // start the timer
+    if (this.autostart) {
+      this.secondsRemaining = this.obj.metadata.length;
+      this.start();
+    }
+  }
+  // Public methods
+  /** Start the timer, either with a given value of seconds or with the number passed in the Meditation object metadata */
+  async start(value = undefined) {
+    var _a, _b;
+    const metadata = (_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) !== null && _b !== void 0 ? _b : { length: 300, delay: 0 }, seconds = value || metadata.length, delay = metadata.delay;
+    this.secondsRemaining = seconds;
+    this.startingDuration = seconds;
+    // Start the timer after the delay
+    setTimeout(() => {
+      this.startTimer();
+      this.started = true;
+    }, delay);
+    // Emit event that it's running, after the delay
+    setTimeout(() => {
+      this.timerChanged.emit('start');
+    }, delay);
+  }
+  /** Pause the timer */
+  async pause() {
+    this.paused = true;
+    this.stopTimer();
+  }
+  /** Resume the timer */
+  async resume() {
+    this.paused = false;
+    this.startTimer();
+    this.timerChanged.emit('resume');
+  }
+  /** Rewind the timer to its initial value and restart it */
+  async rewind() {
+    this.pause(); // pause and clear the timer
+    this.stopTimer();
+    this.start(); // starts with the value passed
+    this.timerChanged.emit('rewind');
+  }
+  /** Returns the total duration this timer is running for. */
+  async duration() {
+    return this.startingDuration;
+  }
+  /** Reset the selector for length of time */
+  async reset() {
+    await this.pause();
+    this.secondsRemaining = undefined;
+  }
+  // Private methods
+  async loadLocaleStrings() {
+    try {
+      this.localeStrings = LOCALE[getComponentClosestLanguage(this.element)];
+    }
+    catch (e) {
+      console.warn(e);
+    }
+  }
+  minutesSeconds(value) {
+    const negative = value < 0, minutes = Math.floor(Math.abs(value / 60));
+    return `${negative ? '-' : ''}${minutes.toString().padStart(2, '0')}:${Math.abs((value - minutes * 60)).toString().padStart(2, '0')}`;
+  }
+  startTimer() {
+    this.timerId = setInterval(() => {
+      this.secondsRemaining--;
+      if (this.secondsRemaining == 0) {
+        this.timerChanged.emit('complete');
+        this.startingDuration = undefined;
+      }
+      else {
+        this.timerChanged.emit(this.secondsRemaining);
+      }
+    }, 1000);
+  }
+  stopTimer() {
+    if (this.timerId) {
+      clearInterval(this.timerId);
+    }
+    // tell the listener to stop audio, controls, etc.
+    this.timerChanged.emit('pause');
+  }
+  handleControlSubmit(e) {
+    e.preventDefault();
+  }
+  handleControlValue(e) {
+    var _a, _b, _c;
+    // Blank values are bad -- replace with 0
+    let value = e.target.value;
+    if (value == '') {
+      value = '0';
+    }
+    // Apply directly to the object and refresh display
+    Object.assign(this.obj, {
+      metadata: Object.assign(Object.assign({}, this.obj.metadata), { length: parseInt(value) * 60 })
+    });
+    this.obj = new Meditation(this.obj);
+    this.secondsRemaining = (_c = (_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
+  }
+  buttonNode(handler, label, icon, fill = 'clear', size = 'large') {
+    const localeStrings = this.localeStrings || {};
+    if (customElements && !!customElements.get('ion-button')) {
+      return (h("ion-button", { onClick: handler, fill: fill, size: size },
+        h("ion-icon", { name: icon, slot: 'start' }),
+        h("ion-label", null, localeStrings[label])));
+    }
+    else {
+      return (h("button", { onClick: handler, class: fill, style: { color: this.color } }, localeStrings[label]));
+    }
+  }
+  // Render
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const localeStrings = this.localeStrings || {};
+    const length = (_c = (_b = (_a = this.obj) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 300, progressAmount = this.secondsRemaining / length, progressPercent = progressAmount * 100;
+    //console.log('meditation', length, progressAmount, progressPercent)
+    return (this.editable
+      ? h(Host, null,
+        h("form", { class: 'controls', onSubmit: (e) => this.handleControlSubmit(e) },
+          h("span", null, localeStrings.meditate),
+          h("ldf-editable-text", { inputType: "number", short: true, path: `${this.path}/metadata/length`, text: (_g = ((_f = (_e = (_d = this.obj) === null || _d === void 0 ? void 0 : _d.metadata) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 300)) === null || _g === void 0 ? void 0 : _g.toString() }),
+          h("span", null, localeStrings.seconds),
+          h("span", null,
+            "(",
+            Math.floor(length / 60),
+            ":",
+            Math.floor(length % 60).toString().padStart(2, '0'),
+            ")")))
+      : h(Host, null,
+        h("div", { class: { 'control-container': true, 'hidden': !!this.secondsRemaining } },
+          h("form", { class: 'controls', onSubmit: (e) => this.handleControlSubmit(e) },
+            this.buttonNode(() => this.start(), 'meditate', 'sunny', 'solid', 'small'),
+            h("input", { type: 'number', value: length / 60, onInput: (e) => this.handleControlValue(e) }),
+            h("span", null, localeStrings.minutes))),
+        h("div", { class: { 'hidden': !this.secondsRemaining } },
+          h("div", { class: 'progress-circle-container' },
+            h("div", { class: 'progress-circle', style: { background: `conic-gradient(${this.color} ${100 - progressPercent}%, 0, #ecf0f1 ${progressPercent}%)` } },
+              h("div", { class: 'circle-overlay' },
+                h("div", { class: 'seconds' }, this.minutesSeconds(this.secondsRemaining)),
+                h("div", { class: 'controls' },
+                  !this.started && this.buttonNode(() => this.start(), 'start', 'start'),
+                  this.started && !this.paused && this.buttonNode(() => this.pause(), 'pause', 'pause'),
+                  this.started && this.paused && this.buttonNode(() => this.resume(), 'resume', 'play'))))))));
+  }
+  static get is() { return "ldf-meditation"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["meditation.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["meditation.css"]
+  }; }
+  static get properties() { return {
+    "doc": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Meditation | string",
+        "resolved": "Meditation | string",
+        "references": {
+          "Meditation": {
+            "location": "import",
+            "path": "@venite/ldf"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An LDF Meditation 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 Meditation 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
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Liturgical color to use in display"
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "\"#3333ff\""
+    },
+    "autostart": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the timer should start playing automatically"
+      },
+      "attribute": "autostart",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "obj": {},
+    "localeStrings": {},
+    "secondsRemaining": {},
+    "started": {},
+    "paused": {}
+  }; }
+  static get events() { return [{
+      "method": "timerChanged",
+      "name": "timerChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "'start' | 'pause' | 'resume' | 'rewind' | 'complete' | number",
+        "resolved": "\"complete\" | \"pause\" | \"resume\" | \"rewind\" | \"start\" | number",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "start": {
+      "complexType": {
+        "signature": "(value?: number) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Start the timer, either with a given value of seconds or with the number passed in the Meditation object metadata",
+        "tags": []
+      }
+    },
+    "pause": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Pause the timer",
+        "tags": []
+      }
+    },
+    "resume": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Resume the timer",
+        "tags": []
+      }
+    },
+    "rewind": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Rewind the timer to its initial value and restart it",
+        "tags": []
+      }
+    },
+    "duration": {
+      "complexType": {
+        "signature": "() => Promise<number | undefined>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<number>"
+      },
+      "docs": {
+        "text": "Returns the total duration this timer is running for.",
+        "tags": []
+      }
+    },
+    "reset": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Reset the selector for length of time",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "doc",
+      "methodName": "docChanged"
+    }]; }
+}