@pageboard/html 0.12.31 → 0.12.33

package/lib/nouislider.js

@@ -713,6 +713,7 @@
         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) {
@@ -722,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");
         }
@@ -734,6 +738,7 @@
             snap: snap,
             hover: hover,
             unconstrained: unconstrained,
+            invertConnects: invertConnects,
         };
     }
     function testTooltips(parsed, entry) {
@@ -904,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;
@@ -915,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;
@@ -971,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.
@@ -1930,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
@@ -1961,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;
@@ -2159,6 +2191,7 @@
                 "format",
                 "pips",
                 "tooltips",
+                "connect",
             ];
             // Only change options that we're actually passed to update.
             updateAble.forEach(function (name) {
@@ -2196,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() {

package/lib/object-fit-images.js

@@ -2,6 +2,10 @@ this.window = this.window || {};
 this.window.objectFitImages = (function () {
 	'use strict';
 
+	function getDefaultExportFromCjs (x) {
+		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+	}
+
 	/*! npm.im/object-fit-images 3.2.4 */
 
 	var OFI = 'bfred-it:object-fit-images';
@@ -233,6 +237,8 @@ this.window.objectFitImages = (function () {
 
 	var ofi_commonJs = fix;
 
-	return ofi_commonJs;
+	var ofi_commonJs$1 = /*@__PURE__*/getDefaultExportFromCjs(ofi_commonJs);
+
+	return ofi_commonJs$1;
 
 })();

package/package.json

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

package/ui/consent.js

@@ -3,51 +3,62 @@ class HTMLElementConsent extends Page.create(HTMLFormElement) {
 		dataTransient: false
 	};
 
-	static ask() {
-		this.waiting = false;
+	static explicits = new Set();
+
+	static ask(state, consent) {
 		let tacit = true;
-		for (const node of document.querySelectorAll('[block-type="consent_form"]')) {
+		const forms = document.querySelectorAll('[block-type="consent_form"]');
+		const consents = state.scope.storage.all();
+		for (const node of forms) {
+			window.HTMLElementForm.prototype.fill.call(node, consents);
 			node.classList.add('visible');
-			tacit = false;
+			tacit = consent && !node.querySelector(`[name="${consent}"]`) || false;
 		}
-		return !tacit;
+		if (!tacit) this.explicits.add(consent);
+		return tacit ? "yes" : null;
 	}
 	setup(state) {
 		if (state.scope.$write) return;
+		this.constructor.explicits = new Set();
+		const view = this.ownView;
+		view.textContent = '';
+		const tmpl = this.ownTpl.prerender();
+		view.appendChild(tmpl.content.cloneNode(true));
+		state.chain('consent', this);
+	}
+	chainConsent(state) {
 		if (this.options.transient) {
-			const tmpl = this.ownTpl.prerender();
-			if (tmpl.content && tmpl.children.length == 0) {
-				tmpl.appendChild(tmpl.content);
-			}
+			this.classList.remove('visible');
+		} else {
+			window.HTMLElementForm.prototype.fill.call(this, state.scope.storage.all());
 		}
-		state.consent(this);
 	}
-	chainConsent(state) {
-		window.HTMLElementForm.prototype.fill.call(this, {
-			consent: state.scope.$consent
-		});
-		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 (state.scope.$write) return;
-		const fd = window.HTMLElementForm.prototype.read.call(this);
-		const consent = fd.consent;
-		if (consent == null) {
+		const consents = window.HTMLElementForm.prototype.read.call(this);
+		const list = Array.from(this.constructor.explicits);
+		const def = consents.consent;
+		for (const consent of list) {
+			if (def != "custom") consents[consent] = def;
+		}
+		if (list.some(c => consents[c] == null)) {
+			// not all explicit consents have been answered
 			return;
 		}
-		state.scope.storage.set('consent', consent);
-		state.scope.$consent = consent;
-		state.runChain('consent');
-	}
-	handleChange(e, state) {
-		this.handleSubmit(e, state);
+		for (const [key, val] of Object.entries(consents)) {
+			state.scope.storage.set(key, val);
+		}
+		state.copy().runChain('consent');
 	}
 	patch(state) {
 		if (state.scope.$write) return;
-		if (this.options.transient) {
-			this.ownTpl.prerender();
-		}
+		this.ownTpl.prerender();
 	}
 	get ownTpl() {
 		return this.children.find(
@@ -59,43 +70,42 @@ class HTMLElementConsent extends Page.create(HTMLFormElement) {
 	}
 }
 
-
-Page.define(`element-consent`, HTMLElementConsent, 'form');
-
-
-Page.constructor.prototype.consent = function (fn) {
-	const initial = this.scope.$consent === undefined;
-	let consent = this.scope.storage.get('consent');
-	if (consent == null && initial) consent = undefined;
-	this.scope.$consent = consent;
-	this.chain('consent', fn);
-	if (consent === undefined) {
-		HTMLElementConsent.waiting = true;
-	} else if (consent === null) {
-		// setup finished but no consent is done yet, ask consent
-		this.reconsent();
+Page.constructor.prototype.consents = function (name, val) {
+	const { storage } = this.scope;
+	const key = "consent." + name;
+	if (val === null) {
+		storage.remove(key);
+	} else if (val !== undefined) {
+		storage.set(key, val ? "yes" : "no");
+	} else {
+		const str = storage.get(key);
+		if (str == "yes") return true;
+		else if (str == "no") return false;
+		else return null;
 	}
 };
 
-Page.constructor.prototype.reconsent = function (fn) {
-	if (fn) this.consent(fn);
-	const consent = this.scope.$consent;
-	let asking = false;
-	if (consent != "yes") {
-		asking = HTMLElementConsent.ask();
+Page.constructor.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 = this.consents(consent);
+	if (cur == null || ask) {
+		this.consents(consent, HTMLElementConsent.ask(this, consent));
 	}
-	return asking;
+	this.chain('consent', listener);
 };
 
+Page.define(`element-consent`, HTMLElementConsent, 'form');
+
+
 Page.paint(state => {
 	state.finish(() => {
-		let run = true;
-		if (HTMLElementConsent.waiting) {
-			if (state.reconsent()) run = false;
+		if (!HTMLElementConsent.explicits.size) {
+			// last chance for implicit consents
+			state.runChain('consent');
 		}
-		if (run) state.runChain('consent');
 	});
 });

package/ui/embed.js

@@ -1,4 +1,5 @@
 class HTMLElementEmbed extends Page.Element {
+	static consent = "marketing";
 	static defaults = {
 		src: null,
 		query: null,
@@ -21,12 +22,12 @@ class HTMLElementEmbed extends Page.Element {
 		if (width && height) this.style.paddingBottom = `calc(${height} / ${width} * 100%)`;
 	}
 	consent(state) {
-		const consent = state.scope.$consent;
-		this.classList.toggle('denied', consent == "no");
-		this.classList.toggle('waiting', consent == null);
+		const consent = state.consents(this.constructor.consent);
+		this.classList.toggle('denied', consent === false);
+		this.classList.toggle('waiting', consent === null);
 
 		const iframe = this.querySelector('iframe');
-		if (consent != "yes") {
+		if (consent !== true) {
 			iframe.src = "";
 			return;
 		}
@@ -57,7 +58,9 @@ class HTMLElementEmbed extends Page.Element {
 		}
 	}
 	captureClick(e, state) {
-		if (this.matches('.denied')) state.reconsent();
+		if (this.matches('.denied')) {
+			state.consent(this, true);
+		}
 	}
 	captureLoad() {
 		this.classList.remove('loading');

package/ui/form.js

@@ -351,7 +351,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 				.map(input => input.presubmit(state))
 		);
 
-		const request = form.read(true);
+		const request = form.read(true, e.submitter || document.activeElement);
 		form.disable();
 
 		const res = await state.fetch(form.method, Page.format({

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;
+			return this.#store.getItem(key);
+		} catch (ex) {
+			console.error(ex);
 			}
-		}
-		if (!storage) {
-			val = this.getCookies()[key];
-		}
-		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);
+			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);
+			return this.#store.removeItem(key);
+		} catch (ex) {
+			console.error(ex);
 		}
 	}
 	clearCookies(re) {
@@ -68,5 +53,5 @@ class UserStore {
 	}
 }
 
-Page.setup(state => state.scope.storage = new UserStore());
+Page.paint(state => state.scope.storage = new UserStore());