@qtoggle/qui 0.0.0

package/js/widgets/common-widgets/push-button.js

@@ -0,0 +1,155 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import * as Theme  from '$qui/theme.js'
+import * as Colors from '$qui/utils/colors.js'
+
+import * as BaseWidget from '../base-widget.js' /* Needed */
+
+
+const STYLES = [
+    'foreground',
+    'interactive',
+    'highlight',
+    'danger',
+    'colored'
+]
+
+
+$.widget('qui.pushbutton', $.qui.basewidget, {
+
+    options: {
+        style: 'interactive',
+        caption: 'Button',
+        backgroundColor: '@interactive-color',
+        backgroundActiveColor: '@interactive-active-color',
+        foregroundColor: '@foreground-interactive-color',
+        icon: null,
+        disabled: false
+    },
+
+    _create: function () {
+        let widget = this
+
+        this.element.addClass('qui-base-button qui-push-button')
+        if (this.options.disabled) {
+            this.element.addClass('disabled')
+        }
+        else {
+            this.element.attr('tabIndex', 0) /* Make element focusable */
+        }
+
+        this._setStyle(this.options.style)
+        this._setIcon(this.options.icon)
+        this._setCaption(this.options.caption)
+
+        this.element.on('click', function (e) {
+            if (widget.options.disabled) {
+                e.stopImmediatePropagation()
+            }
+        })
+
+        /* When specifying custom colors, we have to manually update background color */
+        this.element.on('pressed released', () => this._updateStyle())
+
+        this.element.on('keydown', function (e) {
+            if (e.which === 32) {
+                this.element.trigger('click')
+            }
+        }.bind(this))
+    },
+
+    _setStyle: function (style) {
+
+        this.element.removeClass(STYLES.map(s => `qui-${s}-button`))
+        this.element.addClass(`qui-${style}-button`)
+
+        this._updateStyle()
+    },
+
+    _updateStyle: function () {
+        if (this.options.style === 'colored' && !this.options.disabled) {
+            if (this.element.hasClass('active')) {
+                this.element.css('background', Theme.getColor(this.options.backgroundActiveColor))
+            }
+            else {
+                this.element.css('background', Theme.getColor(this.options.backgroundColor))
+            }
+
+            this.element.css('color', Theme.getColor(this.options.foregroundColor))
+
+            /* Manually compute and supply box-shadow focus color */
+            let shadowColor = Colors.alpha(Theme.getColor(this.options.backgroundColor), 0.3)
+            this.element[0].style.setProperty('--focus-shadow-color', shadowColor)
+        }
+        else {
+            this.element.css('background', '')
+            this.element.css('color', '')
+        }
+    },
+
+    _setIcon: function (icon) {
+        this.element.toggleClass('has-icon', icon)
+        this.element.children('div.qui-push-button-icon').remove()
+
+        if (icon) {
+            let iconDiv = $('<div></div>', {class: 'qui-push-button-icon'})
+            let variant = 'foreground-interactive' /* Default */
+
+            if (this.options.disabled) {
+                variant = 'disabled'
+            }
+            else if ((this.options.style === 'colored') && this.options.foregroundColor.startsWith('@')) {
+                variant = this.options.foregroundColor.slice(1, -6)
+            }
+
+            icon = icon.alterDefault({variant: variant})
+            icon = icon.alter({scale: 0.75})
+            icon.applyTo(iconDiv)
+
+            this.element.prepend(iconDiv)
+        }
+    },
+
+    _setCaption: function (caption) {
+        this.element.children('span.qui-push-button-caption').remove()
+
+        let captionDiv = $('<span></span>', {class: 'qui-push-button-caption'})
+        captionDiv.html(caption)
+
+        this.element.append(captionDiv)
+    },
+
+    _setOption: function (key, value) {
+        this._super(key, value)
+
+        switch (key) {
+            case 'disabled':
+                this.element.toggleClass('disabled', value)
+                if (value) {
+                    this.element.removeAttr('tabIndex')
+                }
+                else {
+                    this.element.attr('tabIndex', 0)
+                }
+
+                this._updateStyle()
+                break
+
+            case 'caption':
+                this._setCaption(value)
+                break
+
+            case 'style':
+                this._setStyle(value)
+                /* Icon must also be updated as the foreground color might have changed */
+                this._setIcon(this.options.icon)
+                break
+
+            case 'icon':
+                this._setIcon(value)
+                break
+        }
+    }
+
+})

package/js/widgets/common-widgets/slider.js

