@theseam/ui-common 0.3.4 → 0.3.7

package/bundles/theseam-ui-common-modal.umd.js

@@ -4,6 +4,7 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.theseam = global.theseam || {}, global.theseam["ui-common"] = global.theseam["ui-common"] || {}, global.theseam["ui-common"].modal = {}), global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.common, global.ng.core, global.ng.forms, global.ng.router, global.angularFontawesome, global.ng.cdk.keycodes, global.rxjs.operators, global.ng.cdk.bidi, global.rxjs, global.theseam["ui-common"]["dynamic-component-loader"], global.theseam["ui-common"].scrollbar, global.ng.animations, global.theseam["ui-common"].core));
 })(this, (function (exports, a11y, overlay, portal, common, core, forms, router, angularFontawesome, keycodes, operators, bidi, rxjs, dynamicComponentLoader, scrollbar, animations, core$1) { 'use strict';
 
+    var DRAG_CLOSE_THRESHOLD = 5;
     /** Unique id for the created dialog. */
     var uniqueId = 0;
     /**
@@ -18,13 +19,9 @@
             this.id = id;
             /** The instance of the component in the dialog. */
             this.componentInstance = null;
+            this._clickOutsideCleanup = null;
             // Pass the id along to the container.
             _containerInstance._id = id;
-            var _bootstrapBackdropClickListener = function () {
-                if (!_this.disableClose) {
-                    _this.close();
-                }
-            };
             // If the dialog has a backdrop, handle clicks from the backdrop.
             if (_containerInstance._config.hasBackdrop) {
                 _overlayRef.backdropClick().subscribe(function () {
@@ -32,32 +29,12 @@
                         _this.close();
                     }
                 });
-                // NOTE: For current bootstrap style modal
-                // Replaced click event because it was easy to accidentally close
-                // the dialog by mousing down inside the modal and mousing up outside
-                // (like when dragging a map, selecting text, etc)
-                var clickStarted_1 = false;
-                _overlayRef.overlayElement.addEventListener('mousedown', function (event) {
-                    // @ts-ignore
-                    if (!_this._isModalMouseEvent(event.path)) {
-                        clickStarted_1 = true;
-                    }
-                });
-                _overlayRef.overlayElement.addEventListener('mouseup', function (event) {
-                    // @ts-ignore
-                    if (clickStarted_1 && !_this._isModalMouseEvent(event.path)) {
-                        clickStarted_1 = false;
-                        _bootstrapBackdropClickListener();
-                    }
-                }, {});
+                this._clickOutsideCleanup = this._initCloseOnClickOutside();
             }
             this.beforeClosed().subscribe(function () {
                 _this._overlayRef.detachBackdrop();
             });
             this.afterClosed().subscribe(function () {
-                if (_this._containerInstance._config.hasBackdrop) {
-                    _this._overlayRef.overlayElement.removeEventListener('click', _bootstrapBackdropClickListener);
-                }
                 _this._overlayRef.detach();
                 _this._overlayRef.dispose();
                 _this.componentInstance = null;
@@ -68,6 +45,56 @@
                 .pipe(operators.filter(function (event) { return event.keyCode === keycodes.ESCAPE && !_this.disableClose; }))
                 .subscribe(function () { return _this.close(); });
         }
+        ModalRef.prototype._initCloseOnClickOutside = function () {
+            var _this = this;
+            var close = function () {
+                if (!_this.disableClose) {
+                    _this.close();
+                }
+            };
+            var isInContainer = function (target) {
+                return _this._containerInstance.getNativeElement().contains(target);
+            };
+            var getPosition = function (event) {
+                return { x: event.clientX, y: event.clientY };
+            };
+            var dist = function (x1, y1, x2, y2) {
+                return Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
+            };
+            var pressed = false;
+            var pressedPosition = null;
+            var _handlePressDown = function (event) {
+                pressed = true;
+                pressedPosition = getPosition(event);
+            };
+            var _handlePressUp = function (event) {
+                if (pressedPosition) {
+                    var target = event.target;
+                    if (target && !isInContainer(target)) {
+                        var currentPosition = getPosition(event);
+                        var d = dist(currentPosition.x, currentPosition.y, pressedPosition.x, pressedPosition.y);
+                        if (d < DRAG_CLOSE_THRESHOLD) {
+                            close();
+                        }
+                    }
+                    pressedPosition = null;
+                }
+                else if (pressed) {
+                    close();
+                }
+                pressed = false;
+            };
+            this._overlayRef.overlayElement.addEventListener('mousedown', _handlePressDown);
+            this._overlayRef.overlayElement.addEventListener('pointerdown', _handlePressDown);
+            this._overlayRef.overlayElement.addEventListener('mouseup', _handlePressUp);
+            this._overlayRef.overlayElement.addEventListener('pointerup', _handlePressUp);
+            return function () {
+                _this._overlayRef.overlayElement.removeEventListener('mousedown', _handlePressDown);
+                _this._overlayRef.overlayElement.removeEventListener('pointerdown', _handlePressDown);
+                _this._overlayRef.overlayElement.removeEventListener('mouseup', _handlePressUp);
+                _this._overlayRef.overlayElement.removeEventListener('pointerup', _handlePressUp);
+            };
+        };
         /** Gets an observable that emits when the overlay's backdrop has been clicked. */
         ModalRef.prototype.backdropClick = function () {
             return this._overlayRef.backdropClick();
@@ -79,6 +106,9 @@
         ModalRef.prototype.close = function (dialogResult) {
             this._result = dialogResult;
             this._containerInstance._startExiting();
+            if (this._clickOutsideCleanup) {
+                this._clickOutsideCleanup();
+            }
         };
         /**
          * Updates the dialog's position.
@@ -146,10 +176,6 @@
             var _this = this;
             return this._containerInstance._afterExit.pipe(operators.map(function () { return _this._result; }));
         };
-        // TODO: pull container name in from element, to protect against changes
-        ModalRef.prototype._isModalMouseEvent = function (path) {
-            return path.findIndex(function (p) { return p.localName === 'seam-modal-container'; }) !== -1;
-        };
         return ModalRef;
     }());
 
@@ -1274,6 +1300,9 @@
                 toFocus.focus();
             }
         };
+        ModalContainerComponent.prototype.getNativeElement = function () {
+            return this._elementRef.nativeElement;
+        };
         return ModalContainerComponent;
     }(portal.BasePortalOutlet));
     ModalContainerComponent.decorators = [