@glomex/glomex-dialog - npm Package Compare versions

Comparing version 1.16.0 to 2.0.0

glomex-dialog.js

@@ -14,3 +14,3 @@ import { RotataToFullscreen } from './rotate-to-fullscreen.js';
 if (window.matchMedia(
-  `(max-device-width: ${PHONE_MAX_WIDTH}px) and (pointer: coarse)`
+  `(max-device-width: ${PHONE_MAX_WIDTH}px) and (pointer: coarse)`,
 ).matches) {
@@ -76,2 +76,3 @@ allowRotateToFullscreen = true;
     const ratioSplit = aspectRatio.split(':');
+    if (ratioSplit.length === 1) return Number(aspectRatio);
     return ratioSplit[0] / ratioSplit[1];
@@ -129,2 +130,3 @@ }).filter((aspectRatio) => !!aspectRatio)[0];
       elementInnerContainer.style.width = `${toRect.width}px`;
+      elementInnerContainer.style.height = `${toRect.height}px`;
       elementInnerContainer.style.transform = `scale(${1 / deltaScale})`;
@@ -340,2 +342,3 @@ elementInnerContainer.style.transformOrigin = 'top left';
       opacity: 0;
+      z-index: 1;
     }
@@ -372,14 +375,29 @@
 
-    .dialog-content ::slotted([slot=dock-overlay]) {
-      display: none;
+    .dialog-content ::slotted([slot=dock-background]) {
+      visibility: hidden;
     }
 
-    .dialog-content slot[name="dock-overlay"] {
+    .dialog-content slot[name="dock-background"] {
       touch-action: none;
+      cursor: move;
+      position: absolute;
+      display: block;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
     }
 
-    :host([mode=dock]) .dialog-content ::slotted([slot=dock-overlay]) {
+    :host([dock-mode=sticky]) slot[name="dock-background"] {
+      cursor: unset;
+    }
+
+    slot[name=dialog-element] {
       display: block;
     }
 
+    :host([mode=dock]) .dialog-content ::slotted([slot=dock-background]) {
+      visibility: visible;
+    }
+
     :host([mode=dock]) .dialog-content {
@@ -465,4 +483,3 @@ z-index: ${DOCK_Z_INDEX};
       <div class="dialog-inner-wrapper">
-        <slot name="dialog-element"></slot>
-        <slot name="dock-overlay">
+        <slot name="dock-background">
           <div class="drag-handle">
@@ -472,2 +489,3 @@ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-move" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10zM.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708l-2-2zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8z"/></svg>
         </slot>
+        <slot name="dialog-element"></slot>
       </div>
@@ -478,2 +496,3 @@ </div>`;
     const dockStickyTarget = this.shadowRoot.querySelector('.dock-sticky-target');
+    const placeholderSlot = this.shadowRoot.querySelector('.placeholder-inner');
     dockStickyTarget.style.top = positions.top;
@@ -488,3 +507,5 @@ Object.assign(dockTarget.style, positions);
       // allows clicks within GlomexDialog and on a slotted placeholder
-      if (!(target instanceof GlomexDialogElement) && !target.assignedSlot) return;
+      if (!(target instanceof GlomexDialogElement)
+        && target.assignedSlot !== placeholderSlot
+      ) return;
       this._internalModeChange = true;
@@ -752,2 +773,6 @@ if (this._wasInHiddenMode) {
     if (name === 'dock-mode') {
+      if (this._disconnectDragAndDrop) this._disconnectDragAndDrop();
+      if (newValue !== 'sticky') {
+        this._disconnectDragAndDrop = connectDragAndDrop(this);
+      }
       this.refreshDockDialog();
@@ -840,8 +865,5 @@ }
     }
-    if (stickyWidth >= MAX_DOCK_WIDTH) {
-      stickyWidth = MAX_DOCK_WIDTH;
-    }
 
     dockStickyTarget.style.width = `${stickyWidth}px`;
-    dockStickyTarget.style.height = `${clientRect.height * (stickyWidth / clientRect.width)}px`;
+    dockStickyTarget.style.height = `${stickyWidth / getAspectRatioFromStrings(aspectRatios)}px`;
 
@@ -944,3 +966,3 @@ if (mode === 'dock') {
   let dockTargetRect;
-  const dragHandle = element.shadowRoot.querySelector('slot[name=dock-overlay]');
+  const dragHandle = element.shadowRoot.querySelector('slot[name=dock-background]');
   const dockTarget = element.shadowRoot.querySelector('.dock-target');
@@ -947,0 +969,0 @@ const dialogElement = element.shadowRoot.querySelector('slot[name=dialog-element]');

index.html.md

@@ -31,6 +31,6 @@ # glomex-dialog
   <!--
-    "dock-overlay" is optional:
+    "dock-background" is optional:
     enables drag'n'drop feature when defined
   -->
-  <div slot="dock-overlay"></div>
+  <div slot="dock-background"></div>
   <div slot="placeholder"></div>
@@ -449,3 +449,3 @@ <div slot="dialog-element">
   <glomex-dialog ref=${dialog} mode="inline" dock-target-inset="0px auto auto 0px">
-    <div slot="dock-overlay" class="custom-overlay">
+    <div slot="dock-background" class="custom-overlay">
       <div class="controls">
@@ -491,4 +491,4 @@ <button class="play-button" onClick=${onPlayButtonClick}>▶</button>
   <!-- when this is defined it automatically makes the element draggable -->
-  <!-- allows to place custom elements in the dock-overlay -->
-  <div slot="dock-overlay" class="custom-overlay">
+  <!-- allows to place custom elements in the dock-background -->
+  <div slot="dock-background" class="custom-overlay">
     <!-- place custom controls here -->
@@ -495,0 +495,0 @@ </div>

package.json

 {
   "name": "@glomex/glomex-dialog",
-  "version": "1.16.0",
+  "version": "2.0.0",
   "description": "A dialog web component that allows docking a video player or putting it in a lightbox",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -31,6 +31,6 @@ # glomex-dialog
   <!--
-    "dock-overlay" is optional:
+    "dock-background" is optional:
     enables drag'n'drop feature when defined
   -->
-  <div slot="dock-overlay"></div>
+  <div slot="dock-background"></div>
   <div slot="placeholder"></div>
@@ -449,3 +449,3 @@ <div slot="dialog-element">
   <glomex-dialog ref=${dialog} mode="inline" dock-target-inset="0px auto auto 0px">
-    <div slot="dock-overlay" class="custom-overlay">
+    <div slot="dock-background" class="custom-overlay">
       <div class="controls">
@@ -491,4 +491,4 @@ <button class="play-button" onClick=${onPlayButtonClick}>▶</button>
   <!-- when this is defined it automatically makes the element draggable -->
-  <!-- allows to place custom elements in the dock-overlay -->
-  <div slot="dock-overlay" class="custom-overlay">
+  <!-- allows to place custom elements in the dock-background -->
+  <div slot="dock-background" class="custom-overlay">
     <!-- place custom controls here -->
@@ -495,0 +495,0 @@ </div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

120597

increased by0.57%

Lines of code

1197

increased by1.7%

No dependency changes