@pageboard/html 0.10.14 → 0.11.0

package/lib/nouislider.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.noUiSlider = {}));
-}(this, (function (exports) { 'use strict';
+})(this, (function (exports) { 'use strict';
 
     exports.PipsMode = void 0;
     (function (PipsMode) {
@@ -127,7 +127,7 @@
                 : doc.body.scrollTop;
         return {
             x: x,
-            y: y
+            y: y,
         };
     }
     // we provide a function to compute constants instead
@@ -140,18 +140,18 @@
             ? {
                 start: "pointerdown",
                 move: "pointermove",
-                end: "pointerup"
+                end: "pointerup",
             }
             : window.navigator.msPointerEnabled
                 ? {
                     start: "MSPointerDown",
                     move: "MSPointerMove",
-                    end: "MSPointerUp"
+                    end: "MSPointerUp",
                 }
                 : {
                     start: "mousedown touchstart",
                     move: "mousemove touchmove",
-                    end: "mouseup touchend"
+                    end: "mouseup touchend",
                 };
     }
     // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
@@ -163,7 +163,7 @@
             var opts = Object.defineProperty({}, "passive", {
                 get: function () {
                     supportsPassive = true;
-                }
+                },
             });
             // @ts-ignore
             window.addEventListener("test", null, opts);
@@ -384,18 +384,18 @@
                 stepBefore: {
                     startValue: this.xVal[j - 2],
                     step: this.xNumSteps[j - 2],
-                    highestStep: this.xHighestCompleteStep[j - 2]
+                    highestStep: this.xHighestCompleteStep[j - 2],
                 },
                 thisStep: {
                     startValue: this.xVal[j - 1],
                     step: this.xNumSteps[j - 1],
-                    highestStep: this.xHighestCompleteStep[j - 1]
+                    highestStep: this.xHighestCompleteStep[j - 1],
                 },
                 stepAfter: {
                     startValue: this.xVal[j],
                     step: this.xNumSteps[j],
-                    highestStep: this.xHighestCompleteStep[j]
-                }
+                    highestStep: this.xHighestCompleteStep[j],
+                },
             };
         };
         Spectrum.prototype.countStepDecimals = function () {
@@ -481,7 +481,7 @@
         to: function (value) {
             return value === undefined ? "" : value.toFixed(2);
         },
-        from: Number
+        from: Number,
     };
     var cssClasses = {
         target: "target",
@@ -519,12 +519,12 @@
         valueVertical: "value-vertical",
         valueNormal: "value-normal",
         valueLarge: "value-large",
-        valueSub: "value-sub"
+        valueSub: "value-sub",
     };
     // Namespaces of internal event listeners
     var INTERNAL_EVENT_NS = {
         tooltips: ".__tooltips",
-        aria: ".__aria"
+        aria: ".__aria",
     };
     //endregion
     function testStep(parsed, entry) {
@@ -731,7 +731,7 @@
             fixed: fixed,
             snap: snap,
             hover: hover,
-            unconstrained: unconstrained
+            unconstrained: unconstrained,
         };
     }
     function testTooltips(parsed, entry) {
@@ -817,7 +817,7 @@
             animate: true,
             animationDuration: 300,
             ariaFormat: defaultFormatter,
-            format: defaultFormatter
+            format: defaultFormatter,
         };
         // Tests are executed in the order they are presented here.
         var tests = {
@@ -844,7 +844,7 @@
             documentElement: { r: false, t: testDocumentElement },
             cssPrefix: { r: true, t: testCssPrefix },
             cssClasses: { r: true, t: testCssClasses },
-            handleAttributes: { r: false, t: testHandleAttributes }
+            handleAttributes: { r: false, t: testHandleAttributes },
         };
         var defaults = {
             connect: false,
@@ -856,7 +856,7 @@
             cssClasses: cssClasses,
             keyboardPageMultiplier: 5,
             keyboardMultiplier: 1,
-            keyboardDefaultStep: 10
+            keyboardDefaultStep: 10,
         };
         // AriaFormat defaults to regular format, if any.
         if (options.format && !options.ariaFormat) {
@@ -888,7 +888,7 @@
         // Pips don't move, so we can place them using left/top.
         var styles = [
             ["left", "top"],
-            ["right", "bottom"]
+            ["right", "bottom"],
         ];
         parsed.style = styles[parsed.dir][parsed.ort];
         return parsed;
@@ -1273,7 +1273,7 @@
             var format = pips.format || {
                 to: function (value) {
                     return String(Math.round(value));
-                }
+                },
             };
             scope_Pips = scope_Target.appendChild(addMarking(spread, filter, format));
             return scope_Pips;
