@pageboard/html 0.10.23 → 0.10.25

package/elements/consent.js

@@ -16,30 +16,36 @@ exports.consent_form = {
 		id: "content",
 		nodes: "block+"
 	},
-	upgrade: {
-		'content.': 'content.content'
-	},
 	html: `<form is="element-consent" class="ui form" data-transient="[transient]">
-		<x[transient|?:template:div|fill] block-content="content"></x[transient|?:template:div|fill]>
+		<template block-content="content"></template>
+		<div class="view"></div>
 	</form>`,
 	scripts: ['../ui/storage.js', '../ui/consent.js'],
 	stylesheets: ['../ui/consent.css']
 };
 
+const consents = [];
+
 exports.input_radio_yes = {
 	title: 'Yes',
 	icon: '<i class="thumbs up icon"></i>',
 	menu: "form",
 	group: "block",
 	context: 'consent_form//',
+	properties: {
+		consent: {
+			title: 'Consent',
+			anyOf: consents
+		}
+	},
 	contents: {
 		id: 'label',
 		nodes: 'inline*'
 	},
 	html: `<div class="field">
 		<div class="ui radio checkbox">
-			<input type="radio" name="consent" value="yes" id="for-consent-yes" />
-			<label block-content="label" for="for-consent-yes">Yes</label>
+			<input type="radio" name="consent.[consent]" value="yes" id="for-consent-yes-[consent]" />
+			<label block-content="label" for="for-consent-yes-[consent]">Yes</label>
 		</div>
 	</div>`
 };
@@ -50,14 +56,20 @@ exports.input_radio_no = {
 	menu: "form",
 	group: "block",
 	context: 'consent_form//',
+	properties: {
+		consent: {
+			title: 'Consent',
+			anyOf: consents
+		}
+	},
 	contents: {
 		id: 'label',
 		nodes: 'inline*'
 	},
 	html: `<div class="field">
 		<div class="ui radio checkbox">
-			<input type="radio" name="consent" value="no" id="for-consent-no" />
-			<label block-content="label" for="for-consent-no">No</label>
+			<input type="radio" name="consent.[consent]" value="no" id="for-consent-no-[consent]" />
+			<label block-content="label" for="for-consent-no-[consent]">No</label>
 		</div>
 	</div>`
 };

package/elements/embed.js

@@ -36,3 +36,7 @@ exports.embed = {
 	]
 };
 
+exports.input_radio_yes.properties.consent.anyOf.push({
+	title: "Embeds",
+	const: "embed"
+});

package/lib/nouislider.js

@@ -713,7 +713,9 @@
         var snap = entry.indexOf("snap") >= 0;
         var hover = entry.indexOf("hover") >= 0;
         var unconstrained = entry.indexOf("unconstrained") >= 0;
+        var invertConnects = entry.indexOf("invert-connects") >= 0;
         var dragAll = entry.indexOf("drag-all") >= 0;
+        var smoothSteps = entry.indexOf("smooth-steps") >= 0;
         if (fixed) {
             if (parsed.handles !== 2) {
                 throw new Error("noUiSlider: 'fixed' behaviour must be used with 2 handles");
@@ -721,6 +723,9 @@
             // Use margin to enforce fixed state
             testMargin(parsed, parsed.start[1] - parsed.start[0]);
         }
+        if (invertConnects && parsed.handles !== 2) {
+            throw new Error("noUiSlider: 'invert-connects' behaviour must be used with 2 handles");
+        }
         if (unconstrained && (parsed.margin || parsed.limit)) {
             throw new Error("noUiSlider: 'unconstrained' behaviour cannot be used with margin or limit");
         }
@@ -728,10 +733,12 @@
             tap: tap || snap,
             drag: drag,
             dragAll: dragAll,
+            smoothSteps: smoothSteps,
             fixed: fixed,
             snap: snap,
             hover: hover,
             unconstrained: unconstrained,
+            invertConnects: invertConnects,
         };
     }
     function testTooltips(parsed, entry) {
@@ -902,6 +909,7 @@
         // Slider DOM Nodes
         var scope_Target = target;
         var scope_Base;
+        var scope_ConnectBase;
         var scope_Handles;
         var scope_Connects;
         var scope_Pips;
@@ -913,6 +921,7 @@
         var scope_HandleNumbers = [];
         var scope_ActiveHandlesCount = 0;
         var scope_Events = {};
+        var scope_ConnectsInverted = false;
         // Document Nodes
         var scope_Document = target.ownerDocument;
         var scope_DocumentElement = options.documentElement || scope_Document.documentElement;
@@ -957,6 +966,7 @@
             else if (handleNumber === options.handles - 1) {
                 addClass(handle, options.cssClasses.handleUpper);
             }
+            origin.handle = handle;
             return origin;
         }
         // Insert nodes for connect elements
