@qtoggle/qui 1.20.0 → 1.20.2

package/js/icons/multi-state-sprites-icon.js

@@ -138,31 +138,40 @@ class MultiStateSpritesIcon extends Icon {
         let bgWidth = params.bgWidth
         let bgHeight = params.bgHeight
 
+        let iconElement = element[0]
+
         /* Find and remove existing icon state elements */
-        let existingStateElements = element.children().filter(function () {
-            return this.className.split(' ').some(function (c) {
-                return c.match(new RegExp('^qui-icon-[\\w\\-]+$')) && c !== 'qui-icon-decoration'
+        let existingStateElements = []
+        for (let i = 0; i < iconElement.children.length; i++) {
+            let child = iconElement.children[i]
+            let isState = child.className.split(' ').some(function (c) {
+                return c !== 'qui-icon-decoration' && c.startsWith('qui-icon-') && c.length > 'qui-icon-'.length
             })
-        })
+            if (isState) {
+                existingStateElements.push(child)
+            }
+        }
 
-        let addedToDOM = element.parents('body').length
-        if (addedToDOM) {
+        if (iconElement.isConnected) {
+            /* Only this branch fades the old elements out, and only it needs them as a jQuery object */
+            let oldElements = $(existingStateElements)
             asap(function () {
-                existingStateElements.addClass('qui-icon-hidden')
+                oldElements.addClass('qui-icon-hidden')
             })
             Theme.afterTransition(function () {
-                existingStateElements.remove()
-            }, existingStateElements)
+                oldElements.remove()
+            }, oldElements)
         }
         else {
-            existingStateElements.remove()
+            existingStateElements.forEach(e => e.remove())
             existingStateElements = []
         }
 
-        element.addClass('qui-icon')
+        iconElement.classList.add('qui-icon')
 
-        /* Add new icon state elements */
-        let newElements = $()
+        /* Add new icon state elements. Built with plain DOM calls because this runs for every icon on screen, and
+         * jQuery's element, style and append helpers were about half of what renderTo cost on a 448-row list. */
+        let newElements = []
         ObjectUtils.forEach(this._states, function (state, details) {
 
             let offsetX = details.offsetX
@@ -173,35 +182,33 @@ class MultiStateSpritesIcon extends Icon {
                 return
             }
 
-            let stateDiv = $('<div></div>', {class: `qui-icon-${state}`})
+            let stateDiv = document.createElement('div')
+            stateDiv.className = `qui-icon-${state}`
             /* If no existing elements, display the new element directly, w/o any effect; otherwise start hidden and
              * do a transition to visible */
             if (existingStateElements.length) {
-                stateDiv.addClass('qui-icon-hidden')
+                stateDiv.classList.add('qui-icon-hidden')
             }
 
-            let css = {
-                'background-image': `url("${this._url}")`,
-                'background-position': `${(-offsetX * size)}${this._unit} ${(-offsetY * size)}${this._unit}`
-            }
+            let style = stateDiv.style
+            style.backgroundImage = `url("${this._url}")`
+            style.backgroundPosition = `${(-offsetX * size)}${this._unit} ${(-offsetY * size)}${this._unit}`
             if (bgWidth && bgHeight) {
-                css['background-size'] = `${bgWidth} ${bgHeight}`
+                style.backgroundSize = `${bgWidth} ${bgHeight}`
             }
 
             if (details.filter) {
-                css['filter'] = details.filter
+                style.filter = details.filter
             }
 
-            stateDiv.css(css)
-
-            element.append(stateDiv)
-            newElements = newElements.add(stateDiv)
+            iconElement.appendChild(stateDiv)
+            newElements.push(stateDiv)
 
         }, this)
 
         if (existingStateElements.length) {
             asap(function () {
-                newElements.removeClass('qui-icon-hidden')
+                newElements.forEach(e => e.classList.remove('qui-icon-hidden'))
             })
         }
 
@@ -212,19 +219,23 @@ class MultiStateSpritesIcon extends Icon {
             }
         }, this)
 
-        element.removeClass(this.constructor.KNOWN_STATES.map(s => `top-${s}`).join(' '))
-        element.addClass(`top-${topState}`)
+        iconElement.classList.remove(...this.constructor.KNOWN_STATES.map(s => `top-${s}`))
+        iconElement.classList.add(`top-${topState}`)
 
         /* Decoration */
 
