@pageboard/html 0.11.28 → 0.12.0

package/ui/sitemap-helper.js

@@ -1,4 +1,4 @@
-class HTMLElementSitepage extends VirtualHTMLElement {
+class HTMLElementSitepage extends Page.Element {
 	static defaults = {
 		url: null,
 		index: (x) => parseInt(x) || 0
@@ -61,7 +61,7 @@ class HTMLElementSitepage extends VirtualHTMLElement {
 	}
 }
 
-Page.setup(() => {
-	VirtualHTMLElement.define('element-sitepage', HTMLElementSitepage);
-	VirtualHTMLElement.extend('element-sitemap', HTMLElementSitepage);
-});
+
+Page.define('element-sitepage', HTMLElementSitepage);
+Page.extend('element-sitemap', HTMLElementSitepage);
+

package/ui/sitemap.js

@@ -1,4 +1,4 @@
-class HTMLElementSitemap extends VirtualHTMLElement {
+class HTMLElementSitemap extends Page.Element {
 	static makeTree(tree, parent) {
 		let page = tree._;
 		if (page) {
@@ -52,27 +52,27 @@ class HTMLElementSitemap extends VirtualHTMLElement {
 		});
 	}
 
-	build(state) {
+	async build(state) {
 		if (this.firstElementChild.children.length > 0 && this.isContentEditable) {
 			// workaround... build is called a second time with pagecut-placeholder set
 			return;
 		}
-		return Pageboard.bundle(Pageboard.fetch('get', `/.api/pages`), state).then(res => {
-			state.scope.$element = state.scope.$elements.sitemap;
-			const tree = this.constructor.transformResponse(res);
-			const node = Pageboard.render({
-				item: tree
-			}, state.scope);
-			// only change block content
-			const src = node.firstElementChild;
-			const dst = this.firstElementChild;
-			dst.textContent = '';
-			while (src.firstChild) dst.appendChild(src.firstChild);
-		});
+		const res = await Pageboard.fetch('get', `/.api/pages`);
+		const scope = await Pageboard.bundle(state, res);
+		scope.$element = scope.$elements.sitemap;
+		const tree = this.constructor.transformResponse(res);
+		const node = Pageboard.render({
+			item: tree
+		}, scope);
+		// only change block content
+		const src = node.firstElementChild;
+		const dst = this.firstElementChild;
+		dst.textContent = '';
+		while (src.firstChild) dst.appendChild(src.firstChild);
 	}
 }
 
 
-VirtualHTMLElement.define('element-sitemap', HTMLElementSitemap);
+Page.define('element-sitemap', HTMLElementSitemap);
 
 

package/ui/sticky.js

@@ -1,8 +1,4 @@
-class HTMLElementStickyNav extends HTMLElement {
-	constructor() {
-		super();
-		if (this.init) this.init();
-	}
+class HTMLElementStickyNav extends Page.Element {
 	#lastScroll;
 	#currentScroll() {
 		return document.documentElement.scrollTop;
@@ -33,4 +29,4 @@ class HTMLElementStickyNav extends HTMLElement {
 	}
 }
 
-VirtualHTMLElement.define('element-sticky-nav', HTMLElementStickyNav, 'header');
+Page.define('element-sticky-nav', HTMLElementStickyNav, 'header');

package/ui/tab-helper.js

@@ -1,38 +1,36 @@
-Page.setup(() => {
-	VirtualHTMLElement.extend('element-tabs', class TabsHelper {
-		setup(state) {
-			if (!this.observer) this.observer = new MutationObserver(records => {
-				for (const record of records) this.mutate(record, state);
-			});
-			this.observer.observe(this.items, {
-				childList: true
-			});
+Page.extend('element-tabs', class TabsHelper {
+	setup(state) {
+		if (!this.observer) this.observer = new MutationObserver(records => {
+			for (const record of records) this.mutate(record, state);
+		});
+		this.observer.observe(this.items, {
+			childList: true
+		});
+	}
+	close() {
+		if (this.observer) this.observer.disconnect();
+	}
+	mutate(record, state) {
+		const items = this.items;
+		const tabs = this.tabs;
+		if (!items || !tabs) return;
+		for (const node of record.addedNodes) {
+			tabs.insertBefore(state.scope.$view.render({
+				type: 'tab'
+			}), tabs.children[items.children.indexOf(node) + 1]);
 		}
-		close() {
-			if (this.observer) this.observer.disconnect();
+		for (let i = 0; i < record.removedNodes.length; i++) {
+			const pos = record.target.childNodes.indexOf(record.previousSibling) + 1 + i;
+			const child = tabs.childNodes[pos];
+			if (child) child.remove();
 		}
-		mutate(record, state) {
-			const items = this.items;
-			const tabs = this.tabs;
-			if (!items || !tabs) return;
-			for (const node of record.addedNodes) {
-				tabs.insertBefore(state.scope.$view.render({
-					type: 'tab'
-				}), tabs.children[items.children.indexOf(node) + 1]);
-			}
-			for (let i = 0; i < record.removedNodes.length; i++) {
-				const pos = record.target.childNodes.indexOf(record.previousSibling) + 1 + i;
-				const child = tabs.childNodes[pos];
-				if (child) child.remove();
-			}
-		}
-		handleClick(e, state) {
-			const item = e.target.closest('[block-type="tab_item"]');
-			if (!item) return;
-			const menu = item.parentNode;
-			if (!menu || menu.parentNode != this) return;
-			this.options.index = this.dataset.index = menu.children.indexOf(item);
-		}
-	});
+	}
+	handleClick(e, state) {
+		const item = e.target.closest('[block-type="tab_item"]');
+		if (!item) return;
+		const menu = item.parentNode;
+		if (!menu || menu.parentNode != this) return;
+		this.options.index = this.dataset.index = menu.children.indexOf(item);
+	}
 });
 

package/ui/tab.js

@@ -1,4 +1,4 @@
-class HTMLElementTabs extends VirtualHTMLElement {
+class HTMLElementTabs extends Page.Element {
 	static defaults = {
 		index: (x) => parseInt(x) || 0
 	};
@@ -30,6 +30,4 @@ class HTMLElementTabs extends VirtualHTMLElement {
 	}
 }
 
-Page.ready(() => {
-	VirtualHTMLElement.define('element-tabs', HTMLElementTabs);
-});
+Page.define('element-tabs', HTMLElementTabs);

package/ui/time.js

@@ -1,9 +1,4 @@
-class HTMLElementTime extends HTMLTimeElement {
-	constructor() {
-		super();
-		if (this.init) this.init();
-	}
-
+class HTMLElementTime extends Page.create(HTMLTimeElement) {
 	static defaults = {
 		dataFormat: null,
 		dataTimezone: null,
@@ -19,4 +14,4 @@ class HTMLElementTime extends HTMLTimeElement {
 	}
 }
 
-VirtualHTMLElement.define(`element-time`, HTMLElementTime, 'time');
+Page.define(`element-time`, HTMLElementTime, 'time');

package/ui/transition.js

@@ -21,6 +21,8 @@ Page.init(state => {
 });
 
 class Transition {
+	#defer;
+
 	static event(name) {
 		const low = name.toLowerCase();
 		const caps = name[0].toUpperCase() + low.substring(1);
@@ -57,37 +59,35 @@ class Transition {
 		from.after(to);
 	}
 	start() {
-		return new Promise(resolve => {
-			this.resolve = resolve;
-			if (!this.ok) {
-				this.destroy();
-			} else {
-				setTimeout(() => {
-					this.root.addEventListener(this.event, this);
-					this.root.classList.add('transitioning');
-				});
-				this.safe = setTimeout(() => {
-					console.warn("Transition timeout");
-					this.end();
-				}, 4000);
-			}
-		});
+		this.#defer = new Deferred();
+		if (!this.ok) {
+			this.destroy();
+		} else {
+			setTimeout(() => {
+				this.root.addEventListener(this.event, this);
+				this.root.classList.add('transitioning');
+			});
+			this.safe = setTimeout(() => {
+				console.warn("Transition timeout");
+				this.end();
+			}, 4000);
+		}
 	}
 	cancel() {
 		this.ok = false;
 		this.root.classList.remove('transitioning');
-		if (this.resolve) {
-			this.resolve();
-			delete this.resolve;
+		if (this.#defer) {
+			this.#defer.resolve();
+			this.#defer = null;
 		}
 	}
 	end() {
 		this.ok = false;
 		this.from.remove();
 		this.destroy();
-		if (this.resolve) {
-			this.resolve();
-			delete this.resolve;
+		if (this.#defer) {
+			this.#defer.resolve();
+			this.#defer = null;
 		}
 	}
 	scrollTo(obj) {