@@ -968,17 +978,17 @@
         }
         // Add handles to the slider base.
         function addElements(connectOptions, base) {
-            var connectBase = addNodeTo(base, options.cssClasses.connects);
+            scope_ConnectBase = addNodeTo(base, options.cssClasses.connects);
             scope_Handles = [];
             scope_Connects = [];
-            scope_Connects.push(addConnect(connectBase, connectOptions[0]));
+            scope_Connects.push(addConnect(scope_ConnectBase, connectOptions[0]));
             // [::::O====O====O====]
             // connectOptions = [0, 1, 1, 1]
             for (var i = 0; i < options.handles; i++) {
                 // Keep a list of all added handles.
                 scope_Handles.push(addOrigin(base, i));
                 scope_HandleNumbers[i] = i;
-                scope_Connects.push(addConnect(connectBase, connectOptions[i + 1]));
+                scope_Connects.push(addConnect(scope_ConnectBase, connectOptions[i + 1]));
             }
         }
         // Initialize a single slider.
@@ -1020,6 +1030,31 @@
             var handleOrigin = scope_Handles[handleNumber];
             return handleOrigin.hasAttribute("disabled");
         }
+        function disable(handleNumber) {
+            if (handleNumber !== null && handleNumber !== undefined) {
+                scope_Handles[handleNumber].setAttribute("disabled", "");
+                scope_Handles[handleNumber].handle.removeAttribute("tabindex");
+            }
+            else {
+                scope_Target.setAttribute("disabled", "");
+                scope_Handles.forEach(function (handle) {
+                    handle.handle.removeAttribute("tabindex");
+                });
+            }
+        }
+        function enable(handleNumber) {
+            if (handleNumber !== null && handleNumber !== undefined) {
+                scope_Handles[handleNumber].removeAttribute("disabled");
+                scope_Handles[handleNumber].handle.setAttribute("tabindex", "0");
+            }
+            else {
+                scope_Target.removeAttribute("disabled");
+                scope_Handles.forEach(function (handle) {
+                    handle.removeAttribute("disabled");
+                    handle.handle.setAttribute("tabindex", "0");
+                });
+            }
+        }
         function removeTooltips() {
             if (scope_Tooltips) {
                 removeEvent("update" + INTERNAL_EVENT_NS.tooltips);
@@ -1472,6 +1507,14 @@
                     scope_Body.removeEventListener("selectstart", preventDefault);
                 }
             }
+            if (options.events.smoothSteps) {
+                data.handleNumbers.forEach(function (handleNumber) {
+                    setHandle(handleNumber, scope_Locations[handleNumber], true, true, false, false);
+                });
+                data.handleNumbers.forEach(function (handleNumber) {
+                    fireEvent("update", handleNumber);
+                });
+            }
             data.handleNumbers.forEach(function (handleNumber) {
                 fireEvent("change", handleNumber);
                 fireEvent("set", handleNumber);
@@ -1771,7 +1814,7 @@
             });
         }
         // Split out the handle positioning logic so the Move event can use it, too
-        function checkHandlePosition(reference, handleNumber, to, lookBackward, lookForward, getValue) {
+        function checkHandlePosition(reference, handleNumber, to, lookBackward, lookForward, getValue, smoothSteps) {
             var distance;
             // For sliders with multiple handles, limit movement to the other handle.
             // Apply the margin option by adding it to the handle positions.
@@ -1810,7 +1853,9 @@
                     to = Math.min(to, distance);
                 }
             }
-            to = scope_Spectrum.getStep(to);
+            if (!smoothSteps) {
+                to = scope_Spectrum.getStep(to);
+            }
             // Limit percentage to the 0 - 100 range
             to = limit(to);
             // Return false if handle can't move
@@ -1830,6 +1875,7 @@
             var proposals = locations.slice();
             // Store first handle now, so we still have it in case handleNumbers is reversed
             var firstHandle = handleNumbers[0];
+            var smoothSteps = options.events.smoothSteps;
             var b = [!upward, upward];
             var f = [upward, !upward];
             // Copy handleNumbers so we don't change the dataset
