@qtoggle/qui 1.20.0-beta.1 → 1.20.0

package/js/widgets/widgets.js

@@ -29,6 +29,46 @@ function initButtons() {
     })
 }
 
+function initLongPress() {
+    /* A touch press held long enough to become a long press ends without a click, so the release looked like a
+     * tap that did nothing. Treat that release as a click, except in text fields and links, which have their own
+     * long-press menus. */
+    let longPressTarget = null
+
+    document.addEventListener('contextmenu', function (e) {
+        let ownMenu = e.target.closest('input, textarea, select, [contenteditable], a[href]')
+        longPressTarget = (e.pointerType === 'touch' && !ownMenu) ? e.target : null
+        if (longPressTarget) {
+            e.preventDefault()
+        }
+    }, {capture: true})
+
+    document.addEventListener('pointerup', function (e) {
+        let target = longPressTarget
+        longPressTarget = null
+        if (!target || e.pointerType !== 'touch') {
+            return
+        }
+
+        /* Touch pointers stay captured by the pressed element, so find where the finger actually left. Like a real
+         * click, the target is the closest element holding both the press and the release. */
+        let released = document.elementFromPoint(e.clientX, e.clientY)
+        while (target && !target.contains(released)) {
+            target = target.parentElement
+        }
+        if (!target || target === document.body || target === document.documentElement) {
+            return
+        }
+
+        /* Let the release finish first, like a real click does */
+        setTimeout(() => target.click())
+    }, {capture: true, passive: true})
+
+    document.addEventListener('pointercancel', function () {
+        longPressTarget = null
+    }, {capture: true, passive: true})
+}
+
 /**
  * Create a caption made of an icon and a text.
  * @alias qui.widgets.makeIconTextCaption
@@ -54,4 +94,5 @@ export function makeIconTextCaption(icon, text) {
 
 export function init() {
     initButtons()
+    initLongPress()
 }

package/less/icon-label-view.less

@@ -57,38 +57,50 @@ div.qui-icon-label-view {
     &.qui-base-button {
         background: @background-color;
         color: @interactive-color;
+        transition: color @transition-duration ease,
+                    opacity @transition-duration ease;
 
-        /* The pressed shade is an overlay faded by opacity, which the compositor animates without repainting the row. A
-         * background transition repaints it on every frame, and slow devices feel that as tap lag. */
+        /* 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;
 
-        &::before {
+        /* 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;
-            background: @background-active-color;
             opacity: 0;
             transition: opacity @transition-duration ease;
             pointer-events: none;
         }
 
-        /* Keeps the icon and labels above the overlay */
-        & > * {
-            position: relative;
+        &::before {
+            background: @interactive-color;
+            z-index: -2;
+        }
+
+        &::after {
+            background: @background-active-color;
+            z-index: -1;
         }
 
-        &.active::before {
+        &.active::after {
             opacity: 1;
         }
 
         &.selected {
-            background: @interactive-color;
             color: @background-color;
 
             &::before {
+                opacity: 1;
+            }
+
+            &::after {
                 background: @interactive-active-color;
             }
 

package/package.json

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

package/pyproject.toml

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