@qtoggle/qui 0.0.0

package/js/config.js

@@ -0,0 +1,184 @@
+/**
+ * Configuration registry.
+ * @namespace qui.config
+ */
+
+import * as ObjectUtils from '$qui/utils/object.js'
+
+
+const _TRUE_VALUES = ['true', 'True', 'TRUE', 'on', 'On', 'ON', 'enabled', 'Enabled', 'ENABLED', 1]
+
+const Config = {
+
+    /**
+     * Flag indicating whether app runs in debug mode or not.
+     * @memberof qui.config
+     * @type Boolean
+     */
+    debug: false,
+
+    /**
+     * Build hash used to append to static URLs to prevent caching.
+     * @memberof qui.config
+     * @type String
+     */
+    buildHash: '',
+
+    /**
+     * Flag indicating whether navigation uses URL fragment or regular path.
+     * @memberof qui.config
+     * @type Boolean
+     */
+    navigationUsesFragment: false,
+
+    /**
+     * Common prefix used for all QUI paths.
+     * @memberof qui.config
+     * @type String
+     */
+    navigationBasePrefix: '',
+
+    /**
+     * Application name.
+     * @memberof qui.config
+     * @type String
+     */
+    appName: '',
+
+    /**
+     * Application display name.
+     * @memberof qui.config
+     * @type String
+     */
+    appDisplayName: '',
+
+    /**
+     * Latest application version, indicated by the server.
+     * @memberof qui.config
+     * @type String
+     */
+    appLatestVersion: '',
+
+    /**
+     * Current application version, indicated by the frontend.
+     * @memberof qui.config
+     * @type String
+     */
+    appCurrentVersion: 'unknown-version',
+
+    /**
+     * QUI static base URL.
+     * @memberof qui.config
+     * @type String
+     */
+    quiStaticURL: '',
+
+    /**
+     * App's static base URL; should be identical to {@link qui.config.quiStaticURL} in production mode.
+     * @memberof qui.config
+     * @type String
+     */
+    appStaticURL: '',
+
+    /**
+     * The name of the main QUI script.
+     * @memberof qui.config
+     * @type String
+     */
+    quiIndexName: '',
+
+    /**
+     * The name of the main app script.
+     * @memberof qui.config
+     * @type String
+     */
+    appIndexName: '',
+
+    /**
+     * The theme to be initially loaded, by default.
+     * @memberof qui.config
+     * @type String
+     */
+    defaultTheme: 'dark',
+
+    /**
+     * The list of comma-separated available themes.
+     * @memberof qui.config
+     * @type String
+     */
+    themes: 'dark,light',
+
+    /**
+     * Flag that indicates whether effects are enabled or disabled by default when app is loaded.
+     * @memberof qui.config
+     * @type Boolean
+     */
+    defaultEffectsDisabled: false,
+
+    /**
+     * Default small screen threshold to use when app is loaded.
+     * @memberof qui.config
+     * @type Number
+     */
+    defaultSmallScreenThreshold: 700,
+
+    /**
+     * Default scaling factor to use when app is loaded.
+     * @memberof qui.config
+     * @type Number
+     */
+    defaultScalingFactor: 1,
+
+    /**
+     * Return a configuration item value.
+     * @memberof qui.config
+     * @param {String} name configuration item name
+     * @param {*} [def = null] optional default value returned if missing
+     */
+    get: function (name, def = null) {
+        let nameLower = name.toLowerCase()
+        let value = ObjectUtils.findValue(this, k => k.toLowerCase() === nameLower)
+        if (value === undefined) {
+            value = def
+        }
+
+        return value
+    },
+
+    /**
+     * Set a configuration item value.
+     * @memberof qui.config
+     * @param {String} name configuration item name
+     * @param {*} value new configuration item value
+     */
+    set: function (name, value) {
+        let nameLower = name.toLowerCase()
+        let existingName = Object.keys(this).find(k => k.toLowerCase() === nameLower)
+
+        if (existingName) {
+            let existingValue = this[existingName]
+
+            /* Try to coerce the given type to existing type */
+            if (typeof existingValue !== typeof value) {
+                if (typeof existingValue === 'boolean') {
+                    value = _TRUE_VALUES.some(v => v === value)
+                }
+                else if (typeof existingValue === 'number') {
+                    value = parseFloat(value)
+                }
+            }
+        }
+
+        this[existingName || name] = value
+    },
+
+    dump: function () {
+        return ObjectUtils.filter(this, function (key, value) {
+            return (typeof value !== 'function')
+        })
+    }
+
+}
+
+
+export default Config

