@qtoggle/qui 0.0.0

package/js/forms/forms.js

@@ -0,0 +1,68 @@
+/**
+ * @namespace qui.forms
+ */
+
+import * as CommonForms from './common-forms/common-forms.js'
+
+
+/**
+ * Form *applied* state.
+ * @alias qui.forms.STATE_APPLIED
+ */
+export const STATE_APPLIED = 'applied'
+
+
+/**
+ * A form (or form field) validation error.
+ * @alias qui.forms.ValidationError
+ * @extends Error
+ */
+export class ValidationError extends Error {
+
+    /**
+     * @constructs
+     * @param {String} [message] the error message to be displayed to the user
+     */
+    constructor(message = null) {
+        super(message || '')
+    }
+
+    toString() {
+        return this.message
+    }
+
+}
+
+/**
+ * A mapping of form errors associated to their corresponding field names.
+ * @alias qui.forms.ErrorMapping
+ * @extends Error
+ */
+export class ErrorMapping extends Error {
+
+    /**
+     * @constructs
+     * @param {Error|Object<String,Error>|qui.forms.ErrorMapping} errors one of:
+     *  * a single error that will be associated to the form itself
+     *  * a dictionary with errors mapped to field names which will be used as is
+     *  * another error mapping object from which errors will be copied
+     */
+    constructor(errors) {
+        super('Form errors')
+
+        if (errors instanceof ErrorMapping) {
+            this.errors = errors.errors
+        }
+        else if (errors instanceof Error) {
+            this.errors = {'': errors}
+        }
+        else {
+            this.errors = errors
+        }
+    }
+
+}
+
+export function init() {
+    CommonForms.init()
+}

package/js/global-glass.js

@@ -0,0 +1,100 @@
+/**
+ * @namespace qui.globalglass
+ */
+
+import $ from '$qui/lib/jquery.module.js'
+
+import * as Theme  from '$qui/theme.js'
+import {asap}      from '$qui/utils/misc.js'
+import * as Window from '$qui/window.js'
+
+
+let mainContainer
+let globalGlass
+let glassContainer
+
+let globalGlassTimeoutHandle = null
+
+
+function show() {
+    if (globalGlassTimeoutHandle) {
+        clearTimeout(globalGlassTimeoutHandle)
+        globalGlassTimeoutHandle = null
+    }
+
+    /* Glass itself */
+    globalGlass.removeClass('hidden')
+    globalGlassTimeoutHandle = asap(function () {
+        globalGlassTimeoutHandle = null
+        Window.$body.addClass('global-glass-visible')
+    })
+
+    glassContainer.addClass('visible').removeClass('hidden')
+}
+
+function hide() {
+    if (globalGlassTimeoutHandle) {
+        clearTimeout(globalGlassTimeoutHandle)
+        globalGlassTimeoutHandle = null
+    }
+
+    glassContainer.removeClass('visible')
+    Window.$body.removeClass('global-glass-visible')
+    globalGlassTimeoutHandle = Theme.afterTransition(function () {
+
+        globalGlassTimeoutHandle = null
+        globalGlass.addClass('hidden')
+
+    })
+}
+
+/**
+ * Automatically show or hide the global glass, depending on its current content.
+ * @alias qui.globalglass.updateVisibility
+ */
+export function updateVisibility() {
+    let hasVisiblePages = glassContainer.children('div.qui-page.visible').length > 0
+    let hasOtherContent = glassContainer.children().not('div.qui-page').length > 0
+
+    let isVisible = glassContainer.hasClass('visible')
+    let shouldBeVisible = hasVisiblePages || hasOtherContent
+
+    if (isVisible && !shouldBeVisible) {
+        hide()
+    }
+    else if (!isVisible && shouldBeVisible) {
+        show()
+    }
+}
+
+/**
+ * Add HTML content to the glass container.
+ * @alias qui.globalglass.addContent
+ * @param {jQuery} content
+ */
+export function addContent(content) {
+    glassContainer.append(content)
+
+    /* Ensure sticky pages are at the end */
+    let children = glassContainer.children('.sticky')
+    glassContainer.append(children)
+}
+
+/**
+ * Configure glass modal state. A modal glass will prevent any access to top/menu/option bars.
+ * @alias qui.globalglass.setModal
+ * @param {Boolean} modal
+ */
+export function setModal(modal) {
+    globalGlass.toggleClass('modal', modal)
+}
+
+export function init() {
+    globalGlass = $('<div></div>', {class: 'qui-global-glass hidden modal'})
+    globalGlass.append($('<div></div>', {class: 'qui-global-glass-container'}))
+
+    Window.$body.append(globalGlass)
+
+    mainContainer = $('div.qui-main-container')
+    glassContainer = globalGlass.children('div.qui-global-glass-container')
+}

