feat(cxl-ui): [cxl-dialog] add more implementations

conversionxl · Aug 19, 2022 · 68234ce · 68234ce
1 parent 3fce88f
commit 68234ce
Show file tree

Hide file tree

Showing 7 changed files with 258 additions and 21 deletions.
diff --git a/packages/cxl-ui/src/components/cxl-dialog/cxl-dialog-custom.js b/packages/cxl-ui/src/components/cxl-dialog/cxl-dialog-custom.js
@@ -0,0 +1,80 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('cxl-dialog-custom')
+export class CXLDialog extends LitElement {
+  @property({ reflect: true, type: Boolean }) opened;
+
+  static get styles() {
+    return css`
+      :host {
+        padding: 1rem;
+        position: absolute;
+        inset: 0;
+      }
+
+      :host(:not([opened])) {
+        display: none;
+      }
+
+      [part='backdrop'] {
+        background: rgba(0, 0, 0, 0.5);
+        background-color: var(--lumo-shade-20pct);
+        animation: 0.2s lumo-overlay-backdrop-enter both;
+        will-change: opacity;
+        position: absolute;
+        inset: 0;
+      }
+
+      [part='overlay'] {
+        border-radius: var(--lumo-border-radius-l);
+        box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-xl);
+        background-image: none;
+        outline: none;
+        -webkit-tap-highlight-color: transparent;
+        background-color: var(--lumo-base-color);
+        background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+        border-radius: var(--lumo-border-radius-m);
+        box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
+        color: var(--lumo-body-text-color);
+        font-family: var(--lumo-font-family);
+        font-size: var(--lumo-font-size-m);
+        font-weight: 400;
+        line-height: var(--lumo-line-height-m);
+        letter-spacing: 0;
+        text-transform: none;
+        -webkit-text-size-adjust: 100%;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        position: relative;
+        overflow: visible;
+        max-height: 100%;
+        display: flex;
+        -webkit-overflow-scrolling: touch;
+        overflow: auto;
+        pointer-events: auto;
+        max-width: 100%;
+        box-sizing: border-box;
+        -webkit-tap-highlight-color: initial;
+      }
+    `;
+  }
+
+  render() {
+    console.log(this.opened);
+    return html`
+      <div part="backdrop"></div>
+      <div part="overlay"><slot>${this.opened}</slot></div>
+    `;
+  }
+
+  firstUpdated() {
+    document.addEventListener('keydown', this.onKeyDown.bind(this));
+  }
+
+  onKeyDown(e) {
+    if (e.key === 'Escape') {
+      this.opened = false;
+    }
+  }
+}
diff --git a/packages/cxl-ui/src/components/cxl-dialog/cxl-dialog-iframe.js b/packages/cxl-ui/src/components/cxl-dialog/cxl-dialog-iframe.js
@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import '@vaadin/dialog';
+
+@customElement('cxl-dialog-iframe')
+export class CXLDialogIFrame extends LitElement {
+  @query('iframe') iframe;
+
+  render() {
+    return html`<iframe src="about:blank"></iframe>`;
+  }
+
+  firstUpdated() {
+    this.iframe.srcdoc = `
+      <vaadin-dialog opened></vaadin-dialog>
+      <script>
+        const parentWindow = window.parent;
+        document.querySelectorAll(":not(:defined)").forEach(el => 
+          customElements.define(
+            el.localName,
+            parentWindow.customElements.get(el.localName)
+          )
+        )
+      </script>
+    `;
+  }
+}
+
+
diff --git a/packages/cxl-ui/src/components/cxl-dialog/cxl-dialog-overlay.js b/packages/cxl-ui/src/components/cxl-dialog/cxl-dialog-overlay.js
@@ -28,16 +28,33 @@ export class CXLDialogOverlay extends DialogOverlay {
 
   /** @protected */
   _attachOverlay() {
+    if(!this.container) return super._attachOverlay();
+
     this._placeholder = document.createComment('vaadin-overlay-placeholder');
     this.parentNode.insertBefore(this._placeholder, this);
     this.container.appendChild(this);
     this.bringToFront();
   }
 
   /** @protected */
-  _detachOverlay() {
-    this._placeholder.parentNode.insertBefore(this, this._placeholder);
-    this._placeholder.parentNode.removeChild(this._placeholder);
+  _enterModalState() {
+    if(!this.container) return super._enterModalState();
+
+    if (document.body.style.pointerEvents !== 'none') {
+      // Set body pointer-events to 'none' to disable mouse interactions with
+      // other document nodes.
+      this._previousDocumentPointerEvents = document.body.style.pointerEvents;
+
+      // Don't set pointer-events
+      // document.body.style.pointerEvents = 'none';
+    }
+
+    // Disable pointer events in other attached overlays
+    CXLDialogOverlay.__attachedInstances.forEach((el) => {
+      if (el !== this) {
+        el.shadowRoot.querySelector('[part="overlay"]').style.pointerEvents = 'none';
+      }
+    });
   }
 }
 

diff --git a/...i/src/components/cxl-dialog/cxl-dialog.js → ...omponents/cxl-dialog/cxl-dialog-vaadin.js b/...i/src/components/cxl-dialog/cxl-dialog.js → ...omponents/cxl-dialog/cxl-dialog-vaadin.js
@@ -6,7 +6,7 @@ export class CXLDialog extends Dialog {
   static get template() {
     return html`
       <style>
-        :host {
+        :host(:not[opened]) {
           display: none !important;
         }
       </style>
@@ -27,14 +27,48 @@ export class CXLDialog extends Dialog {
   }
 
   static get is() {
-    return 'cxl-dialog';
+    return 'cxl-dialog-vaadin';
   }
 
   static get properties() {
     return {
+      contained: Boolean,
       container: Object,
     };
   }
+
+  constructor() {
+    super();
+
+    if (this.hasAttribute('contained')) {
+      this.container = this.parentNode;
+    }
+  }
+
+  ready() {
+    super.ready();
+
+    if (this.contained) {
+      document.addEventListener('click', this.onClick.bind(this));
+      document.addEventListener('keydown', this.onKeyDown.bind(this));
+    }
+  }
+
+  onClick(event) {
+    const overlay = this.$.overlay;
+    const overlayPart = overlay.shadowRoot.querySelector('[part="overlay"]');
+    const composedPath = event.composedPath();
+
+    if (!composedPath.includes(overlayPart)) {
+      this.opened = false;
+    }
+  }
+
+  onKeyDown(e) {
+    if (e.key === 'Escape') {
+      this.opened = false;
+    }
+  }
 }
 
 customElements.define(CXLDialog.is, CXLDialog);
diff --git a/packages/storybook/cxl-ui/cxl-dialog/custom.stories.js b/packages/storybook/cxl-ui/cxl-dialog/custom.stories.js
@@ -0,0 +1,36 @@
+import '@conversionxl/cxl-ui/src/components/cxl-dialog/cxl-dialog-custom.js';
+import { html } from 'lit';
+
+export default {
+  title: 'CXL UI/cxl-dialog',
+};
+
+// eslint-disable-next-line no-empty-pattern
+const Template = ({ opened }) => html`
+  <style>
+    #root-inner {
+      align-items: center;
+      justify-content: center;
+      display: flex;
+      height: 100vh;
+    }
+
+    #container {
+      border: 1px solid #000;
+      height: 80vh;
+      position: relative;
+      width: 80vw;
+    }
+  </style>
+  <div id="container">
+    <cxl-dialog-custom ?opened=${opened} ?test=${opened}>This is some content</cxl-dialog-custom>
+  </div>
+`;
+
+export const Custom = Template.bind({});
+
+Object.assign(Custom, {
+  args: {
+    opened: true,
+  },
+});
diff --git a/...rybook/cxl-ui/cxl-dialog/index.stories.js → ...ybook/cxl-ui/cxl-dialog/iframe.stories.js b/...rybook/cxl-ui/cxl-dialog/index.stories.js → ...ybook/cxl-ui/cxl-dialog/iframe.stories.js
@@ -1,4 +1,4 @@
-import '@conversionxl/cxl-ui/src/components/cxl-dialog/cxl-dialog.js';
+import '@conversionxl/cxl-ui/src/components/cxl-dialog/cxl-dialog-iframe.js';
 import { html } from 'lit';
 
 export default {
@@ -22,23 +22,14 @@ const Template = ({}) => html`
       width: 80vw;
     }
   </style>
