@qtoggle/qui 0.0.0

package/js/icons/stocks.js

@@ -0,0 +1,57 @@
+/**
+ * @namespace qui.icons.stocks
+ */
+
+import Logger from '$qui/lib/logger.module.js'
+
+import * as Theme from '$qui/theme.js'
+
+
+const logger = Logger.get('qui.icons')
+
+let stocks = {}
+let stockMakers = []
+
+
+function makeStocks() {
+    Object.values(stockMakers).forEach(function ({name, stockMaker}) {
+        logger.debug(`making stock "${name}"`)
+        let stock = stocks[name] = stockMaker()
+        stock.prepare()
+    })
+}
+
+
+/**
+ * Lookup and return an icon stock by its name.
+ * @alias qui.icons.stocks.get
+ * @param {String} name
+ * @returns {qui.icons.Stock}
+ */
+export function get(name) {
+    return stocks[name]
+}
+
+/**
+ * Register an icon stock.
+ * @alias qui.icons.stocks.register
+ * @param {String} name stock name
+ * @param {Function} stockMaker a function that creates the stock
+ */
+export function register(name, stockMaker) {
+    stockMakers.push({name: name, stockMaker: stockMaker})
+    logger.debug(`registering stock "${name}"`)
+}
+
+/**
+ * Initialize icon stocks.
+ * @alias qui.icons.stocks.init
+ */
+export function init() {
+    makeStocks()
+
+    Theme.changeSignal.connect(function () {
+        stocks = {}
+        makeStocks()
+    })
+}

package/js/index.js

