@pageboard/html 0.14.33 → 0.14.35

package/elements/form.js

@@ -99,7 +99,7 @@ exports.api_form = {
 		action: {
 			title: 'Action',
 			description: 'Choose a service',
-			$ref: '/services?$action=write'
+			$ref: '/writes'
 		},
 		redirection: {
 			title: 'Success',

package/elements/link.js

@@ -44,7 +44,7 @@ exports.link = {
 	inline: true,
 	group: "inline",
 	tag: 'a:not([block-type]),a[block-type="link"]',
-	html: '<a href="[url]" hreflang="[lang]" class="[button|alt:ui button]" id="[id]"></a>',
+	html: '<a href="[url|lang:[lang]]" hreflang="[lang]" class="[button|alt:ui button]" id="[id]"></a>',
 	stylesheets: [
 		'../ui/components/button.css'
 	]
@@ -110,8 +110,7 @@ exports.link_button = {
 	},
 	contents: "text*",
 	group: "block",
-	tag: 'a.ui.button',
-	html: '<a href="[url]" hreflang="[lang]" class="ui [full|alt:fluid:] [icon] [compact] [float|post:%20floated] button"></a>',
+	html: '<a href="[url|lang:[lang]]" hreflang="[lang]" class="ui [full|alt:fluid:] [icon] [compact] [float|post:%20floated] button"></a>',
 	stylesheets: [
 		'../ui/components/button.css'
 	]

package/elements/menu.js

@@ -120,7 +120,7 @@ exports.menu_item_link = {
 		marks: "nolink"
 	},
 	group: 'menu_item',
-	html: '<a class="[labeled] item" href="[url]" hreflang="[lang]">Link</a>'
+	html: '<a class="[labeled] item" href="[url|lang:[lang]]" hreflang="[lang]">Link</a>'
 };
 
 exports.menu_item_block = { ...exports.menu_item_link,

package/elements/pagination.js

@@ -7,7 +7,7 @@ exports.pagination = {
 	isolating: true,
 	properties: {
 		fetch: {
-			title: 'Fetch block',
+			title: 'Name of fetch block',
 			type: 'string',
 			format: 'id',
 			$filter: {

package/package.json

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

package/ui/fieldset-list.js

@@ -224,14 +224,28 @@ class HTMLElementFieldsetList extends Page.Element {
 		}
 	}
 
-	#findIndex(btn) {
+	#findIndex(btn, add) {
 		let node = btn;
 		const sel = `[name^="${this.#prefixStr}"]`;
 		while ((node = node.parentNode)) {
-			const input = Array.from(node.querySelectorAll(sel)).pop();
-			if (!input) continue;
+			const list = Array.from(node.querySelectorAll(sel));
+			if (!list.length) continue;
+			const first = list[0];
+			const last = list.pop();
+			let offset = 0;
+			let input;
+			if (btn.compareDocumentPosition(last) & Node.DOCUMENT_POSITION_PRECEDING) {
+				// after last
+				if (add) offset += 1;
+				input = last;
+			} else if (first.compareDocumentPosition(btn) & Node.DOCUMENT_POSITION_PRECEDING) {
+				input = first;
+			}
+
 			const { index } = this.#parseName(input.name);
-			if (index >= 0 && index < this.#list.length) return index;
+			if (index >= 0 && index < this.#list.length) {
+				return index + offset;
+			}
 		}
 	}
 
@@ -246,7 +260,7 @@ class HTMLElementFieldsetList extends Page.Element {
 
 		switch (action) {
 			case "add":
-				list.splice((this.#findIndex(btn) ?? 0), 0, { ...this.#model });
+				list.splice((this.#findIndex(btn, true) ?? 0), 0, { ...this.#model });
 				break;
 			case "del":
 				list.splice(this.#findIndex(btn) ?? 0, 1);

package/ui/form.js

@@ -82,10 +82,9 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 				if (masked) toggles.push(submit);
 				state.vars.submit = true;
 			}
-			const vars = state.templatesQuery(this) || {};
-			for (const [key, val] of Object.entries(vars)) {
-				this.setAttribute('data-' + key, val);
-			}
+			const actionLoc = Page.parse(this.getAttribute('action'));
+			Object.assign(actionLoc.query, state.templatesQuery(this));
+			this.setAttribute('action', Page.format(actionLoc));
 			this.restore(state.scope);
 		} else {
 			for (const name of this.fill(state.query)) {
@@ -324,10 +323,9 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 			scope.$request = form.read(true, e.submitter);
 			form.disable();
 			form.classList.add('loading');
-			scope.$response = await state.fetch(form.method, Page.format({
-				pathname: form.getAttribute('action'),
-				query: form.dataset // because patch populates data from parameters
-			}), scope.$request);
+			scope.$response = await state.fetch(
+				form.method, form.getAttribute('action'), scope.$request
+			);
 		} catch (err) {
 			scope.$response = err;
 		}
@@ -359,7 +357,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 			form.backup();
 		}
 
-		const loc = Page.parse(redirect).fuse({}, scope);
+		const loc = Page.parse(redirect.fuse({}, scope));
 		let vary = false;
 		if (loc.samePathname(state)) {
 			if (res.granted) {

package/ui/pagination.js

@@ -7,28 +7,29 @@ class HTMLElementPagination extends Page.create(HTMLAnchorElement) {
 	}
 
 	#update(state) {
+		const { fetch } = this.dataset;
 		const node = this.ownerDocument.querySelector(
-			`element-template[action="/.api/query/${this.dataset.fetch}"]`
+			`element-template[action="/.api/query/${fetch}"]`
 		);
 		if (!node) {
-			console.warn("pagination does not find fetch node", this.dataset.fetch);
+			console.warn("pagination does not find fetch node", fetch);
 			return;
 		}
-		const name = node.dataset.offsetName;
+		const { offsetName } = node.dataset;
 		const offset = parseInt(node.dataset.offset) || 0;
 		const limit = parseInt(node.dataset.limit) || 10;
 		const count = parseInt(node.dataset.count) || 0;
 		const sign = this.dataset.dir == "-" ? -1 : +1;
-		const cur = sign > 0 ? offset : (offset - 2 * limit);
+		const cur = sign > 0 ? offset + limit : offset - limit;
 
 		this.setAttribute('href', Page.format({
 			pathname: state.pathname,
 			query: {
 				...state.query,
-				[name]: cur || undefined
+				[offsetName]: cur
 			}
 		}));
-		this.disabled = sign < 0 && offset <= limit || sign > 0 && offset >= count;
+		this.disabled = sign < 0 && cur < 0 || sign > 0 && cur >= count;
 	}
 	handleClick(e) {
 		if (this.disabled) {

package/ui/transition.js

@@ -26,11 +26,11 @@ const loader = new class {
 	update(state) {
 		document.documentElement.dataset.stage = state.stage;
 	}
-	setup(state) {
+	async setup(state) {
 		const tr = state.scope.transition;
+		await document.fonts?.ready;
+		document.body.hidden = false;
 		state.finish(async () => {
-			await document.fonts?.ready;
-			document.body.hidden = false;
 			if (tr?.ok) return tr.start();
 		});
 		tr?.end();