p-elements-core 1.2.27 → 1.2.29

package/docs/src/scripts/components/app-split-panel/resize-bar.tsx

@@ -0,0 +1,155 @@
+const ACTIVE_HOVER_MS = 300;
+
+@CustomElementConfig({
+  tagName: "resize-bar",
+})
+export class ResizeBarElement extends CustomElement {
+  static readonly style = `
+    :host {
+      z-index: 1;
+      position: relative;
+      touch-action: none;
+    }
+
+    :host([dimension='width']) {
+      width: 3px;
+    }
+
+    :host([dimension='height']) {
+      height: 3px;
+    }
+
+    :host([dimension='width']) > #touchTarget {
+      cursor: col-resize;
+      position: absolute;
+      top: 0;
+      left: calc(var(--resize-bar-touch-size, 6px) / -2);
+      width: var(--resize-bar-touch-size, 6px);
+      height: 100%;
+    }
+
+    :host([dimension='height']) > #touchTarget {
+      cursor: row-resize;
+      position: absolute;
+      top: calc(var(--resize-bar-touch-size, 6px) / -2);
+      left: 0;
+      width: 100%;
+      height: var(--resize-bar-touch-size, 6px);
+    }
+
+    #touchTarget {
+      background: var(--resize-bar-background-color);
+    }
+
+  `;
+
+  @Property({type: "string"})
+  dimension?: 'width' | 'height' = 'width';
+
+
+  @Property({type: "string", attribute: "property"})
+  property?: string;
+
+  @Property({type: "string", attribute: "target"})
+  target?: string;
+
+  @Property({type: "boolean", reflect: true})
+  active = false;
+
+
+  @Property({type: "boolean", reflect: true})
+  resizing = false;
+
+  @Property({type: "number", attribute: "min"})
+  minPropertyValue = 10
+
+  private _hoverTimer?: ReturnType<typeof setTimeout>;
+  private _updateSizeRafId?: ReturnType<typeof requestAnimationFrame>;
+
+
+  render() {
+    return <div id="touchTarget" 
+      on={{
+        pointerover: this._onPointerOver,
+        pointerleave: this._onPointerLeave,
+        pointerdown: this._onPointerDown,
+      }}
+    />;
+  }
+
+  private _onPointerOver = () => {
+    this._hoverTimer = setTimeout(() => {
+      this.active = true;
+      this._hoverTimer = undefined;
+    }, ACTIVE_HOVER_MS);
+  }
+
+  private _onPointerLeave() {
+    if (this.active && !this.resizing) {
+      this.active = false;
+    }
+    if (this._hoverTimer !== undefined) {
+      clearTimeout(this._hoverTimer);
+      this._hoverTimer = undefined;
+    }
+  }
+
+  private _onPointerDown = ({pointerId}: PointerEvent) => {
+    
+    if (!this.target || !this.property) {
+      return;
+    }
+    const target = (this.getRootNode() as ShadowRoot | Document).getElementById(
+      this.target
+    );
+    if (!target) {
+      return;
+    }
+    this.active = true;
+    this.resizing = true;
+    this.setPointerCapture(pointerId);
+    const isWidthDimension = this.dimension === 'width';
+    const {left, right, top, bottom} = target.getBoundingClientRect();
+    const oldSize = isWidthDimension ? right - left : bottom - top;
+
+    let clientX = 0;
+    let clientY = 0;
+
+    const onPointermove = (event: PointerEvent) => {
+      // Only update once per animation frame, but with the latest offsets.
+      clientX = event.clientX;
+      clientY = event.clientY;
+      if (this._updateSizeRafId !== undefined) {
+        return;
+      }
+      this._updateSizeRafId = requestAnimationFrame(() => {
+        this._updateSizeRafId = undefined;
+        if (!this.property) {
+          return;
+        }
+        let newSize = Math.max(
+          0,
+          isWidthDimension ? oldSize + clientX - right : oldSize - clientY + top
+        );
+        if (newSize < this.minPropertyValue) {
+          newSize = this.minPropertyValue;
+        }
+        
+        (target.style as any)[this.property] = `${newSize}px`;
+      });
+    };
+    this.addEventListener('pointermove', onPointermove);
+
+    this.addEventListener(
+      'pointerup',
+      () => {
+        this.releasePointerCapture(pointerId);
+        this.removeEventListener('pointermove', onPointermove);
+        this.active = false;
+        this.resizing = false;
+      },
+      {once: true}
+    );
+  }
+
+}

package/docs/src/scripts/index.ts

@@ -1,3 +1,6 @@
 import "./components/lazy-svg/lazy-svg";
 import "./components/app-playground/app-playground";
 import "./components/app-drawer/app-drawer";
+import "./components/app-mode-switch/app-mode-switch";
+import "./components/app-mobile-menu/app-mobile-menu";
+import "./components/app-split-panel/app-split-panel";