@qtoggle/qui 0.0.0

package/js/utils/url.js

@@ -0,0 +1,187 @@
+/**
+ * A class holding the details of a URL.
+ * @alias qui.utils.URL
+ */
+class URL {
+
+    static VALID_REGEX = new RegExp(
+        '^(?:(?:http|https)://)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d' +
+        '|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d' +
+        '|2[0-4]\\d|25[0-4]))|(?:(?:[a-z_\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)' +
+        '(?:\\.(?:[a-z_\\u00a1-\\uffff0-9]+-?)*[a-z_\\u00a1-\\uffff0-9]+)*(?:\\.?' +
+        '(?:[a-z_\\u00a1-\\uffff]*)))|localhost)(?::\\d{1,5})?(?:(/|\\?|#)[^\\s]*)?$',
+        'i'
+    )
+
+
+    /**
+     * @constructs
+     * @param {String} scheme
+     * @param {String} [username]
+     * @param {String} [password]
+     * @param {String} host
+     * @param {Number} [port]
+     * @param {String} [path]
+     * @param {Object} [query]
+     * @param {String} [fragment]
+     */
+    constructor({
+        scheme,
+        username = '',
+        password = '',
+        host,
+        port = null,
+        path = '',
+        query = {},
+        fragment = ''
+    }) {
+        this.scheme = scheme
+        this.username = username
+        this.password = password
+        this.host = host
+        this.port = port
+        this.path = path
+        this.query = query
+        this.fragment = fragment
+    }
+
+    /**
+     * Serialize the query and returns it as a string.
+     * @returns {String}
+     */
+    get queryStr() {
+        return Object.entries(this.query)
+                     .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+                     .join('&')
+    }
+
+    /**
+     * Compose the string representation of this URL.
+     * @returns {String}
+     */
+    toString() {
+        /* Scheme */
+        let url = `${this.scheme}://`
+
+        /* Credentials */
+        if (this.username) {
+            url += this.username
+            if (this.password) {
+                url += `:${this.password}`
+            }
+
+            url += '@'
+        }
+
+        /* Host */
+        url += this.host
+
+        /* Port */
+        let port = this.port
+        if ((this.scheme === 'http' && this.port === 80) || (this.scheme === 'https' && this.port === 443)) {
+            port = null
+        }
+        if (port != null) {
+            url += `:${port}`
+        }
+
+        /* Path */
+        let path = this.path
+        if (path && !path.startsWith('/')) {
+            path = `/${path}`
+        }
+        url += path
+
+        /* Query */
+        if (Object.keys(this.query).length > 0) {
+            url += `?${this.queryStr}`
+        }
+
+        /* Fragment */
+        if (this.fragment) {
+            url += `#${this.fragment}`
+        }
+
+        return url
+    }
+
+    /**
+     * Return all the attributes of this URL as a dictionary.
+     * @returns {Object}
+     */
+    toAttributes() {
+        return {
+            scheme: this.scheme,
+            username: this.username,
+            password: this.password,
+            host: this.host,
+            port: this.port,
+            path: this.path,
+            query: this.query,
+            fragment: this.fragment
+        }
+    }
+
+    /**
+     * Alter one or more attributes of this URL, returning the new URL.
+     * @param {Object} attributes
+     * @returns {qui.utils.URL}
+     */
+    alter(attributes) {
+        let oldAttributes = this.toAttributes()
+        Object.assign(oldAttributes, attributes)
+
+        return new this.constructor(oldAttributes)
+    }
+
+    /**
+     * Parse a string representation of a URL and returns a URL object.
+     * @param {String} urlStr
+     * @returns {qui.utils.URL}
+     */
+    static parse(urlStr = '') {
+        let a = document.createElement('a')
+        a.href = urlStr
+
+        let params = {
+            scheme: a.protocol.replace(':', ''),
+            host: a.hostname,
+            path: a.pathname,
+            port: a.port ? parseInt(a.port) : null,
+            username: a.username,
+            password: a.password,
+            query: {}
+        }
+
+        if (a.search) {
+            a.search.substring(1).split('&').forEach(function (s) {
+                let parts = s.split('=')
+                let name = parts[0]
+                let value = parts.slice(1).join('=')
+
+                params.query[decodeURIComponent(name)] = decodeURIComponent(value)
+            })
+        }
+
+        if (a.hash) {
+            params.fragment = a.hash.substring(1)
+        }
+
+        return new this(params)
+    }
+
+    /**
+     * Transform the string representation of a partial URL into a full URL.
+     * @param {String} urlStr
+     * @returns {String}
+     */
+    static qualify(urlStr) {
+        let a = document.createElement('a')
+        a.href = urlStr
+        return a.href
+    }
+
+}
+
+
+export default URL