package/js/forms/common-fields/check-field.js

@@ -0,0 +1,42 @@
+
+import * as ObjectUtils from '$qui/utils/object.js'
+
+import JQueryUIField from './jquery-ui-field.js'
+
+
+/**
+ * A check box field. The value data type is `Boolean`.
+ * @alias qui.forms.commonfields.CheckField
+ * @extends qui.forms.commonfields.JQueryUIField
+ */
+class CheckField extends JQueryUIField {
+
+    static WIDGET_CLASS = 'checkbutton'
+
+
+    /**
+     * @constructs
+     * @param {String} [onClass] the CSS class to add to the check button in *on* state (defaults to `on`)
+     * @param {...*} args parent class parameters
+     */
+    constructor({onClass = 'on', ...args}) {
+        /* We always prefer having the check box on the same line with its label */
+        ObjectUtils.setDefault(args, 'forceOneLine', true)
+
+        super({widgetAttrs: {onClass: onClass}, ...args})
+    }
+
+    setForm(form) {
+        super.setForm(form)
+
+        /* On compact forms, reduce the value width when showing on the same line with label, so that label can take as
+         * much space as needed */
+        if (form.isCompact() && this.isForceOneLine() && this.getValueWidth() == null) {
+            this.setValueWidth(0)
+        }
+    }
+
+}
+
+
+export default CheckField

package/js/forms/common-fields/choice-buttons-field.js

@@ -0,0 +1,30 @@
+
+import JQueryUIField from './jquery-ui-field.js'
+
+
+/**
+ * A field backed by choice buttons. The value data type can be anything.
+ * @alias qui.forms.commonfields.ChoiceButtonsField
+ * @extends qui.forms.commonfields.JQueryUIField
+ */
+class ChoiceButtonsField extends JQueryUIField {
+
+    static WIDGET_CLASS = 'choicebuttons'
+
+
+    /**
+     * @constructs
+     * @param {Object[]|Object[][]} choices choices or groups of choices (pairs/arrays of pairs of `label` and `value`)
+     * @param {String} [onClass] the CSS class to add to buttons in *on* state (defaults to `on`)
+     * @param {...*} args parent class parameters
+     */
+    constructor({choices, onClass = 'on', ...args}) {
+        super({widgetAttrs: {choices: choices, onClass: onClass}, ...args})
+    }
+
+    // TODO add setters and getters for choices
+
+}
+
+
+export default ChoiceButtonsField

package/js/forms/common-fields/color-combo-field.js

@@ -0,0 +1,37 @@
+
+import * as Colors from '$qui/utils/colors.js'
+
+import JQueryUIField from './jquery-ui-field.js'
+
+
+/**
+ * A color combo field based on preconfigured combo choices. The value data type is `String`.
+ * @alias qui.forms.commonfields.ColorComboField
+ * @extends qui.forms.commonfields.JQueryUIField
+ */
+class ColorComboField extends JQueryUIField {
+
+    static WIDGET_CLASS = 'colorcombo'
+
+
+    /**
+     * @constructs
+     * @param {Boolean} [filterEnabled] set to `true` to enable filter input box
+     * @param {...*} args parent class parameters
+     */
+    constructor({filterEnabled = false, ...args}) {
+        super({widgetAttrs: {filterEnabled: filterEnabled}, ...args})
+    }
+
+    valueToWidget(value) {
+        if (value && typeof value === 'string' && !value.startsWith('@')) {
+            value = Colors.normalize(value)
+        }
+
+        super.valueToWidget(value)
+    }
+
+}
+
+
+export default ColorComboField

