chore: extract handlePopupClick() (#1680)

sweetalert2 · Jul 20, 2019 · 6a3c759 · 6a3c759
1 parent c24490b
commit 6a3c759
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 53 deletions.
diff --git a/src/instanceMethods/_main.js b/src/instanceMethods/_main.js
@@ -11,6 +11,7 @@ import privateMethods from '../privateMethods.js'
 import { handleInputOptions, handleInputValue } from '../utils/dom/inputUtils.js'
 import { handleConfirmButtonClick, handleCancelButtonClick } from './buttons-handlers.js'
 import { addKeydownHandler, setFocus } from './keydown-handler.js'
+import { handlePopupClick } from './popup-click-handler.js'
 import { DismissReason } from '../utils/DismissReason.js'
 
 export function _main (userParams) {
@@ -82,59 +83,7 @@ const swalPromise = (instance, domCache, innerParams) => {
       dismissWith(DismissReason.close)
     }
 
-    if (innerParams.toast) {
-      // Closing popup by internal click
-      domCache.popup.onclick = () => {
-        if (
-          innerParams.showConfirmButton ||
-          innerParams.showCancelButton ||
-          innerParams.showCloseButton ||
-          innerParams.input
-        ) {
-          return
-        }
-        dismissWith(DismissReason.close)
-      }
-    } else {
-      let ignoreOutsideClick = false
-
-      // Ignore click events that had mousedown on the popup but mouseup on the container
-      // This can happen when the user drags a slider
-      domCache.popup.onmousedown = () => {
-        domCache.container.onmouseup = function (e) {
-          domCache.container.onmouseup = undefined
-          // We only check if the mouseup target is the container because usually it doesn't
-          // have any other direct children aside of the popup
-          if (e.target === domCache.container) {
-            ignoreOutsideClick = true
-          }
-        }
-      }
-
-      // Ignore click events that had mousedown on the container but mouseup on the popup
-      domCache.container.onmousedown = () => {
-        domCache.popup.onmouseup = function (e) {
-          domCache.popup.onmouseup = undefined
-          // We also need to check if the mouseup target is a child of the popup
-          if (e.target === domCache.popup || domCache.popup.contains(e.target)) {
-            ignoreOutsideClick = true
-          }
-        }
-      }
-
-      domCache.container.onclick = (e) => {
-        if (ignoreOutsideClick) {
-          ignoreOutsideClick = false
-          return
-        }
-        if (e.target !== domCache.container) {
-          return
-        }
-        if (callIfFunction(innerParams.allowOutsideClick)) {
-          dismissWith(DismissReason.backdrop)
-        }
-      }
-    }
+    handlePopupClick(domCache, innerParams, dismissWith)
 
     // Reverse buttons (Confirm on the right side)
     if (innerParams.reverseButtons) {

diff --git a/src/instanceMethods/popup-click-handler.js b/src/instanceMethods/popup-click-handler.js
@@ -0,0 +1,71 @@
+import { callIfFunction } from '../utils/utils.js'
+import { DismissReason } from '../utils/DismissReason.js'
+
+export const handlePopupClick = (domCache, innerParams, dismissWith) => {
+  if (innerParams.toast) {
+    handleToastClick(domCache, innerParams, dismissWith)
+  } else {
+    // Ignore click events that had mousedown on the popup but mouseup on the container
+    // This can happen when the user drags a slider
+    handleModalMousedown(domCache)
+
+    // Ignore click events that had mousedown on the container but mouseup on the popup
+    handleContainerMousedown(domCache)
+
+    handleModalClick(domCache, innerParams, dismissWith)
+  }
+}
+
+const handleToastClick = (domCache, innerParams, dismissWith) => {
+  // Closing toast by internal click
+  domCache.popup.onclick = () => {
+    if (
+      innerParams.showConfirmButton ||
+      innerParams.showCancelButton ||
+      innerParams.showCloseButton ||
+      innerParams.input
+    ) {
+      return
+    }
+    dismissWith(DismissReason.close)
+  }
+}
+
+let ignoreOutsideClick = false
+
+const handleModalMousedown = (domCache) => {
+  domCache.popup.onmousedown = () => {
+    domCache.container.onmouseup = function (e) {
+      domCache.container.onmouseup = undefined
+      // We only check if the mouseup target is the container because usually it doesn't
+      // have any other direct children aside of the popup
+      if (e.target === domCache.container) {
+        ignoreOutsideClick = true
+      }
+    }
+  }
+}
+
+const handleContainerMousedown = (domCache) => {
+  domCache.container.onmousedown = () => {
+    domCache.popup.onmouseup = function (e) {
+      domCache.popup.onmouseup = undefined
+      // We also need to check if the mouseup target is a child of the popup
+      if (e.target === domCache.popup || domCache.popup.contains(e.target)) {
+        ignoreOutsideClick = true
+      }
+    }
+  }
+}
+
+const handleModalClick = (domCache, innerParams, dismissWith) => {
+  domCache.container.onclick = (e) => {
+    if (ignoreOutsideClick) {
+      ignoreOutsideClick = false
+      return
+    }
+    if (e.target === domCache.container && callIfFunction(innerParams.allowOutsideClick)) {
+      dismissWith(DismissReason.backdrop)
+    }
+  }
+}