@vaadin/vaadin-dialog - npm Package Compare versions

Comparing version 2.3.0-alpha1 to 2.3.0-alpha2

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-dialog",
-  "version": "2.3.0-alpha1",
+  "version": "2.3.0-alpha2",
   "main": "vaadin-dialog.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-dialog-draggable-mixin.js

@@ -14,6 +14,7 @@ /**
       this.$.overlay.$.overlay.addEventListener('mousedown', this._startDrag);
+      this.$.overlay.$.overlay.addEventListener('touchstart', this._startDrag);
     }
 
     _startDrag(e) {
-      if (this.draggable && e.button === 0) {
+      if (this.draggable && (e.button === 0 || e.touches)) {
         const resizerContainer = this.$.overlay.$.resizerContainer;
@@ -26,5 +27,8 @@ const isResizerContainer = e.target === resizerContainer;
           this._originalBounds = this._getOverlayBounds();
-          this._originalMouseCoords = {top: e.pageY, left: e.pageX};
+          const event = this.__getMouseOrFirstTouchEvent(e);
+          this._originalMouseCoords = {top: event.pageY, left: event.pageX};
           window.addEventListener('mouseup', this._stopDrag);
+          window.addEventListener('touchend', this._stopDrag);
           window.addEventListener('mousemove', this._drag);
+          window.addEventListener('touchmove', this._drag);
           if (this.$.overlay.$.overlay.style.position !== 'absolute') {
@@ -38,5 +42,6 @@ this._setBounds(this._originalBounds);
     _drag(e) {
-      if (this._mouseInWindow(e)) {
-        const top = this._originalBounds.top + (e.pageY - this._originalMouseCoords.top);
-        const left = this._originalBounds.left + (e.pageX - this._originalMouseCoords.left);
+      const event = this.__getMouseOrFirstTouchEvent(e);
+      if (this._eventInWindow(event)) {
+        const top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top);
+        const left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left);
         this._setBounds({top, left});
@@ -48,4 +53,6 @@ }
       window.removeEventListener('mouseup', this._stopDrag);
+      window.removeEventListener('touchend', this._stopDrag);
       window.removeEventListener('mousemove', this._drag);
+      window.removeEventListener('touchmove', this._drag);
     }
   };

src/vaadin-dialog-resizable-mixin.js

@@ -11,2 +11,7 @@ const $_documentContainer = document.createElement('template');
 
+      /* Hack for iOS to make the overlay take full size */
+      [part='overlay'][style] {
+        display: flex;
+      }
+
       [part='content'] {
@@ -19,2 +24,3 @@ box-sizing: border-box;
         height: 100%;
+        width: 100%;
         overflow: auto;
@@ -121,2 +127,3 @@ }
         resizer.addEventListener('mousedown', this._resizeListeners.start[direction]);
+        resizer.addEventListener('touchstart', this._resizeListeners.start[direction]);
         this.$.overlay.$.resizerContainer.appendChild(resizer);
