@progressive-development/pd-spa-helper 0.3.102 → 0.3.103

package/dist/pd-panel-viewer.js

@@ -0,0 +1,189 @@
+import { css, LitElement, html } from "lit";
+import { customElement as e } from "./node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as n } from "./node_modules/@lit/reactive-element/decorators/property.js";
+import "./node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { classMap as o } from "./node_modules/lit/node_modules/lit-html/directives/class-map.js";
+import "hammerjs";
+import "./node_modules/@progressive-development/pd-icon/pd-icon.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let timer;
+let PdPanelViewer = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.withProgress = false;
+    this.deltaCalc = 3;
+    this._index = 0;
+    this._panData = {};
+    this._update = {};
+  }
+  get index() {
+    return this._index;
+  }
+  set index(value) {
+    this.children[this._index].dispatchEvent(new CustomEvent("exited"));
+    this.children[value].dispatchEvent(new CustomEvent("entered"));
+    this._index = value;
+  }
+  render() {
+    return html`
+            <div class="panel-container">
+                <slot></slot>
+                <pd-icon id="prev" icon="previousArrow" activeIcon ?disabled="${this.index <= 0}" @click=${this.previous}></pd-icon>
+                <pd-icon id="next" icon="nextArrow" activeIcon ?disabled="${this.index === this.children.length - 1}" @click=${this.next}></pd-icon>
+            </div>
+            ${this.withProgress ? html`
+            <div id="progress">
+                ${Array.from(this.children).map((childEl, i) => html`
+                <div @click="${() => {
+      this._index = i;
+    }}" class=${o({ watched: i <= this.index })}></div>`)}
+            </div>` : ""}
+        `;
+  }
+  firstUpdated() {
+    const hammerVal = new Hammer(this);
+    hammerVal.on("pan", (panEvent) => {
+      this._panData = panEvent;
+    });
+    const ro = new ResizeObserver((entries) => {
+      entries.forEach(() => {
+        window.clearTimeout(timer);
+        timer = setTimeout(() => {
+          this.requestUpdate();
+        }, 100);
+      });
+    });
+    ro.observe(this);
+  }
+  update(changedProperties) {
+    const { isFinal = false } = this._panData;
+    let { deltaX = 0 } = this._panData;
+    const width = this.clientWidth;
+    const minScale = 0.8;
+    if (!changedProperties.has("_index") && isFinal) {
+      if (deltaX > width / this.deltaCalc) {
+        this.previous();
+      } else if (deltaX < -width / this.deltaCalc) {
+        this.next();
+      }
+    }
+    deltaX = isFinal ? 0 : deltaX;
+    Array.from(this.children).forEach((el, i) => {
+      const x = (i - this.index) * width + deltaX;
+      const u = deltaX / width + (i - this.index);
+      const v = -Math.abs(u * (1 - minScale)) + 1;
+      const scale = Math.max(v, minScale);
+      el.style.transform = `translate3d(${x}px,0,0) scale(${scale})`;
+      el.style.opacity = scale;
+    });
+    super.update(changedProperties);
+  }
+  /* Advance to the next story card if possible */
+  next() {
+    this.index = Math.max(0, Math.min(this.children.length - 1, this.index + 1));
+    this._update = false;
+  }
+  /* Go back to the previous story card if possible */
+  previous() {
+    this.index = Math.max(0, Math.min(this.children.length - 1, this.index - 1));
+    this._update = false;
+  }
+};
+PdPanelViewer.styles = css`
+
+        :host {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            max-width: var(--pd-panel-width, 1170px);
+            overflow: var(--pd-panel-overflow, hidden);
+            background-color: var(--pd-panel-viewer-bg-col);
+        }
+
+        .panel-container {
+            position: relative;
+            height: var(--pd-panel-height, 60vh);
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            padding: 0 2rem;
+            box-sizing: border-box;
+        }
+
+        pd-icon {
+            position: absolute;
+            top: calc(50% - 25px);
+            height: 50px;
+            cursor: pointer;
+        }
+
+        #prev {
+            left: 0;
+        }
+
+        #next {
+            right: 0;
+        }
+
+        #progress {
+            position: relative;
+            height: 20px;
+            width: 50%;
+            margin: .5rem auto;
+            display: grid;
+            grid-auto-flow: column;
+            grid-auto-columns: 1fr;
+            grid-gap: 10px;
+            align-content: center;
+            align-self: flex-end;
+        }
+
+        #progress > div {
+            background: var(--pd-panel-progress-col, grey);
+            height: 4px;
+            transition: background 0.3s linear;
+            cursor: pointer;
+        }
+
+        #progress > div.watched {
+            background: var(--pd-panel-progress-col, yellow);
+        }
+
+        ::slotted(*) {
+            position: absolute;
+            width: 100%;
+            height: calc(100%);
+            transition: transform 0.35s ease-out;
+            left: 0;
+        }
+        `;
+__decorateClass([
+  n({ type: Boolean })
+], PdPanelViewer.prototype, "withProgress", 2);
+__decorateClass([
+  n({ type: Number })
+], PdPanelViewer.prototype, "deltaCalc", 2);
+__decorateClass([
+  n({ type: Number, state: true })
+], PdPanelViewer.prototype, "_index", 2);
+__decorateClass([
+  n({ type: Object, state: true })
+], PdPanelViewer.prototype, "_panData", 2);
+__decorateClass([
+  n({ type: Boolean, state: true })
+], PdPanelViewer.prototype, "_update", 2);
+PdPanelViewer = __decorateClass([
+  e("pd-panel-viewer")
+], PdPanelViewer);
+export {
+  PdPanelViewer
+};

package/dist/pd-panel.js

@@ -0,0 +1,51 @@
+import { css, LitElement, html } from "lit";
+import { customElement as e } from "./node_modules/@lit/reactive-element/decorators/custom-element.js";
+import "./node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdPanel = class extends LitElement {
+  render() {
+    return html`
+      <div id="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+PdPanel.styles = css`
+        :host {
+          background: var(--pd-panel-bg, #AFC1D2);
+          border-radius: var(--pd-panel-border-radius, 0.2em);
+        }
+
+        /* Default styles for content */
+        #content {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          padding: 2rem;
+          display: flex;
+          flex-direction: column;          
+          align-items: center;
+          justify-content: flex-start;
+        }
+        #content > slot::slotted(*) {
+          margin: 0;
+        }
+      `;
+PdPanel = __decorateClass([
+  e("pd-panel")
+], PdPanel);
+export {
+  PdPanel
+};