@@ -1842,7 +1888,7 @@
             // Step 1: get the maximum percentage that any of the handles can move
             if (handleNumbers.length > 1) {
                 handleNumbers.forEach(function (handleNumber, o) {
-                    var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o], false);
+                    var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o], false, smoothSteps);
                     // Stop if one of the handles can't move.
                     if (to === false) {
                         proposal = 0;
@@ -1860,7 +1906,8 @@
             var state = false;
             // Step 2: Try to set the handles with the found percentage
             handleNumbers.forEach(function (handleNumber, o) {
-                state = setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o]) || state;
+                state =
+                    setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o], false, smoothSteps) || state;
             });
             // Step 3: If a handle moved, fire events
             if (state) {
@@ -1890,8 +1937,26 @@
             var translation = transformDirection(to, 0) - scope_DirOffset;
             var translateRule = "translate(" + inRuleOrder(translation + "%", "0") + ")";
             scope_Handles[handleNumber].style[options.transformRule] = translateRule;
+            // sanity check for at least 2 handles (e.g. during setup)
+            if (options.events.invertConnects && scope_Locations.length > 1) {
+                // check if handles passed each other, but don't match the ConnectsInverted state
+                var handlesAreInOrder = scope_Locations.every(function (position, index, locations) {
+                    return index === 0 || position >= locations[index - 1];
+                });
+                if (scope_ConnectsInverted !== !handlesAreInOrder) {
+                    // invert connects when handles pass each other
+                    invertConnects();
+                    // invertConnects already updates all connect elements
+                    return;
+                }
+            }
             updateConnect(handleNumber);
             updateConnect(handleNumber + 1);
+            if (scope_ConnectsInverted) {
+                // When connects are inverted, we also have to update adjacent connects
+                updateConnect(handleNumber - 1);
+                updateConnect(handleNumber + 2);
+            }
         }
         // Handles before the slider middle are stacked later = higher,
         // Handles after the middle later is lower
@@ -1905,9 +1970,9 @@
         }
         // Test suggested values and apply margin, step.
         // if exactInput is true, don't run checkHandlePosition, then the handle can be placed in between steps (#436)