-  <div id="container"></div>
-  <script>
-    const dialog = document.createElement('cxl-dialog');
-    const container = document.querySelector('#container');
-
-    dialog.container = container;
-    dialog.renderer = (root) => {
-      root.textContent = 'This is a dialog';
-    };
-
-    container.appendChild(dialog);
-    dialog.opened = true;
-  </script>
+  <div id="container">
+    <cxl-dialog-iframe></cxl-dialog-iframe>
+  </div>
 `;
 
-export const Default = Template.bind({});
+export const IFrame = Template.bind({});
 
-Object.assign(Default, {
+Object.assign(IFrame, {
   args: {},
+  storyName: "IFrame"
 });
diff --git a/packages/storybook/cxl-ui/cxl-dialog/vaadin.stories.js b/packages/storybook/cxl-ui/cxl-dialog/vaadin.stories.js
@@ -0,0 +1,50 @@
+import '@conversionxl/cxl-ui/src/components/cxl-dialog/cxl-dialog-vaadin.js';
+import { html, render } from 'lit';
+
+export default {
+  title: 'CXL UI/cxl-dialog',
+};
+
+// eslint-disable-next-line no-empty-pattern
+const Template = ({ opened }) => html`
+  <style>
+    #root-inner {
+      align-items: center;
+      justify-content: center;
+      display: flex;
+      height: 100vh;
+    }
+
+    #container {
+      border: 1px solid #000;
+      height: 80vh;
+      position: relative;
+      width: 80vw;
+    }
+  </style>
+  <div id="container">
+    <cxl-dialog-vaadin
+      contained
+      .headerRenderer=${(root, dialog) =>
+        render(
+          html`
+            <vaadin-button theme="tertiary" @click="${() => (dialog.opened = false)}">
+              <vaadin-icon icon="lumo:cross"></vaadin-icon>
+            </vaadin-button>
+          `,
+          root
+        )}
+      header-title="Custom Header"
+      ?opened=${opened}
+      .renderer=${(root) => render(html`This is a dialog`, root)}
+    ></cxl-dialog-vaadin>
+  </div>
+`;
+
+export const Default = Template.bind({});
+
+Object.assign(Default, {
+  args: {
+    opened: true,
+  },
+});