@qtoggle/qui 0.0.0

package/js/widgets/common-widgets/file-picker.js

@@ -0,0 +1,133 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import {gettext}         from '$qui/base/i18n.js'
+import StockIcon         from '$qui/icons/stock-icon.js'
+import * as StringUtils  from '$qui/utils/string.js'
+
+import * as BaseWidget from '../base-widget.js' /* Needed */
+
+
+$.widget('qui.filepicker', $.qui.basewidget, {
+
+    options: {
+        name: '',
+        placeholder: null,
+        accept: null,
+        multiple: false,
+        readonly: false,
+        disabled: false
+    },
+
+    _create: function () {
+        this.element.addClass('qui-file-picker')
+
+        /* Actual file input element */
+        this._input = $('<input>', {type: 'file'})
+        this.element.append(this._input)
+        this._input.on('change', function () {
+            this._button.pushbutton({caption: this.prepareCaption()})
+        }.bind(this))
+
+        /* Button */
+        this._button = $('<div>', {class: 'qui-file-picker-button qui-push-button'}).pushbutton({
+            caption: this.prepareCaption(),
+            icon: new StockIcon({name: 'file'})
+        })
+        this.element.append(this._button)
+        this._button.on('click', function () {
+            if (!this.options.readonly) {
+                this._input.trigger('click')
+            }
+        }.bind(this))
+
+        if (this.options.name) {
+            this._input.attr('name', this.options.name)
+        }
+
+        if (this.options.accept) {
+            this._input.attr('accept', this.options.accept.join(','))
+        }
+        if (this.options.multiple) {
+            this._input.attr('multiple', 'multiple')
+        }
+        if (this.options.readonly) {
+            this._input.attr('readonly', 'readonly')
+        }
+        if (this.options.disabled) {
+            this._input.attr('disabled', 'disabled')
+        }
+
+        /* Manually propagate some events to parent */
+        this._input.on('focus blur', function (e) {
+            this.element.triggerHandler(e.type)
+        }.bind(this))
+    },
+
+    _setOption: function (key, value) {
+        this._super(key, value)
+
+        switch (key) {
+            case 'accept':
+                if (value) {
+                    this._input.attr('accept', value.join(','))
+                }
+                else {
+                    this._input.removeAttr('accept')
+                }
+                break
+
+            case 'multiple':
+                if (value) {
+                    this._input.attr('multiple', 'multiple')
+                }
+                else {
+                    this._input.removeAttr('multiple')
+                }
+                break
+
+            case 'disabled':
+                this._button.pushbutton({disabled: value})
+                break
+
+            case 'readonly':
+                this._button.pushbutton({readonly: value})
+                break
+
+            case 'placeholder':
+                this._button.pushbutton({caption: this.prepareCaption()})
+                break
+
+            case 'warning':
+                this._button.pushbutton({style: value != null ? 'highlight' : 'interactive'})
+                break
+
+            case 'error':
+                this._button.pushbutton({style: value != null ? 'danger' : 'interactive'})
+                break
+        }
+    },
+
+    getValue: function () {
+        let files = this._input[0].files
+        return Array.prototype.slice.call(files)
+    },
+
+    setValue: function (value) {
+        /* Does nothing */
+    },
+
+    prepareCaption: function () {
+        let files = this._input[0].files
+        if (files.length > 1) {
+            return StringUtils.formatPercent('%(count)d files selected', {count: files.length})
+        }
+        else if (files.length > 0) {
+            return files[0].name
+        }
+        else {
+            return this.options.placeholder || gettext('Choose...')
+        }
+    }
+
+})

package/js/widgets/common-widgets/labels.js

