@qtoggle/qui 0.0.0

package/js/theme.js

@@ -0,0 +1,304 @@
+/**
+ * @namespace qui.theme
+ */
+
+import $      from '$qui/lib/jquery.module.js'
+import Logger from '$qui/lib/logger.module.js'
+
+import {gettext}         from '$qui/base/i18n.js'
+import Signal            from '$qui/base/signal.js'
+import Config            from '$qui/config.js'
+import * as Colors       from '$qui/utils/colors.js'
+import * as CSS          from '$qui/utils/css.js'
+import {asap}            from '$qui/utils/misc.js'
+import * as ObjectUtils  from '$qui/utils/object.js'
+import * as PromiseUtils from '$qui/utils/promise.js'
+import * as StringUtils  from '$qui/utils/string.js'
+import * as Window       from '$qui/window.js'
+
+
+const STORAGE_BACKGROUND_COLOR_KEY = 'theme.background-color'
+
+const logger = Logger.get('qui.theme')
+
+let currentTheme = null
+let themeVars = null
+let transitionDuration = null
+let effectsDisabled = null
+
+
+/**
+ * Emitted whenever the theme is changed. Handlers are called with the following parameters:
+ *  * `theme: String`, the new theme
+ * @alias qui.theme.changeSignal
+ */
+export const changeSignal = new Signal()
+
+
+/**
+ * Tell the current theme.
+ * @alias qui.theme.getCurrent
+ * @returns {String}
+ */
+export function getCurrent() {
+    return currentTheme
+}
+
+/**
+ * Change the theme.
+ * @alias qui.theme.setCurrent
+ * @param {String} theme
+ * @returns {Promise} a promise that resolves as soon as the theme has been set
+ */
+export function setCurrent(theme) {
+    if (currentTheme === theme) {
+        return Promise.resolve()
+    }
+
+    currentTheme = theme
+
+    logger.debug(`setting theme to ${theme}`)
+
+    if (Window.$body == null) {
+        return Promise.resolve() /* Not initialized yet */
+    }
+
+    return updateCurrent()
+}
+
+function updateCurrent() {
+    /* Fade out body */
+    Window.$body.css('opacity', '')
+
+    function isLoaded() {
+        return CSS.findRules('^br.-theme-name$').some(function (rule) {
+            let parts = rule.declaration.split(':', 2)
+            if (parts.length < 2) {
+                return
+            }
+
+            let value = parts[1].split(';')[0].trim()
+            value = value.replace(/"/g, '') /* Remove quotation marks */
+
+            return value === currentTheme
+        })
+    }
+
+    function loadedOrLater() {
+        if (isLoaded()) {
+            return Promise.resolve()
+        }
+        else {
+            return PromiseUtils.later(10).then(() => loadedOrLater())
+        }
+    }
+
+    /* Allow 500ms for fading-out */
+    return PromiseUtils.later(500).then(function () {
+
+        /* Update disabled attribute of CSS link elements */
+        $('link[theme]').each(function () {
+            let $link = $(this)
+            let linkTheme = $link.attr('theme')
+            if (linkTheme === currentTheme) {
+                $link.removeAttr('disabled')
+            }
+            else {
+                $link.attr('disabled', '')
+            }
+        })
+
+        return loadedOrLater().then(function () {
+
+            logger.debug(`theme set to ${currentTheme}`)
+
+            /* Invalidate theme vars */
+            themeVars = null
+
+            /* Finally, emit change signal */
+            changeSignal.emit(currentTheme)
+
+            /* Consider the theme updated, but allow another 500ms for section soft reload */
+            setTimeout(function () {
+                Window.$body.css('opacity', '1')
+            }, 500)
+
+            /* Set current background color in local storage, to be used at next app reload */
+            window.localStorage.setItem(STORAGE_BACKGROUND_COLOR_KEY, getVar('background-color'))
+        })
+
+    })
+}
+
+/**
+ * Return the available themes.
+ * @alias qui.theme.getAvailable
+ * @returns {Object<String,String>} a dictionary with theme names as keys and display names as values
+ */
+export function getAvailable() {
+    return ObjectUtils.fromEntries(Config.themes.split(',').map(function (theme) {
+        return [theme, gettext(StringUtils.title(theme))]
+    }))
+}
+
+/**
+ * Return the value of a theme variable.
+ * @alias qui.theme.getVar
+ * @param {String} name the variable name
+ * @param {String} [def] a default value if the variable is not found or not set
+ * @returns {String}
+ */
+export function getVar(name, def) {
+    if (!themeVars) {
+        themeVars = {}
+        CSS.findRules('^br.-theme-').forEach(function (rule) {
+            let name = rule.selector.substring(10)
+            let parts = rule.declaration.split(':', 2)
+            if (parts.length < 2) {
+                return
+            }
+
+            themeVars[name] = parts[1].split(';')[0].trim()
+        })
+    }
+
+    return themeVars[name] || def
+}
+
+/**
+ * Resolve a color name and normalize it using {@link qui.utils.colors.normalize}.
+ *
+ * A color name can be an HTML color (e.g. `teal`) or a color theme variable name starting with an `@` (e.g.
+ * `@background-color`).
+ *
+ * If a color is given, it will be normalized and returned right away. If the given color name cannot be resolved, the
+ * `@foreground-color` is returned.
+ *
+ * @alias qui.theme.getColor
+ * @param {String} color a color or a color name
+ * @returns {String}
+ */
+export function getColor(color) {
+    if (color.startsWith('@')) {
+        color = getVar(color.substring(1))
+    }
+
+    if (!color) {
+        color = getVar('foreground-color')
+    }
+
+    return Colors.normalize(color)
+}
+
+/**
+ * Return the default transition duration, in milliseconds.
+ * @alias qui.theme.getTransitionDuration
+ * @returns {Number}
+ */
+export function getTransitionDuration() {
+    if (transitionDuration == null) {
+        transitionDuration = parseFloat(getVar('transition-duration')) * 1000
+    }
+
+    return transitionDuration
+}
+
+/**
+ * Call a function after a timeout equal to a transition duration,
+ * @alias qui.theme.afterTransition
+ * @param {Function} func function to run
+ * @param {?jQuery} [element] an optional HTML element whose visibility will be tested; if element is not currently
+ * visible, `func` will be called asap; if supplied, will be used as `this` argument for `func`
+ * @returns {Number} a timeout handle
+ */
+export function afterTransition(func, element = null) {
+    let thisArg = element || window
+
+    if (element && !element.is(':visible')) {
+        return asap(function () {
+            func.call(thisArg)
+        })
+    }
+
+    return setTimeout(function () {
+        func.call(thisArg)
+    }, getTransitionDuration())
+}
+
+/**
+ * Create a promise that resolves after a timeout equal to a transition duration,
+ * @alias qui.theme.afterTransitionPromise
+ * @param {?jQuery} [element] an optional HTML element whose visibility will be tested; if element is not currently
+ * visible, promise is resolved asap
+ * @returns {Promise}
+ */
+export function afterTransitionPromise(element = null) {
+    return new Promise(function (resolve, reject) {
+
+        if (element && !element.is(':visible')) {
+            resolve()
+        }
+        else {
+            afterTransition(function () {
+                resolve()
+            }, element)
+        }
+    })
+}
+
+/**
+ * Enable transitions, animations, blur filters and other effects. Use this function to re-enable effects disabled by
+ * {@link qui.theme.disableEffects}.
+ * @alias qui.theme.enableEffects
+ */
+export function enableEffects() {
+    if (!effectsDisabled) {
+        return
+    }
+    effectsDisabled = false
+    logger.debug('enabling effects')
+
+    if (Window.$body != null) {
+        Window.$body.removeClass('effects-disabled')
+    }
+}
+
+/**
+ * Disable transitions, animations, blur filters and other effects. Use {@link qui.theme.enableEffects} to re-enable
+ * effects.
+ * @alias qui.theme.disableEffects
+ */
+export function disableEffects() {
+    if (effectsDisabled) {
+        return
+    }
+    effectsDisabled = true
+    logger.debug('disabling effects')
+
+    if (Window.$body != null) {
+        Window.$body.addClass('effects-disabled')
+    }
+}
+
+
+/**
+ * Initialize the theme subsystem.
+ * @alias qui.theme.init
+ * @returns {Promise} a promise that is resolved when theme subsystem has been initialized
+ */
+export function init() {
+    if (effectsDisabled == null) {
+        effectsDisabled = Config.defaultEffectsDisabled
+    }
+    if (currentTheme == null) {
+        currentTheme = Config.defaultTheme
+    }
+
+    Window.$body.toggleClass('effects-disabled', effectsDisabled)
+
+    return updateCurrent().then(function () {
+        /* Normally updateCurrent() will take care of fading in body, adds extra 500ms for section soft reload.
+         * This being the first call, we want the body visible as soon as theme is loaded */
+        Window.$body.css('opacity', '1')
+    })
+}

package/js/utils/ajax.js

@@ -0,0 +1,126 @@
+/**
+ * @namespace qui.utils.ajax
+ */
+
+import $ from '$qui/lib/jquery.module.js'
+
+import * as ObjectUtils from '$qui/utils/object.js'
+import * as Window      from '$qui/window.js'
+
+import {asap} from './misc.js'
+import URL    from './url.js'
+
+
+const DEFAULT_REQUEST_TIMEOUT = 60 /* Seconds */
+
+let pendingRequests = []
+
+
+function prepareResponseHeaders(response) {
+    let headersStr = response.getAllResponseHeaders()
+    let headers = headersStr.split('\r\n').filter(h => h.length > 0)
+
+    return ObjectUtils.fromEntries(headers.map(function (h) {
+        let parts = h.split(':')
+        let name = parts[0].trim()
+        let value = parts.slice(1).join(':').trim()
+
+        return [name, value]
+    }))
+}
+
+
+/**
+ * Return a list of currently pending requests
+ * @alias qui.utils.ajax.getPendingRequests
+ * @returns {jqXHR[]}
+ */
+export function getPendingRequests() {
+    return pendingRequests.slice()
+}
+
+/**
+ * Perform an AJAX JSON HTTP request and decode response as JSON.
+ * @alias qui.utils.ajax.requestJSON
+ * @param {String} method the HTTP method
+ * @param {String} path the path or a URL to request
+ * @param {Object} [query]
+ * @param {*} [data] data to transmit in request body
+ * @param {Function} [success] successful callback; will be called with decoded response and headers as parameters
+ * @param {Function} [failure] failure callback; will be called with decoded response, status code, a result message and
+ * headers as parameters
+ * @param {Object} [headers] optional request headers
+ * @param {Number} [timeout] optional request timeout, in seconds
+ * @returns {jqXHR}
+ */
+export function requestJSON(
+    method, path, query = null, data = null, success = null, failure = null, headers = null,
+    timeout = DEFAULT_REQUEST_TIMEOUT
+) {
+    let contentType = null
+
+    if (data != null) {
+        data = JSON.stringify(data)
+        contentType = 'application/json'
+    }
+
+    let url = URL.parse(URL.qualify(path)).alter({query: query || {}}).toString()
+
+    let request = $.ajax({
+        url: url,
+        type: method,
+        data: data,
+        processData: false,
+        cache: false,
+        contentType: contentType,
+        timeout: timeout * 1000,
+        beforeSend: function (xhr) {
+            if (headers) {
+                ObjectUtils.forEach(headers, function (k, v) {
+                    xhr.setRequestHeader(k, v)
+                })
+            }
+        },
+        success: function (data, status, response) {
+            let headers = prepareResponseHeaders(response)
+
+            /* Delay calling the success handler a bit so that complete handler below gets called */
+            asap(function () {
+                if (success) {
+                    success(data, headers)
+                }
+            })
+        },
+        error: function (request, msg) {
+            let headers = prepareResponseHeaders(request)
+
+            /* Defer error handling a bit, it seems to fix call order when window closes */
+            asap(function () {
+                if (failure) {
+                    failure(request.responseJSON || {}, request.status, msg, headers)
+                }
+            })
+        },
+        complete: function (req, status) {
+            /* Remove the request from pending list */
+            let index = pendingRequests.indexOf(request)
+            if (index >= 0) {
+                pendingRequests.splice(index, 1)
+            }
+        }
+    })
+
+    request.details = {
+        method: method,
+        path: path,
+        query: query,
+        data: data,
+        sent: new Date()
+    }
+
+    if (!Window.isClosing()) {
+        pendingRequests.push(request)
+    }
+
+    return request
+}

package/js/utils/array.js

@@ -0,0 +1,194 @@
+/**
+ * @namespace qui.utils.array
+ */
+
+function makeSortFunc(extractFunc, desc, thisArg) {
+    return function (e1, e2) {
+        let k1 = extractFunc.call(thisArg, e1)
+        let k2 = extractFunc.call(thisArg, e2)
+
+        if ((desc && k1 > k2) || (!desc && k1 < k2)) {
+            return -1
+        }
+        if ((desc && k1 < k2) || (!desc && k1 > k2)) {
+            return 1
+        }
+        else {
+            return 0
+        }
+    }
+}
+
+function merge(left, right, compareFunc) {
+    let result = []
+
+    while (left.length > 0 || right.length > 0) {
+        if (left.length > 0 && right.length > 0) {
+            if (compareFunc(left[0], right[0]) <= 0) {
+                result.push(left[0])
+                left = left.slice(1)
+            }
+            else {
+                result.push(right[0])
+                right = right.slice(1)
+            }
+        }
+        else if (left.length > 0) {
+            result.push(left[0])
+            left = left.slice(1)
+        }
+        else if (right.length > 0) {
+            result.push(right[0])
+            right = right.slice(1)
+        }
+    }
+
+    return result
+}
+
+function sorted(array, compareFunc) {
+    let length = array.length
+    let middle = Math.floor(length / 2)
+
+    compareFunc = compareFunc || function (left, right) {
+        if (left < right) {
+            return -1
+        }
+        else if (left === right) {
+            return 0
+        }
+        else {
+            return 1
+        }
+    }
+
+    if (length < 2) {
+        return array
+    }
+
+    return merge(
+        sorted(array.slice(0, middle), compareFunc),
+        sorted(array.slice(middle, length), compareFunc),
+        compareFunc
+    )
+}
+
+
+/**
+ * Perform a stable sort on an array, *in place*, using a comparison function.
+ * @alias qui.utils.array.stableSort
+ * @param {Array} array
+ * @param {Function} compareFunc comparison function; takes two elements as parameters and returns `-1, `0` or `1`
+ * @returns {Array} the array
+ */
+export function stableSort(array, compareFunc) {
+    /* Slower, but such is life */
+    let result = sorted(array, compareFunc).slice()
+
+    /* Replace all the elements in array with the sorted ones */
+    array.length = 0
+    Array.prototype.splice.apply(array, [0, 0].concat(result))
+
+    return array
+}
+
+/**
+ * Perform a sort on an array, *in place*, using a key extraction function.
+ * @alias qui.utils.array.sortKey
+ * @param {Array} array
+ * @param {Function} func key extraction function; will be called with each element as parameter and is expected to
+ * return the comparison key
+ * @param {Boolean} [desc] whether to do a descending sort (defaults to `false`)
+ * @param {*} [thisArg] optional argument to use as `this` when calling the key extraction function.
+ * @returns {Array} the array
+ */
+export function sortKey(array, func, desc = false, thisArg = null) {
+    return array.sort(makeSortFunc(func, desc, thisArg))
+}
+
+/**
+ * Perform a stable sort on an array, *in place*, using a key extraction function.
+ * @alias qui.utils.array.stableSortKey
+ * @param {Array} array
+ * @param {Function} func key extraction function; will be called with each element as parameter and is expected to
+ * return the comparison key
+ * @param {Boolean} [desc] whether to do a descending sort (defaults to `false`)
+ * @param {*} [thisArg] optional argument to use as `this` when calling the key extraction function.
+ * @returns {Array} the array
+ */
+export function stableSortKey(array, func, desc = false, thisArg = null) {
+    return stableSort(array, makeSortFunc(func, desc, thisArg))
+}
+
+/**
+ * Generate an array based on a range of numbers.
+ * @alias qui.utils.array.range
+ * @param {Number} start inclusive range start
+ * @param {Number} stop exclusive range stop
+ * @param {Number} [step] range step (defaults to `1`)
+ * @returns {Number[]}
+ */
+export function range(start, stop, step = 1) {
+    let array = []
+    for (let i = start; i < stop; i += step) {
+        array.push(i)
+    }
+
+    return array
+}
+
+/**
+ * Return an array of distinct elements found in an input array.
+ * @alias qui.utils.array.distinct
+ * @param {Array} array
+ * @param {Function} [equalsFunc] a comparison function (defaults to the `===` operator)
+ * @param {*} [thisArg] optional argument to be used as `this` when calling `equalsFunc`
+ * @returns {Array} the distinct elements array
+ */
+export function distinct(array, equalsFunc = null, thisArg = null) {
+    let uniqueElements = []
+
+    if (!equalsFunc) {
+        equalsFunc = (a, b) => a === b
+    }
+
+    array.forEach(function (element) {
+        let found = uniqueElements.find(function (elem) {
+            return equalsFunc.call(thisArg, elem, element)
+        })
+
+        if (found === undefined) {
+            uniqueElements.push(element)
+        }
+    })
+
+    return uniqueElements
+}
+
+/**
+ * Remove all occurrences of an element from an array, in place.
+ * @alias qui.utils.array.remove
+ * @param {Array} array
+ * @param {*} element the element to remove
+ */
+export function remove(array, element) {
+    let index
+    while ((index = array.indexOf(element)) >= 0) {
+        array.splice(index, 1)
+    }
+}
+
+/**
+ * Remove all occurrences of a set of elements from an array, in place.
+ * @alias qui.utils.array.removeMany
+ * @param {Array} array
+ * @param {Array} elements the set of elements to remove
+ */
+export function removeMany(array, elements) {
+    let index
+    elements.forEach(function (element) {
+        while ((index = array.indexOf(element)) >= 0) {
+            array.splice(index, 1)
+        }
+    })
+}