@@ -0,0 +1,232 @@
+/**
+ * @namespace qui
+ */
+
+import * as RequireJSCompat from '$qui/base/require-js-compat.js'
+import $                    from '$qui/lib/jquery.module.js'
+import Logger               from '$qui/lib/logger.module.js'
+
+import '$qui/lib/jquery-ui.js'
+import '$qui/lib/jquery.mousewheel.js'
+import '$qui/lib/jquery.longpress.js'
+import '$qui/lib/pep.js'
+
+import {globalize}               from '$qui/base/base.js'
+import ConditionVariable         from '$qui/base/condition-variable.js'
+import {CancelledError}          from '$qui/base/errors.js'
+import {gettext}                 from '$qui/base/i18n.js'
+import Config                    from '$qui/config.js'
+import * as Forms                from '$qui/forms/forms.js'
+import * as GlobalGlass          from '$qui/global-glass.js'
+import * as Icons                from '$qui/icons/icons.js'
+import * as MainUI               from '$qui/main-ui/main-ui.js'
+import * as Status               from '$qui/main-ui/status.js'
+import {StickySimpleMessageForm} from '$qui/messages/common-message-forms/common-message-forms.js'
+import * as Messages             from '$qui/messages/messages.js'
+import * as Navigation           from '$qui/navigation.js'
+import * as Pages                from '$qui/pages/pages.js'
+import * as PWA                  from '$qui/pwa.js'
+import * as Sections             from '$qui/sections/sections.js'
+import * as Theme                from '$qui/theme.js'
+import * as ArrayUtils           from '$qui/utils/array.js'
+import * as DateUtils            from '$qui/utils/date.js'
+import * as ObjectUtils          from '$qui/utils/object.js'
+import * as Widgets              from '$qui/widgets/widgets.js'
+import * as Window               from '$qui/window.js'
+
+
+const logger = Logger.get('qui')
+
+/**
+ * A condition that is fulfilled as soon as the app is fully initialized and ready to be used.
+ * @alias qui.whenReady
+ * @type {qui.base.ConditionVariable}
+ */
+export let whenReady = new ConditionVariable()
+
+
+function initConfig() {
+    /* Look for the main script name */
+    let error = new Error()
+    let names = error.stack.match(new RegExp('[A-Za-z0-9_-]+\\.js', 'g'))
+    if (!names) {
+        throw new Error('Cannot find main script: empty stack')
+    }
+
+    let scripts = document.getElementsByTagName('script')
+
+    /* Find the reference to the main app DOM script */
+    let mainAppScriptName = names[names.length - 1]
+    let mainAppScript = Array.from(scripts).find(s => s.src.split('?')[0].endsWith(mainAppScriptName))
+    if (!mainAppScript) {
+        throw new Error(`Cannot find main script: no such script ${mainAppScriptName}`)
+    }
+
+    /* Deduce app name from main app script name */
+    let appName = mainAppScriptName.slice(0, -3) /* remove .js */
+    if (appName.endsWith('-bundle')) {
+        appName = appName.slice(0, -7)
+    }
+    if (appName === 'index') { /* development mode */
+        appName = 'qui-app'
+    }
+    Config.appName = appName
+
+    /* Copy all data-* attributes from script tag to Config */
+    ObjectUtils.forEach(mainAppScript.dataset, (n, v) => Config.set(n, v))
+
+    /* Find the URL to the QUI index */
+    let urls = error.stack.match(/http.*?\.js/gi)
+    if (!urls || !urls.length) {
+        throw new Error('Cannot find QUI index script: no script URLs found in stack')
+    }
+
+    /* Detect QUI static URL - we know it's the first script in stack */
+    let quiIndexScript = urls[0]
+    let m = quiIndexScript.match(new RegExp('[.a-z0-9_-]+\\.js'))
+    if (!m) {
+        throw new Error('Cannot find QUI index script: no JS file found in stack')
+    }
+
+    Config.quiIndexName = quiIndexScript.split('/').slice(-1)[0]
+    Config.quiIndexName = Config.quiIndexName.split(':')[0] /* Remove :row:col */
+    Config.quiStaticURL = quiIndexScript.slice(0, m.index - 1)
+    /* In debug mode, we have an extra "/js" dir */
+    if (Config.debug) {
+        Config.quiStaticURL = Config.quiStaticURL.split('/').slice(0, -1).join('/')
+    }
+
+    /* Detect app static URL - we know it's the last script in stack */
+    let appIndexScript = urls.slice(-1)[0]
+    m = appIndexScript.match(new RegExp('[.a-z0-9_-]+\\.js'))
+
+    Config.appIndexName = appIndexScript.split('/').slice(-1)[0]
+    Config.appIndexName = Config.appIndexName.split(':')[0] /* Remove :row:col */
+    Config.appStaticURL = appIndexScript.slice(0, m.index - 1)
+    /* In debug mode, we have an extra "/js" dir */
+    if (Config.debug) {
+        Config.appStaticURL = Config.appStaticURL.split('/').slice(0, -1).join('/')
+    }
+
+    /* Use details supplied by webpack at build time */
+    if (window.__quiAppVersion) {
+        Config.appCurrentVersion = window.__quiAppVersion
+    }
+}
+
+function initJQuery() {
+    function passivizeEvent(eventName) {
+        $.event.special[eventName] = {
+            setup: function (_, ns, handle) {
+                if (ns.includes('noPreventDefault')) {
+                    this.addEventListener(eventName, handle, {passive: false})
+                }
+                else {
+                    this.addEventListener(eventName, handle, {passive: true})
+                }
+            }
+        }
+    }
+
+    passivizeEvent('touchstart')
+    passivizeEvent('touchmove')
+}
+
+function configureLogging() {
+    Logger.setHandler(Logger.createDefaultHandler({
+        formatter: function (messages, context) {
+            messages.unshift(`[${context.name}]`)
+            messages.unshift(`${context.level.name}:`)
+            messages.unshift(DateUtils.formatPercent(new Date(), '%Y-%m-%d %H:%M:%S:'))
+        }
+    }))
+
+    Logger.setLevel(Config.debug ? Logger.DEBUG : Logger.INFO)
+
+    /* Inject errorStack logger method */
+    Object.getPrototypeOf(logger).errorStack = function (msg, error) {
+        this.error(`${msg}: ${error ? error.toString() : '(no error supplied)'}`)
+        if (error && error.stack) {
+            this.error(error.stack)
+        }
+    }
+
+    /* Unlimited stack trace */
+    Error.stackTraceLimit = Infinity
+
+    /* Export Logger to global scope  */
+    let qui = (window.qui = window.qui || {})
+    qui.Logger = Logger
+}
+
+function logCurrentConfig() {
+    ArrayUtils.sortKey(Object.entries(Config), e => e[0]).forEach(function ([key, value]) {
+        if (typeof value === 'function') {
+            return
+        }
+
+        logger.debug(`using Config.${key} = ${JSON.stringify(value)}`)
+    })
+}
+
+function configureGlobalErrorHandling() {
+    window.addEventListener('unhandledrejection', function (e) {
+        /* Uncaught/unhandled cancelled errors are silently ignored */
+        if (e.reason instanceof CancelledError) {
+            e.preventDefault()
+            return
+        }
+
+        logger.error(`unhandled promise rejection: ${e.reason || '<unspecified reason>'}`)
+        if (e.reason != null) {
+            logger.error(e.reason)
+        }
+        logger.error(e.promise)
+
+        let msg = gettext('An unexpected error occurred.')
+        msg += '<br>'
+        msg += gettext('Application reloading is recommended.')
+        new StickySimpleMessageForm({type: 'error', message: msg}).show()
+        e.preventDefault()
+    })
+}
+
+
+/**
+ * Initialize the QUI library.
+ * @alias qui.init
+ * @returns {Promise} a promise that resolves when QUI is initialized and ready
+ */
+export function init() {
+    RequireJSCompat.cleanup()
+    initConfig()
+    initJQuery()
+    configureLogging()
+    logCurrentConfig()
+
+    return Promise.resolve()
+    .then(() => Window.init())
+    .then(() => PWA.init())
+    .then(() => Theme.init())
+    .then(() => Icons.init())
+    .then(() => MainUI.init())
+    .then(() => Status.init())
+    .then(() => Widgets.init())
+    .then(() => Messages.init())
+    .then(() => GlobalGlass.init())
+    .then(() => Sections.init())
+    .then(() => Pages.init())
+    .then(() => Navigation.init())
+    .then(() => Forms.init())
+    .then(() => configureGlobalErrorHandling())
+    .then(function () {
+        whenReady.fulfill()
+        logger.debug('QUI is ready')
+    })
+}
+
+/* Make some modules accessible globally, via window */
+import('$qui/config.js').then(globalize('qui.Config'))
+import('$qui/lib/logger.module.js').then(globalize('qui.Logger'))
+import('$qui/navigation.js').then(globalize('qui.navigation'))
+import('$qui/sections/sections.js').then(globalize('qui.sections'))

