@qtoggle/qui 0.0.0

package/js/forms/common-fields/jquery-ui-field.js

@@ -0,0 +1,111 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import * as ObjectUtils from '$qui/utils/object.js'
+
+import FormField from '../form-field.js'
+
+
+/**
+ * A form field backed by a jQuery UI widget.
+ * @alias qui.forms.commonfields.JQueryUIField
+ * @extends qui.forms.FormField
+ */
+class JQueryUIField extends FormField {
+
+    /* jQuery UI widget class */
+    static WIDGET_CLASS = ''
+
+
+    /**
+     * @constructs
+     * @param {Object} widgetAttrs attributes to pass to underlying JQueryUI widget
+     * @param {...*} args parent class parameters
+     */
+    constructor({widgetAttrs, ...args}) {
+        super(args)
+
+        this._widgetAttrs = widgetAttrs
+    }
+
+    makeHTML() {
+        let html = super.makeHTML()
+
+        html.addClass(`jquery-ui-${this.constructor.WIDGET_CLASS}`)
+
+        return html
+    }
+
+    focus() {
+        this.getFocusableElement().focus()
+    }
+
+    getFocusableElement() {
+        return this.getWidget()
+    }
+
+    makeWidget() {
+        let attrs = ObjectUtils.copy(this._widgetAttrs)
+
+        /* Always supply field name to widget */
+        attrs['name'] = this.getName()
+
+        let div = $('<div></div>')
+        div[this.constructor.WIDGET_CLASS](attrs)
+
+        return div
+    }
+
+    _widgetCall(...args) {
+        let widget = this.getWidget()
+        return widget[this.constructor.WIDGET_CLASS].apply(widget, args)
+    }
+
+    validateWidget(value) {
+        return null
+    }
+
+    valueToWidget(value) {
+        this._widgetCall('setValue', value)
+    }
+
+    widgetToValue() {
+        return this._widgetCall('getValue')
+    }
+
+    setWidgetReadonly(readonly) {
+        this._widgetCall({readonly: readonly})
+    }
+
+    enableWidget() {
+        this._widgetCall({disabled: false})
+    }
+
+    disableWidget() {
+        this._widgetCall({disabled: true})
+    }
+
+    showWarning(message) {
+        super.showWarning(message)
+        this._widgetCall({warning: message})
+    }
+
+    hideWarning() {
+        super.hideWarning()
+        this._widgetCall({warning: null})
+    }
+
+    showError(message) {
+        super.showError(message)
+        this._widgetCall({error: message})
+    }
+
+    hideError() {
+        super.hideError()
+        this._widgetCall({error: null})
+    }
+
+}
+
+
+export default JQueryUIField

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

@@ -0,0 +1,69 @@
+
+import JQueryUIField from './jquery-ui-field.js'
+
+
+/**
+ * A field backed by colored labels. The value data type is `String[]` (a list of labels) or `Object[]` (a list of
+ * objects with `text`, `color` and `background` fields).
+ * @alias qui.forms.commonfields.LabelsField
+ * @extends qui.forms.commonfields.JQueryUIField
+ */
+class LabelsField extends JQueryUIField {
+
+    static WIDGET_CLASS = 'labels'
+
+
+    // TODO add setters and getters for widget properties
+
+    /**
+     * @constructs
+     * @param {String} [color] the label text color (defaults to `@background-color`)
+     * @param {String} [background] the default label background color, used unless the given labels specify otherwise
+     * (defaults to `@foreground-color`)
+     * @param {Boolean} [chevrons] set to `true` if you want to join labels using chevron-like arrows
+     * @param {Boolean} [clickable] set to `true` if you want your labels to be clickable
+     * @param {Function} [onClick] function to be executed when a label is clicked (see
+     * {@link qui.forms.commonfields.LabelsField#onClick})
+     * @param {...*} args parent class parameters
+     */
+    constructor({
+        color = '@background-color',
+        background = '@foreground-color',
+        chevrons = false,
+        clickable = false,
+        onClick = null,
+        ...args
+    }) {
+        super({
+            widgetAttrs: {
+                color: color,
+                background: background,
+                chevrons: chevrons,
+                clickable: clickable,
+                onClick: function (label, index) {
+                    return that.onClick(label, index)
+                }
+            },
+            ...args
+        })
+
+        if (onClick) {
+            this.onClick = onClick
+        }
+
+        /* "that" needs to be assigned here because we can't refer to "this" before super() */
+        let that = this
+    }
+
+    /**
+     * Called when a label is clicked.
+     * @param {String} label the text of the clicked label
+     * @param {Number} index the index of the clicked label (starting at `0`)
+     */
+    onClick(label, index) {
+    }
+
+}
+
+
+export default LabelsField

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