-        let decorationDiv = element.children('div.qui-icon-decoration')
-        if (!decorationDiv.length) {
-            decorationDiv = null
+        let decorationDiv = null
+        for (let i = 0; i < iconElement.children.length; i++) {
+            if (iconElement.children[i].classList.contains('qui-icon-decoration')) {
+                decorationDiv = iconElement.children[i]
+                break
+            }
         }
 
         if (!decorationDiv && this._decoration) {
-            decorationDiv = $('<div></div>', {class: 'qui-icon-decoration'})
-            element.prepend(decorationDiv)
+            decorationDiv = document.createElement('div')
+            decorationDiv.className = 'qui-icon-decoration'
+            iconElement.insertBefore(decorationDiv, iconElement.firstChild)
         }
         else if (decorationDiv && !this._decoration) {
             decorationDiv.remove()
@@ -232,35 +243,42 @@ class MultiStateSpritesIcon extends Icon {
         }
 
         if (decorationDiv) {
-            let css = {
-                background: this._decoration
-            }
+            decorationDiv.style.background = this._decoration
+
+            /* The decoration element outlives a render, so a colour lookup can resolve after another icon has been
+             * applied to the same element. Each render stamps the element, and only the latest one may write. */
+            let renderToken = (decorationDiv._quiRenderToken = (decorationDiv._quiRenderToken || 0) + 1)
 
             let bgColor = this._findBgColor(element)
             let bgRGB = Colors.str2rgba(bgColor)
             let decoRGB = Colors.str2rgba(this._decoration)
             if (Colors.contrast(bgRGB, decoRGB) > 1.5) {
-                css['border-color'] = bgColor
+                decorationDiv.style.borderColor = bgColor
             }
             else {
                 this._findIconColor(element).then(function (color) {
-                    css['border-color'] = color
+                    if (decorationDiv._quiRenderToken === renderToken) {
+                        decorationDiv.style.borderColor = color
+                    }
                 })
             }
-
-            decorationDiv.css(css)
         }
     }
 
     _findBgColor(elem) {
         /* Find the background color behind the icon */
 
+        /* Icons are usually rendered before their row is attached, and a detached element has no computed style, so
+         * up such a chain css() only ever reports the inline one. Reading that directly skips a getComputedStyle call
+         * per element, worth about 130 ms across a 448-row list. */
+        let attached = elem.length > 0 && elem[0].isConnected
+
         let e = elem
         let bgColor = null
         while (e.length && e[0].tagName && (!bgColor || bgColor === 'rgba(0, 0, 0, 0)' ||
                                              bgColor === 'transparent')) {
 
-            bgColor = e.css('background-color')
+            bgColor = attached ? e.css('background-color') : e[0].style.backgroundColor
             e = e.parent()
         }
 

package/js/utils/array.js

@@ -2,10 +2,10 @@
  * @namespace qui.utils.array
  */
 
-function makeSortFunc(extractFunc, desc, thisArg) {
-    return function (e1, e2) {
-        let k1 = extractFunc.call(thisArg, e1)
-        let k2 = extractFunc.call(thisArg, e2)
+function makeKeySortFunc(desc) {
+    return function (p1, p2) {
+        let k1 = p1.key
+        let k2 = p2.key
 
         if ((desc && k1 > k2) || (!desc && k1 < k2)) {
             return -1
@@ -19,6 +19,36 @@ function makeSortFunc(extractFunc, desc, thisArg) {
     }
 }
 
+/* The sort runs over element-key pairs, so the key function runs once per element instead of twice for every
+ * comparison the sort makes. Sorting 448 items in random order took 6408 key extractions; this brings it to 448. */
+function sortPairs(array, func, desc, thisArg, sortFunc) {
+    /* Each element carries its own key instead of the two being matched up in a Map, which would file 0 and -0 under
+     * one entry. Undefined entries and holes are held back and restored at the end, as Array#sort leaves them. */
+    let length = array.length
+    let pairs = []
+    let undefinedCount = 0
+
+    array.forEach(function (e) {
+        if (e === undefined) {
+            undefinedCount++
+        }
+        else {
+            pairs.push({element: e, key: func.call(thisArg, e)})
+        }
+    })
+
+    sortFunc(pairs, makeKeySortFunc(desc))
+
+    array.length = 0
+    pairs.forEach(p => array.push(p.element))
+    while (undefinedCount--) {
+        array.push(undefined)
+    }
+    array.length = length
+
+    return array
+}
+
 function merge(left, right, compareFunc) {
     let result = []
 
@@ -94,6 +124,9 @@ export function stableSort(array, compareFunc) {
 
 /**
  * Perform a sort on an array, *in place*, using a key extraction function.
+ *
+ * As with `Array#sort`, `undefined` entries and holes end up at the end of the array, in that order, and the key
+ * extraction function is not called for them. It is called once per remaining element.
  * @alias qui.utils.array.sortKey
  * @param {Array} array
  * @param {Function} func key extraction function; will be called with each element as parameter and is expected to
@@ -103,11 +136,14 @@ export function stableSort(array, compareFunc) {
  * @returns {Array} the array
  */
 export function sortKey(array, func, desc = false, thisArg = null) {
-    return array.sort(makeSortFunc(func, desc, thisArg))
+    return sortPairs(array, func, desc, thisArg, (pairs, compareFunc) => pairs.sort(compareFunc))
 }
 
 /**
  * Perform a stable sort on an array, *in place*, using a key extraction function.
+ *
+ * As with `Array#sort`, `undefined` entries and holes end up at the end of the array, in that order, and the key
+ * extraction function is not called for them. It is called once per remaining element.
  * @alias qui.utils.array.stableSortKey
  * @param {Array} array
  * @param {Function} func key extraction function; will be called with each element as parameter and is expected to
@@ -117,7 +153,7 @@ export function sortKey(array, func, desc = false, thisArg = null) {
  * @returns {Array} the array
  */
 export function stableSortKey(array, func, desc = false, thisArg = null) {
-    return stableSort(array, makeSortFunc(func, desc, thisArg))
+    return sortPairs(array, func, desc, thisArg, stableSort)
 }
 
 /**

package/js/views/common-views/icon-label-view.js

@@ -40,28 +40,39 @@ const IconLabelViewMixin = Mixin((superclass = Object) => {
          * @returns {jQuery}
          */
         makeIconLabelContainer() {
-            let container = $('<div></div>', {class: 'qui-icon-label-view'})
+            /* Built with plain DOM calls: five elements per view, and jQuery's element and append helpers were about
+             * a fifth of what the hub's 448-row port list cost to build. The three elements kept as fields stay
+             * jQuery objects, because the icon and label setters work on them. */
+            let container = document.createElement('div')
+            container.className = 'qui-icon-label-view'
 
             if (this._clickable) {
-                container.addClass('qui-base-button')
+                container.classList.add('qui-base-button')
             }
 
-            this._iconElement = $('<div></div>', {class: 'qui-icon'})
+            let iconElement = document.createElement('div')
+            iconElement.className = 'qui-icon'
+            this._iconElement = $(iconElement)
             this._applyIcon(this._icon, this._iconElement)
-            container.append(this._iconElement)
+            container.appendChild(iconElement)
 
-            let labelsContainer = $('<div></div>', {class: 'labels'})
-            container.append(labelsContainer)
+            let labelsContainer = document.createElement('div')
+            labelsContainer.className = 'labels'
+            container.appendChild(labelsContainer)
 
-            this._labelElement = $('<div></div>', {class: 'label'})
+            let labelElement = document.createElement('div')
+            labelElement.className = 'label'
+            this._labelElement = $(labelElement)
             this.setLabel(this._label)
-            labelsContainer.append(this._labelElement)
+            labelsContainer.appendChild(labelElement)
 
-            this._subLabelElement = $('<div></div>', {class: 'sub-label'})
+            let subLabelElement = document.createElement('div')
+            subLabelElement.className = 'sub-label'
+            this._subLabelElement = $(subLabelElement)
             this.setSubLabel(this._subLabel)
-            labelsContainer.append(this._subLabelElement)
+            labelsContainer.appendChild(subLabelElement)
 
-            return container
+            return $(container)
         }
 
         /**

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

@@ -113,23 +113,35 @@ $.widget('qui.progressdisk', $.qui.basewidget, {
         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)
+        /* This runs on every value change, but the size only follows the radius option. jQuery's width() and height()
+         * each read the computed style, which came to about 400 ms while a 448-row list was being built. */
+        if (this._appliedWidth !== width) {
+            this._appliedWidth = width
+
+            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._cursor.setAttribute('stroke-width', thickness.toString())
+        }
+
+        /* The colour is still looked up every time, so a theme change lands on the next value. */
+        if (this._appliedColor !== color) {
+            this._appliedColor = color
+
+            this._ring.setAttribute('stroke', color)
+            this._cursor.setAttribute('stroke', color)
+        }
 
         if (this._curVal >= 0) {
             this._updateSVGPercent(iRadius, oRadius)

package/less/base.less

@@ -73,6 +73,10 @@ body {
     overflow-x: hidden;
     transition: opacity @transition-duration linear;
     line-height: 1.15em;
+
+    /* A pixel-moving filter, even one that changes nothing, keeps Chrome from running background-color transitions on
+     * the compositor, which sometimes shows a transition's first frame again once it ends. */
+    filter: blur(0);
 }
 
 body.disable-transitions * {

package/less/icon-label-view.less

@@ -57,53 +57,15 @@ div.qui-icon-label-view {
     &.qui-base-button {
         background: @background-color;
         color: @interactive-color;
-        transition: color @transition-duration ease,
-                    opacity @transition-duration ease;
-
-        /* The selected fill and the pressed shade are overlays faded by opacity, which the compositor animates without
-         * repainting the row. Chrome sometimes shows a background transition's first frame again once it ends. */
-        position: relative;
-        z-index: 0;
-
-        /* Negative z-index keeps both overlays above the row's background but below its content */
-        &::before,
-        &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            opacity: 0;
-            transition: opacity @transition-duration ease;
-            pointer-events: none;
-        }
-
-        &::before {
-            background: @interactive-color;
-            z-index: -2;
-        }
 
-        &::after {
+        &.active {
             background: @background-active-color;
-            z-index: -1;
-        }
-
-        &.active::after {
-            opacity: 1;
         }
 
         &.selected {
+            background: @interactive-color;
             color: @background-color;
 
-            &::before {
-                opacity: 1;
-            }
-
-            &::after {
-                background: @interactive-active-color;
-            }
-
             & > div.labels > div.sub-label {
                 color: @background-color;
                 background-color: fade(@interactive-active-color, 50%);
@@ -111,6 +73,11 @@ div.qui-icon-label-view {
 
         }
 
+        &.active.selected {
+            background: @interactive-active-color;
+            color: @background-color;
+        }
+
     }
 
 }

package/less/icons.less

@@ -5,6 +5,10 @@
 .qui-icon {
     display: inline-block;
     position: relative;
+
+    /* Keeps the z-indexes of the state layers and the decoration inside the icon, so they cannot rise above a sticky
+     * header or an overlay that the icon scrolls under */
+    z-index: 0;
 }
 
 .qui-icon > div.qui-icon-normal,

package/less/lists.less

@@ -8,6 +8,14 @@ div.qui-list {
     background: @background-color;
 }
 
+/* A sticky child sticks inside its nearest ancestor that clips. `clip` clips like `hidden` without making a scroll
+ * container, so the search box sticks to the scrolling page instead; older browsers keep `hidden` and scroll it away. */
+div.qui-list.qui-structured-view,
+div.qui-list > div.qui-structured-view-body {
+    overflow: hidden;
+    overflow: clip;
+}
+
 
 /* Children */
 
@@ -55,8 +63,48 @@ div.qui-list-child.qui-list-item {
 
 /* Search */
 
+div.qui-list-child.qui-list-search {
+    /* Stays at the top of the page while the rows scroll under it */
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: @background-color;
+    border-bottom-color: @interactive-color;
+
+    /* Casts the top bar's shadow on the rows while stuck; browsers without scroll-state queries just show none */
+    container-type: scroll-state;
+    overflow: visible;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: -0.0625em; /* Below the border, like the top bar's shadow */
+        left: 0;
+        z-index: -1;
+        box-shadow: 0 0.3125em 0.5em -0.3125em @bar-shadow-color;
+        opacity: 0;
+        transition: opacity @transition-duration ease;
+        pointer-events: none;
+    }
+
+    /* The focused field fills with the interactive color, so a line of that color would merge with a selected row
+     * below it */
+    &:focus-within {
+        border-bottom-color: @border-color;
+    }
+}
+
+@container scroll-state(stuck: top) {
+    div.qui-list-child.qui-list-search::after {
+        opacity: 1;
+    }
+}
+
 div.qui-list-child.qui-list-search > div.qui-list-search-wrapper {
     position: relative;
+    overflow: hidden; /* Clips the field's focus ring, now that the search box lets its shadow out */
 
     & > input[type=text] {
         width: 100%;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qtoggle/qui",
   "description": "A JavaScript UI library with batteries included.",
-  "version": "1.20.0",
+  "version": "1.20.2",
   "author": {
     "name": "Calin Crisan",
     "email": "ccrisan@gmail.com"

package/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "qui-server"
-version = "1.20.0"
+version = "1.20.2"
 description = "A fully fledged qToggle implementation written in Python"
 authors = [
     {name = "Calin Crisan", email = "ccrisan@gmail.com"},

package/qui/templates/service-worker.js

@@ -24,14 +24,14 @@ function getQueryArgument(name, def = null) {
     if (queryArguments == null) {
         let queryString = self.location.search.substring(1)
         queryArguments = new Map(queryString.split('&').map(function (keyValuePair) {
-            let splits = keyValuePair.split('=');
-            let key = decodeURIComponent(splits[0]);
-            let value = decodeURIComponent(splits[1]);
+            let splits = keyValuePair.split('=')
+            let key = decodeURIComponent(splits[0])
+            let value = decodeURIComponent(splits[1])
             if (value.indexOf(',') >= 0) {
-                value = value.split(',');
+                value = value.split(',')
             }
 
-            return [key, value];
+            return [key, value]
         }))
     }