@blockquote-web-components/blockquote-base-embedded-webview 1.0.0

package/src/BlockquoteBaseEmbeddedWebviewElement.js

@@ -0,0 +1,142 @@
+import { html, LitElement } from 'lit';
+import styles from './styles/BlockquoteBaseEmbeddedWebviewElement-styles.js';
+/**
+  ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
+
+  `blockquote-base-embedded-webview-element` wraps an `iframe` or `object` and shows it through light dom.
+
+  ## Exports
+
+  - BlockquoteBaseEmbeddedWebviewElement
+
+  @tagname blockquote-base-embedded-webview-element
+*/
+export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
+  static get is() {
+    return 'blockquote-base-embedded-webview-element';
+  }
+
+  static get styles() {
+    return [styles];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The title attribute on an <element> to label its content
+       * @type {string}
+       */
+      embeddedTitle: {
+        type: String,
+        attribute: 'embedded-title',
+      },
+
+      /**
+       * The URL of the page to embed
+       * @type {string}
+       */
+      src: {
+        type: String,
+      },
+
+      /**
+       * The type of the tag to embed - iframe or object
+       * @type {string}
+       */
+      type: {
+        type: String,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.embeddedTitle = '';
+    this.src = '';
+    this.type = 'iframe';
+    this._onLoadElement = this._onLoadElement.bind(this);
+  }
+
+  connectedCallback() {
+    if (this._embeddedElement) {
+      return;
+    }
+    super.connectedCallback && super.connectedCallback();
+
+    this._embeddedElement = document.createElement(this.type);
+
+    Object.assign(this._embeddedElement, {
+      slot: 'embedded',
+    });
+
+    this._embeddedElement.addEventListener('load', this._onLoadElement);
+
+    // append element after add listener `load`
+    this.append(this._embeddedElement);
+  }
+
+  willUpdate(props) {
+    super.willUpdate && super.willUpdate(props);
+
+    if (props.has('src') && this.src !== '') {
+      this._fetch(this.src);
+    }
+  }
+
+  render() {
+    return html` ${this._embeddedTpl} `;
+  }
+
+  get _loadResource() {
+    return this.type === 'iframe' ? 'src' : 'data';
+  }
+
+  get _embeddedTpl() {
+    return html`<slot name="embedded"></slot>`;
+  }
+
+  _fetch(resource) {
+    if (resource) {
+      if (this.embeddedTitle) {
+        this._embeddedElement.title = this.embeddedTitle;
+      }
+      Object.assign(
+        this._embeddedElement,
+        this.type === 'iframe' && {
+          allowFullscreen: true,
+          allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture,',
+        },
+      );
+
+      this._embeddedElement[this._loadResource] = resource;
+
+      Object.assign(
+        this._embeddedElement.style,
+        resource.indexOf('http') !== 0 && {
+          opacity: 0,
+        },
+      );
+    }
+  }
+
+  _onLoadElement({ target }) {
+    if (!target.contentDocument || !target.contentDocument.head.childNodes.length) {
+      return;
+    }
+    Object.assign(target.contentDocument.body.dataset, {
+      embedded: '',
+    });
+    window.requestAnimationFrame(() => target.removeAttribute('style'));
+
+    /**
+     * Raised when the `resource` is load.
+     *
+     * @event elementloaded
+     */
+    const event = new CustomEvent('elementloaded', {
+      bubbles: true,
+      detail: target,
+    });
+    this.dispatchEvent(event);
+  }
+}

package/src/BlockquoteBaseEmbeddedWebviewResize.js