package/js/forms/common-fields/combo-field.js

@@ -0,0 +1,108 @@
+
+import JQueryUIField from './jquery-ui-field.js'
+
+
+/**
+ * A combo box field. The value data type can be anything.
+ * @alias qui.forms.commonfields.ComboField
+ * @extends qui.forms.commonfields.JQueryUIField
+ */
+class ComboField extends JQueryUIField {
+
+    static WIDGET_CLASS = 'combo'
+
+
+    // TODO add setters and getters for widget properties
+
+    /**
+     * @constructs
+     * @param {Object[]} [choices] choices (pairs of `label` and `value`)
+     * @param {Function} [makeChoices] a function that generates choices (see
+     * {@link qui.forms.commonfields.ComboField#makeChoices}))
+     * @param {Number} [fastFactor] determines how fast the page-up/page-down actions work (defaults to `5`)
+     * @param {Boolean} [filterEnabled] set to `true` to enable filter input box
+     * @param {Function} [filterFunc] custom filtering function (see
+     * {@link qui.forms.commonfields.ComboField#makeChoices})
+     * @param {...*} args parent class parameters
+     */
+
+    constructor({
+        choices = [],
+        makeChoices = null,
+        fastFactor = null,
+        filterEnabled = false,
+        filterFunc = null,
+        ...args
+    }) {
+        super({
+            widgetAttrs: {
+                choices: choices,
+                fastFactor: fastFactor,
+                filterEnabled: filterEnabled,
+                makeChoices: function () {
+                    return that.makeChoices()
+                }
+            },
+            ...args
+        })
+
+        /* "that" needs to be assigned here because we can't refer to "this" before super() */
+        let that = this
+
+        this._filterFunc = filterFunc
+        this._makeChoices = makeChoices
+
+        if (filterFunc || (this.filterFunc !== ComboField.prototype.filterFunc)) {
+            this._widgetCall('option', {filterFunc: this.filterFunc.bind(this)})
+        }
+    }
+
+    /**
+     * Set the list of choices.
+     * @param {Object[]} choices choices (pairs of `label` and `value`)
+     */
+    setChoices(choices) {
+        this._widgetCall({choices: choices})
+    }
+
+    /**
+     * Create choices.
+     * @returns {Object[]} choices (pairs of `label` and `value`)
+     */
+    makeChoices() {
+        if (this._makeChoices) {
+            return this._makeChoices()
+        }
+
+        return []
+    }
+
+    /**
+     * Tell if a choice matches a search text or not.
+     * @param {Object} choice
+     * @param {String} searchText
+     * @returns {Boolean}
+     */
+    filterFunc(choice, searchText) {
+        if (this._filterFunc) {
+            return this._filterFunc(choice, searchText)
+        }
+
+        return true
+    }
+
+    /**
+     * Update the list of choices, calling makeChoices.
+     */
+    updateChoices() {
+        let value = this._widgetCall('getValue')
+        this._widgetCall('updateChoices')
+        if (value != null) {
+            this._widgetCall('setValue', value)
+        }
+    }
+
+}
+
+
+export default ComboField

package/js/forms/common-fields/common-fields.js