package/js/utils/utils.js

@@ -0,0 +1,3 @@
+/**
+ * @namespace qui.utils
+ */

package/js/utils/visibility-manager.js

@@ -0,0 +1,211 @@
+
+import * as Theme from '$qui/theme.js'
+import {asap}     from '$qui/utils/misc.js'
+
+
+/**
+ * A class that resolves the problem of waiting an async iteration before applying styles with transitions, after
+ * changing the `display` style property.
+ * @alias qui.utils.VisibilityManager
+ */
+class VisibilityManager {
+
+    /**
+     * @constructs
+     * @param {jQuery} element the element to be managed
+     * @param {String} [visibleDisplay] the display style property when element is visible; defaults to `""`
+     * @param {String} [hiddenDisplay] the display style property when element is hidden; defaults to `"none"`
+     * @param {?String} [visibleClass] the class(es) to add to element when it's visible; defaults to `"visible"`
+     * @param {?String} [hiddenClass] the class(es) to add to element when it's hidden; defaults to `"hidden"`
+     * @param {Boolean} [widthTransition] set to `true` if width should be transitioned while hiding/showing
+     * @param {Boolean} [heightTransition] set to `true` if height should be transitioned while hiding/showing
+     * @param {Number} [transitionDuration] the duration of the transition, in milliseconds; defaults to
+     * {@link qui.theme.getTransitionDuration()}
+     */
+    constructor({
+        element,
+        visibleDisplay = '',
+        hiddenDisplay = 'none',
+        visibleClass = 'visible',
+        hiddenClass = 'hidden',
+        widthTransition = false,
+        heightTransition = false,
+        transitionDuration = Theme.getTransitionDuration()
+    }) {
+
+        let currentDisplay = element.css('display') || window.getComputedStyle(element[0]).display
+
+        this._element = element
+        this._visibleDisplay = visibleDisplay != null ? visibleDisplay : currentDisplay
+        this._hiddenDisplay = hiddenDisplay
+        this._visibleClass = visibleClass
+        this._hiddenClass = hiddenClass
+        this._widthTransition = widthTransition
+        this._heightTransition = heightTransition
+
+        this._transitionDuration = transitionDuration
+
+        /* Autodetect initial visibility */
+        this._visibleAfterTransition = !this._hiddenDisplay || (currentDisplay !== this._hiddenDisplay)
+
+        this._transitionHandle = null
+        this._asapHandle = null
+    }
+
+    /**
+     * Show element.
+     */
+    showElement() {
+        if (this._visibleAfterTransition) {
+            return
+        }
+        this._visibleAfterTransition = true
+
+        if (this._transitionHandle) {
+            clearTimeout(this._transitionHandle)
+            this._transitionHandle = null
+        }
+        if (this._asapHandle) {
+            clearTimeout(this._asapHandle)
+            this._asapHandle = null
+        }
+
+        this._element.css('display', this._visibleDisplay)
+
+        /* If element is not yet part of DOM, don't bother with transitions */
+        if (!this._isAddedToDOM()) {
+            this._element.addClass(this._visibleClass || '')
+            this._element.removeClass(
+                `${this._hiddenClass || ''} qui-visibility-manager-hidden-width qui-visibility-manager-hidden-height`
+            )
+            if (this._widthTransition) {
+                this._element.css('width', '')
+            }
+            if (this._heightTransition) {
+                this._element.css('height', '')
+            }
+
+            return
+        }
+
+        /* Handle special case where element has been hidden while not part of DOM and thus has width/height 0px */
+        if (this._widthTransition && this._element.css('width') === '0px') {
+            this._element.css('width', '')
+            this._element.removeClass('qui-visibility-manager-hidden-width')
+            this._element.css('width', this._element.width())
+            this._element.addClass('qui-visibility-manager-hidden-width')
+        }
+        if (this._heightTransition && this._element.css('height') === '0px') {
+            this._element.css('height', '')
+            this._element.removeClass('qui-visibility-manager-hidden-height')
+            this._element.css('height', this._element.height())
+            this._element.addClass('qui-visibility-manager-hidden-height')
+        }
+
+        this._asapHandle = asap(function () {
+
+            this._asapHandle = null
+            this._element.addClass(this._visibleClass || '')
+            this._element.removeClass(
+                `${this._hiddenClass || ''} qui-visibility-manager-hidden-width qui-visibility-manager-hidden-height`
+            )
+
+            this._transitionHandle = setTimeout(function () {
+
+                this._transitionHandle = null
+                if (this._widthTransition) {
+                    this._element.css('width', '')
+                }
+                if (this._heightTransition) {
+                    this._element.css('height', '')
+                }
+
+            }.bind(this), this._transitionDuration)
+
+        }.bind(this))
+    }
+
+    /**
+     * Hide element.
+     */
+    hideElement() {
+        if (!this._visibleAfterTransition) {
+            return
+        }
+        this._visibleAfterTransition = false
+
+        if (this._transitionHandle) {
+            clearTimeout(this._transitionHandle)
+            this._transitionHandle = null
+        }
+        if (this._asapHandle) {
+            clearTimeout(this._asapHandle)
+            this._asapHandle = null
+        }
+
+        if (this._widthTransition) {
+            this._element.css('width', this._element.width())
+        }
+        if (this._heightTransition) {
+            this._element.css('height', this._element.height())
+        }
+
+        /* If element is not yet part of DOM, don't bother with transitions */
+        if (!this._isAddedToDOM()) {
+            this._element.removeClass(this._visibleClass || '')
+            this._element.addClass(this._hiddenClass || '')
+            if (this._widthTransition) {
+                this._element.addClass('qui-visibility-manager-hidden-width')
+            }
+            if (this._heightTransition) {
+                this._element.addClass('qui-visibility-manager-hidden-height')
+            }
+            this._element.css('display', this._hiddenDisplay)
+
+            return
+        }
+
+        let hideAfterTransition = function () {
+
+            this._asapHandle = null
+            this._element.removeClass(this._visibleClass || '')
+            this._element.addClass(this._hiddenClass || '')
+            if (this._widthTransition) {
+                this._element.addClass('qui-visibility-manager-hidden-width')
+            }
+            if (this._heightTransition) {
+                this._element.addClass('qui-visibility-manager-hidden-height')
+            }
+
+            this._transitionHandle = setTimeout(function () {
+
+                this._transitionHandle = null
+                this._element.css('display', this._hiddenDisplay)
+
+            }.bind(this), this._transitionDuration)
+
+        }.bind(this)
+
+        if (this._widthTransition || this._heightTransition) {
+            this._asapHandle = asap(hideAfterTransition)
+        }
+        else {
+            hideAfterTransition()
+        }
+    }
+
+    /**
+     * Tell if element is visible or not.
+     * @returns {Boolean}
+     */
+    isElementVisible() {
+        return this._visibleAfterTransition
+    }
+
+    _isAddedToDOM() {
+        return this._element.parents('body').length > 0
+    }
+
+}
+
+export default VisibilityManager

