@pageboard/html 0.12.0 → 0.12.2

package/elements/form.js

@@ -47,7 +47,7 @@ exports.query_form = {
 	contents: 'block+',
 	tag: 'form[method="get"]',
 	html: `<form is="element-form" method="get" name="[name]"
-		action="[redirection.url][redirection.parameters|query|url]"
+		action="[redirection|urltpl:url:parameters]"
 		autocomplete="off" class="ui form"></form>`,
 	stylesheets: [
 		'../lib/components/form.css',

package/elements/heading.js

@@ -55,8 +55,8 @@ exports.heading = {
 	group: "block",
 	icon: '<i class="icon header"></i>',
 	tag: 'h1,h2,h3,h4,h5,h6',
-	html: `<h[level] class="ui [align|or:left] aligned header" is="h[level]-helper" id="[id]" entitled="[entitled]">
-		<a aria-hidden="true" href="[$loc.pathname][$loc.search][id|pre:#]">[linkable|prune:*]#</a>
+	html: `<h[level] class="ui [align|or:left] aligned header" is="h[level]-helper" id="[id][linkable|prune:-]" entitled="[entitled]">
+		<a aria-hidden="true" href="[$loc.pathname][$loc.search][id|pre:%23]">[linkable|prune:*]#</a>
 		<div block-content="text">Heading</div>
 	</hn>`,
 	parse: function (dom) {
@@ -69,15 +69,9 @@ exports.heading = {
 	],
 	scripts: [
 		'../ui/heading.js'
-	],
-	resources: {
-		helper: '../ui/heading-helper.js'
-	},
-	install: function (scope) {
-		if (scope.$write) Pageboard.load.js(this.resources.helper, scope);
-	}
+	]
 };
-
+exports.editor.scripts.push('../ui/heading-helper.js');
 
 exports.heading_nolink = {
 	...exports.heading,

package/elements/image.js

@@ -132,6 +132,8 @@ exports.image = {
 		class="[display.fit|or:none] [display.horizontal|or:] [display.vertical|or:]"
 		alt="[alt]"
 		data-src="[url]"
+		data-width="[url|meta:width]"
+		data-height="[url|meta:height]"
 		data-crop="[crop.x|or:50];[crop.y|or:50];[crop.width|or:100];[crop.height|or:100];[crop.zoom|or:100]"
 	>
 		<div block-content="legend"></div>
@@ -279,6 +281,8 @@ exports.inlineImage = {
 	tag: "img",
 	html: `<img is="element-img"
 		data-src="[url]"
+		data-width="[url|meta:width]"
+		data-height="[url|meta:height]"
 		data-crop="[crop.x];[crop.y];[crop.width];[crop.height];[crop.zoom]"
 		alt="" class="ui inline image
 		[display.avatar]

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]" width="[url|meta:width]" height="[url|meta:height]"></video>`,
 	scripts: [
 		'../ui/media.js'
 	],

package/elements/sitemap.js

@@ -19,12 +19,6 @@ exports.sitemap = {
 	scripts: [
 		'../ui/sitemap.js'
 	],
-	resources: {
-		helper: '../ui/sitemap-helper.js'
-	},
-	install: function(scope) {
-		if (scope.$write) Pageboard.load.js(this.resources.helper, scope);
-	},
 	itemModel: function(name, leaf) {
 		const schema = exports[name];
 		return {
@@ -65,6 +59,6 @@ exports.sitemap = {
 		};
 	}
 };
-
+exports.editor.scripts.push('../ui/sitemap-helper.js');
 exports.sitepage = exports.sitemap.itemModel('page', false);
 exports.siteredirection = exports.sitemap.itemModel('redirection', true);

package/elements/tab.js

@@ -30,15 +30,9 @@ exports.tabs = {
 	],
 	scripts: [
 		'../ui/tab.js'
-	],
-	resources: {
-		helper: '../ui/tab-helper.js'
-	},
-	install: function(scope) {
-		if (scope.$write) Pageboard.load.js(this.resources.helper, scope);
-	}
+	]
 };
-
+exports.editor.scripts.push('../ui/tab-helper.js');
 
 exports.tab_item = {
 	title: "Item",

package/package.json

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

package/ui/form.js

@@ -323,7 +323,7 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 		scope.$request = form.read(true);
 		form.disable();
 
-		const res = await Pageboard.fetch(form.method, Page.format({
+		const res = await state.fetch(form.method, Page.format({
 			pathname: form.getAttribute('action'),
 			query: state.query
 		}), scope.$request).catch(err => err);

package/ui/heading-helper.js

@@ -1,6 +1,6 @@
 class HTMLElementHeadingHelper extends Page.create(HTMLHeadingElement) {
 	setup(state) {
-		this.willSync = state.debounce(() => this.sync(), 100);
+		this.willSync = state.debounce(() => this.sync(state.scope), 100);
 		this.observer = new MutationObserver(records => {
 			if (records.some(mut => {
 				return mut.type == "characterData" || mut.type == "childList" && mut.addedNodes.length;
@@ -15,13 +15,14 @@ class HTMLElementHeadingHelper extends Page.create(HTMLHeadingElement) {
 	close() {
 		if (this.observer) this.observer.disconnect();
 	}
-	sync() {
-		const Pb = window.parent.Pageboard;
-		if (!Pb.slug || !Pb.editor) return;
-		const txt = Pb.slug(this.textContent);
+	sync(scope) {
+		const { editor } = scope;
+		if (!editor) return;
+		if (this.firstElementChild?.nodeName != "A") return;
+		const txt = editor.slug(this.textContent);
 		const id = txt.length <= 64 ? txt : null;
 		if (id != this.id) {
-			Pb.editor.blocks.mutate(this, { id });
+			editor.blocks.mutate(this, { id });
 		}
 	}
 }
@@ -34,5 +35,3 @@ for (let i = 1; i <= 6; i++) {
 		`h${i}`
 	);
 }
-
-

package/ui/image.js

@@ -93,16 +93,8 @@ const HTMLElementImageConstructor = Superclass => class extends Superclass {
 		if (this.currentSrc != this.options.src) {
 			this.classList.remove('error');
 		}
-		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];
-			if (meta) {
-				this.dataset.width = meta.width;
-				this.dataset.height = meta.height;
-			}
-		}
+		this.dataset.width ??= this.constructor.defaultWidth || "";
+		this.dataset.height ??= this.constructor.defaultHeight || "";
 		const { w, h } = this.dimensions;
 		if (w) this.image.width = w || this.dataset.width;
 		if (h) this.image.height = h || this.dataset.height;

package/ui/layout.js

@@ -11,14 +11,6 @@ class HTMLElementLayout extends Page.create(HTMLDivElement) {
 	get fit() {
 		return this.options.size || 'none';
 	}
-	patch(state) {
-		if (!this.options.src) return;
-		const loc = Page.parse(this.options.src);
-		const meta = state.scope.$hrefs?.[loc.pathname] ?? {};
-		if (!meta || !meta.width || !meta.height) return;
-		this.dataset.width = meta.width;
-		this.dataset.height = meta.height;
-	}
 	reveal(state) {
 		this.style.backgroundRepeat = this.options.repeat;
 		this.style.backgroundSize = this.options.size;

package/ui/media.js

@@ -3,11 +3,6 @@ const HTMLElementMediaConstructor = Superclass => class extends Superclass {
 
 	patch(state) {
 		this.classList.remove('error', 'loading');
-		const loc = Page.parse(this.options.src);
-		const meta = state.scope.$hrefs?.[loc.pathname] ?? {};
-		if (!meta || !meta.width || !meta.height) return;
-		this.width = meta.width;
-		this.height = meta.height;
 	}
 	reveal(state) {
 		const curSrc = this.options.src;

package/ui/sitemap-helper.js

@@ -5,7 +5,7 @@ class HTMLElementSitepage extends Page.Element {
 	};
 
 	patch(state) {
-		if (this.isConnected) this.syncBlock();
+		if (this.isConnected) this.syncBlock(state.scope);
 	}
 	setup(state) {
 		const content = this.querySelector('[block-content="children"]');
@@ -45,9 +45,9 @@ class HTMLElementSitepage extends Page.Element {
 		this.updating = false;
 	}
 
-	syncBlock() {
+	syncBlock(scope) {
 		if (!this.parentNode || this.matches('element-sitemap')) return;
-		const editor = window.parent.Pageboard.editor;
+		const editor = scope.editor;
 		if (!editor || editor.closed) return;
 		const block = editor.blocks.get(this.getAttribute('block-id'));
 		if (!block.data) block.data = {};
@@ -63,5 +63,11 @@ class HTMLElementSitepage extends Page.Element {
 
 
 Page.define('element-sitepage', HTMLElementSitepage);
-Page.extend('element-sitemap', HTMLElementSitepage);
+
+Page.setup(state => {
+	if (!state.scope.$write) return;
+	state.finish(() => {
+		Page.extend('element-sitemap', HTMLElementSitepage);
+	});
+});
 

package/ui/sitemap.js

@@ -57,13 +57,13 @@ class HTMLElementSitemap extends Page.Element {
 			// workaround... build is called a second time with pagecut-placeholder set
 			return;
 		}
-		const res = await Pageboard.fetch('get', `/.api/pages`);
-		const scope = await Pageboard.bundle(state, res);
-		scope.$element = scope.$elements.sitemap;
+		const res = await state.fetch('get', `/.api/pages`);
+		const scope = state.scope.copy();
+		await scope.import(res);
 		const tree = this.constructor.transformResponse(res);
-		const node = Pageboard.render({
+		const node = scope.render({
 			item: tree
-		}, scope);
+		});
 		// only change block content
 		const src = node.firstElementChild;
 		const dst = this.firstElementChild;

package/ui/transition.css

@@ -1,47 +1,45 @@
 /* async progress bar and error signal */
 
-body::after {
+body::before {
 	content: "";
 	position:fixed;
 	display:block;
 	left:0;
-	top:1px;
+	top:0px;
 	width:0%;
 	height:0;
 	opacity:0.7;
 	background: #4486cc;
 	box-shadow: 0 0 5px rgb(99 162 235 / 70%);
-	z-index:1000;
+	z-index:10000000;
 }
-html[data-stage] > body::after {
+html[data-stage] > body::before {
 	transition-property:width;
-	transition-duration:1s;
+	transition-duration:0.5s;
 	transition-timing-function:linear;
 }
-html[data-stage="init"] > body::after,
-html[data-stage="ready"] > body::after,
-html[data-stage="setup"] > body::after,
-html[data-stage="error"] > body::after {
+html[data-stage="route"] > body::before,
+html[data-stage="ready"] > body::before,
+html[data-stage="paint"] > body::before,
+html[data-stage="error"] > body::before {
 	height:2px;
 }
 
-html[data-stage="init"] > body::after {
+html[data-stage="route"] > body::before {
+	width:25%;
+}
+html[data-stage="ready"] > body::before {
 	width:50%;
 }
-html[data-stage="ready"] > body::after,
-html[data-stage="setup"] > body::after {
+html[data-stage="paint"] > body::before {
 	width:100%;
 }
-html[data-stage="error"] > body::after {
+html[data-stage="error"] > body::before {
 	display:block;
 	width:100%;
 	background:#c33;
 }
 
-html.transition > body::after {
-	display:none !important;
-}
-
 /* transitions */
 html.transition {
 	width:100%;

package/ui/transition.js

@@ -5,19 +5,19 @@ Object.defineProperty(document, 'body', {
 	}
 });
 
-Page.init(state => {
+Page.route(state => {
 	const root = document.documentElement;
 	function dtr(state) {
 		root.dataset.stage = state.stage;
-		if (state.stage == "setup" || state.stage == "patch") {
-			setTimeout(() => root.removeAttribute('data-stage'), 500);
+		if (state.stage == "paint") {
+			setTimeout(() => root.removeAttribute('data-stage'), 700);
 		}
 	}
 	dtr(state);
-	Page.ready(dtr);
-	Page.patch(dtr);
-	Page.setup(dtr);
-	Page.catch(dtr);
+	state.ready(dtr);
+	state.patch(dtr);
+	state.paint(dtr);
+	state.catch(dtr);
 });
 
 class Transition {