@pageboard/html 0.11.28 → 0.12.0

package/ui/image.js

@@ -1,4 +1,4 @@
-class HTMLElementImage extends VirtualHTMLElement {
+const HTMLElementImageConstructor = Superclass => class extends Superclass {
 	static defaults = {
 		src: null,
 		crop: null
@@ -7,6 +7,8 @@ class HTMLElementImage extends VirtualHTMLElement {
 	static defaultWidth = 240;
 	static defaultHeight = 180;
 
+	#defer = new Deferred();
+
 	static getZoom({ w, h, rw, rh, fit }) {
 		let z = 100;
 		if (!rw && !rh) return z;
@@ -31,10 +33,6 @@ class HTMLElementImage extends VirtualHTMLElement {
 		}
 		return { w, h };
 	}
-	init() {
-		this.promise = Promise.resolve();
-		this.promise.done = function () { };
-	}
 	findClass(list) {
 		return list.find(name => this.matches(`.${name}`)) || list[0];
 	}
@@ -95,8 +93,8 @@ class HTMLElementImage extends VirtualHTMLElement {
 		if (this.currentSrc != this.options.src) {
 			this.classList.remove('error');
 		}
-		this.dataset.width = this.constructor.defaultWidth;
-		this.dataset.height = this.constructor.defaultHeight;
+		this.dataset.width = this.constructor.defaultWidth || "";
+		this.dataset.height = this.constructor.defaultHeight || "";
 		if (this.options.src) {
 			const loc = Page.parse(this.options.src);
 			const meta = state.scope.$hrefs?.[loc.pathname];
@@ -106,8 +104,8 @@ class HTMLElementImage extends VirtualHTMLElement {
 			}
 		}
 		const { w, h } = this.dimensions;
-		this.image.width = w || this.dataset.width;
-		this.image.height = h || this.dataset.height;
+		if (w) this.image.width = w || this.dataset.width;
+		if (h) this.image.height = h || this.dataset.height;
 		if (!this.currentSrc) {
 			this.placeholder();
 		}
@@ -156,27 +154,24 @@ class HTMLElementImage extends VirtualHTMLElement {
 			const rh = rect.height;
 			if (rw == 0 && rh == 0) {
 				// don't show
-				return this.promise;
+				return this.#defer;
 			}
-			loc.query.rs = "z-" + HTMLElementImage.getZoom({ w, h, rw, rh, fit });
+			loc.query.rs = "z-" + this.constructor.getZoom({ w, h, rw, rh, fit });
 		}
 		const curSrc = loc.toString();
 		if (curSrc != this.currentSrc) {
 			this.classList.add('loading');
-			let done;
-			this.promise = new Promise(resolve => done = resolve);
-			this.promise.done = done;
 			img.setAttribute('src', curSrc);
 		}
-		return this.promise;
+		return this.#defer;
 	}
 	captureLoad() {
-		this.promise?.done();
+		this.#defer.resolve();
 		this.classList.remove('loading');
 		this.fix(this.image);
 	}
 	captureError() {
-		this.promise?.done();
+		this.#defer.resolve();
 		this.classList.remove('loading');
 		this.classList.add('error');
 		this.placeholder(true);
@@ -184,21 +179,16 @@ class HTMLElementImage extends VirtualHTMLElement {
 	placeholder(error) {
 		this.image.removeAttribute('src');
 	}
-}
+};
 
-class HTMLElementInlineImage extends HTMLImageElement {
-	constructor() {
-		super();
-		if (this.init) this.init();
-	}
+const HTMLElementImage = HTMLElementImageConstructor(Page.Element);
+
+class HTMLElementInlineImage extends HTMLElementImageConstructor(Page.create(HTMLImageElement)) {
 	static defaults = {
 		dataSrc: null,
 		dataCrop: null
 	};
 
-	static defaultWidth = 40;
-	static defaultHeight = 30;
-
 	get image() {
 		return this;
 	}
@@ -213,12 +203,11 @@ class HTMLElementInlineImage extends HTMLImageElement {
 	}
 
 	get currentSrc() {
-		const cur = super.currentSrc;
+		const cur = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'currentSrc').get.call(this);
 		if (!cur && this.image.src?.startsWith('data:')) return this.src;
 		else return cur;
 	}
 }
 
-VirtualHTMLElement.inherits(HTMLElementInlineImage, HTMLElementImage);
-VirtualHTMLElement.define('element-image', HTMLElementImage);
-VirtualHTMLElement.define(`element-img`, HTMLElementInlineImage, 'img');
+Page.define('element-image', HTMLElementImage);
+Page.define(`element-img`, HTMLElementInlineImage, 'img');

package/ui/input-date-slot.js

@@ -1,4 +1,4 @@
-class HTMLElementInputDateSlot extends VirtualHTMLElement {
+class HTMLElementInputDateSlot extends Page.Element {
 	handleChange(e, state) {
 		this.update(e.target);
 	}
@@ -74,5 +74,5 @@ class HTMLElementInputDateSlot extends VirtualHTMLElement {
 	}
 }
 
-VirtualHTMLElement.define('element-input-date-slot', HTMLElementInputDateSlot);
+Page.define('element-input-date-slot', HTMLElementInputDateSlot);
 

package/ui/input-date.js

@@ -1,9 +1,4 @@
-class HTMLElementInputDate extends HTMLInputElement {
-	constructor() {
-		super();
-		if (this.init) this.init();
-	}
-
+class HTMLElementInputDate extends Page.create(HTMLInputElement) {
 	patch() {
 		if (this.type == "date") this.removeAttribute('step');
 	}
@@ -70,4 +65,4 @@ class HTMLElementInputDate extends HTMLInputElement {
 	}
 }
 
-VirtualHTMLElement.define('element-input-date', HTMLElementInputDate, 'input');
+Page.define('element-input-date', HTMLElementInputDate, 'input');

package/ui/input-file.js

@@ -1,6 +1,6 @@
-class HTMLElementInputFile extends HTMLInputElement {
+class HTMLElementInputFile extends Page.create(HTMLInputElement) {
 	#xhr;
-	#promise;
+	#defer;
 	#defaultValue;
 
 	/* Since input[type=file] does not allow setting "value" property,
@@ -10,11 +10,6 @@ class HTMLElementInputFile extends HTMLInputElement {
 	 * and filled value attribute.
 	 */
 
-	constructor() {
-		super();
-		if (this.init) this.init();
-		this.save();
-	}
 	get defaultValue() {
 		return this.#defaultValue;
 	}
@@ -32,6 +27,9 @@ class HTMLElementInputFile extends HTMLInputElement {
 			super.value = "";
 		}
 	}
+	patch() {
+		this.save();
+	}
 	captureClick(e, state) {
 		if (this.value) {
 			e.preventDefault();
@@ -55,7 +53,7 @@ class HTMLElementInputFile extends HTMLInputElement {
 	}
 
 	presubmit() {
-		if (this.#promise) return this.#promise;
+		if (this.#defer) return this.#defer;
 		if (!this.files.length) return Promise.resolve();
 		const field = this.closest('.field');
 		field.classList.remove('success', 'error');
@@ -65,68 +63,67 @@ class HTMLElementInputFile extends HTMLInputElement {
 		}
 		track(0);
 		field.classList.add('loading');
-		const p = new Promise((resolve, reject) => {
-			const fail = (err) => {
-				field.classList.add('error');
-				field.classList.remove('loading');
-				this.#xhr = null;
-				reject(err);
-				this.#promise = null;
-			};
-			const pass = (obj) => {
-				if (!obj.items || obj.items.length == 0) return fail(new Error("File rejected"));
-				const val = obj.items[0];
-				this.value = val;
-				field.classList.add('success');
-				field.classList.remove('loading');
-				this.#xhr = null;
-				resolve();
-				this.#promise = null;
-			};
-			if (this.files.length == 0) return resolve(); // or reject ?
+		this.#defer = new Deferred();
 
-			const fd = new FormData();
-			fd.append("files", this.files[0]);
+		const fail = (err) => {
+			field.classList.add('error');
+			field.classList.remove('loading');
+			this.#xhr = null;
+			this.#defer.reject(err);
+			this.#defer = null;
+		};
+		const pass = (obj) => {
+			if (!obj.items || obj.items.length == 0) return fail(new Error("File rejected"));
+			const val = obj.items[0];
+			this.value = val;
+			field.classList.add('success');
+			field.classList.remove('loading');
+			this.#xhr = null;
+			this.#defer.resolve();
+			this.#defer = null;
+		};
+		if (this.files.length == 0) return this.#defer.resolve(); // or reject ?
 
-			const xhr = new XMLHttpRequest();
+		const fd = new FormData();
+		fd.append("files", this.files[0]);
 
-			xhr.upload.addEventListener("progress", (e) => {
-				if (e.lengthComputable) {
-					let percent = Math.round((e.loaded * 100) / e.total);
-					if (percent >= 100) percent = 99; // only load event can reach 100
-					track(percent);
-				}
-			});
+		const xhr = new XMLHttpRequest();
 
-			xhr.addEventListener('load', () => {
-				track(100);
-				try {
-					pass(JSON.parse(xhr.responseText));
-				} catch (ex) {
-					fail(ex);
-				}
-			});
+		xhr.upload.addEventListener("progress", (e) => {
+			if (e.lengthComputable) {
+				let percent = Math.round((e.loaded * 100) / e.total);
+				if (percent >= 100) percent = 99; // only load event can reach 100
+				track(percent);
+			}
+		});
 
-			xhr.addEventListener('error', (e) => {
-				if (xhr.status == 0) return fail("Connection error");
-				const msg = xhr.statusText || "Connection error";
-				const err = new Error(msg);
-				err.statusCode = xhr.status;
-				fail(err);
-			});
+		xhr.addEventListener('load', () => {
+			track(100);
 			try {
-				xhr.open("POST", `/.api/upload/${this.id}`, true);
-				xhr.setRequestHeader('Accept', "application/json; q=1.0");
-				xhr.send(fd);
-				this.#xhr = xhr;
-			} catch (err) {
-				fail(err);
+				pass(JSON.parse(xhr.responseText));
+			} catch (ex) {
+				fail(ex);
 			}
 		});
-		this.#promise = p;
-		return p;
+
+		xhr.addEventListener('error', (e) => {
+			if (xhr.status == 0) return fail("Connection error");
+			const msg = xhr.statusText || "Connection error";
+			const err = new Error(msg);
+			err.statusCode = xhr.status;
+			fail(err);
+		});
+		try {
+			xhr.open("POST", `/.api/upload/${this.id}`, true);
+			xhr.setRequestHeader('Accept', "application/json; q=1.0");
+			xhr.send(fd);
+			this.#xhr = xhr;
+		} catch (err) {
+			fail(err);
+		}
+		return this.#defer;
 	}
 }
 
-VirtualHTMLElement.define('element-input-file', HTMLElementInputFile, 'input');
+Page.define('element-input-file', HTMLElementInputFile, 'input');
 

package/ui/input-range.js

@@ -1,8 +1,4 @@
-class HTMLElementInputRange extends HTMLInputElement {
-	constructor() {
-		super();
-		if (this.init) this.init();
-	}
+class HTMLElementInputRange extends Page.create(HTMLInputElement) {
 	static parse(x) {
 		return (x == null ? '' : x)
 			.split('⩽')
@@ -120,7 +116,7 @@ class HTMLElementInputRange extends HTMLInputElement {
 	}
 }
 
-Page.ready(() => {
-	VirtualHTMLElement.define('element-input-range', HTMLElementInputRange, 'input');
-});
+
+Page.define('element-input-range', HTMLElementInputRange, 'input');
+
 

package/ui/layout.js

@@ -1,8 +1,4 @@
-class HTMLElementLayout extends HTMLDivElement {
-	constructor() {
-		super();
-		if (this.init) this.init();
-	}
+class HTMLElementLayout extends Page.create(HTMLDivElement) {
 	static defaults = {
 		dataSrc: null,
 		dataCrop: null,
@@ -93,4 +89,4 @@ for (const name of ['crop', 'dimensions']) {
 }
 })(window.customElements.get('element-image'));
 
-VirtualHTMLElement.define(`element-layout`, HTMLElementLayout, 'div');
+Page.define(`element-layout`, HTMLElementLayout, 'div');

package/ui/media.js

@@ -1,8 +1,6 @@
-const MixinMedia = {
-	init() {
-		this.promise = Promise.resolve();
-		this.promise.done = function() {};
-	},
+const HTMLElementMediaConstructor = Superclass => class extends Superclass {
+	#defer = new Deferred();
+
 	patch(state) {
 		this.classList.remove('error', 'loading');
 		const loc = Page.parse(this.options.src);
@@ -10,55 +8,44 @@ const MixinMedia = {
 		if (!meta || !meta.width || !meta.height) return;
 		this.width = meta.width;
 		this.height = meta.height;
-	},
+	}
 	reveal(state) {
 		const curSrc = this.options.src;
 		if (curSrc != this.currentSrc) {
 			try {
 				this.currentSrc = curSrc;
-			} catch(e) {
+			} catch (e) {
 				// pass
 			}
 			this.setAttribute('src', curSrc);
 		}
 		if (this.isContentEditable) this.pause();
-		return this.promise;
-	},
+		return this.#defer;
+	}
 	handleClick(e) {
 		if (this.isContentEditable) e.preventDefault();
-	},
+	}
 	captureLoad() {
-		this.promise.done();
+		this.#defer.resolve();
 		this.classList.remove('loading');
-	},
+	}
 	captureError() {
-		this.promise.done();
+		this.#defer.resolve();
 		this.classList.remove('loading');
 		this.classList.add('error');
 	}
 };
 
-class HTMLElementVideo extends HTMLVideoElement {
-	constructor() {
-		super();
-		if (this.init) this.init();
-	}
+class HTMLElementVideo extends HTMLElementMediaConstructor(Page.create(HTMLVideoElement)) {
 	static defaults = {
 		dataSrc: null
 	};
 }
-Object.assign(HTMLElementVideo.prototype, MixinMedia);
+Page.define('element-video', HTMLElementVideo, 'video');
 
-class HTMLElementAudio extends HTMLAudioElement {
-	constructor() {
-		super();
-		if (this.init) this.init();
-	}
+class HTMLElementAudio extends HTMLElementMediaConstructor(Page.create(HTMLAudioElement)) {
 	static defaults = {
 		dataSrc: null
 	};
 }
-Object.assign(HTMLElementAudio.prototype, MixinMedia);
-
-VirtualHTMLElement.define('element-video', HTMLElementVideo, 'video');
-VirtualHTMLElement.define('element-audio', HTMLElementAudio, 'audio');
+Page.define('element-audio', HTMLElementAudio, 'audio');

package/ui/menu.js

@@ -1,30 +1,28 @@
-Page.patch(state => {
-	function isSameOrParent(loc, state, isItem) {
-		if (!state.sameDomain(loc)) {
-			return false;
-		} else if (state.samePathname(loc)) {
-			if (!isItem && loc.sameQuery({query:{}})) return true;
-			if (state.query.develop !== undefined) {
-				// kept for backward compatibility
-				loc.query.develop = state.query.develop;
+class HTMLElementMenu extends Page.Element {
+	static patch(state) {
+		function isSameOrParent(loc, ref, isItem) {
+			if (!ref.sameDomain(loc)) {
+				return false;
+			} else if (ref.samePathname(loc)) {
+				if (!isItem && !loc.search || ref.sameQuery(loc)) return true;
+			} else {
+				return ref.pathname.startsWith(loc.pathname + '/');
 			}
-			if (state.sameQuery(loc)) return true;
-		} else {
-			return state.pathname.startsWith(loc.pathname + '/');
 		}
-	}
-	state.finish(() => {
-		for (const item of document.querySelectorAll('[block-type="menu"] [href]')) {
-			const loc = item.getAttribute('href');
-			if (!loc) continue;
-			if (isSameOrParent(Page.parse(loc), state, item.matches('.item'))) {
-				item.classList.add('active');
+		state.finish(() => {
+			const ref = state.parse(state);
+			for (const name of state.ivars) {
+				delete ref.query[name];
 			}
-		}
-	});
-});
-
-class HTMLElementMenu extends VirtualHTMLElement {
+			for (const item of document.querySelectorAll('[block-type="menu"] [href]')) {
+				const loc = item.getAttribute('href');
+				if (!loc) continue;
+				if (isSameOrParent(state.parse(loc), ref, item.matches('.item'))) {
+					item.classList.add('active');
+				}
+			}
+		});
+	}
 	setup(state) {
 		if (this.isContentEditable || this.matches('.vertical')) return;
 		const menu = this.firstElementChild;
@@ -86,6 +84,4 @@ class HTMLElementMenu extends VirtualHTMLElement {
 	}
 }
 
-Page.setup(() => {
-	VirtualHTMLElement.define('element-menu', HTMLElementMenu);
-});
+Page.define('element-menu', HTMLElementMenu);

package/ui/pagination.js

@@ -1,4 +1,4 @@
-class HTMLElementPagination extends HTMLAnchorElement {
+class HTMLElementPagination extends Page.create(HTMLAnchorElement) {
 	patch(state) {
 		if (this.isContentEditable) return;
 		state.finish(() => {
@@ -47,4 +47,4 @@ class HTMLElementPagination extends HTMLAnchorElement {
 	}
 }
 
-VirtualHTMLElement.define('element-pagination', HTMLElementPagination, "a");
+Page.define('element-pagination', HTMLElementPagination, "a");

package/ui/query-tags.js

@@ -1,4 +1,4 @@
-class HTMLElementQueryTags extends VirtualHTMLElement {
+class HTMLElementQueryTags extends Page.Element {
 	find(name, value) {
 		let nodes;
 		const formName = this.getAttribute('for');
@@ -102,7 +102,7 @@ class HTMLElementQueryTags extends VirtualHTMLElement {
 	}
 }
 
-Page.ready(() => {
-	VirtualHTMLElement.define('element-query-tags', HTMLElementQueryTags);
-});
+
+Page.define('element-query-tags', HTMLElementQueryTags);
+
 

package/ui/rating.js

@@ -1,4 +1,4 @@
-class HTMLElementRating extends VirtualHTMLElement {
+class HTMLElementRating extends Page.Element {
 	static defaults = {
 		maximum: 4,
 		value: (x) => parseFloat(x) || 0,
@@ -20,5 +20,5 @@ class HTMLElementRating extends VirtualHTMLElement {
 	}
 }
 
-VirtualHTMLElement.define('element-rating', HTMLElementRating);
+Page.define('element-rating', HTMLElementRating);
 

package/ui/scroll-link.js

@@ -1,8 +1,4 @@
-class HTMLScrollLinkElement extends HTMLAnchorElement {
-	constructor() {
-		super();
-		if (this.init) this.init();
-	}
+class HTMLScrollLinkElement extends Page.create(HTMLAnchorElement) {
 	static defaults = {
 		dataTo: (x) => ["home", "end"].includes(x) ? x : "end"
 	};
@@ -25,7 +21,4 @@ class HTMLScrollLinkElement extends HTMLAnchorElement {
 	}
 }
 
-Page.setup(() => {
-	VirtualHTMLElement.define(`element-scroll-link`, HTMLScrollLinkElement, 'a');
-});
-
+Page.define(`element-scroll-link`, HTMLScrollLinkElement, 'a');

package/ui/select.js

@@ -1,4 +1,4 @@
-class HTMLElementSelect extends VirtualHTMLElement {
+class HTMLElementSelect extends Page.Element {
 	#observer;
 
 	static defaults = {
@@ -24,6 +24,7 @@ class HTMLElementSelect extends VirtualHTMLElement {
 	}
 
 	handleClick(e, state) {
+		if (this.isContentEditable) return;
 		const node = e.target;
 		const item = node.closest('element-select .item');
 		if (item) {
@@ -55,9 +56,9 @@ class HTMLElementSelect extends VirtualHTMLElement {
 	handleChange(e, state) {
 		const opt = e.target;
 		if (opt.selected) {
-			this.#selectItem(opt.value);
+			this.#selectItem(opt);
 		} else {
-			this.#deselectItem(opt.value);
+			this.#deselectItem(opt);
 		}
 	}
 	#toggleMenu(show) {
@@ -65,8 +66,9 @@ class HTMLElementSelect extends VirtualHTMLElement {
 		if (show === undefined) show = !style.display;
 		style.display = show ? "block" : null;
 	}
-	#selectItem(val) {
+	#selectItem(opt) {
 		const select = this.#select;
+		const val = opt.getAttribute('value');
 		const item = this.#menuOption(val);
 
 		if (this.options.multiple) {
@@ -80,11 +82,12 @@ class HTMLElementSelect extends VirtualHTMLElement {
 			this.#setText(item.innerText.trim());
 		}
 
-		const defaultOption = select.querySelector(`option[value=""]`);
+		const defaultOption = select.querySelector(`option:not([value])`);
 		if (defaultOption && val) defaultOption.selected = false;
 	}
-	#deselectItem(val) {
-		if (this.options.multiple) {
+	#deselectItem(opt) {
+		const val = opt.getAttribute('value');
+		if (this.options.multiple && val) {
 			const item = this.#child(`.label[data-value="${val}"]`);
 			if (item) item.remove();
 		}
@@ -112,9 +115,11 @@ class HTMLElementSelect extends VirtualHTMLElement {
 	}
 
 	#menuOption(val) {
+		if (val == null) val = "";
 		return this.querySelector(`element-select-option[data-value="${val}"]`);
 	}
 	#selectOption(val) {
+		if (val == null) val = "";
 		return this.querySelector(`select > option[value="${val}"]`);
 	}
 
@@ -124,20 +129,14 @@ class HTMLElementSelect extends VirtualHTMLElement {
 			this.#observer = null;
 		}
 	}
-	#fillSelect() {
+	#fillSelect(state) {
 		const select = this.#select;
 		if (!select) return;
-		const menu = this.#menu;
-		menu.children.forEach(item => {
-			const val = item.dataset.value;
-			select.insertAdjacentHTML(
-				'beforeEnd',
-				`<option value="${val == null ? '' : val}">${item.innerHTML}</option>`
-			);
-		});
+		select.insertAdjacentHTML('afterBegin', '<option value="[item.dataset.value]">[children|at:*|repeat:item|.innerText]</option>');
+		select.fuse(this.#menu, state.scope);
 	}
 	setup(state) {
-		this.#observer = new MutationObserver(mutations => this.#fillSelect());
+		this.#observer = new MutationObserver(mutations => this.#fillSelect(state));
 		this.#observer.observe(this.#menu, {
 			childList: true
 		});
@@ -166,24 +165,23 @@ class HTMLElementSelect extends VirtualHTMLElement {
 				menu.insertAdjacentHTML('afterBegin', `<element-select-option data-value="" block-type="input_select_option" class="item">-</element-select-option>`);
 			}
 		}
-		this.#fillSelect();
+		this.#fillSelect(state);
 	}
 
 	patch(state) {
-		if (this.isContentEditable) return; // write mode stop there
+		if (this.isContentEditable) return;
 		if (this.children.length == 1) this.build(state);
 
 		state.finish(() => {
 			// synchronize after form has filled select
 			this.#select.children.forEach(opt => {
 				if (opt.value) {
-					if (opt.selected) this.#selectItem(opt.value);
-					else this.#deselectItem(opt.value);
+					if (opt.selected) this.#selectItem(opt);
+					else this.#deselectItem(opt);
 				}
 			});
 		});
 	}
 }
 
-VirtualHTMLElement.define('element-select', HTMLElementSelect);
-
+Page.define('element-select', HTMLElementSelect);