Other Utils     

Open External URL

import { openURL } from 'quasar'

openURL('http://...')

It will take care of the quirks involved when running under Cordova or on a browser, including notifying the user he/she has to acknowledge opening popups.

Debounce Function

If your App uses JavaScript to accomplish taxing tasks, a debounce function is essential to ensuring a given task doesn’t fire so often that it bricks browser performance. Debouncing a function limits the rate at which the function can fire.

Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in “execute this function only if 100 milliseconds have passed without it being called.”

A quick example: you have a resize listener on the window which does some element dimension calculations and (possibly) repositions a few elements. That isn’t a heavy task in itself but being repeatedly fired after numerous resizes will really slow your App down. So why not limit the rate at which the function can fire?

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
import { debounce } from 'quasar'

(Debounced Function) debounce(Function fn, Number milliseconds_to_wait, Boolean immediate)

// Example:
window.addEventListener(
'resize',
debounce(function() {
.... things to do ...
}, 300 /*ms to wait*/)
)

There’s also a frameDebounce available which delays calling your function until next browser frame is scheduled to run (read about requestAnimationFrame).

import { frameDebounce } from 'quasar'

(Debounced Function) frameDebounce(Function fn)

// Example:
window.addEventListener(
'resize',
frameDebounce(function() {
.... things to do ...
})
)

Throttle Function

Throttling enforces a maximum number of times a function can be called over time. As in “execute this function at most once every X milliseconds.”

import { throttle } from 'quasar'

(Throttled Function) throttle(Function fn, Number limit_in_milliseconds)

// Example:
window.addEventListener(
'resize',
throttle(function() {
.... things to do ...
}, 300 /* execute at most once every 0.3s */)
)

(Deep) Copy Objects

A basic respawn of jQuery.extend(). Takes same parameters:

import { extend } from 'quasar'

let newObject = extend([Boolean deepCopy], targetObj, obj, ...)

Watch out for methods within objects.

Generate UID

Generate unique identifiers:

import { uid } from 'quasar'

let uid = uid()
// Example: 501e7ae1-7e6f-b923-3e84-4e946bff31a8

Handling event on a DOM event handler

It’s cross-browser.

import { event } from 'quasar'

node.addEventListener('click', evt => {
// left clicked?
(Boolean) event.leftClick(evt)

// middle clicked?
(Boolean) event.middleClick(evt)

// right clicked?
(Boolean) event.rightClick(evt)

// key in number format
(Number) event.getEventKey(evt)

// Mouse wheel distance (in pixels)
(Object {x, y}) event.getMouseWheelDistance(evt)

// position on viewport
// works both for mouse and touch events!
(Object {top, left}) event.position(evt)

// get target DOM Element on which mouse or touch
// event has fired upon
(DOM Element) event.targetElement(evt)

// call stopPropagation and preventDefault
event.stopAndPrevent(evt)
})

Filter

Filter out an array of Objects based on a certain field:

import { filter } from 'quasar'

let data = [{fee: 5, desc: 'Bla bla'}, {fee: 10, desc: 'Bla bla'}, {fee: 1, desc: 'Bla bla'}]
console.log(filter('5', {field: 'fee', list: data}))
// [{fee: 5, desc: 'Bla bla'}]