@@ -0,0 +1,132 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import * as Theme from '$qui/theme.js'
+
+import * as BaseWidget from '../base-widget.js' /* Needed */
+
+
+$.widget('qui.labels', $.qui.basewidget, {
+
+    options: {
+        color: '@foreground-color',
+        background: '@background-color',
+        disabled: false,
+        chevrons: false,
+        clickable: false,
+        onClick(label, index) {}
+    },
+
+    _create: function () {
+        this.element.addClass('qui-labels-container')
+        if (this.options.disabled) {
+            this.element.addClass('disabled')
+        }
+        if (this.options.chevrons) {
+            this.element.addClass('chevrons')
+        }
+        if (this.options.clickable) {
+            this.element.addClass('clickable')
+        }
+
+        this._labels = []
+    },
+
+    _makeLabel: function (labelInfo) {
+        let labelSpan = $('<span></span>', {class: 'qui-label'})
+
+        let defColor = Theme.getColor(this.options.color)
+        let defBackground = Theme.getColor(this.options.background)
+
+        let color = defColor
+        let background = defBackground
+
+        let text = labelInfo
+        if (typeof labelInfo !== 'string') {
+            text = labelInfo.text
+            if (labelInfo.color) {
+                color = labelInfo.color
+                labelSpan.data('custom-color', true)
+            }
+            if (labelInfo.background) {
+                background = labelInfo.background
+                labelSpan.data('custom-background', true)
+            }
+        }
+
+        labelSpan.html(text)
+        labelSpan.css({
+            'color': color,
+            'background': background,
+            'border-color': background
+        })
+
+        if (this.options.clickable) {
+            labelSpan.addClass('qui-base-button')
+        }
+
+        return labelSpan
+    },
+
+    getValue: function () {
+        return this._labels.map(l => l.html())
+    },
+
+    setValue: function (labels) {
+        this.element.html('')
+        this._labels = []
+
+        labels.forEach(function (labelInfo, index) {
+
+            let label = this._makeLabel(labelInfo)
+            this._labels.push(label)
+            this.element.append(label)
+
+            if (this.options.clickable) {
+                label.on('click', function () {
+                    this.options.onClick(label.text(), index)
+                }.bind(this))
+            }
+
+        }, this)
+    },
+
+    _setOption: function (key, value) {
+        this._super(key, value)
+
+        switch (key) {
+            case 'color':
+                this._labels.forEach(function (label) {
+                    if (!label.data('custom-background')) {
+                        label.css('color', value)
+                    }
+                })
+                break
+
+            case 'background':
+                this._labels.forEach(function (label) {
+                    if (!label.data('custom-background')) {
+                        label.css({
+                            'background': value,
+                            'border-color': value
+                        })
+                    }
+                })
+                break
+
+            case 'disabled':
+                this.element.toggleClass('disabled', value)
+                break
+
+            case 'chevrons':
+                this.element.toggleClass('chevrons', value)
+                break
+
+            case 'clickable':
+                this.element.children('span.qui-label').toggleClass('qui-base-button', value)
+                this.element.toggleClass('clickable', value)
+                break
+        }
+    }
+
+})

package/js/widgets/common-widgets/numeric-input.js

@@ -0,0 +1,49 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import {asap} from '$qui/utils/misc.js'
+
+import * as TextInput from './text-input.js' /* Needed */
+
+
+// TODO do not allow user input of non-numeric characters
+$.widget('qui.numericinput', $.qui.textinput, {
+
+    options: {
+        min: null,
+        max: null
+    },
+
+    type: 'number',
+
+    _create: function () {
+        this._super('_create')
+
+        this._setOption('min', this.options.min)
+        this._setOption('max', this.options.max)
+
+        /* Trigger change event on widget element when scrolling, but only if focused */
+        this._input.on('mousewheel', function (e) {
+            if (!this._input.is(':focus')) {
+                e.preventDefault()
+                return
+            }
+
+            asap(function () {
+                this.element.trigger('change')
+            }.bind(this))
+        }.bind(this))
+    },
+
+    _setOption: function (key, value) {
+        this._super(key, value)
+
+        switch (key) {
+            case 'min':
+            case 'max':
+                this._input.attr(key, value != null ? value : '')
+                break
+        }
+    }
+
+})

package/js/widgets/common-widgets/password-input.js