@@ -0,0 +1,23 @@
+/**
+ * @namespace qui.forms.commonfields
+ */
+
+export {default as CheckField}         from './check-field.js'
+export {default as ChoiceButtonsField} from './choice-buttons-field.js'
+export {default as ColorComboField}    from './color-combo-field.js'
+export {default as ComboField}         from './combo-field.js'
+export {default as CompositeField}     from './composite-field.js'
+export {default as CustomHTMLField}    from './custom-html-field.js'
+export {default as EmailField}         from './email-field.js'
+export {default as FilePickerField}    from './file-picker-field.js'
+export {default as JQueryUIField}      from './jquery-ui-field.js'
+export {default as LabelsField}        from './labels-field.js'
+export {default as NumericField}       from './numeric-field.js'
+export {default as PasswordField}      from './password-field.js'
+export {default as PhoneField}         from './phone-field.js'
+export {default as ProgressDiskField}  from './progress-disk-field.js'
+export {default as PushButtonField}    from './push-button-field.js'
+export {default as SliderField}        from './slider-field.js'
+export {default as TextAreaField}      from './text-area-field.js'
+export {default as TextField}          from './text-field.js'
+export {default as UpDownField}        from './up-down-field.js'

package/js/forms/common-fields/composite-field.js

@@ -0,0 +1,132 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import FormField from '../form-field.js'
+
+
+/**
+ * A form field composed by multiple subfields.
+ * @alias qui.forms.commonfields.CompositeField
+ * @extends qui.forms.FormField
+ */
+class CompositeField extends FormField {
+
+    /**
+     * @constructs
+     * @param {qui.forms.FormField[]} fields the list of subfields
+     * @param {String} [flow] arrange subfield widgets vertically (`"vertical"`) or horizontally (`"horizontal"`,
+     * default)
+     * @param {Number} [columns] number of columns (unlimited by default, when `flow` is `"horizontal"`, otherwise
+     * defaults to `1`)
+     * @param {Number} [rows] number of rows (unlimited by default, when `flow` is `"vertical"`, otherwise defaults to
+     * `1`)
+     * @param {Boolean} [equalSize] set to `true` to make all cells of equal width/height (defaults to `false`)
+     * @param {...*} args parent class parameters
+     */
+    constructor({fields, flow = 'horizontal', columns = null, rows = null, equalSize = false, ...args}) {
+        super(args)
+
+        this._fields = fields.map(this._preprocessField)
+        this._flow = flow
+        this._columns = columns
+        this._rows = rows
+        this._equalSize = equalSize
+    }
+
+    focus() {
+        /* Focus the first field */
+        this._fields.some(f => f.focus(), true)
+    }
+
+    makeWidget() {
+        let div = $('<div></div>', {class: 'qui-composite-field-container'})
+        let sizeSpec = this._equalSize ? '1fr' : 'auto'
+        if (this._flow === 'horizontal') {
+            if (this._columns) {
+                div.css('grid-template-columns', `repeat(${this._columns}, ${sizeSpec})`)
+                div.css('grid-auto-flow', 'row')
+            }
+            else {
+                div.css('grid-auto-flow', 'column')
+            }
+        }
+        else {
+            if (this._rows) {
+                div.css('grid-template-rows', `repeat(${this._rows}, ${sizeSpec})`)
+                div.css('grid-auto-flow', 'column')
+            }
+            else {
+                div.css('grid-auto-flow', 'row')
+            }
+        }
+
+        this._fields.forEach(function (field) {
+            div.append(field.getHTML())
+
+        })
+
+        return div
+    }
+
+    validateWidget(value) {
+        /* Return the first validation error among fields */
+
+        let error = null
+        this._fields.some(function (field) {
+            let e = field.validateWidget(value[field.getName()])
+            if (e != null) {
+                error = e
+                return true
+            }
+        })
+
+        return error
+    }
+
+    valueToWidget(value) {
+        this._fields.forEach(f => f.valueToWidget(value[f.getName()]))
+    }
+
+    widgetToValue() {
+        return Object.fromEntries(this._fields.map(f => [f.getName(), f.widgetToValue()]))
+    }
+
+    setWidgetReadonly(readonly) {
+        this._fields.forEach(f => f.setWidgetReadonly(readonly))
+    }
+
+    enableWidget() {
+        this._fields.forEach(f => f.enableWidget())
+    }
+
+    disableWidget() {
+        this._fields.forEach(f => f.disableWidget())
+    }
+
+    setForm(form) {
+        super.setForm(form)
+
+        this._fields.forEach(f => f.setForm(form))
+    }
+
+    /**
+     * Return the subfield with a given name. If no such field is found, `null` is returned.
+     * @param {String} name the name of the subfield
+     * @returns {?qui.forms.FormField}
+     */
+    getField(name) {
+        return this._fields.find(f => f.getName() === name) || null
+    }
+
+    _preprocessField(field) {
+        field.setLabel('') /* Subfields of composite field can't have label */
+        field.setValueWidth(100) /* The value always occupies the entire space */
+        field._forceOneLine = true // TODO: this should be a field setter
+
+        return field
+    }
+
+}
+
+
+export default CompositeField