package/js/views/common-views/common-views.js

@@ -0,0 +1,7 @@
+/**
+ * @namespace qui.views.commonviews
+ */
+
+export {default as IconLabelViewMixin}  from './icon-label-view.js'
+export {default as ProgressViewMixin}   from './progress-view.js'
+export {default as StructuredViewMixin} from './structured-view.js'

package/js/views/common-views/icon-label-view.js

@@ -0,0 +1,210 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import {Mixin}   from '$qui/base/mixwith.js'
+import StockIcon from '$qui/icons/stock-icon.js'
+
+
+/** @lends qui.views.commonviews.IconLabelViewMixin */
+const IconLabelViewMixin = Mixin((superclass = Object) => {
+
+    /**
+     * A view made of an icon with a label.
+     * @alias qui.views.commonviews.IconLabelViewMixin
+     */
+    class IconLabelViewMixin extends superclass {
+
+        /**
+         * @constructs
+         * @param {qui.icons.Icon} [icon] icon
+         * @param {?String} [label] label
+         * @param {?String} [subLabel] subscript label
+         * @param {Boolean} [clickable] whether to make view clickable or not (defaults to `false`)
+         * @param {...*} args parent class parameters
+         */
+        constructor({icon = null, label = null, subLabel = null, clickable = false, ...args} = {}) {
+            super(args)
+
+            this._icon = icon
+            this._label = label || null
+            this._subLabel = subLabel || null
+            this._clickable = clickable
+            this._iconElement = null
+            this._labelElement = null
+            this._subLabelElement = null
+            this._iconLabelContainer = null
+        }
+
+        /**
+         * Create the icon and label container.
+         * @returns {jQuery}
+         */
+        makeIconLabelContainer() {
+            let container = $('<div></div>', {class: 'qui-icon-label-view'})
+
+            if (this._clickable) {
+                container.addClass('qui-base-button')
+            }
+
+            this._iconElement = $('<div></div>', {class: 'qui-icon'})
+            this._applyIcon(this._icon, this._iconElement)
+            container.append(this._iconElement)
+
+            let labelsContainer = $('<div></div>', {class: 'labels'})
+            container.append(labelsContainer)
+
+            this._labelElement = $('<div></div>', {class: 'label'})
+            this.setLabel(this._label)
+            labelsContainer.append(this._labelElement)
+
+            this._subLabelElement = $('<div></div>', {class: 'sub-label'})
+            this.setSubLabel(this._subLabel)
+            labelsContainer.append(this._subLabelElement)
+
+            return container
+        }
+
+        /**
+         * Return the icon and label container.
+         * @returns {jQuery}
+         */
+        getIconLabelContainer() {
+            if (this._iconLabelContainer == null) {
+                this._iconLabelContainer = this.makeIconLabelContainer()
+            }
+
+            return this._iconLabelContainer
+        }
+
+        /**
+         * Return the icon.
+         * @returns {?qui.icons.Icon}
+         */
+        getIcon() {
+            return this._icon
+        }
+
+        /**
+         * Update the icon.
+         * @param {?qui.icons.Icon} icon
+         */
+        setIcon(icon) {
+            this._icon = icon
+            this._applyIcon(icon, this._iconElement)
+        }
+
+        /**
+         * Reapply the icon.
+         */
+        updateIcon() {
+            this._applyIcon(this._icon, this._iconElement)
+        }
+
+        /**
+         * Prepare the view icon, altering its attributes as needed, before applying it.
+         * @param {qui.icons.Icon} icon
+         * @returns {?qui.icons.Icon}
+         */
+        prepareIcon(icon) {
+            if (!icon) {
+                return null
+            }
+
+            if (!(icon instanceof StockIcon)) {
+                return icon
+            }
+
+            if (this._clickable) {
+                icon = icon.alterDefault({
+                    variant: 'interactive',
+                    activeVariant: 'interactive',
+                    selectedVariant: 'background'
+                })
+            }
+            else {
+                icon = icon.alterDefault({variant: 'foreground'})
+            }
+
+            return icon
+        }
+
+        _applyIcon(icon, element) {
+            icon = this.prepareIcon(icon)
+
+            if (icon) {
+                element.css('display', '')
+                icon.applyTo(element)
+            }
+            else {
+                element.css('display', 'none')
+            }
+
+            return icon
+        }
+
+        /**
+         * Return the label.
+         * @returns {String}
+         */
+        getLabel() {
+            return this._label
+        }
+
+        /**
+         * Update the label.
+         * @param {?String} label
+         */
+        setLabel(label) {
+            this._label = label || ''
+            if (this._labelElement) {
+                this._labelElement.html(label)
+                this._labelElement.css('display', label ? '' : 'none')
+            }
+        }
+
+        /**
+         * Return the subscript label.
+         * @returns {?String}
+         */
+        getSubLabel() {
+            return this._subLabel
+        }
+
+        /**
+         * Update the subscript label.
+         * @param {?String} subLabel
+         */
+        setSubLabel(subLabel) {
+            this._subLabel = subLabel || ''
+            if (this._subLabelElement) {
+                this._subLabelElement.html(subLabel)
+                this._subLabelElement.css('display', subLabel ? '' : 'none')
+            }
+        }
+
+        /**
+         * Tell if view is clickable.
+         * @returns {Boolean}
+         */
+        isClickable() {
+            return this._clickable
+        }
+
+        /**
+         * Set or clear the clickable flag.
+         * @param {Boolean} clickable
+         */
+        setClickable(clickable) {
+            this._clickable = clickable
+            this.getIconLabelContainer().toggleClass('qui-base-button', clickable)
+            this._applyIcon(this._icon, this._iconElement)
+        }
+
+    }
+
+    return IconLabelViewMixin
+
+})
+
+
+export default IconLabelViewMixin