package/js/lib/jquery.longpress.js

@@ -0,0 +1,79 @@
+/**
+ * Longpress is a jQuery plugin that makes it easy to support long press
+ * events on mobile devices and desktop borwsers.
+ *
+ * @name longpress
+ * @version 0.1.2
+ * @requires jQuery v1.2.3+
+ * @author Vaidik Kapoor
+ * @license MIT License - http://www.opensource.org/licenses/mit-license.php
+ *
+ * For usage and examples, check out the README at:
+ * http://github.com/vaidik/jquery-longpress/
+ *
+ * Copyright (c) 2008-2013, Vaidik Kapoor (kapoor [*dot*] vaidik -[at]- gmail [*dot*] com)
+ */
+
+(function($) {
+    $.fn.longpress = function(longCallback, shortCallback, duration) {
+        if (typeof duration === "undefined") {
+            duration = 500;
+        }
+
+        return this.each(function() {
+            var $this = $(this);
+
+            // to keep track of how long something was pressed
+            var mouse_down_time;
+            var timeout;
+
+            // mousedown or touchstart callback
+            function mousedown_callback(e) {
+                mouse_down_time = new Date().getTime();
+                var context = $(this);
+
+                // set a timeout to call the longpress callback when time elapses
+                timeout = setTimeout(function() {
+                    if (typeof longCallback === "function") {
+                        longCallback.call(context, e);
+                    } else {
+                        $.error('Callback required for long press. You provided: ' + typeof longCallback);
+                    }
+                }, duration);
+            }
+
+            // mouseup or touchend callback
+            function mouseup_callback(e) {
+                var press_time = new Date().getTime() - mouse_down_time;
+                if (press_time < duration) {
+                    // cancel the timeout
+                    clearTimeout(timeout);
+
+                    // call the shortCallback if provided
+                    if (typeof shortCallback === "function") {
+                        shortCallback.call($(this), e);
+                    } else if (typeof shortCallback === "undefined") {
+                        ;
+                    } else {
+                        $.error('Optional callback for short press should be a function.');
+                    }
+                }
+            }
+
+            // cancel long press event if the finger or mouse was moved
+            function move_callback(e) {
+                clearTimeout(timeout);
+            }
+
+            // Browser Support
+            $this.on('mousedown', mousedown_callback);
+            $this.on('mouseup', mouseup_callback);
+            $this.on('mousemove', move_callback);
+
+            // Mobile Support
+            $this.on('touchstart', mousedown_callback);
+            $this.on('touchend', mouseup_callback);
+            $this.on('touchmove', move_callback);
+        });
+    };
+}(jQuery));