@@ -1509,21 +1509,21 @@
                 pageOffset: event.pageOffset,
                 handleNumbers: data.handleNumbers,
                 buttonsProperty: event.buttons,
-                locations: scope_Locations.slice()
+                locations: scope_Locations.slice(),
             });
             var endEvent = attachEvent(actions.end, scope_DocumentElement, eventEnd, {
                 target: event.target,
                 handle: handle,
                 listeners: listeners,
                 doNotReject: true,
-                handleNumbers: data.handleNumbers
+                handleNumbers: data.handleNumbers,
             });
             var outEvent = attachEvent("mouseout", scope_DocumentElement, documentLeave, {
                 target: event.target,
                 handle: handle,
                 listeners: listeners,
                 doNotReject: true,
-                handleNumbers: data.handleNumbers
+                handleNumbers: data.handleNumbers,
             });
             // We want to make sure we pushed the listeners in the listener list rather than creating
             // a new one as it has already been passed to the event handlers.
@@ -1668,7 +1668,7 @@
                     // These events are only bound to the visual handle
                     // element, not the 'real' origin element.
                     attachEvent(actions.start, handle.children[0], eventStart, {
-                        handleNumbers: [index]
+                        handleNumbers: [index],
                     });
                 });
             }
@@ -1679,7 +1679,7 @@
             // Fire hover events
             if (behaviour.hover) {
                 attachEvent(actions.move, scope_Base, eventHover, {
-                    hover: true
+                    hover: true,
                 });
             }
             // Make the range draggable.
@@ -1710,7 +1710,7 @@
                         attachEvent(actions.start, eventHolder, eventStart, {
                             handles: handlesToDrag,
                             handleNumbers: handleNumbersToDrag,
-                            connect: connect
+                            connect: connect,
                         });
                     });
                 });
@@ -2059,7 +2059,7 @@
             if (options.snap) {
                 return [
                     value - nearbySteps.stepBefore.startValue || null,
-                    nearbySteps.stepAfter.startValue - value || null
+                    nearbySteps.stepAfter.startValue - value || null,
                 ];
             }
             // If the next value in this step moves into the next step,
@@ -2118,7 +2118,7 @@
                 "step",
                 "format",
                 "pips",
-                "tooltips"
+                "tooltips",
             ];
             // Only change options that we're actually passed to update.
             updateAble.forEach(function (name) {
@@ -2203,7 +2203,7 @@
             getOrigins: function () {
                 return scope_Handles;
             },
-            pips: pips // Issue #594
+            pips: pips, // Issue #594
         };
         return scope_Self;
     }
@@ -2228,13 +2228,13 @@
         // A reference to the default classes, allows global changes.
         // Use the cssClasses option for changes to one slider.
         cssClasses: cssClasses,
-        create: initialize
+        create: initialize,
     };
 
     exports.create = initialize;
     exports.cssClasses = cssClasses;
-    exports['default'] = nouislider;
+    exports["default"] = nouislider;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.10.14",
+  "version": "0.11.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "formdata-polyfill": "^4.0.10",
-    "nouislider": "^15.5.0",
+    "nouislider": "^15.5.1",
     "object-fit-images": "^3.2.4",
     "postinstall-bundle": "^0.7.4"
   },

package/ui/fieldset-list.js