@@ -127,8 +134,11 @@ });
     _startResize(e, direction) {
-      if (e.button === 0) {
+      if (e.button === 0 || e.touches) {
         e.preventDefault();
         this._originalBounds = this._getOverlayBounds();
-        this._originalMouseCoords = {top: e.pageY, left: e.pageX};
+        const event = this.__getMouseOrFirstTouchEvent(e);
+        this._originalMouseCoords = {top: event.pageY, left: event.pageX};
         window.addEventListener('mousemove', this._resizeListeners.resize[direction]);
+        window.addEventListener('touchmove', this._resizeListeners.resize[direction]);
         window.addEventListener('mouseup', this._resizeListeners.stop[direction]);
+        window.addEventListener('touchend', this._resizeListeners.stop[direction]);
         if (this.$.overlay.$.overlay.style.position !== 'absolute') {
@@ -141,3 +151,4 @@ this._setBounds(this._originalBounds);
     _resize(e, resizer) {
-      if (this._mouseInWindow(e)) {
+      const event = this.__getMouseOrFirstTouchEvent(e);
+      if (this._eventInWindow(event)) {
         const minimumSize = 40;
@@ -147,4 +158,4 @@ resizer.split('').forEach((direction) => {
             case 'n': {
-              const height = this._originalBounds.height - (e.pageY - this._originalMouseCoords.top);
-              const top = this._originalBounds.top + (e.pageY - this._originalMouseCoords.top);
+              const height = this._originalBounds.height - (event.pageY - this._originalMouseCoords.top);
+              const top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top);
               if (height > minimumSize) {
@@ -156,3 +167,3 @@ this._setBounds({top, height});
             case 'e': {
-              const width = this._originalBounds.width + (e.pageX - this._originalMouseCoords.left);
+              const width = this._originalBounds.width + (event.pageX - this._originalMouseCoords.left);
               if (width > minimumSize) {
@@ -164,3 +175,3 @@ this._setBounds({width});
             case 's': {
-              const height = this._originalBounds.height + (e.pageY - this._originalMouseCoords.top);
+              const height = this._originalBounds.height + (event.pageY - this._originalMouseCoords.top);
               if (height > minimumSize) {
@@ -172,4 +183,4 @@ this._setBounds({height});
             case 'w': {
-              const width = this._originalBounds.width - (e.pageX - this._originalMouseCoords.left);
-              const left = this._originalBounds.left + (e.pageX - this._originalMouseCoords.left);
+              const width = this._originalBounds.width - (event.pageX - this._originalMouseCoords.left);
+              const left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left);
               if (width > minimumSize) {
@@ -188,4 +199,16 @@ this._setBounds({left, width});
       window.removeEventListener('mousemove', this._resizeListeners.resize[direction]);
+      window.removeEventListener('touchmove', this._resizeListeners.resize[direction]);
       window.removeEventListener('mouseup', this._resizeListeners.stop[direction]);
+      window.removeEventListener('touchend', this._resizeListeners.stop[direction]);
+      this.dispatchEvent(new CustomEvent('resize', {detail: this._getResizeDimensions()}));
     }
+
+    _getResizeDimensions() {
+      const {width, height} = getComputedStyle(this.$.overlay.$.overlay);
+      const content = this.$.overlay.$.content;
+      content.setAttribute('style', 'position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: content-box; height: auto;');
+      const {width: contentWidth, height: contentHeight} = getComputedStyle(content);
+      content.removeAttribute('style');
+      return {width, height, contentWidth, contentHeight};
+    }
   };

src/vaadin-dialog.js

@@ -152,3 +152,3 @@ /**
 
-    <vaadin-dialog-overlay id="overlay" on-opened-changed="_onOverlayOpened" on-mousedown="_bringOverlayToFront" theme\$="[[theme]]" modeless="[[modeless]]" with-backdrop="[[!modeless]]" resizable\$="[[resizable]]" focus-trap="">
+    <vaadin-dialog-overlay id="overlay" on-opened-changed="_onOverlayOpened" on-mousedown="_bringOverlayToFront" on-touchstart="_bringOverlayToFront" theme\$="[[theme]]" modeless="[[modeless]]" with-backdrop="[[!modeless]]" resizable\$="[[resizable]]" focus-trap="">
     </vaadin-dialog-overlay>
@@ -163,3 +163,3 @@ `;
   static get version() {
-    return '2.3.0-alpha1';
+    return '2.3.0-alpha2';
   }
@@ -381,5 +381,9 @@
 
-  _mouseInWindow(e) {
+  _eventInWindow(e) {
     return e.clientX >= 0 && e.clientX <= window.innerWidth && e.clientY >= 0 && e.clientY <= window.innerHeight;
   }
+
+  __getMouseOrFirstTouchEvent(e) {
+    return e.touches ? e.touches[0] : e;
+  }
 }
@@ -386,0 +390,0 @@

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

39472

increased by5.08%

Lines of code

653

increased by4.98%

No dependency changes