@pageboard/html 0.12.0 → 0.12.1

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/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.1",
   "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/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

@@ -18,14 +18,14 @@ html[data-stage] > body::after {
 	transition-duration:1s;
 	transition-timing-function:linear;
 }
-html[data-stage="init"] > body::after,
+html[data-stage="route"] > body::after,
 html[data-stage="ready"] > body::after,
 html[data-stage="setup"] > body::after,
 html[data-stage="error"] > body::after {
 	height:2px;
 }
 
-html[data-stage="init"] > body::after {
+html[data-stage="route"] > body::after {
 	width:50%;
 }
 html[data-stage="ready"] > body::after,

package/ui/transition.js

@@ -5,7 +5,7 @@ Object.defineProperty(document, 'body', {
 	}
 });
 
-Page.init(state => {
+Page.route(state => {
 	const root = document.documentElement;
 	function dtr(state) {
 		root.dataset.stage = state.stage;