@@ -0,0 +1,91 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import StockIcon from '$qui/icons/stock-icon.js'
+
+import * as TextInput from './text-input.js' /* Needed */
+
+
+$.widget('qui.passwordinput', $.qui.textinput, {
+
+    options: {
+        clearEnabled: false,
+        revealOnFocus: false
+    },
+
+    type: 'password',
+    _autocomplete_on: 'current-password',
+    _autocomplete_off: 'new-password',
+
+    _create: function () {
+        this._super()
+
+        this._clearButton = null
+        if (this.options.clearEnabled) {
+            this._clearButton = this._makeClearButton()
+            this.element.addClass('clear-enabled')
+            this.element.append(this._clearButton)
+        }
+
+        this.element.on('focus', function () {
+
+            if (this.options.revealOnFocus) {
+                this._input.attr('type', 'text')
+            }
+
+        }.bind(this))
+
+        this.element.on('blur', function () {
+
+            if (this.options.revealOnFocus) {
+                this._input.attr('type', this.type)
+            }
+
+        }.bind(this))
+    },
+
+    _makeClearButton: function () {
+        let clearIcon = $('<div></div>', {class: 'qui-icon qui-password-input-clear-icon'})
+        let variant = 'interactive'
+        if (this.options.error != null) {
+            variant = 'error'
+        }
+        else if (this.options.warning != null) {
+            variant = 'warning'
+        }
+        new StockIcon({
+            name: 'close', variant: variant,
+            activeName: 'close', activeVariant: 'background',
+            scale: 0.5
+        }).applyTo(clearIcon)
+
+        let clearButton = $('<div></div>', {class: 'qui-base-button qui-password-input-clear-button'})
+        clearButton.append(clearIcon)
+
+        clearButton.on('click', function () {
+
+            this._input.val('')
+            this.element.trigger('change')
+
+        }.bind(this))
+
+        return clearButton
+    },
+
+    _setOption: function (key, value) {
+        this._super(key, value)
+
+        switch (key) {
+            case 'warning':
+            case 'error':
+                /* When warning or error change, we need to rebuild the clear button icon */
+                if (this._clearButton) {
+                    let newClearButton = this._makeClearButton()
+                    this._clearButton.replaceWith(newClearButton)
+                    this._clearButton = newClearButton
+                }
+                break
+        }
+    }
+
+})

package/js/widgets/common-widgets/phone-input.js

@@ -0,0 +1,7 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import * as TextInput from './text-input.js' /* Needed */
+
+
+$.widget('qui.phoneinput', $.qui.textinput, {type: 'tel'}) // TODO do not allow user input of non-phone characters

package/js/widgets/common-widgets/progress-disk.js