@@ -1,62 +1,145 @@
+class WalkIndex {
+	#walk;
+	#find;
+	#index;
+	constructor(root, fn) {
+		this.#find = fn;
+		this.#walk = root.ownerDocument.createTreeWalker(
+			root,
+			NodeFilter.SHOW_ELEMENT,
+			this
+		);
+	}
+	acceptNode(node) {
+		const index = this.#find(node);
+		if (index != null) {
+			this.#index = index;
+			return NodeFilter.FILTER_ACCEPT;
+		} else {
+			return NodeFilter.FILTER_SKIP;
+		}
+	}
+	findBefore(node) {
+		this.#index = null;
+		this.#walk.currentNode = node;
+		this.#walk.previousNode();
+		return this.#index;
+	}
+}
+
 class HTMLElementFieldsetList extends VirtualHTMLElement {
+	#size;
+	#prefix;
+	#model;
+	#walk;
+
 	fill(values, scope) {
-		const list = this.listFromValues(Object.assign({}, values));
-		this.resize(list.length, scope);
+		const list = this.#listFromValues({ ...values });
+		this.#resize(list.length, scope);
 	}
 
-	patch(state) {
+	#prepare() {
 		this.ownTpl.prerender();
 		if (this.isContentEditable) return;
-		if (!this.size) this.resize(0, state.scope);
+		for (const node of this.ownTpl.content.querySelectorAll('[block-id]')) {
+			node.removeAttribute('block-id');
+		}
+		const keys = new Set();
+		const inputs = this.ownTpl.content.querySelectorAll('[name]');
+		for (const node of inputs) {
+			keys.add(node.name);
+		}
+		const splits = Array.from(keys).map(name => name.split('.'));
+		const coms = [];
+		let pos = 0, com = null;
+		while (splits.every(list => {
+			if (com == null) {
+				if (pos < list.length) {
+					com = list[pos];
+					return true;
+				} else {
+					return false;
+				}
+			} else {
+				return list[pos] == com;
+			}
+		})) {
+			coms.push(com);
+			com = null;
+			pos++;
+		}
+		if (coms.length) coms.push('');
+		const prefix = coms.join('.');
+		this.#prefix = prefix;
+		const model = {};
+		for (const key of keys) {
+			if (key.startsWith(prefix)) model[key.substring(prefix.length)] = null;
+		}
+		this.#model = model;
 	}
 
-	setup(state) {
-		this.ownTpl.prerender();
+	patch(state) {
+		this.#prepare();
+		if (!this.#size) this.#resize(0, state.scope);
 	}
 
-	resize(size, scope) {
-		const len = Math.max(Number(this.dataset.size) || 0, size);
-		if (this.size == len) return;
-		this.size = len;
+	setup() {
+		this.#prepare();
+	}
 
-		const tpl = this.ownTpl.content.cloneNode(true);
-		for (const node of tpl.querySelectorAll('[block-id]')) {
-			node.removeAttribute('block-id');
-		}
-		const anc = tpl.querySelectorAll('[name]:not(button)').ancestor();
+	#selector(name) {
+		return `[block-type="fieldlist_button"][value="${name}"]`;
+	}
 
-		for (let i = len - 1; i >= 1; i--) {
-			const clone = this.updateAncestor(anc.cloneNode(true), i);
-			clone.fuse({ $fieldset: { index: i } }, scope);
-			anc.parentNode.insertBefore(clone, anc.nextSibling);
+	#resize(size, scope) {
+		if (this.isContentEditable) return;
+		const len = Math.max(Number(this.dataset.size) || 0, size);
+		if (this.#size === len) return;
+		this.#size = len;
+		let tpl = this.ownTpl.content.cloneNode(true);
+		const $fieldset = Array.from(Array(len)).map((x, i) => {
+			return { index: i };
+		});
+		const inputs = tpl.querySelectorAll('[name]');
+		const prefix = this.#prefix;
+		for (const node of inputs) {
+			if (node.name.startsWith(prefix)) {
+				node.name = `${prefix}[$field.index].${node.name.substring(prefix.length)}`;
+			}
+		}
+		const subtpl = inputs.ancestor();
+		if (!subtpl) {
+			console.warn("fieldset-list should contain input[name]", this);
+			return;
 		}
-		this.updateAncestor(anc, 0);
-		anc.fuse({ $fieldset: { index: 0 } }, scope);
-		tpl.fuse({ $fieldset: { count: len } }, scope);
+		subtpl.appendChild(
+			subtpl.ownerDocument.createTextNode('[$fieldset|repeat:*:$field|]')
+		);
+		if (len == 0) {
+			let node = tpl.querySelector(this.#selector('add'));
+			while (node != null && node != tpl && node != subtpl) {
+				while (node.nextSibling) node.nextSibling.remove();
+				while (node.previousSibling) node.previousSibling.remove();
+				node = node.parentNode;
+			}
+		}
+		tpl = tpl.fuse({ $fieldset }, scope);
+
 		const view = this.ownView;
 		view.textContent = '';
 		view.appendChild(tpl);
-	}
 
-	updateAncestor(node, i) {
-		const prefix = this.prefix;
-		for (const child of node.querySelectorAll('[name]:not(button)')) {
-			child.name = `${prefix}${i}.${child.name}`;
-		}
-		return node;
+		view.querySelectorAll(this.#selector('up')).forEach((node, i) => {
+			node.disabled = i == 0;
+		});
+		view.querySelectorAll(this.#selector('down')).forEach((node, i, arr) => {
+			node.disabled = i == arr.length - 1;
+		});
 	}
 
-	modelFromTemplate() {
-		const obj = {};
-		for (const node of this.ownTpl.content.querySelectorAll('[name]:not(button)')) {
-			obj[node.name] = null;
-		}
-		return obj;
-	}
-
-	listFromValues(values) {
+	#listFromValues(values) {
 		const list = [];
-		const prefix = this.prefix;
+		const prefix = this.#prefix;
 		// just unflatten the array
 		for (const [key, val] of Object.entries(values)) {
 			if (!key.startsWith(prefix)) continue;
@@ -71,8 +154,8 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 		return list;
 	}
 
-	listToValues(values, list) {
-		const prefix = this.prefix;
+	#listToValues(values, list) {
+		const prefix = this.#prefix;
 		for (let i = 0; i < list.length; i++) {
 			const obj = list[i];
 			for (const [key, val] of Object.entries(obj)) {
@@ -83,23 +166,47 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 
 	handleClick(e, state) {
 		if (this.isContentEditable) return;
-		const btn = e.target.closest('button[type="button"][name]');
+		const btn = e.target.closest('button');
 		if (!btn) return;
-		if (["add", "del"].includes(btn.name) == false) return;
+		const action = btn.value;
+		if (["add", "del", "up", "down"].includes(action) == false) return;
 
 		const form = this.closest('form');
 		const values = form.read(true);
-		const list = this.listFromValues(values);
-		const index = Number(btn.value);
-		if (!Number.isInteger(index) || index < 0 || index > list.length) {
-			throw new Error(`fieldset-list expects ${btn.outerHTML} to have a value with a valid index`);
-		}
-		if (btn.name == "add") {
-			list.splice(index + 1, 0, this.modelFromTemplate());
-		} else if (btn.name == "del") {
-			list.splice(index, 1);
+		const list = this.#listFromValues(values);
+		const prefix = this.#prefix;
+		if (!this.#walk) this.#walk = new WalkIndex(this, (node) => {
+			if (node.name?.startsWith(prefix)) {
+				const index = Number(node.name.substring(prefix.length).split('.').shift());
+				if (Number.isInteger(index) || index >= 0 || index < list.length) {
+					return index;
+				}
+			}
+			return null;
+		});
+		let index;
+
+		switch (action) {
+			case "add":
+				list.splice((this.#walk.findBefore(btn) ?? -1) + 1, 0, this.#model);
+				break;
+			case "del":
+				list.splice(this.#walk.findBefore(btn) ?? 0, 1);
+				break;
+			case "up":
+				index = this.querySelectorAll(this.#selector('up')).indexOf(btn);
+				if (index > 0) {
+					list.splice(index - 1, 0, list.splice(index, 1).pop());
+				}
+				break;
+			case "down":
+				index = this.querySelectorAll(this.#selector('down')).indexOf(btn);
+				if (index < list.length - 1) {
+					list.splice(index + 1, 0, list.splice(index, 1).pop());
+				}
+				break;
 		}
-		this.listToValues(values, list);
+		this.#listToValues(values, list);
 		form.fill(values, state.scope);
 	}
 
@@ -111,14 +218,6 @@ class HTMLElementFieldsetList extends VirtualHTMLElement {
 	get ownView() {
 		return this.children.find(node => node.matches('.view'));
 	}
-	get prefix() {
-		const prefix = this.dataset.prefix;
-		if (prefix) return prefix + ".";
-		else return "";
-	}
 }
 
 VirtualHTMLElement.define('element-fieldset-list', HTMLElementFieldsetList);
-
-
-

package/ui/fieldset.js

@@ -15,8 +15,8 @@ class HTMLCustomFieldSetElement extends HTMLFieldSetElement {
 		this.disabled = this.hidden = val != this.options.value;
 	}
 
-	patch() {
-		this.#update();
+	patch(state) {
+		state.finish(() => this.#update());
 	}
 	setup() {
 		this.form?.addEventListener('change', this);