feat(QAjaxBar/LoadingBar): (backport from Qv2) new prop (Function) -> hijack-filter quasarframework#11952 quasarframework#6303 (quasarframework#11986)

Author: pdanpdan

docs/src/pages/quasar-plugins/loading-bar.md

@@ -55,7 +55,7 @@ this.$q.loadingBar.setDefaults({
 })
 ```
 
-Outside of Vue components:
+Outside of Vue components (includes boot files):
 
 ```js
 import { LoadingBar } from 'quasar'
@@ -66,3 +66,20 @@ LoadingBar.setDefaults({
   position: 'bottom'
 })
 ```
+
+### Using an Ajax filter <q-badge align="top" color="brand-primary" label="v1.17.2+" />
+
+Should you want to trigger LoadingBar only for some URLs, then you can use the `setDefaults()` method (described above) to configure the `hijackFilter` property:
+
+```js
+import { LoadingBar } from 'quasar'
+
+LoadingBar.setDefaults({
+  // return a Boolean which has the meaning of
+  // "should this URL trigger LoadingBar?"
+  hijackFilter (url) {
+    // example (only https://my-service.com/* should trigger)
+    return /^https:\/\/my-service\.com/.test(url)
+  }
+})
+```

docs/src/pages/vue-components/ajax-bar.md

@@ -23,10 +23,33 @@ The QAjaxBar component captures Ajax calls automatically (unless told not to).
 
 The example below triggers events manually for demonstrating purposes only. This one is set to appear at bottom (multiple positions available!) of the page, with a 10px size (default is different) and uses a custom color.
 
+### Basic
+
 <doc-example title="Basic" file="QAjaxBar/Basic" />
 
 Please check out the API section for all properties that you can use.
 
+### Ajax filter <q-badge align="top" color="brand-primary" label="v1.17.2+" />
+
+Should you want QAjaxBar to trigger only for some URLs (and not for all, like in the default behavior), then you can use the `hijackFilter` property:
+
+```html
+<template>
+  <q-ajax-bar :hijack-filter="myFilterFn" />
+</template>
+
+<script>
+export default {
+  methods () {
+    myFilterFn (url) {
+      // example (only https://my-service.com/* should trigger)
+      return /^https:\/\/my-service\.com/.test(url)
+    }
+  }
+}
+</script>
+```
+
 ## Tips
 * If multiple events are captured by Ajax Bar simultaneously, `@start` and `@stop` will still be triggered only once: when bar starts showing up and when it becomes hidden.
 

ui/dev/src/pages/components/ajax-bar.vue

@@ -57,12 +57,44 @@
         </q-card-section>
       </q-card>
     </div>
-    <q-ajax-bar ref="bar" :position="position" :reverse="reverse" :size="computedSize" />
+
+    <div class="q-ma-md">
+      <q-btn label="xhr /server (trigger)" color="primary" @click="triggerXhr1" no-caps />
+      <q-btn label="xhr /second-server (NO trigger)" color="primary" @click="triggerXhr2" no-caps class="q-ml-sm" />
+    </div>
+
+    <q-ajax-bar ref="bar" :position="position" :reverse="reverse" :size="computedSize" skip-hijack />
   </div>
 </template>
 
 <script>
+import { LoadingBar } from 'quasar'
+function sendXhr (url) {
+  const xhr = new XMLHttpRequest()
+  xhr.open('GET', url, true)
+  xhr.send(null)
+  // setTimeout(() => {
+  //   xhr.open('GET', '/mimi', true)
+  //   xhr.send(null)
+  // }, 500)
+}
+
 export default {
+  created () {
+    LoadingBar.setDefaults({
+      hijackFilter (url) {
+        const res = /\/server/.test(url) === true &&
+          /\/other-server/.test(url) === false
+        console.log(url, res)
+        return res
+      }
+    })
+  },
+
+  beforeUnmount () {
+    LoadingBar.setDefaults({ hijackFilter: void 0 })
+  },
+
   data () {
     return {
       position: 'top',
@@ -98,6 +130,13 @@ export default {
 
     stop () {
       this.$refs.bar.stop()
+    },
+
+    triggerXhr1 () {
+      sendXhr('/server')
+    },
+    triggerXhr2 () {
+      sendXhr('/second-server')
     }
   }
 }

ui/src/components/ajax-bar/QAjaxBar.js

@@ -6,22 +6,22 @@ import { ariaHidden } from '../../mixins/attrs'
 
 const
   xhr = isSSR ? null : XMLHttpRequest,
-  send = isSSR ? null : xhr.prototype.send,
-  stackStart = [],
-  stackStop = []
+  open = isSSR ? null : xhr.prototype.open,
+  positionValues = [ 'top', 'right', 'bottom', 'left' ]
 
+let stack = []
 let highjackCount = 0
 
 function translate ({ p, pos, active, horiz, reverse, dir }) {
   let x = 1, y = 1
 
-  if (horiz) {
-    if (reverse) { x = -1 }
+  if (horiz === true) {
+    if (reverse === true) { x = -1 }
     if (pos === 'bottom') { y = -1 }
     return { transform: `translate3d(${x * (p - 100)}%,${active ? 0 : y * -200}%,0)` }
   }
 
-  if (reverse) { y = -1 }
+  if (reverse === true) { y = -1 }
   if (pos === 'right') { x = -1 }
   return { transform: `translate3d(${active ? 0 : dir * x * -200}%,${y * (p - 100)}%,0)` }
 }
@@ -47,32 +47,46 @@ function inc (p, amount) {
   return between(p + amount, 0, 100)
 }
 
-function highjackAjax (start, stop) {
-  stackStart.push(start)
-  stackStop.push(stop)
-
+function highjackAjax (stackEntry) {
   highjackCount++
 
+  stack.push(stackEntry)
+
   if (highjackCount > 1) { return }
 
-  function endHandler () {
-    stackStop.forEach(fn => { fn() })
-  }
+  xhr.prototype.open = function (_, url) {
+    const stopStack = []
+
+    const loadStart = () => {
+      stack.forEach(entry => {
+        const hijackFilter = entry.getHijackFilter()
+        if (
+          hijackFilter === null ||
+          hijackFilter(url) === true
+        ) {
+          entry.start()
+          stopStack.push(entry.stop)
+        }
+      })
+    }
 
-  xhr.prototype.send = function (/* ...args */) {
-    stackStart.forEach(fn => { fn() })
-    this.addEventListener('loadend', endHandler, false)
-    send.apply(this, arguments)
+    const loadEnd = () => {
+      stopStack.forEach(stop => { stop() })
+    }
+
+    this.addEventListener('loadstart', loadStart, { once: true })
+    this.addEventListener('loadend', loadEnd, { once: true })
+
+    open.apply(this, arguments)
   }
 }
 
-function restoreAjax (start, stop) {
-  stackStart.splice(stackStart.indexOf(start), 1)
-  stackStop.splice(stackStop.indexOf(stop), 1)
+function restoreAjax (start) {
+  stack = stack.filter(entry => entry.start !== start)
 
   highjackCount = Math.max(0, highjackCount - 1)
   if (!highjackCount) {
-    xhr.prototype.send = send
+    xhr.prototype.open = open
   }
 }
 
@@ -83,15 +97,19 @@ export default Vue.extend({
     position: {
       type: String,
       default: 'top',
-      validator: val => ['top', 'right', 'bottom', 'left'].includes(val)
+      validator: val => positionValues.includes(val)
     },
+
     size: {
       type: String,
       default: '2px'
     },
+
     color: String,
+    reverse: Boolean,
+
     skipHijack: Boolean,
-    reverse: Boolean
+    hijackFilter: Function
   },
 
   data () {
@@ -119,7 +137,7 @@ export default Vue.extend({
         active,
         horiz: this.horizontal,
         reverse: this.$q.lang.rtl === true && ['top', 'bottom'].includes(this.position)
-          ? !this.reverse
+          ? this.reverse === false
           : this.reverse,
         dir: this.$q.lang.rtl === true ? -1 : 1
       })
@@ -224,13 +242,17 @@ export default Vue.extend({
   mounted () {
     if (this.skipHijack !== true) {
       this.hijacked = true
-      highjackAjax(this.start, this.stop)
+      highjackAjax({
+        start: this.start,
+        stop: this.stop,
+        getHijackFilter: () => this.hijackFilter || null
+      })
     }
   },
 
   beforeDestroy () {
     clearTimeout(this.timer)
-    this.hijacked === true && restoreAjax(this.start, this.stop)
+    this.hijacked === true && restoreAjax(this.start)
   },
 
   render (h) {

ui/src/components/ajax-bar/QAjaxBar.json

@@ -22,16 +22,34 @@
       "extends": "color"
     },
 
-    "skip-hijack": {
+    "reverse": {
       "type": "Boolean",
-      "desc": "Skip Ajax hijacking (not a reactive prop)",
+      "desc": "Reverse direction of progress",
       "category": "behavior"
     },
 
-    "reverse": {
+    "skip-hijack": {
       "type": "Boolean",
-      "desc": "Reverse direction of progress",
+      "desc": "Skip Ajax hijacking (not a reactive prop)",
       "category": "behavior"
+    },
+
+    "hijack-filter": {
+      "type": "Function",
+      "desc": "Filter which URL should trigger start() + stop()",
+      "params": {
+        "url": {
+          "type": "String",
+          "desc": "The URL being triggered",
+          "examples": [ "https://some.url/path" ]
+        }
+      },
+      "returns": {
+        "type": "Boolean",
+        "desc": "Should the URL received as param trigger start() + stop()?"
+      },
+      "category": "behavior",
+      "addedIn": "v1.17.2"
     }
   },
 

ui/src/plugins/LoadingBar.json

@@ -10,7 +10,7 @@
     "definition": {
       "...props": {
         "type": "Object",
-        "desc": "QAjaxBar component props",
+        "desc": "QAjaxBar component props, EXCEPT for 'hijack-filter'",
         "__exemption": [ "examples" ]
       }
     }