package/js/views/common-views/progress-view.js

@@ -0,0 +1,89 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import {Mixin}           from '$qui/base/mixwith.js'
+import VisibilityManager from '$qui/utils/visibility-manager.js'
+
+
+/** @lends qui.views.commonviews.ProgressViewMixin */
+const ProgressViewMixin = Mixin((superclass = Object) => {
+
+    /**
+     * A view with progress indicator. Designed to be mixed together with {@link qui.views.ViewMixin}.
+     * @alias qui.views.commonviews.ProgressViewMixin
+     * @mixin
+     */
+    class ProgressViewMixin extends superclass {
+
+        /**
+         * @constructs
+         * @param {Boolean} [verticallyCentered] set to `true` to vertically center the progress widget
+         * @param {...*} args parent class parameters
+         */
+        constructor({verticallyCentered = false, ...args}) {
+            super(args)
+
+            this._glassDiv = $('<div></div>', {class: 'qui-progress-view-glass'})
+            this._glassVisibilityManager = new VisibilityManager({
+                element: this._glassDiv
+            })
+            this._glassVisibilityManager.hideElement()
+
+            this._progressWidget = $('<div></div>', {class: 'qui-progress-view-widget'}).progressdisk({radius: '2em'})
+            if (verticallyCentered) {
+                this._progressWidget.addClass('vertically-centered')
+            }
+            this._progressMessage = $('<span></span>', {class: 'qui-progress-view-message'})
+
+            this._glassDiv.append(this._progressWidget)
+            this._glassDiv.append(this._progressMessage)
+        }
+
+        initHTML(html) {
+            super.initHTML(html)
+
+            html.addClass('qui-progress-view')
+            html.append(this._glassDiv)
+        }
+
+        showProgress(percent) {
+            if (percent == null) {
+                percent = -1
+            }
+
+            this._glassVisibilityManager.showElement()
+            this._progressWidget.progressdisk('setValue', percent)
+
+            this.getHTML().addClass('has-progress')
+        }
+
+        hideProgress() {
+            this._glassVisibilityManager.hideElement()
+
+            this.getHTML().removeClass('has-progress')
+        }
+
+        /**
+         * Return the progress disk widget.
+         * @returns {jQuery}
+         */
+        getProgressWidget() {
+            return this._progressWidget
+        }
+
+        /**
+         * Set or clear view's progress message.
+         * @param {?String|jQuery} message
+         */
+        setProgressMessage(message) {
+            this._progressMessage.html(message)
+        }
+
+    }
+
+    return ProgressViewMixin
+
+})
+
+
+export default ProgressViewMixin