-        function setHandle(handleNumber, to, lookBackward, lookForward, exactInput) {
+        function setHandle(handleNumber, to, lookBackward, lookForward, exactInput, smoothSteps) {
             if (!exactInput) {
-                to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward, false);
+                to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward, false, smoothSteps);
             }
             if (to === false) {
                 return false;
@@ -1921,13 +1986,20 @@
             if (!scope_Connects[index]) {
                 return;
             }
+            // Create a copy of locations, so we can sort them for the local scope logic
+            var locations = scope_Locations.slice();
+            if (scope_ConnectsInverted) {
+                locations.sort(function (a, b) {
+                    return a - b;
+                });
+            }
             var l = 0;
             var h = 100;
             if (index !== 0) {
-                l = scope_Locations[index - 1];
+                l = locations[index - 1];
             }
             if (index !== scope_Connects.length - 1) {
-                h = scope_Locations[index];
+                h = locations[index];
             }
             // We use two rules:
             // 'translate' to change the left/top offset;
@@ -2119,6 +2191,7 @@
                 "format",
                 "pips",
                 "tooltips",
+                "connect",
             ];
             // Only change options that we're actually passed to update.
             updateAble.forEach(function (name) {
@@ -2156,6 +2229,32 @@
             // Invalidate the current positioning so valueSet forces an update.
             scope_Locations = [];
             valueSet(isSet(optionsToUpdate.start) ? optionsToUpdate.start : v, fireSetEvent);
+            // Update connects only if it was set
+            if (optionsToUpdate.connect) {
+                updateConnectOption();
+            }
+        }
+        function updateConnectOption() {
+            // IE supported way of removing children including event handlers
+            while (scope_ConnectBase.firstChild) {
+                scope_ConnectBase.removeChild(scope_ConnectBase.firstChild);
+            }
+            // Adding new connects according to the new connect options
+            for (var i = 0; i <= options.handles; i++) {
+                scope_Connects[i] = addConnect(scope_ConnectBase, options.connect[i]);
+                updateConnect(i);
+            }
+            // re-adding drag events for the new connect elements
+            // to ignore the other events we have to negate the 'if (!behaviour.fixed)' check
+            bindSliderEvents({ drag: options.events.drag, fixed: true });
+        }
+        // Invert options for connect handles
+        function invertConnects() {
+            scope_ConnectsInverted = !scope_ConnectsInverted;
+            testConnect(options, 
+            // inverse the connect boolean array
+            options.connect.map(function (b) { return !b; }));
+            updateConnectOption();
         }
         // Initialization steps
         function setupSlider() {
@@ -2185,6 +2284,8 @@
             set: valueSet,
             setHandle: valueSetHandle,
             reset: valueReset,
+            disable: disable,
+            enable: enable,
             // Exposed for unit testing, don't use this in your application.
             __moveHandles: function (upward, proposal, handleNumbers) {
                 moveHandles(upward, proposal, scope_Locations, handleNumbers);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.10.23",
+  "version": "0.10.25",
   "description": "",
   "main": "index.js",
   "repository": {

package/ui/consent.css

@@ -14,7 +14,18 @@ footer [block-type="consent_form"][data-transient="true"] {
 	display:none;
 }
 
-[contenteditable] [block-type="consent_form"][data-transient="true"],
-[block-type="consent_form"][data-transient="true"] > template {
+[block-type="consent_form"] > [block-content="content"] {
+	display:none;
+}
+[block-type="consent_form"] > .view {
+	position:relative;
+}
+[contenteditable] [block-type="consent_form"] > [block-content="content"] {
 	display:block;
+	min-height:1em;
+}
+
+[contenteditable] [block-focused="last"] > .form[block-type="consent_form"][data-transient="true"],
+.form[block-type="consent_form"][data-transient="true"][block-focused] {
+	display: block;
 }

package/ui/consent.js

@@ -7,51 +7,47 @@ class HTMLCustomConsentElement extends HTMLFormElement {
 		dataTransient: false
 	};
 
-	static ask() {
-		this.waiting = false;
+	static explicit;
+
+	static ask(consent) {
 		let tacit = true;
-		for (const node of document.querySelectorAll('[block-type="consent_form"]')) {
+		const forms = document.querySelectorAll('[block-type="consent_form"]');
+		this.explicit = forms.length > 0;
+		for (const node of forms) {
 			node.classList.add('visible');
-			tacit = false;
+			tacit = consent && !node.querySelector(`[name="${consent}"]`) || false;
 		}
-		return !tacit;
+		return tacit ? "yes" : null;
 	}
 	setup(state) {
 		if (this.isContentEditable) return;
-		if (this.options.transient) {
-			const tmpl = this.ownTpl.prerender();
-			if (tmpl.content && tmpl.children.length == 0) {
-				tmpl.appendChild(tmpl.content);
-			}
-		}
-		state.consent(this);
+		const view = this.ownView;
+		view.textContent = '';
+		const tmpl = this.ownTpl.prerender();
+		view.appendChild(tmpl.content.cloneNode(true));
+		state.chain('consent', this);
 	}
 	chainConsent(state) {
-		window.HTMLCustomFormElement.prototype.fill.call(this, {
-			consent: state.scope.$consent
-		});
+		window.HTMLCustomFormElement.prototype.fill.call(this, state.scope.storage.all());
 		if (this.options.transient) this.classList.remove('visible');
 	}
+	handleChange(e, state) {
+		if (e.type == "submit" || !this.elements.find(item => item.type == "submit")) {
+			this.handleSubmit(e, state);
+		}
+	}
 	handleSubmit(e, state) {
 		if (e.type == "submit") e.preventDefault();
 		if (this.isContentEditable) return;
-		const fd = window.HTMLCustomFormElement.prototype.read.call(this);
-		const consent = fd.consent;
-		if (consent == null) {
-			return;
+		const consents = window.HTMLCustomFormElement.prototype.read.call(this);
+		for (const [key, val] of Object.entries(consents)) {
+			Page.storage.set(key, val);
 		}
-		Page.storage.set('consent', consent);
-		state.scope.$consent = consent;
 		state.runChain('consent');
 	}
-	handleChange(e, state) {
-		this.handleSubmit(e, state);
-	}
 	patch(state) {
 		if (this.isContentEditable) return;
-		if (this.options.transient) {
-			this.ownTpl.prerender();
-		}
+		this.ownTpl.prerender();
 	}
 	get ownTpl() {
 		return this.children.find(
@@ -63,43 +59,27 @@ class HTMLCustomConsentElement extends HTMLFormElement {
 	}
 }
 
-Page.ready(() => {
-	VirtualHTMLElement.define(`element-consent`, HTMLCustomConsentElement, 'form');
-});
-
-Page.State.prototype.consent = function (fn) {
-	const initial = this.scope.$consent === undefined;
-	let consent = Page.storage.get('consent');
-	if (consent == null && initial) consent = undefined;
-	this.scope.$consent = consent;
-	this.chain('consent', fn);
-	if (consent === undefined) {
-		HTMLCustomConsentElement.waiting = true;
-	} else if (consent === null) {
-		// setup finished but no consent is done yet, ask consent
-		this.reconsent();
-	}
-};
-
-Page.State.prototype.reconsent = function (fn) {
-	if (fn) this.consent(fn);
-	const consent = this.scope.$consent;
-	let asking = false;
-	if (consent != "yes") {
-		asking = HTMLCustomConsentElement.ask();
+Page.State.prototype.consent = function (listener, ask) {
+	const { consent } = listener.constructor;
+	if (!consent) {
+		console.warn("Expected a static consent field", listener);
+		return;
 	}
-	if (!asking) {
-		if (consent == null) this.scope.$consent = "yes";
+	const cur = Page.storage.get(consent);
+	if (cur == null || ask) {
+		Page.storage.set(consent, HTMLCustomConsentElement.ask(consent));
 	}
-	return asking;
+	this.chain('consent', listener);
 };
 
-Page.paint((state) => {
+Page.ready(() => {
+	VirtualHTMLElement.define(`element-consent`, HTMLCustomConsentElement, 'form');
+});
+
+Page.paint(state => {
 	state.finish(() => {
-		let run = true;
-		if (HTMLCustomConsentElement.waiting) {
-			if (state.reconsent()) run = false;
+		if (!HTMLCustomConsentElement.explicit) {
+			state.runChain('consent');
 		}
-		if (run) state.runChain('consent');
 	});
 });

package/ui/embed.js

@@ -1,4 +1,5 @@
 class HTMLElementEmbed extends VirtualHTMLElement {
+	static consent = "consent.embed";
 	static defaults = {
 		src: null,
 		hash: null
@@ -18,7 +19,7 @@ class HTMLElementEmbed extends VirtualHTMLElement {
 		return this.promise;
 	}
 	consent(state) {
-		const consent = state.scope.$consent;
+		const consent = Page.storage.get(this.constructor.consent);
 		this.classList.toggle('denied', consent == "no");
 		this.classList.toggle('waiting', consent == null);
 
@@ -56,7 +57,7 @@ class HTMLElementEmbed extends VirtualHTMLElement {
 		}
 	}
 	captureClick(e, state) {
-		if (this.matches('.denied')) state.reconsent();
+		if (this.matches('.denied')) state.consent(this, true);
 	}
 	captureLoad() {
 		this.promise.done();

package/ui/storage.js

@@ -1,43 +1,28 @@
 class UserStore {
+	#store = window.localStorage ?? {};
+	all() {
+		return this.#store;
+	}
 	get(key) {
-		let storage = window.localStorage;
-		let val;
-		if (storage) {
-			try {
-				val = storage.getItem(key);
-			} catch(ex) {
-				storage = null;
-			}
-		}
-		if (!storage) {
-			val = this.getCookies()[key];
+		try {
+			return this.#store.getItem(key);
+		} catch (ex) {
+			console.error(ex);
 		}
-		return val;
 	}
 	set(key, val) {
-		let storage = window.localStorage;
-		if (storage) {
-			try {
-				storage.setItem(key, val);
-			} catch(ex) {
-				storage = null;
-			}
-		}
-		if (!storage) {
-			this.setCookie(key, val);
+		try {
+			if (val == null) return this.del(key);
+			else return this.#store.setItem(key, val);
+		} catch (ex) {
+			console.error(ex);
 		}
 	}
 	del(key) {
-		let storage = window.localStorage;
-		if (storage) {
-			try {
-				storage.removeItem(key);
-			} catch(ex) {
-				storage = null;
-			}
-		}
-		if (!storage) {
-			this.clearCookie(key);
+		try {
+			return this.#store.removeItem(key);
+		} catch (ex) {
+			console.error(ex);
 		}
 	}
 	clearCookies(re) {
@@ -68,5 +53,5 @@ class UserStore {
 	}
 }
 
-Page.setup(() => Page.storage = new UserStore());
+Page.paint(() => Page.storage = new UserStore());