@@ -0,0 +1,39 @@
+
+import TextField from './text-field.js'
+
+
+/**
+ * A numeric text field. The value data type is `String`.
+ * @alias qui.forms.commonfields.NumericField
+ * @extends qui.forms.commonfields.TextField
+ */
+class NumericField extends TextField {
+
+    static WIDGET_CLASS = 'numericinput'
+
+
+    /**
+     * @constructs
+     * @param {Number} [min] minimum value
+     * @param {Number} [max] maximum value
+     * @param {...*} args parent class parameters
+     */
+    constructor({min = null, max = null, ...args}) {
+        super({widgetAttrs: {min, max}, ...args})
+    }
+
+    widgetToValue() {
+        let value = super.widgetToValue()
+
+        if (value) {
+            return parseFloat(value)
+        }
+        else {
+            return null
+        }
+    }
+
+}
+
+
+export default NumericField

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

@@ -0,0 +1,28 @@
+
+import TextField from './text-field.js'
+
+
+/**
+ * A password text field. The value data type is `String`.
+ * @alias qui.forms.commonfields.PasswordField
+ * @extends qui.forms.commonfields.TextField
+ */
+class PasswordField extends TextField {
+
+    static WIDGET_CLASS = 'passwordinput'
+
+
+    /**
+     * @constructs
+     * @param {Boolean} [clearEnabled] set to `true` to enable clear button
+     * @param {Boolean} [revealOnFocus] set to `true` to enable password revealing when widget is focused
+     * @param {...*} args parent class parameters
+     */
+    constructor({clearEnabled = false, revealOnFocus = false, ...args}) {
+        super({widgetAttrs: {clearEnabled, revealOnFocus}, ...args})
+    }
+
+}
+
+
+export default PasswordField

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

@@ -0,0 +1,26 @@
+
+import TextField from './text-field.js'
+
+
+/**
+ * A phone number text field. The value data type is `String`.
+ * @alias qui.forms.commonfields.PhoneField
+ * @extends qui.forms.commonfields.TextField
+ */
+class PhoneField extends TextField {
+
+    static WIDGET_CLASS = 'phoneinput'
+
+
+    /**
+     * @constructs
+     * @param {...*} args parent class parameters
+     */
+    constructor({...args}) {
+        super(args)
+    }
+
+}
+
+
+export default PhoneField

package/js/forms/common-fields/progress-disk-field.js