package/js/icons/default-stock.js

@@ -0,0 +1,173 @@
+/**
+ * A default icon stock.
+ *
+ * Defined names are:
+ *  * `"plus"`
+ *  * `"minus"`
+ *  * `"close"`
+ *  * `"fat-arrow"`
+ *  * `"slim-arrow"`
+ *  * `"info"`
+ *  * `"qmark"`
+ *  * `"exclam"`
+ *  * `"check"`
+ *  * `"wrench"`
+ *  * `"sliders"`
+ *  * `"key"`
+ *  * `"user"`
+ *  * `"sync"`
+ *  * `"magnifier"`
+ *  * `"full-screen"`
+ *  * `"duplicate"`
+ *  * `"envelope"`
+ *  * `"gear"`
+ *  * `"download"`
+ *  * `"upload"`
+ *  * `"file"`
+ *  * `"menu"`
+ *  * `"options"`
+ *
+ * Defined variants are:
+ *  * `"darkgray"`
+ *  * `"gray"`
+ *  * `"lightgray"`
+ *  * `"white"`
+ *  * `"blue"`
+ *  * `"magenta"`
+ *  * `"red"`
+ *  * `"orange"`
+ *  * `"yellow"`
+ *  * `"green"`
+ *  * `"cyan"`
+ *  * `"background"`
+ *  * `"foreground"`
+ *  * `"disabled"`
+ *  * `"interactive"`
+ *  * `"highlight"`
+ *  * `"danger"`
+ *  * `"info"`
+ *  * `"warning"`
+ *  * `"error"`
+ *
+ * Defined variant aliases are:
+ *  * `"interactive-active" = "interactive brightness(80%)"`
+ *  * `"highlight-active" = "highlight brightness(80%)"`
+ *  * `"danger-active" = "danger brightness(80%)"`
+ *  * `"warning-active" = "warning brightness(80%)"`
+ *  * `"error-active" = "error brightness(80%)"`
+ *
+ * @namespace qui.icons.defaultstock
+ */
+
+/* eslint-disable quote-props */
+
+import Config     from '$qui/config.js'
+import * as Theme from '$qui/theme.js'
+
+import Stock       from './stock.js'
+import * as Stocks from './stocks.js'
+
+
+/**
+ * Default stock name, `"qui"`.
+ * @alias qui.icons.defaultstock.NAME
+ */
+export const NAME = 'qui'
+
+
+function getQUIStockNameXOffset(name) {
+    let xOffset = Theme.getVar(`${name}-icon-x-offset`)
+    if (xOffset) {
+        return Math.abs(parseFloat(xOffset) / 2)
+    }
+
+    return null
+}
+
+function getQUIStockVariantYOffset(variant) {
+    let yOffset = Theme.getVar(`${variant}-icon-y-offset`)
+    if (yOffset) {
+        return Math.abs(parseFloat(yOffset) / 2)
+    }
+
+    return null
+}
+
+
+/**
+ * Return the default icon stock.
+ * @alias qui.icons.defaultstock.get
+ * @returns {qui.icons.Stock}
+ */
+export function get() {
+    return Stocks.get(NAME)
+}
+
+
+Stocks.register(NAME, function () {
+    return new Stock({
+        src: `${Config.quiStaticURL}/img/qui-icons.svg`,
+        unit: 'rem',
+        size: 2,
+        width: 80,
+        height: 32,
+        names: {
+            'plus': getQUIStockNameXOffset('plus'),
+            'minus': getQUIStockNameXOffset('minus'),
+            'close': getQUIStockNameXOffset('close'),
+            'fat-arrow': getQUIStockNameXOffset('fat-arrow'),
+            'slim-arrow': getQUIStockNameXOffset('slim-arrow'),
+            'info': getQUIStockNameXOffset('info'),
+            'qmark': getQUIStockNameXOffset('qmark'),
+            'exclam': getQUIStockNameXOffset('exclam'),
+            'check': getQUIStockNameXOffset('check'),
+            'wrench': getQUIStockNameXOffset('wrench'),
+            'sliders': getQUIStockNameXOffset('sliders'),
+            'key': getQUIStockNameXOffset('key'),
+            'user': getQUIStockNameXOffset('user'),
+            'sync': getQUIStockNameXOffset('sync'),
+            'magnifier': getQUIStockNameXOffset('magnifier'),
+            'full-screen': getQUIStockNameXOffset('full-screen'),
+            'duplicate': getQUIStockNameXOffset('duplicate'),
+            'envelope': getQUIStockNameXOffset('envelope'),
+            'gear': getQUIStockNameXOffset('gear'),
+            'download': getQUIStockNameXOffset('download'),
+            'upload': getQUIStockNameXOffset('upload'),
+            'file': getQUIStockNameXOffset('file'),
+            'reset': getQUIStockNameXOffset('reset'),
+            'menu': getQUIStockNameXOffset('menu'),
+            'options': getQUIStockNameXOffset('options')
+        },
+        variants: {
+            'darkgray': getQUIStockVariantYOffset('darkgray'),
+            'gray': getQUIStockVariantYOffset('gray'),
+            'lightgray': getQUIStockVariantYOffset('lightgray'),
+            'white': getQUIStockVariantYOffset('white'),
+            'blue': getQUIStockVariantYOffset('blue'),
+            'magenta': getQUIStockVariantYOffset('magenta'),
+            'red': getQUIStockVariantYOffset('red'),
+            'orange': getQUIStockVariantYOffset('orange'),
+            'yellow': getQUIStockVariantYOffset('yellow'),
+            'green': getQUIStockVariantYOffset('green'),
+            'cyan': getQUIStockVariantYOffset('cyan'),
+
+            'background': getQUIStockVariantYOffset('background'),
+            'foreground': getQUIStockVariantYOffset('foreground'),
+            'foreground-interactive': getQUIStockVariantYOffset('foreground-interactive'),
+            'disabled': getQUIStockVariantYOffset('disabled'),
+            'interactive': getQUIStockVariantYOffset('interactive'),
+            'highlight': getQUIStockVariantYOffset('highlight'),
+            'danger': getQUIStockVariantYOffset('danger'),
+            'info': getQUIStockVariantYOffset('info'),
+            'warning': getQUIStockVariantYOffset('warning'),
+            'error': getQUIStockVariantYOffset('error')
+        },
+        variantAliases: {
+            'interactive-active': 'interactive brightness(80%)',
+            'highlight-active': 'highlight brightness(80%)',
+            'danger-active': 'danger brightness(80%)',
+            'warning-active': 'warning brightness(80%)',
+            'error-active': 'error brightness(80%)'
+        }
+    })
+})

