@pageboard/html 0.15.1 → 0.15.3

package/elements/form.js

@@ -72,6 +72,7 @@ exports.api_form = {
 	group: 'block form',
 	menu: "form",
 	required: ["action"],
+	unique: ["name"],
 	expressions: true,
 	$lock: {
 		'data.action.parameters': 'webmaster'
@@ -79,9 +80,9 @@ exports.api_form = {
 	properties: {
 		name: {
 			title: 'Name',
-			description: "Used by query 'submit' or 'toggle'\nExposes /@api/form/$name",
+			description: "Exposes /@api/$name\nUsed by query 'submit' or 'toggle'",
 			type: 'string',
-			format: 'id',
+			format: 'name',
 			nullable: true
 		},
 		hidden: {
@@ -101,72 +102,16 @@ exports.api_form = {
 			description: 'Choose a service',
 			$ref: '/writes'
 		},
-		request: {
-			title: 'Map inputs',
-			description: `
-				expr is supposed to be used to merge stuff into html,
-				not really to merge stuff into methods parameters
-				Also expr has a bad design because
-			  - it can be replaced by a binding element inside the block
-				- it forces the expression to be in a specific attribute,
-				  and mostly when a block has no content (so a binding cannot be used)
-				- the editor is ugly and shows fields that might not even be merged into html
-				Use cases
-				- links in anchors, images
-				- input or buttons values, checked attributes
-				- hidden attributes
-				- show/hide blocks depending on response
-				The "expr" mecanism could instead be a list of expressions like
-				[url|as:url|assign:.query.reservation:$query.reservation]
-				[url][$query|pick:text:cover|as:query]
-
-				Things to solve:
-				- do we want expr to be able to do changes outside the DOM of the block itself ? (no, this should be done by a binding element)
-				- do we want expr to change only data before merge - outside of any dom context ? Possibly ! In which case the current system is not that bad,
-				but it should not use matchdom dom plugin at all
-				- how to deal with "template" expressions when one cannot insert a binding
-				element ? Is it really something that happens ?
-
-
-
-			`,
-			type: 'object',
-			nullable: true
-		},
-		response: {
-			title: 'Map outputs',
-			description: `
-				'item.id': '[item.data.id]'
-				'item.title': '[item.content.title]'
-				// etc...
-			`,
-			type: 'object',
-			nullable: true
-		},
 		redirection: {
 			title: 'Success',
-			description: `
-				redirection can be used by client,
-				to change the page state. In which case the "url" is not an api url.
-				It can be used by the server, in which case the "url" is an api url.
-				The parameters for a page url make the query, and $query, $request, $response are available.
-				The parameters for a user api call are...?
-				The user api endpoint is a real url (/@api/xxx) that can expect
-				a body ($request) and a query ($query) too.
-				Currently client pages use a trick to redirect and submit: a specific parameter triggers a form submit on the redirected page. This makes sense in the context of page navigation - the body is filled by the form that is triggered by the parameters.
-				How can that be transposed for internal user api redirection ?
-				1. since it redirects, output mapping can be done to format the $response
-				2. in the next api call, parameters mean $query, $response becomes $request ?
-				3. this works if output can merge $query, $request as well
-			`,
+			description: 'Page state or action',
 			type: 'object',
 			properties: {
-				url: {
-					title: 'Page',
+				name: {
+					title: 'Form or Fetch Name',
 					nullable: true,
-					type: "string",
-					format: "page",
-					$helper: "page"
+					type: 'string',
+					format: 'name'
 				},
 				parameters: {
 					title: 'Parameters',
@@ -180,6 +125,12 @@ exports.api_form = {
 			title: 'Bad request',
 			type: 'object',
 			properties: {
+				name: {
+					title: 'Form or Fetch Name',
+					nullable: true,
+					type: 'string',
+					format: 'name'
+				},
 				parameters: {
 					title: 'Parameters',
 					type: "object",
@@ -192,6 +143,12 @@ exports.api_form = {
 			title: 'Unauthorized request',
 			type: 'object',
 			properties: {
+				name: {
+					title: 'Form or Fetch Name',
+					nullable: true,
+					type: 'string',
+					format: 'name'
+				},
 				parameters: {
 					title: 'Parameters',
 					type: "object",
@@ -204,6 +161,12 @@ exports.api_form = {
 			title: 'Request not found',
 			type: 'object',
 			properties: {
+				name: {
+					title: 'Form or Fetch Name',
+					nullable: true,
+					type: 'string',
+					format: 'name'
+				},
 				parameters: {
 					title: 'Parameters',
 					type: "object",
@@ -217,11 +180,11 @@ exports.api_form = {
 	tag: 'form[method="post"]',
 	html: `<form is="element-form" method="post" name="[name]" masked="[masked]"
 		action="/@api/form/[name|else:$id]"
-		parameters="[$expr?.action?.parameters|as:expressions]"
-		success="[redirection.url][redirection.parameters|as:query]"
-		badrequest="[badrequest.url][badrequest.parameters|as:query]"
-		unauthorized="[unauthorized.url][unauthorized.parameters|as:query]"
-		notfound="[notfound.url][notfound.parameters|as:query]"
+		parameters="[action?.request|as:expressions]"
+		success="[redirection.parameters|as:query]"
+		badrequest="[badrequest.parameters|as:query]"
+		unauthorized="[unauthorized.parameters|as:query]"
+		notfound="[notfound.parameters|as:query]"
 		class="ui form [hidden]"></form>`,
 	stylesheets: [
 		'../ui/components/form.css',

package/elements/image.js

@@ -25,6 +25,10 @@ exports.image = {
 				filter: {
 					type: ["image"]
 				}
+			},
+			$file: {
+				size: 50000000,
+				types: ["image/*"]
 			}
 		},
 		display: {
@@ -169,6 +173,10 @@ exports.inlineImage = {
 					maxWidth: 320,
 					maxHeight: 320
 				}
+			},
+			$file: {
+				size: 200000,
+				types: ["image/*"]
 			}
 		},
 		display: {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.15.1",
+  "version": "0.15.3",
   "description": "",
   "main": "index.js",
   "repository": {
@@ -15,7 +15,7 @@
   "homepage": "https://github.com/pageboard/client#readme",
   "dependencies": {},
   "devDependencies": {
-    "nouislider": "^15.7.1",
+    "nouislider": "^15.8.1",
     "postinstall": "^0.10.3"
   },
   "postinstall": {},

package/ui/form.js

@@ -212,7 +212,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 	save() {
 		this.classList.remove('unsaved');
 		for (const node of this.querySelectorAll("element-fieldset-list")) {
-			node.save();
+			node.save?.();
 		}
 		for (const node of this.elements) {
 			node.save?.();

package/ui/image.js

@@ -81,15 +81,16 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		const { w, h } = this.dimensions;
 		if (w) this.image.width = w || d.width;
 		if (h) this.image.height = h || d.height;
-		if (!this.currentSrc) {
+		const cur = this.currentSrc;
+		if (!cur) {
 			this.placeholder();
+		} else if (cur.startsWith('data:')) {
+			this.image.setAttribute('src', cur);
 		}
 	}
 
 	get currentSrc() {
-		const src = this.image?.currentSrc;
-		if (src?.startsWith('data:image/svg')) return null;
-		else return src;
+		return this.image?.currentSrc;
 	}
 
 	requestSrc(srcLoc) {

package/ui/otp.js

@@ -6,6 +6,7 @@ class HTMLElementInputOtp extends Page.create(HTMLInputElement) {
 		this.value = "";
 	}
 	paint() {
+		if (this.isContentEditable) return;
 		this.focus();
 	}
 }