@@ -0,0 +1,174 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import * as Theme       from '$qui/theme.js'
+import * as CSS         from '$qui/utils/css.js'
+import * as StringUtils from '$qui/utils/string.js'
+
+import * as BaseWidget from '../base-widget.js' /* Needed */
+
+
+$.widget('qui.progressdisk', $.qui.basewidget, {
+
+    options: {
+        radius: '1em',
+        caption: '%s%%',
+        color: '@interactive-color',
+        disabled: false
+    },
+
+    _create: function () {
+        let ns = 'http://www.w3.org/2000/svg'
+
+        /* Root svg element */
+        this._svg = document.createElementNS(ns, 'svg')
+
+        /* Ring */
+        this._ring = document.createElementNS(ns, 'ellipse')
+        this._ring.setAttribute('class', 'qui-progress-disk-ring')
+        this._svg.appendChild(this._ring)
+
+        /* Cursor */
+        this._cursor = document.createElementNS(ns, 'path')
+        this._cursor.setAttribute('class', 'qui-progress-disk-cursor')
+        this._svg.appendChild(this._cursor)
+
+        /* Label */
+        this._label = $('<div></div>', {class: 'qui-progress-disk-label'})
+
+        this._curVal = 0
+        this._setValue(this._curVal)
+
+        this.element.addClass('qui-progress-disk-container')
+
+        if (this.options.disabled) {
+            this.element.addClass('disabled')
+        }
+
+        this.element.append(this._svg)
+        this.element.append(this._label)
+    },
+
+    getValue: function () {
+        return this._curVal
+    },
+
+    setValue: function (value) {
+        this._setValue(this._validate(value))
+    },
+
+    _setValue: function (value) {
+        this._curVal = value
+
+        if (value != null && value >= 0) {
+            this._label.html(StringUtils.formatPercent(this.options.caption, value.toFixed(0)))
+            this.element.removeClass('no-value')
+        }
+        else {
+            this._curVal = -1
+            this._label.html('')
+            this.element.addClass('no-value')
+        }
+
+        this._updateSVG()
+    },
+
+    _validate: function (value) {
+        value = parseFloat(value)
+        if (isNaN(value)) {
+            return -1
+        }
+
+        value = Math.max(-1, value)
+        value = Math.min(100, value)
+
+        return value
+    },
+
+    _makeArcPath: function (x, y, startAngle, endAngle, radius) {
+        let aFlag = '0'
+        if (endAngle - startAngle >= 180) {
+            aFlag = '1'
+        }
+        if (endAngle >= 360) {
+            endAngle = 359.9999
+        }
+
+        let x1 = x + radius * Math.cos(Math.PI * startAngle / 180)
+        let y1 = y + radius * Math.sin(Math.PI * startAngle / 180)
+        let x2 = x + radius * Math.cos(Math.PI * endAngle / 180)
+        let y2 = y + radius * Math.sin(Math.PI * endAngle / 180)
+        return (`M ${x1} ${y1} A ${radius} ${radius} 0 ${aFlag} 1 ${x2} ${y2}`)
+    },
+
+    _updateSVG: function () {
+        let isSmall = parseFloat(this.options.radius) < 2
+        let thickness = parseFloat(this.options.radius) / 4
+
+        this._label.toggleClass('small', isSmall)
+
+        let width = CSS.mulValue(this.options.radius, 2)
+        let fWidth = parseFloat(width)
+        let oRadius = parseFloat(this.options.radius)
+        let iRadius = oRadius - thickness / 2
+        let color = Theme.getColor(this.options.color)
+
+        this.element.width(width)
+        this.element.height(width)
+        this.element.css('line-height', width)
+
+        this._svg.setAttribute('width', width)
+        this._svg.setAttribute('height', width)
+        this._svg.setAttribute('viewBox', `0 0 ${fWidth} ${fWidth}`)
+
+        this._ring.setAttribute('cx', oRadius.toString())
+        this._ring.setAttribute('cy', oRadius.toString())
+        this._ring.setAttribute('rx', iRadius.toString())
+        this._ring.setAttribute('ry', iRadius.toString())
+        this._ring.setAttribute('stroke-width', thickness.toString())
+        this._ring.setAttribute('stroke', color)
+
+        this._cursor.setAttribute('stroke-width', thickness.toString())
+        this._cursor.setAttribute('stroke', color)
+
+        if (this._curVal >= 0) {
+            this._updateSVGPercent(iRadius, oRadius)
+        }
+        else {
+            this._updateSVGLoader(iRadius, oRadius)
+        }
+    },
+
+    _updateSVGPercent: function (iRadius, oRadius) {
+        let angle = 360 * this._curVal / 100
+        let path = this._makeArcPath(oRadius, oRadius, 0, angle, iRadius)
+
+        this._cursor.setAttribute('d', path)
+    },
+
+    _updateSVGLoader: function (iRadius, oRadius) {
+        let path = this._makeArcPath(oRadius, oRadius, -90, 0, iRadius)
+
+        this._cursor.setAttribute('d', path)
+    },
+
+    _setOption: function (key, value) {
+        this._super(key, value)
+
+        switch (key) {
+            case 'radius':
+            case 'color':
+                this._updateSVG()
+                break
+
+            case 'disabled':
+                this.element.toggleClass('disabled', value)
+                break
+
+            case 'caption':
+                this._setValue(this._curVal)
+                break
+        }
+    }
+
+})