@@ -0,0 +1,69 @@
+
+import * as ObjectUtils from '$qui/utils/object.js'
+
+import JQueryUIField from './jquery-ui-field.js'
+
+
+/**
+ * A progress disk field. The value data type is `Number`.
+ * @alias qui.forms.commonfields.ProgressDiskField
+ * @extends qui.forms.commonfields.JQueryUIField
+ */
+class ProgressDiskField extends JQueryUIField {
+
+    static WIDGET_CLASS = 'progressdisk'
+
+
+    /**
+     * @constructs
+     * @param {Number|String} [radius] the disk radius (defaults to `1em`)
+     * @param {String} [caption] the caption template displayed on top of the disk (defaults to `%s%%`)
+     * @param {String} [color] the color (defaults to `@interactive-color`)
+     * @param {...*} args parent class parameters
+     */
+    constructor({radius = '1em', caption = '%s%%', color = '@interactive-color', ...args}) {
+        /* We always prefer having the widget on the same line with its label */
+        ObjectUtils.setDefault(args, 'forceOneLine', true)
+
+        super({widgetAttrs: {radius, caption, color}, ...args})
+    }
+
+    /**
+     * Set radius.
+     * @param {String} radius
+     */
+    setRadius(radius) {
+        this._widgetCall({radius})
+    }
+
+    /**
+     * Set caption.
+     * @param {String} caption
+     */
+    setCaption(caption) {
+        this._widgetCall({caption})
+    }
+
+    /**
+     * Set color.
+     * @param {String} color
+     */
+    setColor(color) {
+        this._widgetCall({color})
+    }
+
+    setForm(form) {
+        // TODO: generalize this code
+        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 ProgressDiskField

package/js/forms/common-fields/push-button-field.js

@@ -0,0 +1,138 @@
+
+import JQueryUIField from './jquery-ui-field.js'
+
+
+/**
+ * A push button field. The value of this field will always be `null`.
+ * @alias qui.forms.commonfields.PushButtonField
+ * @extends qui.forms.commonfields.JQueryUIField
+ */
+class PushButtonField extends JQueryUIField {
+
+    static WIDGET_CLASS = 'pushbutton'
+
+
+    /**
+     * @constructs
+     * @param {String} caption the button caption
+     * @param {Function} [onClick] function to be executed when the button is pushed (see
+     * {@link qui.forms.commonfields.PushButtonField#onClick})
+     * @param {String} caption button caption
+     * @param {String} [style] button style:
+     *  * `"foreground"`
+     *  * `"interactive"` (default)
+     *  * `"highlight"`
+     *  * `"danger"`,
+     *  * `"colored"`
+     * @param {String} [backgroundColor] custom background color (ignored unless `style` is `"colored"`)
+     * @param {String} [backgroundActiveColor] custom background active color (ignored unless `style` is `"colored"`)
+     * @param {String} [foregroundColor] custom foreground color (ignored unless `style` is `"colored"`)
+     * @param {qui.icons.Icon} [icon] an optional button icon
+     * @param {...*} args parent class parameters
+     */
+    constructor({
+        caption,
+        onClick = null,
+        style = 'interactive',
+        backgroundColor = '@interactive-color',
+        backgroundActiveColor = '@interactive-active-color',
+        foregroundColor = '@foreground-interactive-color',
+        icon = null,
+        ...args
+    }) {
+        super({
+            widgetAttrs: {
+                caption,
+                style,
+                backgroundColor,
+                backgroundActiveColor,
+                foregroundColor,
+                icon
+            },
+            ...args
+        })
+
+        if (onClick) {
+            this.onClick = onClick
+        }
+    }
+
+    makeWidget() {
+        let div = super.makeWidget()
+
+        div.addClass('qui-form-push-button')
+        div.on('click', () => this.onClick(this.getForm()))
+
+        if (this.getValueWidth() === 100) {
+            div.css('display', 'block')
+        }
+
+        return div
+    }
+
+    /**
+     * Called when the button is pushed.
+     * @param {qui.forms.Form} form owning form
+     */
+    onClick(form) {
+    }
+
+    valueToWidget(value) {
+    }
+
+    widgetToValue() {
+        return null
+    }
+
+    /**
+     * Update button style.
+     * @param {String} style
+     */
+    setStyle(style) {
+        this._widgetCall({style: style})
+    }
+
+    /**
+     * Update button caption.
+     * @param {String} caption
+     */
+    setCaption(caption) {
+        this._widgetCall({caption: caption})
+    }
+
+    /**
+     * Update background color.
+     * @param {String} color
+     */
+    setBackgroundColor(color) {
+        this._widgetCall({backgroundColor: color})
+    }
+
+    /**
+     * Update background active color.
+     * @param {String} color
+     */
+    setBackgroundActiveColor(color) {
+        this._widgetCall({backgroundActiveColor: color})
+    }
+
+    /**
+     * Update foreground color.
+     * @param {String} color
+     */
+    setForegroundColor(color) {
+        this._widgetCall({foregroundColor: color})
+    }
+
+    /**
+     * Update button icon.
+     * @param {?qui.icons.Icon} icon
+     */
+    setIcon(icon) {
+        this._widgetCall({icon: icon})
+    }
+
+}
+
+
+export default PushButtonField

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

@@ -0,0 +1,51 @@
+
+import JQueryUIField from './jquery-ui-field.js'
+
+
+/**
+ * A slider field. The value data type is `Number`.
+ * @alias qui.forms.commonfields.SliderField
+ * @extends qui.forms.commonfields.JQueryUIField
+ */
+class SliderField extends JQueryUIField {
+
+    static WIDGET_CLASS = 'slider'
+
+
+    // TODO add setters and getters for widget properties
+
+    /**
+     * @constructs
+     * @param {Object[]} [ticks] tick marks (pairs of `label` and `value`)
+     * @param {Number} [ticksStep] display every `ticksStep` tick (defaults to `1`)
+     * @param {Boolean} [equidistant] set to `true` to draw the tick marks equidistantly, even if their corresponding
+     * values are not equally distanced
+     * @param {Number} [fastFactor] determines how fast the increase or decrease functions will work when using
+     * page-up/page-down (defaults to `5`, which is 5 times faster)
+     * @param {Boolean} [continuousChange] set to `false` to only trigger a `change` event at the end of the slider move
+     * @param {...*} args parent class parameters
+     */
+    constructor({
+        ticks = [],
+        ticksStep = 1,
+        equidistant = false,
+        fastFactor = 5,
+        continuousChange = true,
+        ...args
+    }) {
+        super({
+            widgetAttrs: {
+                ticks: ticks,
+                ticksStep: ticksStep,
+                equidistant: equidistant,
+                fastFactor: fastFactor,
+                continuousChange: continuousChange
+            },
+            ...args
+        })
+    }
+
+}
+
+
+export default SliderField

package/js/forms/common-fields/text-area-field.js

@@ -0,0 +1,34 @@
+
+import TextField from './text-field.js'
+
+
+/**
+ * A text area field. The value data type is `String`.
+ * @alias qui.forms.commonfields.TextAreaField
+ * @extends qui.forms.commonfields.TextField
+ */
+class TextAreaField extends TextField {
+
+    static WIDGET_CLASS = 'textarea'
+
+
+    /**
+     * @constructs
+     * @param {Number} [columns] number of columns
+     * @param {Number} [rows] number of rows
+     * @param {Boolean} [wrap] enable automatic content wrapping
+     * @param {?String} [resize] resize mode (one of `null`, `"horizontal"`, `"vertical"` and `"both"`)
+     * @param {...*} args parent class parameters
+     */
+    constructor({columns = null, rows = null, wrap = false, resize = null, ...args}) {
+        super({widgetAttrs: {columns, rows, wrap, resize}, ...args})
+    }
+
+    getInputElement() {
+        return this.getWidget().children('textarea')
+    }
+
+}
+
+
+export default TextAreaField

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

@@ -0,0 +1,89 @@
+
+import {gettext}        from '$qui/base/i18n.js'
+
+import JQueryUIField from './jquery-ui-field.js'
+
+
+/**
+ * A simple text field. The value data type is `String`.
+ * @alias qui.forms.commonfields.TextField
+ * @extends qui.forms.commonfields.JQueryUIField
+ */
+class TextField extends JQueryUIField {
+
+    static WIDGET_CLASS = 'textinput'
+
+
+    /**
+     * @constructs
+     * @param {?String} [placeholder] an empty-text placeholder
+     * @param {Boolean} [clearPlaceholder] set to `true` to clear the placeholder on first change (defaults to `false`)
+     * @param {Boolean|String} [autocomplete] enables or disables field autocomplete (disabled by default); if a string
+     * value is given, it will be used to set the `autocomplete` element attribute
+     * @param {?Number} [minLength] minimum required text length
+     * @param {?Number} [maxLength] maximum allowed text length
+     * @param {?String|RegExp} [pattern] a regular expression used to validate the value
+     * @param {Boolean} [continuousChange] set to `false` to prevent triggering change events at each key stroke
+     * @param {Object} [widgetAttrs] extra attributes to pass to underlying JQueryUI widget
+     * @param {...*} args parent class parameters
+     */
+    constructor({
+        placeholder = null,
+        clearPlaceholder = false,
+        autocomplete = false,
+        minLength = null,
+        maxLength = null,
+        pattern = null,
+        continuousChange = true,
+        widgetAttrs = {},
+        ...args
+    }) {
+        Object.assign(widgetAttrs, {
+            placeholder: placeholder,
+            clearPlaceholder: clearPlaceholder,
+            autocomplete: autocomplete,
+            minLength: minLength,
+            maxLength: maxLength,
+            continuousChange: continuousChange
+        })
+
+        super({widgetAttrs: widgetAttrs, ...args})
+
+        if (typeof pattern === 'string') {
+            pattern = new RegExp(pattern)
+        }
+
+        this._pattern = pattern
+    }
+
+    validateWidget(value) {
+        let error = super.validateWidget(value)
+        if (error) {
+            return error
+        }
+
+        if (!this.isRequired() && !value) {
+            return
+        }
+
+        /* Apply pattern validation, if supplied */
+        if (this._pattern) {
+            let match = value.match(this._pattern)
+            if (match == null) {
+                return gettext('Value does not match required pattern.')
+            }
+        }
+    }
+
+    getInputElement() {
+        return this.getWidget().children('input')
+    }
+
+    getFocusableElement() {
+        return this.getInputElement()
+    }
+
+}
+
+
+export default TextField