Extract prevent to utils/event (quasarframework#1307)

* Extract prevent to utils/event

* Rename prevent to stopAndPrevent

Author: pdanpdan

src/components/autocomplete/QAutocomplete.js

@@ -1,15 +1,11 @@
 import { width } from '../../utils/dom'
+import { stopAndPrevent } from '../../utils/event'
 import filter from '../../utils/filter'
 import uid from '../../utils/uid'
 import { normalizeToInterval } from '../../utils/format'
 import { QPopover } from '../popover'
 import { QList, QItemWrapper } from '../list'
 
-function prevent (e) {
-  e.preventDefault()
-  e.stopPropagation()
-}
-
 export default {
   name: 'q-autocomplete',
   props: {
@@ -189,15 +185,15 @@ export default {
           break
         case 13: // enter
           this.setCurrentSelection()
-          prevent(e)
+          stopAndPrevent(e)
           break
         case 27: // escape
           this.__clearSearch()
           break
       }
     },
     __moveCursor (offset, e) {
-      prevent(e)
+      stopAndPrevent(e)
 
       if (!this.$refs.popover.showing) {
         this.trigger()

src/components/color-picker/QSaturationValuePicker.vue

@@ -15,6 +15,7 @@
 </template>
 
 <script>
+import { stopAndPrevent } from '../../utils/event'
 import throttle from '../../utils/throttle'
 import TouchPan from '../../directives/touch-pan'
 
@@ -79,8 +80,7 @@ export default {
       if (!this.editable) {
         return
       }
-      event.evt.stopPropagation()
-      event.evt.preventDefault()
+      stopAndPrevent(event.evt)
 
       this.dragging = true
       this.__input(event)
@@ -89,17 +89,15 @@ export default {
       if (!this.dragging || !this.editable) {
         return
       }
-      event.evt.stopPropagation()
-      event.evt.preventDefault()
+      stopAndPrevent(event.evt)
 
       this.__input(event)
     },
     __dragStop (event) {
       if (!this.editable) {
         return
       }
-      event.evt.stopPropagation()
-      event.evt.preventDefault()
+      stopAndPrevent(event.evt)
       this.dragging = false
     },
     __calcSaturationAndValueFromPositionInContainer ({ x, y }) {

src/components/color/QColor.js

@@ -1,6 +1,7 @@
 import { QBtn } from '../btn'
 import { QSlider } from '../slider'
 import TouchPan from '../../directives/touch-pan'
+import { stopAndPrevent } from '../../utils/event'
 import throttle from '../../utils/throttle'
 import getColor from './get-color'
 
@@ -267,8 +268,7 @@ export default {
       }
     },
     __dragStart (event) {
-      event.evt.stopPropagation()
-      event.evt.preventDefault()
+      stopAndPrevent(event.evt)
 
       this.saturationDragging = true
       this.__saturationChange(event)
@@ -277,14 +277,12 @@ export default {
       if (!this.saturationDragging) {
         return
       }
-      event.evt.stopPropagation()
-      event.evt.preventDefault()
+      stopAndPrevent(event.evt)
 
       this.__saturationChange(event)
     },
     __dragStop (event) {
-      event.evt.stopPropagation()
-      event.evt.preventDefault()
+      stopAndPrevent(event.evt)
       this.saturationDragging = false
     },
     __saturationChange (evt) {

src/components/context-menu/ContextMenuDesktop.js

@@ -1,3 +1,4 @@
+import { stopAndPrevent } from '../../utils/event'
 import { QPopover } from '../popover'
 
 export default {
@@ -29,8 +30,7 @@ export default {
         return
       }
       this.hide()
-      evt.preventDefault()
-      evt.stopPropagation()
+      stopAndPrevent(evt)
       /*
         Opening with a timeout for
         Firefox workaround

src/components/context-menu/ContextMenuMobile.js

@@ -1,3 +1,4 @@
+import { stopAndPrevent } from '../../utils/event'
 import { QModal } from '../modal'
 
 export default {
@@ -18,8 +19,7 @@ export default {
     __touchStartHandler (evt) {
       this.target.classList.add('non-selectable')
       this.touchTimer = setTimeout(() => {
-        evt.preventDefault()
-        evt.stopPropagation()
+        stopAndPrevent(evt)
         setTimeout(() => {
           this.__cleanup()
           this.__show()

src/components/datetime/QInlineDatetime.ios.vue

@@ -91,7 +91,7 @@
 
 <script>
 import { between, capitalize } from '../../utils/format'
-import { position } from '../../utils/event'
+import { position, stopAndPrevent } from '../../utils/event'
 import { css } from '../../utils/dom'
 import { isSameDate, adjustDate } from '../../utils/date'
 import DateMixin from './datetime-mixin'
@@ -283,8 +283,7 @@ export default {
         return
       }
 
-      ev.stopPropagation()
-      ev.preventDefault()
+      stopAndPrevent(ev)
 
       this[type + 'DragOffset'] = 0
       this.dragging = type
@@ -297,8 +296,7 @@ export default {
         return
       }
 
-      ev.stopPropagation()
-      ev.preventDefault()
+      stopAndPrevent(ev)
 
       const offset = (this.__dragPosition - position(ev).top) / 36
       this[type + 'DragOffset'] = offset
@@ -308,8 +306,7 @@ export default {
       if (this.dragging !== type || !this.editable) {
         return
       }
-      ev.stopPropagation()
-      ev.preventDefault()
+      stopAndPrevent(ev)
       this.dragging = false
 
       let

src/components/datetime/QInlineDatetime.mat.vue

@@ -233,7 +233,7 @@
 
 <script>
 import { height, width, offset, cssTransform } from '../../utils/dom'
-import { position } from '../../utils/event'
+import { position, stopAndPrevent } from '../../utils/event'
 import { QBtn } from '../btn'
 import { isSameDate, adjustDate } from '../../utils/date'
 import DateMixin from './datetime-mixin'
@@ -445,8 +445,7 @@ export default {
       return (unit < 10 ? filler || '0' : '') + unit
     },
     __dragStart (ev) {
-      ev.stopPropagation()
-      ev.preventDefault()
+      stopAndPrevent(ev)
 
       let
         clock = this.$refs.clock,
@@ -464,13 +463,11 @@ export default {
       if (!this.dragging) {
         return
       }
-      ev.stopPropagation()
-      ev.preventDefault()
+      stopAndPrevent(ev)
       this.__updateClock(ev)
     },
     __dragStop (ev) {
-      ev.stopPropagation()
-      ev.preventDefault()
+      stopAndPrevent(ev)
       this.dragging = false
       this.view = 'minute'
     },

src/components/editor/QEditor.js

@@ -1,4 +1,4 @@
-import { getEventKey } from '../../utils/event'
+import { getEventKey, stopAndPrevent } from '../../utils/event'
 import { getToolbar, getFonts } from './editor-utils'
 import { Caret } from './editor-caret'
 import extend from '../../utils/extend'
@@ -217,8 +217,7 @@ export default {
       const target = this.keys[key]
       if (target !== void 0) {
         const { cmd, param } = target
-        e.preventDefault()
-        e.stopPropagation()
+        stopAndPrevent(e)
         this.runCmd(cmd, param, false)
       }
     },

src/components/knob/QKnob.js

@@ -1,4 +1,4 @@
-import { position } from '../../utils/event'
+import { position, stopAndPrevent } from '../../utils/event'
 import { between } from '../../utils/format'
 import { offset, height, width } from '../../utils/dom'
 import TouchPan from '../../directives/touch-pan'
@@ -106,8 +106,7 @@ export default {
       if (!this.editable) {
         return
       }
-      ev.stopPropagation()
-      ev.preventDefault()
+      stopAndPrevent(ev)
 
       this.centerPosition = this.__getCenter()
 
@@ -118,16 +117,14 @@ export default {
       if (!this.dragging || !this.editable) {
         return
       }
-      ev.stopPropagation()
-      ev.preventDefault()
+      stopAndPrevent(ev)
       this.__onInput(ev, this.centerPosition)
     },
     __dragStop (ev) {
       if (!this.editable) {
         return
       }
-      ev.stopPropagation()
-      ev.preventDefault()
+      stopAndPrevent(ev)
       this.dragging = false
       this.__onInput(ev, this.centerPosition, true)
     },

src/utils/event.js

@@ -127,3 +127,11 @@ export function getMouseWheelDistance (e) {
     pixelY: pY
   }
 }
+
+export function stopAndPrevent (e) {
+  if (!e) {
+    return
+  }
+  e.preventDefault()
+  e.stopPropagation()
+}