@qtoggle/qui 0.0.0

package/js/widgets/common-widgets/choice-buttons.js

@@ -0,0 +1,322 @@
+
+import $ from '$qui/lib/jquery.module.js'
+
+import * as BaseWidget from '../base-widget.js' /* Needed */
+
+
+$.widget('qui.choicebuttons', $.qui.basewidget, {
+
+    options: {
+        onClass: 'on',
+        choices: [],
+        readonly: false,
+        disabled: false
+    },
+
+    _create: function () {
+        let widget = this
+
+        this.element.addClass('qui-choice-buttons-container')
+
+        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.element.on('keydown', function (e) {
+            if (widget.options.readonly) {
+                return
+            }
+
+            let changed = false
+            let active, group, newButton, index
+
+            switch (e.which) {
+                case 38: /* Up */
+                    active = widget._getButtons().filter(`.${widget.options.onClass}`)
+                    group = active.parent()
+                    if (group.index() > 0) {
+                        group = group.prev()
+                        index = active.index()
+                        newButton = group.children(`div.qui-choice-button:eq(${index})`)
+                        if (newButton.length) {
+                            widget._setActive(newButton)
+                            widget.element.trigger('change', newButton.data('index'))
+                            return false
+                        }
+                    }
+
+                    break
+
+                case 40: /* Down */
+                    active = widget._getButtons().filter(`.${widget.options.onClass}`)
+                    group = active.parent()
+                    if (group.index() < widget.element.children().length - 1) {
+                        group = group.next()
+                        index = active.index()
+                        newButton = group.children(`div.qui-choice-button:eq(${index})`)
+                        if (newButton.length) {
+                            widget._setActive(newButton)
+                            widget.element.trigger('change', newButton.data('index'))
+                            return false
+                        }
+                    }
+
+                    break
+
+                case 37: /* Left */
+                    active = widget._getButtons().filter(`.${widget.options.onClass}`)
+                    if (!active.length) {
+                        active = widget._getButtons().filter(':eq(1)')
+                    }
+
+                    index = active.index()
+                    group = active.parent()
+                    if (index > 0) {
+                        newButton = group.children(`div.qui-choice-button:eq(${index - 1})`)
+                        widget._setActive(newButton)
+                        widget.element.trigger('change', newButton.data('index'))
+                        return false
+                    }
+
+                    break
+
+                case 39: /* Right */
+                    active = widget._getButtons().filter(`.${widget.options.onClass}`)
+                    if (!active.length) {
+                        active = widget._getButtons().filter(':eq(-2)')
+                    }
+
+                    index = active.index()
+                    group = active.parent()
+                    if (index < group.children('div.qui-choice-button').length - 1) {
+                        newButton = group.children(`div.qui-choice-button:eq(${index + 1})`)
+                        widget._setActive(newButton)
+                        widget.element.trigger('change', newButton.data('index'))
+                        return false
+                    }
+
+                    break
+
+                case 34: /* Page-down */
+                    active = widget._getButtons().filter(`.${widget.options.onClass}`)
+                    group = active.parent()
+                    while (group.index() < widget.element.children().length - 1) {
+                        group = group.next()
+                        index = active.index()
+                        newButton = group.children(`div.qui-choice-button:eq(${index})`)
+                        if (newButton.length) {
+                            widget._setActive(newButton)
+                            changed = true
+                        }
+                    }
+
+                    if (changed) {
+                        widget.element.trigger('change', newButton.data('index'))
+                        return false
+                    }
+
+                    break
+
+                case 33: /* Page-up */
+                    active = widget._getButtons().filter(`.${widget.options.onClass}`)
+                    group = active.parent()
+                    while (group.index() > 0) {
+                        group = group.prev()
+                        index = active.index()
+                        newButton = group.children(`div.qui-choice-button:eq(${index})`)
+                        if (newButton.length) {
+                            widget._setActive(newButton)
+                            changed = true
+                        }
+                    }
+
+                    if (changed) {
+                        widget.element.trigger('change', newButton.data('index'))
+                        return false
+                    }
+
+                    break
+
+                case 36: /* Home */
+                    active = widget._getButtons().filter(`.${widget.options.onClass}`)
+                    group = active.parent()
+                    while ((index = active.index()) > 0) {
+                        newButton = active = group.children(`div.qui-choice-button:eq(${index - 1})`)
+                        widget._setActive(newButton)
+                        changed = true
+                    }
+
+                    if (changed) {
+                        widget.element.trigger('change', newButton.data('index'))
+                        return false
+                    }
+
+                    break
+
+                case 35: /* End */
+                    active = widget._getButtons().filter(`.${widget.options.onClass}`)
+                    group = active.parent()
+                    while ((index = active.index()) < group.children('div.qui-choice-button').length - 1) {
+                        newButton = active = group.children(`div.qui-choice-button:eq(${index + 1})`)
+                        widget._setActive(newButton)
+                        changed = true
+                    }
+
+                    if (changed) {
+                        widget.element.trigger('change', newButton.data('index'))
+                        return false
+                    }
+
+                    break
+            }
+        })
+
+        this._installClickHandlers()
+    },
+
+    _getActive: function () {
+        let active = this._getButtons().filter(`.${this.options.onClass}`)
+        if (active.length) {
+            return active
+        }
+        else {
+            return null
+        }
+    },
+
+    _setActive: function (button) {
+        this._getButtons().removeClass(this.options.onClass)
+        if (button) {
+            button.addClass(this.options.onClass)
+        }
+    },
+
+    _installClickHandlers: function () {
+        let widget = this
+
+        this._getButtons().each(function (i) {
+            let button = $(this)
+
+            button.on('click', (function (i) {
+
+                return function () {
+                    if (widget.options.readonly || widget.options.disabled) {
+                        return
+                    }
+
+                    widget._setActive(button)
+                    widget.element.trigger('change', i)
+                }
+
+            }(i)))
+        })
+    },
+
+    getValue: function () {
+        let activeButton = this._getActive()
+        if (!activeButton) {
+            return null
+        }
+
+        return activeButton.data('value')
+    },
+
+    setValue: function (value) {
+        this._setActive(null)
+        let widget = this
+        this._getButtons().each(function () {
+            if ($(this).data('value') === value) {
+                widget._setActive($(this))
+                return false
+            }
+        })
+    },
+
+    getSelectedIndex: function () {
+        let widget = this
+        let index = -1
+        this._getButtons().each(function (i) {
+            if ($(this).hasClass(widget.options.onClass)) {
+                index = i
+            }
+        })
+
+        return index
+    },
+
+    setSelectedIndex: function (index) {
+        this._getButtons().removeClass(this.options.onClass)
+        if (index >= 0) {
+            this._getButtons().eq(index).addClass(this.options.onClass)
+        }
+    },
+
+    _getButtons: function () {
+        if (!this._buttons) {
+            let widget = this
+            let choices = this.options.choices
+            if (choices.length) {
+                if (!Array.isArray(choices[0])) {
+                    choices = [choices]
+                }
+
+                let index = 0
+                choices.forEach(function (subChoices) {
+                    let group = $('<div></div>', {class: 'qui-choice-buttons-group-container'})
+                    group.css('grid-template-columns', `repeat(${subChoices.length}, 1fr)`)
+                    subChoices.forEach(function (choice) {
+                        let button = $(
+                            '<div></div>',
+                            {class: 'qui-base-button qui-interactive-button qui-choice-button'}
+                        )
+                        button.html(choice.label)
+                        button.data('value', choice.value)
+                        button.data('index', index)
+                        group.append(button)
+
+                        index++
+                    })
+
+                    widget.element.append(group)
+                })
+            }
+
+            this._buttons = this.element.find('div.qui-choice-button')
+        }
+
+        return this._buttons
+    },
+
+    _setOption: function (key, value) {
+        this._super(key, value)
+
+        switch (key) {
+            case 'readonly':
+                this.element.toggleClass('readonly', value)
+                break
+
+            case 'choices':
+                this.element.html('')
+                this._buttons = null
+                this._installClickHandlers()
+                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/color-combo.js

@@ -0,0 +1,104 @@
+/* eslint-disable no-multi-spaces */
+
+import $ from '$qui/lib/jquery.module.js'
+
+import {gettext}   from '$qui/base/i18n.js'
+import * as Theme  from '$qui/theme.js'
+import * as Colors from '$qui/utils/colors.js'
+
+import * as Combo from './combo.js' /* Needed */
+
+
+$.widget('qui.colorcombo', $.qui.combo, {
+
+    STANDARD_COLORS: [
+        {name: 'darkgray',      label: gettext('Dark Gray')},
+        {name: 'gray',          label: gettext('Gray')},
+        {name: 'lightgray',     label: gettext('Light Gray')},
+        {name: 'white',         label: gettext('White')},
+        {name: 'blue',          label: gettext('Blue')},
+        {name: 'magenta',       label: gettext('Magenta')},
+        {name: 'red',           label: gettext('Red')},
+        {name: 'orange',        label: gettext('Orange')},
+        {name: 'yellow',        label: gettext('Yellow')},
+        {name: 'green',         label: gettext('Green')},
+        {name: 'cyan',          label: gettext('Cyan')}
+    ],
+    THEME_COLORS: [
+        {name: 'background',    label: gettext('Background Color')},
+        {name: 'foreground',    label: gettext('Foreground Color')},
+        {name: 'border',        label: gettext('Border Color')},
+        {name: 'disabled',      label: gettext('Disabled Color')},
+        {name: 'interactive',   label: gettext('Interactive Color')},
+        {name: 'highlight',     label: gettext('Highlight Color')},
+        {name: 'danger',        label: gettext('Danger Color')},
+        {name: 'warning',       label: gettext('Warning Color')},
+        {name: 'info',          label: gettext('Information Color')},
+        {name: 'error',         label: gettext('Error Color')}
+    ],
+
+    options: {
+        includeStandard: true,
+        includeTheme: true,
+        customColors: []
+    },
+
+    makeChoices: function () {
+        let choices = []
+
+        if (this.options.includeStandard) {
+            choices = choices.concat(this.STANDARD_COLORS.map(function (colorInfo, i) {
+
+                let choice = this._choiceFromColor(`@${colorInfo.name}-color`, colorInfo.label)
+                if (i === 0) {
+                    choice.separator = true
+                }
+
+                return choice
+
+            }, this))
+        }
+
+        if (this.options.includeTheme) {
+            choices = choices.concat(this.THEME_COLORS.map(function (colorInfo, i) {
+
+                let choice = this._choiceFromColor(`@${colorInfo.name}-color`, colorInfo.label)
+                if (i === 0) {
+                    choice.separator = true
+                }
+
+                return choice
+
+            }, this))
+        }
+
+        return choices
+    },
+
+    _choiceFromThemeVar: function (name, text) {
+        return this._choiceFromColor(Theme.getVar(name), text)
+    },
+
+    _choiceFromColor: function (color, text) {
+        let value = color
+        if (!value.startsWith('@')) {
+            value = Colors.normalize(value)
+        }
+        else {
+            color = Theme.getVar(color.substring(1))
+        }
+
+        let labelDiv = $('<div></div>', {class: 'qui-color-combo-entry-label'})
+        let colorDiv = $('<div></div>', {class: 'qui-color-combo-entry-color', style: `background: ${color};`})
+        let textSpan = $('<span></span>', {class: 'qui-color-combo-entry-text'})
+        textSpan.text(text)
+
+        labelDiv.append(colorDiv).append(textSpan)
+
+        return {
+            value: value,
+            label: labelDiv
+        }
+    }
+
+})