package/js/forms/common-fields/custom-html-field.js

@@ -0,0 +1,51 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import FormField from '../form-field.js'
+
+
+/**
+ * A form field whose widget's HTML content is supplied by user.
+ * @alias qui.forms.commonfields.CustomHTMLField
+ * @extends qui.forms.FormField
+ */
+class CustomHTMLField extends FormField {
+
+    /**
+     * @constructs
+     * @param {String|jQuery} content the HTML content
+     * @param {...*} args parent class parameters
+     */
+    constructor({content, ...args}) {
+        super(args)
+
+        if (typeof content === 'string') {
+            content = $(content)
+        }
+        this._content = content
+    }
+
+    makeWidget() {
+        return this._content
+    }
+
+    valueToWidget(value) {
+    }
+
+    widgetToValue() {
+        return null
+    }
+
+    setWidgetReadonly(readonly) {
+    }
+
+    enableWidget() {
+    }
+
+    disableWidget() {
+    }
+
+}
+
+
+export default CustomHTMLField

package/js/forms/common-fields/email-field.js

@@ -0,0 +1,30 @@
+
+import TextField from './text-field.js'
+
+
+/**
+ * An email text field. The value data type is `String`.
+ * @alias qui.forms.commonfields.EmailField
+ * @extends qui.forms.commonfields.TextField
+ */
+class EmailField extends TextField {
+
+    static WIDGET_CLASS = 'emailinput'
+
+
+    /**
+     * @constructs
+     * @param {...*} args parent class parameters
+     */
+    constructor({...args}) {
+        super(args)
+    }
+
+    validateWidget(value) {
+        return null // TODO implement me
+    }
+
+}
+
+
+export default EmailField

package/js/forms/common-fields/file-picker-field.js

@@ -0,0 +1,46 @@
+
+import JQueryUIField from './jquery-ui-field.js'
+
+
+/**
+ * A file picker field. The value data type is `File[]`.
+ * @alias qui.forms.commonfields.FilePickerField
+ * @extends qui.forms.commonfields.JQueryUIField
+ */
+class FilePickerField extends JQueryUIField {
+
+    static WIDGET_CLASS = 'filepicker'
+
+
+    /**
+     * @constructs
+     * @param {?String} [placeholder] an empty-selection placeholder
+     * @param {?String[]} [accept] an optional list of file types to accept
+     * @param {Boolean} [multiple] enable or disable multiple file selection (disabled by default)
+     * @param {Object} [widgetAttrs] extra attributes to pass to underlying JQueryUI widget
+     * @param {...*} args parent class parameters
+     */
+    constructor({
+        placeholder = null,
+        accept = null,
+        multiple = false,
+        widgetAttrs = {},
+        ...args
+    }) {
+        Object.assign(widgetAttrs, {
+            placeholder: placeholder,
+            accept: accept,
+            multiple: multiple
+        })
+
+        super({widgetAttrs: widgetAttrs, ...args})
+    }
+
+    getFocusableElement() {
+        return this.getWidget().children('input')
+    }
+
+}
+
+
+export default FilePickerField