package/js/icons/icon.js

@@ -0,0 +1,64 @@
+
+const ICON_DATA_ATTR = '_icon'
+
+
+/**
+ * A base class for icons.
+ * @alias qui.icons.Icon
+ */
+class Icon {
+
+    /**
+     * @constructs
+     * @param {String} [animation] optional icon CSS animation
+     */
+    constructor({animation = null}) {
+        this._animation = animation
+    }
+
+    /**
+     * Apply the icon to an HTML element.
+     * @param {jQuery} element the element to which the icon will be applied
+     */
+    applyTo(element) {
+        this.renderTo(element)
+        element.data(ICON_DATA_ATTR, this)
+
+        if (this._animation) {
+            element.css('animation', this._animation)
+        }
+        else {
+            element.css('animation', '')
+        }
+    }
+
+    /**
+     * Effectively render the icon onto the HTML element.
+     * @param {jQuery} element the element onto which the icon will be rendered
+     */
+    renderTo(element) {
+    }
+
+    /**
+     * Return a dictionary of icon attributes that can be passed to constructor.
+     * @returns {Object}
+     */
+    toAttributes() {
+        return {
+            animation: this._animation
+        }
+    }
+
+    /**
+     * Return the icon that has been previously applied to an element.
+     * @param {jQuery} element
+     * @returns {?qui.icons.Icon} the icon or `null` if no icon has been applied to element
+     */
+    static getFromElement(element) {
+        return element.data(ICON_DATA_ATTR) || null
+    }
+
+}
+
+
+export default Icon

package/js/icons/icons.js

@@ -0,0 +1,16 @@
+/**
+ * @namespace qui.icons
+ */
+
+import * as Stocks from './stocks.js'
+
+
+/**
+ * @alias qui.icons.ANIMATION_SPIN
+ */
+export const ANIMATION_SPIN = 'spin 1s linear infinite'
+
+
+export function init() {
+    Stocks.init()
+}