@pageboard/html 0.10.22 → 0.10.24

package/elements/consent.js

@@ -26,20 +26,28 @@ exports.consent_form = {
 	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 +58,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/elements/media.js

@@ -67,7 +67,7 @@ exports.video = {
 	},
 	html: `<video is="element-video" data-src="[url]" class="[display.fit|or:none]"
 		preload="metadata" autoplay="[autoplay]" loop="[loop]"
-		muted="[muted]" controls="[controls]"></video>`,
+		muted="[muted]" controls="[controls]" playsinline></video>`,
 	scripts: [
 		'../ui/media.js'
 	],

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;
@@ -959,6 +966,7 @@
             else if (handleNumber === options.handles - 1) {
                 addClass(handle, options.cssClasses.handleUpper);
             }
+            origin.handle = handle;
             return origin;
         }
         // Insert nodes for connect elements
@@ -970,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.
@@ -1022,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);
@@ -1904,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
@@ -1935,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;
@@ -2133,6 +2191,7 @@
                 "format",
                 "pips",
                 "tooltips",
+                "connect",
             ];
             // Only change options that we're actually passed to update.
             updateAble.forEach(function (name) {
@@ -2170,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() {
@@ -2199,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,13 +1,8 @@
 {
   "name": "@pageboard/html",
-  "version": "0.10.22",
+  "version": "0.10.24",
   "description": "",
   "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "postinstall": "postinstall",
-    "prepare": "postinstall"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pageboard/client.git"
@@ -48,5 +43,9 @@
     "elements": [
       "elements/"
     ]
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "postinstall": "postinstall"
   }
-}
+}

package/ui/consent.js

@@ -27,21 +27,17 @@ class HTMLCustomConsentElement extends HTMLFormElement {
 		state.consent(this);
 	}
 	chainConsent(state) {
-		window.HTMLCustomFormElement.prototype.fill.call(this, {
-			consent: state.scope.$consent
-		});
+		window.HTMLCustomFormElement.prototype.fill.call(this, state.scope.$consent);
 		if (this.options.transient) this.classList.remove('visible');
 	}
 	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('consent.' + key, val);
 		}
-		Page.storage.set('consent', consent);
-		state.scope.$consent = consent;
+		state.scope.$consent = consents;
 		state.runChain('consent');
 	}
 	handleChange(e, state) {
@@ -67,29 +63,32 @@ 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) {
+Page.State.prototype.consent = function (listener) {
+	this.scope.$consent ??= {};
+	const { consent } = listener.constructor;
+	const val = Page.storage.get('consent.' + consent);
+	this.scope.$consent[consent] = val;
+	this.chain('consent', listener);
+	if (val === undefined) {
 		HTMLCustomConsentElement.waiting = true;
-	} else if (consent === null) {
+	} else if (val === null) {
 		// setup finished but no consent is done yet, ask consent
-		this.reconsent();
+		this.reconsent(listener);
 	}
 };
 
-Page.State.prototype.reconsent = function (fn) {
-	if (fn) this.consent(fn);
-	const consent = this.scope.$consent;
+Page.State.prototype.reconsent = function (listener) {
+	if (listener) this.consent(listener);
+	const consents = this.scope.$consent;
 	let asking = false;
-	if (consent != "yes") {
-		asking = HTMLCustomConsentElement.ask();
-	}
-	if (!asking) {
-		if (consent == null) this.scope.$consent = "yes";
+	for (const [key, val] of Object.entries(consents)) {
+		if (listener && key != listener.constructor.consent) continue;
+		if (val != "yes") {
+			asking = HTMLCustomConsentElement.ask();
+		}
+		if (!asking) {
+			if (val == null) consents[key] = "yes";
+		}
 	}
 	return asking;
 };

package/ui/embed.js

@@ -1,4 +1,5 @@
 class HTMLElementEmbed extends VirtualHTMLElement {
+	static 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 = state.scope.$consent[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.reconsent(this);
 	}
 	captureLoad() {
 		this.promise.done();