@@ -0,0 +1,455 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import * as Gestures from '$qui/utils/gestures.js'
+
+import * as BaseWidget from '../base-widget.js' /* Needed */
+
+
+const TEMPORARY_SHOW_VALUE_TIMEOUT = 500 /* Seconds */
+
+
+$.widget('qui.slider', $.qui.basewidget, {
+
+    options: {
+        value: 0,
+        ticks: [{label: 0, value: 0}, {label: 50, value: 50}, {label: 100, value: 100}],
+        ticksStep: 1,
+        continuousChange: true,
+        equidistant: false,
+        fastFactor: 5,
+        caption: '%s',
+        readonly: false,
+        disabled: false
+    },
+
+    _create: function () {
+        /* Create the widget elements */
+
+        this.element.addClass('qui-slider')
+        if (this.options.readonly) {
+            this.element.addClass('readonly')
+        }
+        if (this.options.disabled) {
+            this.element.addClass('disabled')
+        }
+        else {
+            this.element.attr('tabIndex', 0) /* Make the container focusable */
+        }
+
+        this._labels = $('<div></div>', {class: 'qui-slider-labels'})
+        this.element.append(this._labels)
+
+        this._barContainer = $('<div></div>', {class: 'qui-slider-bar-container'})
+        this.element.append(this._barContainer)
+
+        this._bar = $('<div></div>', {class: 'qui-slider-bar'})
+        this._barContainer.append(this._bar)
+
+        this._cursor = $('<div></div>', {class: 'qui-slider-cursor qui-base-button'})
+        this._bar.append(this._cursor)
+
+        this._cursorLabel = $('<span></span>', {class: 'qui-slider-label qui-slider-cursor-label'})
+        this._labels.append(this._cursorLabel)
+
+        this._temporaryShowValueHandle = null
+        this._isDragged = false
+
+        this._maxVal = this.options.value
+        this._minVal = this.options.value
+        this._curVal = this.options.value
+
+        let widget = this
+
+        Gestures.enableDragging(
+            this.element,
+            /* onMove = */ function (elemX, elemY, deltaX, deltaY, pageX, pageY) {
+                if (widget.options.readonly) {
+                    return
+                }
+
+                let offset = widget._bar.offset()
+                let pos = pageX - offset.left
+                pos = pos / widget._getWidth()
+                pos = widget._bestPos(pos)
+
+                widget._setPos(pos)
+
+                if (widget.options.continuousChange) {
+                    widget.element.trigger('change', widget._curVal)
+                }
+            },
+            /* onBegin = */ function () {
+                if (widget.options.readonly || widget.options.disabled) {
+                    return false
+                }
+
+                widget.element.focus()
+                widget.element.addClass('active')
+                widget._isDragged = true
+            },
+            /* onEnd = */ function () {
+                if (!widget.options.continuousChange && !widget.options.readonly) {
+                    widget.element.trigger('change', widget._curVal)
+                }
+                widget.element.removeClass('active')
+                widget._isDragged = false
+            }
+        )
+
+        this.element.on('mousewheel', function (e, delta) {
+            if (widget.options.readonly || widget.options.disabled) {
+                return
+            }
+
+            /* Ignore scroll events on unfocused widget */
+            if (!widget.element.is(':focus')) {
+                return
+            }
+
+            let changed
+            if (delta > 0) {
+                changed = widget._increase()
+            }
+            else {
+                changed = widget._decrease()
+            }
+
+            if (changed) {
+                widget._temporarilyShowValue()
+                widget.element.trigger('change', widget._curVal)
+                return false
+            }
+        })
+
+        this.element.on('keydown', function (e) {
+            if (widget.options.readonly) {
+                return
+            }
+
+            let changed = false
+
+            switch (e.which) {
+                case 38: /* Up */
+                case 37: /* Left */
+                    if (widget._decrease()) {
+                        widget._temporarilyShowValue()
+                        widget.element.trigger('change', widget._curVal)
+                        return false
+                    }
+
+                    break
+
+                case 40: /* Down */
+                case 39: /* Right */
+                    if (widget._increase()) {
+                        widget._temporarilyShowValue()
+                        widget.element.trigger('change', widget._curVal)
+                        return false
+                    }
+
+                    break
+
+                case 33: /* Page-up */
+                    for (let i = 0; i < widget.options.fastFactor; i++) {
+                        if (widget._decrease()) {
+                            changed = true
+                        }
+                    }
+                    if (changed) {
+                        widget._temporarilyShowValue()
+                        widget.element.trigger('change', widget._curVal)
+                        return false
+                    }
+
+                    break
+
+                case 34: /* Page-down */
+                    for (let i = 0; i < widget.options.fastFactor; i++) {
+                        if (widget._increase()) {
+                            changed = true
+                        }
+                    }
+                    if (changed) {
+                        widget._temporarilyShowValue()
+                        widget.element.trigger('change', widget._curVal)
+                        return false
+                    }
+
+                    break
+
+                case 36: /* Home */
+                    while (widget._decrease()) {
+                        changed = true
+                    }
+                    if (changed) {
+                        widget._temporarilyShowValue()
+                        widget.element.trigger('change', widget._curVal)
+                        return false
+                    }
+
+                    break
+
+                case 35: /* End */
+                    while (widget._increase()) {
+                        changed = true
+                    }
+                    if (changed) {
+                        widget._temporarilyShowValue()
+                        widget.element.trigger('change', widget._curVal)
+                        return false
+                    }
+
+                    break
+            }
+        })
+
+        this._updateTicks()
+    },
+
+    setValue: function (val) {
+        val = Math.max(this._minVal, Math.min(this._maxVal, val))
+        this._setPos(this._valToPos(val))
+    },
+
+    getValue: function () {
+        return this._curVal
+    },
+
+    _updateTicks: function () {
+        this._maxVal = Math.max.apply(Math, this.options.ticks.map(t => t.value))
+        this._minVal = Math.min.apply(Math, this.options.ticks.map(t => t.value))
+        this._makeLabels()
+
+        /* Update the position and the current value */
+        this._curVal = Math.min(this._maxVal, Math.max(this._minVal, this._curVal))
+        this._setPos(this._valToPos(this._curVal))
+
+        this._labels.toggleClass('all-ticks-visible', this.options.ticksStep === 1)
+    },
+
+    _getWidth: function () {
+        return this._bar.width() || 100
+    },
+
+    _getPos: function () {
+        return this._cursor.position().left / this._getWidth()
+    },
+
+    _setPos: function (pos) {
+        pos = Math.max(0, Math.min(1, pos))
+        let val = this._posToVal(pos)
+
+        /* Find matching tick */
+        let tick = this.options.ticks.find(t => t.value === val)
+        if (!tick) {
+            return
+        }
+
+        /* Update cursor caption */
+        this._cursorLabel.html(tick.label)
+
+        /* Update cursor position */
+        this._cursor.css('left', `${(pos * 100)}%`)
+        this._cursorLabel.css('left', `${(pos * 100 - 15)}%`)
+        this._curVal = val
+
+
+        /* Hide overlapped tick labels */
+        let cursorLabelLeft = parseInt(this._cursorLabel[0].style.left) /* Percent */
+
+        /* Cursor overlaps neighbors only if not all ticks are visible */
+        let overlapWidth = this.options.ticksStep === 1 ? 0 : 15 /* Percent */
+
+        this._labels.children('span.qui-slider-label:NOT(.qui-slider-cursor-label)').each(function () {
+            let labelElement = $(this)
+            let labelLeft = parseInt(this.style.left) /* Percent */
+
+            let overlapped = (cursorLabelLeft <= labelLeft + overlapWidth) &&
+                             (cursorLabelLeft + overlapWidth >= labelLeft)
+            let completelyOverlapped = Math.abs(cursorLabelLeft - labelLeft) / Math.abs(cursorLabelLeft) < 0.01
+            labelElement.toggleClass('overlapped', overlapped)
+            labelElement.toggleClass('completely-overlapped', completelyOverlapped)
+        })
+    },
+
+    _valToPos: function (val) {
+        if (this.options.equidistant) {
+            let index = this.options.ticks.findIndex(function (tick) {
+                return tick.value === val
+            })
+
+            if (index < 0) {
+                index = 0
+            }
+
+            return index / (this.options.ticks.length - 1)
+        }
+        else {
+            return (val - this._minVal) / (this._maxVal - this._minVal)
+        }
+    },
+
+    _posToVal: function (pos) {
+        if (this.options.equidistant) {
+            let index = Math.round(pos * (this.options.ticks.length - 1))
+
+            return this.options.ticks[index].value
+        }
+        else {
+            return this._minVal + pos * (this._maxVal - this._minVal)
+        }
+    },
+
+    _bestPos: function (pos) {
+        pos = Math.max(0, Math.min(1, pos))
+
+        let minDif = Infinity
+        let bp = null
+        for (let i = 0; i < this.options.ticks.length; i++) {
+            let tick = this.options.ticks[i]
+            let p = this._valToPos(tick.value)
+            let dif = Math.abs(p - pos)
+            if (dif < minDif) {
+                minDif = dif
+                bp = p
+            }
+        }
+
+        if (bp != null) {
+            pos = bp
+        }
+
+        return pos
+    },
+
+    _increase: function () {
+        let index
+        if (this.options.equidistant) {
+            index = Math.round(this._getPos() * (this.options.ticks.length - 1))
+            if (index < this.options.ticks.length - 1) {
+                index++
+                this._setPos(index / (this.options.ticks.length - 1))
+
+                return true
+            }
+        }
+        else {
+            index = this.options.ticks.findIndex(function (tick) {
+                return tick.value === this._curVal
+            }, this)
+
+            if (index < 0) {
+                index = 0
+            }
+
+            if (index < this.options.ticks.length - 1) {
+                index++
+                this._setPos(this._valToPos(this.options.ticks[index].value))
+
+                return true
+            }
+        }
+
+        return false
+    },
+
+    _decrease: function () {
+        let index
+        if (this.options.equidistant) {
+            index = Math.round(this._getPos() * (this.options.ticks.length - 1))
+            if (index > 0) {
+                index--
+                this._setPos(index / (this.options.ticks.length - 1))
+
+                return true
+            }
+        }
+        else {
+            index = this.options.ticks.findIndex(function (tick) {
+                return tick.value === this._curVal
+            }, this)
+
+            if (index < 0) {
+                index = 0
+            }
+
+            if (index > 0) {
+                index--
+                this._setPos(this._valToPos(this.options.ticks[index].value))
+
+                return true
+            }
+        }
+
+        return false
+    },
+
+    _makeLabels: function () {
+        this._labels.children('span.qui-slider-label:NOT(.qui-slider-cursor-label)').remove()
+
+        /* Ensure ticksStep is always strictly positive */
+        let ticksStep = this.options.ticksStep
+        if (ticksStep <= 0) {
+            ticksStep = 1
+        }
+
+        for (let i = 0; i < this.options.ticks.length; i += ticksStep) {
+            let tick = this.options.ticks[i]
+            let span = $('<span></span>', {class: 'qui-slider-label'})
+            span.text(tick.label)
+            this._cursorLabel.before(span)
+
+            /* Determine the position */
+            let pos
+            if (this.options.equidistant) {
+                pos = i / (this.options.ticks.length - 1)
+            }
+            else {
+                pos = this._valToPos(tick.value)
+            }
+
+            span.css('left', `${(pos * 100 - 15)}%`)
+        }
+    },
+
+    _temporarilyShowValue: function () {
+        if (this._temporaryShowValueHandle != null) {
+            clearTimeout(this._temporaryShowValueHandle)
+        }
+
+        this.element.addClass('active')
+
+        this._temporaryShowValueHandle = setTimeout(function () {
+            if (!this._isDragged) {
+                this.element.removeClass('active')
+            }
+        }.bind(this), TEMPORARY_SHOW_VALUE_TIMEOUT)
+    },
+
+    _setOption: function (key, value) {
+        this._super(key, value)
+
+        switch (key) {
+            case 'ticks':
+            case 'equidistant':
+                this._updateTicks()
+                break
+
+            case 'readonly':
+                this.element.toggleClass('readonly', value)
+                break
+
+            case 'disabled':
+                this.element.toggleClass('disabled', value)
+                if (value) {
+                    this.element.removeAttr('tabIndex')
+                }
+                else {
+                    this.element.attr('tabIndex', 0)
+                }
+                break
+        }
+    }
+
+})

package/js/widgets/common-widgets/text-area.js

@@ -0,0 +1,52 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import * as TextInput from './text-input.js' /* Needed */
+
+
+$.widget('qui.textarea', $.qui.textinput, {
+
+    options: {
+        columns: null,
+        rows: null,
+        wrap: false,
+        resize: null
+    },
+
+    type: 'textarea',
+
+    _create: function () {
+        this._super()
+
+        this._setOption('columns', this.options.columns)
+        this._setOption('rows', this.options.rows)
+        this._setOption('wrap', this.options.wrap)
+        this._setOption('resize', this.options.resize)
+
+        this._input.on('keydown', function (e) {
+            if (e.which === 13) { /* Enter */
+                e.stopPropagation()
+            }
+        })
+    },
+
+    _setOption: function (key, value) {
+        this._super(key, value)
+
+        switch (key) {
+            case 'columns':
+            case 'rows':
+                this._input.attr(key, value || '')
+                break
+
+            case 'wrap':
+                this._input.attr('wrap', value ? 'hard' : 'off')
+                break
+
+            case 'resize':
+                this._input.css('resize', value)
+                break
+        }
+    }
+
+})