package/js/lib/jquery.module.js

@@ -0,0 +1,4 @@
+
+import './jquery.js'
+
+export default window.jQuery.noConflict(true)

package/js/lib/logger.module.js

@@ -0,0 +1,4 @@
+
+import './logger.js'
+
+export default window.logger

package/js/lib/pep.module.js

@@ -0,0 +1,4 @@
+
+import './pep.js'
+
+export default window.pep

package/js/lists/common-items/common-items.js

@@ -0,0 +1,5 @@
+/**
+ * @namespace qui.lists.commonitems
+ */
+
+export {default as IconLabelListItem} from './icon-label-list-item.js'

package/js/lists/common-items/icon-label-list-item.js

@@ -0,0 +1,86 @@
+
+import {mix}                from '$qui/base/mixwith.js'
+import * as StringUtils     from '$qui/utils/string.js'
+import {IconLabelViewMixin} from '$qui/views/common-views/common-views.js'
+
+import ListItem   from '../list-item.js'
+import * as Lists from '../lists.js'
+
+
+const PHRASE_SPLIT_REGEX = /[^a-zA-Z0-9]/
+
+
+/**
+ * A list item made of an icon and a label.
+ * @alias qui.lists.commonitems.IconLabelListItem
+ * @extends qui.lists.ListItem
+ * @mixes qui.views.commonviews.IconLabelViewMixin
+ */
+class IconLabelListItem extends mix(ListItem).with(IconLabelViewMixin) {
+
+    /**
+     * @constructs
+     * @param {...*} args parent class parameters
+     */
+    constructor({...args} = {}) {
+        super(args)
+
+        this._matchPhrase = null
+    }
+
+    makeContent() {
+        return this.getIconLabelContainer()
+    }
+
+    setSelected(selected) {
+        super.setSelected(selected)
+        this.getIconLabelContainer().toggleClass('selected', selected)
+    }
+
+    setSelectMode(selectMode) {
+        this.setClickable(selectMode !== Lists.LIST_SELECT_MODE_DISABLED)
+    }
+
+    getMatchPhrase() {
+        if (this._matchPhrase == null) {
+            this._matchPhrase =
+            this._matchPhrase = [
+                ...this.getLabel().split(PHRASE_SPLIT_REGEX),
+                ...this.getSubLabel().split(PHRASE_SPLIT_REGEX)
+            ]
+
+            /* Also consider the entire label as is */
+            if (this.getLabel()) {
+                this._matchPhrase.push(this.getLabel().toLowerCase())
+            }
+            if (this.getSubLabel()) {
+                this._matchPhrase.push(this.getSubLabel().toLowerCase())
+            }
+
+            this._matchPhrase = this._matchPhrase.filter(p => Boolean(p))
+        }
+
+        return this._matchPhrase
+    }
+
+    isMatch(filter) {
+        return this.getMatchPhrase().some(p => StringUtils.intelliSearch(p, filter) != null)
+    }
+
+
+    /* Override set*Label() to invalidate cached matchPhrase */
+
+    setLabel(label) {
+        super.setLabel(label)
+        this._matchPhrase = null
+    }
+
+    setSubLabel(subLabel) {
+        super.setSubLabel(subLabel)
+        this._matchPhrase = null
+    }
+
+}
+
+
+export default IconLabelListItem

package/js/lists/common-lists/common-lists.js

@@ -0,0 +1,5 @@
+/**
+ * @namespace qui.lists.commonlists
+ */
+
+export {default as PageList} from './page-list.js'

package/js/lists/common-lists/page-list.js