@@ -0,0 +1,165 @@
+import { html, LitElement } from 'lit';
+import * as Gestures from '@blockquote/polymer/lib/utils/gestures.js';
+import styles from './styles/BlockquoteBaseEmbeddedWebviewResize-styles.js';
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value - window.scrollY to get a bounding rectangle which is independent from the current scrolling position.
+// https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design
+// https://stackoverflow.com/questions/26233180/resize-a-div-on-border-drag-and-drop-without-adding-extra-markup
+// https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/Images/src/resizeHorizontal.svg
+
+/**
+  ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
+
+  `blockquote-base-embedded-webview-resize`
+
+  ## Exports
+
+  - BlockquoteBaseEmbeddedWebviewResize
+
+  @tagname blockquote-base-embedded-webview-resize
+*/
+export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
+  static get is() {
+    return 'blockquote-base-embedded-webview-resize';
+  }
+
+  static get styles() {
+    return [styles];
+  }
+
+  constructor() {
+    super();
+    this._resizer = this._resizer.bind(this);
+    this._removeResizer = this._removeResizer.bind(this);
+    this._createResizerLeft = this._createResizer.bind(this, 'right');
+    this._createResizerRight = this._createResizer.bind(this, 'left');
+    this._createResizerBottom = this._createResizer.bind(this, 'top');
+    this._createResizerBottomLeft = this._createResizer.bind(this, 'scaleTopRight');
+    this._createResizerBottomRight = this._createResizer.bind(this, 'scaleTopLeft');
+    this._doubleclickForCssInitialSize = this._doubleclickForCssInitialSize.bind(this);
+  }
+
+  firstUpdated(props) {
+    super.firstUpdated && super.firstUpdated(props);
+
+    this.rect = this.shadowRoot.querySelector('.rect');
+    this.bottomRightResizerElement = this.shadowRoot.querySelector('.resizer-se');
+    this.bottomLeftResizerElement = this.shadowRoot.querySelector('.resizer-sw');
+    this.rightResizerElement = this.shadowRoot.querySelector('.resizer-e');
+    this.leftResizerElement = this.shadowRoot.querySelector('.resizer-w');
+    this.bottomResizerElement = this.shadowRoot.querySelector('.resizer-s');
+
+    this.leftResizerElement.addEventListener('mousedown', this._createResizerLeft);
+    this.rightResizerElement.addEventListener('mousedown', this._createResizerRight);
+    this.bottomResizerElement.addEventListener('mousedown', this._createResizerBottom);
+    this.bottomLeftResizerElement.addEventListener('mousedown', this._createResizerBottomLeft);
+    this.bottomRightResizerElement.addEventListener('mousedown', this._createResizerBottomRight);
+
+    this.bottomResizerElement.addEventListener('dblclick', this._doubleclickForCssInitialSize);
+  }
+
+  render() {
+    return html`
+      <div class="rect">
+        ${this._resizersTpl}
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  get _resizersTpl() {
+    return html`
+      <span aria-hidden="true" class="resizer resizer-n"></span>
+      <span aria-hidden="true" class="resizer resizer-e"></span>
+      <span aria-hidden="true" class="resizer resizer-s"></span>
+      <span aria-hidden="true" class="resizer resizer-w"></span>
+      <span aria-hidden="true" class="resizer resizer-se"></span>
+      <span aria-hidden="true" class="resizer resizer-sw"></span>
+    `;
+  }
+
+  _doubleclickForCssInitialSize() {
+    console.log('eeeeee', this);
+    this.removeAttribute('style');
+    // this._dispatchResizeEvent();
+  }
+
+  _createResizer(DOMRect) {
+    this._getBoundingClientRecDOMRect = DOMRect;
+    this._getBoundingClientRectWidth = this._getBoundingClientRect('width');
+    this._getBoundingClientRectHeight = this._getBoundingClientRect('height');
+
+    this.setAttribute('resizing', '');
+    Gestures.addListener(document, 'track', this._resizer);
+    document.addEventListener('mouseup', this._removeResizer);
+  }
+
+  _removeResizer() {
+    this.removeAttribute('resizing');
+    Gestures.removeListener(document, 'track', this._resizer);
+    document.removeEventListener('mouseup', this._removeResizer);
+    this._dispatchResizeEvent();
+  }
+
+  _resizer({ detail }) {
+    let cssOffsetX;
+    let cssOffsetY;
+    const dx = Math.floor(detail.dx * 2);
+    const dy = Math.floor(detail.dy * 2);
+
+    switch (this._getBoundingClientRecDOMRect) {
+      case 'right':
+        cssOffsetX = `${this._getBoundingClientRectWidth - dx}px`;
+        this.style.setProperty('--blockquote-base-embedded-webview-resize-rect-width', cssOffsetX);
+        break;
+      case 'left':
+        cssOffsetX = `${this._getBoundingClientRectWidth + dx}px`;
+        this.style.setProperty('--blockquote-base-embedded-webview-resize-rect-width', cssOffsetX);
+        break;
+      case 'top':
+        cssOffsetY = `${this._getBoundingClientRectHeight + dy * 1}px`;
+        this.style.setProperty('--blockquote-base-embedded-webview-resize-rect-height', cssOffsetY);
+        break;
+      case 'scaleTopLeft':
+        cssOffsetX = `${this._getBoundingClientRectWidth + dx}px`;
+        cssOffsetY = `${this._getBoundingClientRectHeight + dy * 1}px`;
+        this.style.setProperty('--blockquote-base-embedded-webview-resize-rect-width', cssOffsetX);
+        this.style.setProperty('--blockquote-base-embedded-webview-resize-rect-height', cssOffsetY);
+        break;
+      case 'scaleTopRight':
+        cssOffsetX = `${this._getBoundingClientRectWidth - dx}px`;
+        cssOffsetY = `${this._getBoundingClientRectHeight + dy * 1}px`;
+        this.style.setProperty('--blockquote-base-embedded-webview-resize-rect-width', cssOffsetX);
+        this.style.setProperty('--blockquote-base-embedded-webview-resize-rect-height', cssOffsetY);
+        break;
+      /* c8 ignore next */
+      default:
+    }
+
+    this._dispatchResizeEvent();
+  }
+
+  _dispatchResizeEvent() {
+    /**
+     * Raised when the element's dimensions changes.
+     *
+     * @event webviewresize
+     */
+    const event = new CustomEvent('webviewresize', {
+      bubbles: true,
+      detail: {
+        x: getComputedStyle(this).getPropertyValue(
+          '--blockquote-base-embedded-webview-resize-rect-width',
+        ),
+        y: getComputedStyle(this).getPropertyValue(
+          '--blockquote-base-embedded-webview-resize-rect-height',
+        ),
+        resizing: this.hasAttribute('resizing'),
+      },
+    });
+    this.dispatchEvent(event);
+  }
+
+  _getBoundingClientRect(DOMRect) {
+    return Math.abs(parseInt(this.rect.getBoundingClientRect()[DOMRect], 10));
+  }
+}

package/src/BlockquoteBaseEmbeddedWebviewSize.js

@@ -0,0 +1,207 @@
+import { html, LitElement } from 'lit';
+import styles from './styles/BlockquoteBaseEmbeddedWebviewSize-styles.js';
+// https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/panels/emulation/DeviceModeView.ts;l=164
+
+/**
+  ![Lit](https://img.shields.io/badge/lit-2.0.0-blue)
+
+  `blockquote-base-embedded-webview-size` provides a list of ideal screen sizes for responsive designs.
+
+  ```html
+<blockquote-base-embedded-webview-size
+  screen-sizes="[
+    { width: 360, height: 640, id: '360x640' },
+    { width: 375, height: 667, id: '375x667' },
+    { width: 414, height: 896, id: '414x896' },
+    { width: 768, height: 1024, id: '768x1024' },
+    { width: 1024, height: 768, id: '1024x768' },
+    { width: 1280, height: 800, id: '1280x800' },
+    { width: 1366, height: 768, id: '1366x768' },
+    { width: 1536, height: 864, id: '1536x864' },
+    { width: 1920, height: 1080, id: '1920x1080' },
+  ]"
+></blockquote-base-embedded-webview-size>
+  ```
+
+  ## Exports
+
+- BlockquoteBaseEmbeddedWebviewSize
+
+  @tagname blockquote-base-embedded-webview-size
+*/
+export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
+  static get is() {
+    return 'blockquote-base-embedded-webview-size';
+  }
+
+  static get styles() {
+    return [styles];
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The screen size options to display
+       * @type {Array}
+       */
+      screenSizes: {
+        type: Array,
+        attribute: 'screen-sizes',
+      },
+      /**
+       * The screen size option selected
+       * @type {Number}
+       */
+      selected: {
+        type: Number,
+      },
+
+      /**
+       * Percentage value for the width
+       * @type {Boolean}
+       */
+      widthInPercent: {
+        type: Boolean,
+        attribute: 'width-in-percent',
+      },
+
+      /**
+       * Show screen size options that are too large for the container
+       * @type {Boolean}
+       */
+      showOverflowSize: {
+        type: Boolean,
+        attribute: 'show-overflow-size',
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.showOverflowSize = false;
+    this.selected = 0;
+    this.screenSizes = [
+      { width: 360, height: 640, id: '360x640' },
+      { width: 375, height: 667, id: '375x667' },
+      { width: 414, height: 896, id: '414x896' },
+      { width: 768, height: 1024, id: '768x1024' },
+      { width: 1024, height: 768, id: '1024x768' },
+      { width: 1280, height: 800, id: '1280x800' },
+      { width: 1366, height: 768, id: '1366x768' },
+      { width: 1536, height: 864, id: '1536x864' },
+      { width: 1920, height: 1080, id: '1920x1080' },
+    ];
+    this.widthInPercent = false;
+
+    this._onResize = this._onResize.bind(this);
+  }
+
+  get selectedSize() {
+    return this.screenSizes[this.selected - 1];
+  }
+
+  get selectedDetail() {
+    return { ...this.selectedSize, ...{ index: this.selected } };
+  }
+
+  get computedStyleWidth() {
+    return parseInt(window.getComputedStyle(this).width, 10);
+  }
+
+  connectedCallback() {
+    super.connectedCallback && super.connectedCallback();
+    window.addEventListener('resize', this._onResize);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback && super.disconnectedCallback();
+    window.removeEventListener('resize', this._onResize);
+  }
+
+  willUpdate(props) {
+    super.willUpdate && super.willUpdate(props);
+
+    if (props.has('screenSizes')) {
+      this.screenSizes.sort((a, b) => b.width - a.width);
+    }
+
+    if (props.has('selected')) {
+      if (this.selected > this.screenSizes.length || this.selected === 0) {
+        this.selected = this.screenSizes.length;
+      }
+    }
+  }
+
+  updated(props) {
+    super.updated && super.updated(props);
+
+    if (props.has('selected')) {
+      /**
+       * Raised when the `selected` property changes.
+       *
+       * @event selectedchange
+       */
+      const event = new CustomEvent('selectedchange', {
+        bubbles: true,
+        detail: this.selectedDetail,
+      });
+      this.dispatchEvent(event);
+    }
+  }
+
+  render() {
+    return html`
+      <div class="rect">
+        ${this._toolbarTpl}
+        ${this._visualTextTpl}
+        </div>
+      </div>
+    `;
+  }
+
+  get _toolbarTpl() {
+    return html`
+      ${this.screenSizes.map(
+        (item, index) => html`<button
+          @click="${this._setSelected}"
+          id="${item.id}"
+          data-index="${index + 1}"
+          ?data-selected="${this.selected === index + 1}"
+          ?hidden="${!this.showOverflowSize && item.width > this.computedStyleWidth}"
+          style="${this.widthInPercent
+            ? `width: calc(100% / ${index + 1});`
+            : `width: ${item.width}px;`}"
+        >
+          <span>${item.id}</span>
+        </button>`,
+      )}
+    `;
+  }
+
+  get _visualTextTpl() {
+    return html` <span aria-hidden="true">${this.selectedSize.id}</span>`;
+  }
+
+  _onResize(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    window.requestAnimationFrame(() => {
+      this.requestUpdate();
+    });
+  }
+
+  _setSelected(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.selected = Number(ev.target.dataset.index);
+
+    /**
+     * Fired `click` event.
+     * @event click
+     */
+    const event = new CustomEvent('click', {
+      detail: this.selectedDetail,
+    });
+    this.dispatchEvent(event);
+  }
+}

package/src/styles/BlockquoteBaseEmbeddedWebview-styles.js

@@ -0,0 +1,104 @@
+/* eslint-disable no-unused-vars */
+import { css } from 'lit';
+
+export default css`:host {
+  --_host-color: var(--blockquote-base-embedded-webview-color, rgb(32, 33, 36));
+  --_main-bgcolor: var(--blockquote-base-embedded-webview-main-bgcolor, rgb(248, 249, 249));
+  --_select-bgcolor: var(--blockquote-base-embedded-webview-select-bgcolor, rgb(222, 225, 230));
+  --_select-transition: var(--blockquote-base-embedded-webview-select-transition, border-bottom 196ms ease-out, var(--blockquote-base-embedded-webview-select-transition, border-bottom 196ms ease-out));
+  --blockquote-base-embedded-webview-resize-rect-width: 640px; /* 40rem */
+  --blockquote-base-embedded-webview-resize-rect-height: 360px; /* 22.5rem */
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  color: var(--_host-color);
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+.main {
+  flex: 1;
+  background-color: var(--_main-bgcolor);
+}
+
+:host([limit-height]) .main {
+  height: inherit;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+[role=heading] {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+header > div {
+  position: relative;
+  max-width: 80rem;
+  margin: 0 auto;
+  padding: 0.5rem 1.5rem;
+}
+
+.select {
+  display: inline-grid;
+  grid-template-areas: select;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+.select > * {
+  grid-area: select;
+}
+.select svg {
+  width: 0.875rem;
+  justify-self: end;
+  pointer-events: none;
+}
+.select select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  color: inherit;
+  font: inherit;
+  font-size: 0.875rem;
+  background-color: transparent;
+  border: none;
+  border-bottom: 0.125rem solid var(--_select-bgcolor);
+  padding: 0.2857142857em 1.2857142857em 0.2857142857em 0;
+  margin: 0;
+  width: 100%;
+  cursor: pointer;
+  outline: none;
+  border-radius: 0;
+  min-width: 10ch;
+  max-width: 18ch;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: var(--_select-transition);
+}
+.select select:hover, .select select:focus {
+  border-bottom-color: currentcolor;
+}
+
+.read-data-pos {
+  font-size: 0.875rem;
+  letter-spacing: 0.0156rem;
+  position: absolute;
+  right: 0.375rem;
+  top: 0.3125rem;
+  opacity: 0;
+  transition: opacity 90ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+blockquote-base-embedded-webview-resize {
+  overflow-x: hidden;
+}`;

package/src/styles/BlockquoteBaseEmbeddedWebviewElement-styles.js

@@ -0,0 +1,22 @@
+import { css } from 'lit';
+
+export default css`:host,
+::slotted([slot=embedded]) {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: 0;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}`;