@@ -0,0 +1,53 @@
+
+import {mix}            from '$qui/base/mixwith.js'
+import StockIcon        from '$qui/icons/stock-icon.js'
+import PageMixin        from '$qui/pages/page.js'
+import * as ObjectUtils from '$qui/utils/object.js'
+
+import List from '../list.js'
+
+
+/**
+ * A list that can be used as a page.
+ * @alias qui.lists.commonlists.PageList
+ * @extends qui.lists.List
+ * @mixes qui.pages.PageMixin
+ */
+class PageList extends mix(List).with(PageMixin) {
+
+    /**
+     * @constructs
+     * @param {...*} args parent class parameters
+     */
+    constructor({...args} = {}) {
+        ObjectUtils.setDefault(args, 'transparent', false)
+        ObjectUtils.setDefault(args, 'topless', true)
+
+        super(args)
+    }
+
+    prepareIcon(icon) {
+        /* Popup page views should normally have the default foreground icon color, even on small screens */
+        if (this.isPopup() && (icon instanceof StockIcon)) {
+            icon = icon.alterDefault({variant: 'foreground'})
+        }
+
+        return super.prepareIcon(icon)
+    }
+
+    handleVertScroll() {
+        super.handleVertScroll()
+        this._updateVertScroll()
+    }
+
+    _updateVertScroll() {
+        let params = this.getVertScrollParams()
+
+        /* Place progress widget in the viewport by pushing it down a bit */
+        this.getProgressWidget().css('margin-top', `${params.offset}px`)
+    }
+
+}
+
+
+export default PageList

package/js/lists/list-item.js

@@ -0,0 +1,147 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import {mix}             from '$qui/base/mixwith.js'
+import * as StringUtils  from '$qui/utils/string.js'
+import VisibilityManager from '$qui/utils/visibility-manager.js'
+import ViewMixin         from '$qui/views/view.js'
+
+/**
+ * A list item.
+ * @alias qui.lists.ListItem
+ * @mixes qui.views.ViewMixin
+ */
+class ListItem extends mix().with(ViewMixin) {
+
+    /**
+     * @constructs
+     * @param {*} [data] user data associated with the item
+     * @param {...*} args parent class parameters
+     */
+    constructor({data = null, ...args} = {}) {
+        super(args)
+
+        this._data = data
+        this._list = null
+        this._visibilityManager = null
+    }
+
+    makeHTML() {
+        let html = $('<div></div>', {class: 'qui-list-child qui-list-item'})
+        html.html(this.makeContent())
+
+        this._visibilityManager = new VisibilityManager({element: html})
+
+        return html
+    }
+
+    /**
+     * Implement this method to create the actual list item content.
+     * @abstract
+     * @returns {jQuery}
+     */
+    makeContent() {
+    }
+
+
+    /* User data */
+
+    /**
+     * Return the item user data.
+     * @returns {*}
+     */
+    getData() {
+        return this._data
+    }
+
+    /**
+     * Set the item user data.
+     * @param {*} data
+     */
+    setData(data) {
+        this._data = data
+    }
+
+    /* Selection */
+
+    /**
+     * Tell if item is selected or not.
+     */
+    isSelected() {
+        return this.getHTML().hasClass('selected')
+    }
+
+    /**
+     * Select or deselect item.
+     * @param {Boolean} selected
+     */
+    setSelected(selected) {
+        this.getHTML().toggleClass('selected', selected)
+    }
+
+    /**
+     * Set select mode. This is internally called by owning {@link qui.lists.List}.
+     * @param {String} selectMode one of:
+     *  * {@link qui.lists.LIST_SELECT_MODE_DISABLED}
+     *  * {@link qui.lists.LIST_SELECT_MODE_SINGLE} (default)
+     *  * {@link qui.lists.LIST_SELECT_MODE_MULTIPLE}
+     */
+    setSelectMode(selectMode) {
+    }
+
+
+    /* Visibility */
+
+    /**
+     * Tell if the item is hidden.
+     * @returns {Boolean}
+     */
+    isHidden() {
+        return !this._visibilityManager.isElementVisible()
+    }
+
+    /**
+     * Show the item.
+     */
+    show() {
+        this._visibilityManager.showElement()
+    }
+
+    /**
+     * Hide the field.
+     */
+    hide() {
+        this._visibilityManager.hideElement()
+    }
+
+    /**
+     * Tell if item matches a search filter. By default, uses {@link qui.utils.string.intelliSearch} on textual content
+     * of the HTML element.
+     * @param {String} filter search filter
+     * @returns {Boolean}
+     */
+    isMatch(filter) {
+        let text = this.getHTML().text().trim().toLowerCase()
+        return StringUtils.intelliSearch(text, filter) != null
+    }
+
+    /**
+     * Return the owning list.
+     * @returns {qui.lists.List}
+     */
+    getList() {
+        return this._list
+    }
+
+    /**
+     * Set the owning list.
+     * @param {qui.lists.List} list
+     */
+    setList(list) {
+        this._list = list
+    }
+
+}
+
+
+export default ListItem