@pageboard/html 0.12.5 → 0.12.7

package/elements/embed.js

@@ -8,31 +8,49 @@ exports.embed = {
 			description: 'The iframe src URL',
 			nullable: true,
 			type: 'string',
-			format: 'uri-reference'
-			// TODO plug embeds to href, but url-inspector makes it difficult for us right now
+			format: 'uri-reference',
+			$helper: {
+				name: 'href',
+				filter: {
+					type: ["embed"]
+				}
+			}
 		},
-		name: {
-			title: 'Name',
+		linkable: {
+			title: 'Show hash link',
+			type: 'boolean',
+			default: false
+		},
+		id: {
+			nullable: true,
 			type: 'string',
-			format: 'id',
+			pattern: /^[a-z0-9-]*$/.source
+		},
+		query: {
+			title: 'Additional query parameters',
+			type: 'object',
 			nullable: true
 		}
 	},
 	group: "block",
-	parse: function(dom) {
+	parse: function (dom) {
+		if (dom.matches('element-embed')) return;
 		return {
-			url: dom.dataset.src || dom.getAttribute('src')
+			url: dom.getAttribute('src')
 		};
 	},
 	tag: 'iframe,element-embed',
-	html: `<element-embed class="ui embed" data-src="[url]" id="[name|as:xid]"></element-embed>`,
+	html: `<element-embed data-src="[url|meta:source][query|as:query]" id="[id]" title="[url|meta:title]" style="padding-bottom:calc([url|meta:height] / [url|meta:width] * 100%)">
+		<a aria-hidden="true" class="linkable" href="[$loc.pathname][$loc.search][id|pre:%23]">[linkable|prune:*]#</a>
+		<iframe loading="lazy" allowfullscreen frameborder="0" scrolling="no"></iframe>
+	</element-embed>`,
 	scripts: [
 		'../ui/embed.js'
 	],
 	stylesheets: [
 		'../ui/loading.css',
-		'../lib/components/embed.css',
-		'../ui/embed.css'
+		'../ui/embed.css',
+		'../ui/linkable.css'
 	]
 };
-
+exports.editor.scripts.push('../ui/embed-helper.js');

package/elements/heading.js

@@ -33,7 +33,6 @@ exports.heading = {
 		},
 		linkable: {
 			title: 'Show hash link',
-			description: 'On hover',
 			type: 'boolean',
 			default: false
 		},
@@ -55,8 +54,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][linkable|prune:-]" entitled="[entitled]">
-		<a aria-hidden="true" href="[$loc.pathname][$loc.search][id|pre:%23]">[linkable|prune:*]#</a>
+	html: `<h[level] class="ui [align|or:left] aligned header" is="h[level]-helper" id="[id]" entitled="[entitled]">
+		<a aria-hidden="true" class="linkable" href="[$loc.pathname][$loc.search][id|pre:%23]">[linkable|prune:*]#</a>
 		<div block-content="text">Heading</div>
 	</hn>`,
 	parse: function (dom) {
@@ -65,7 +64,8 @@ exports.heading = {
 		};
 	},
 	stylesheets: [
-		'../ui/heading.css'
+		'../ui/heading.css',
+		'../ui/linkable.css'
 	],
 	scripts: [
 		'../ui/heading.js'

package/elements/time.js

@@ -158,7 +158,7 @@ exports.time = {
 		const format = {};
 		const list = (dom.dataset.format ?? "").split(':');
 		for (const [key, schema] of Object.entries(this.properties.format.properties)) {
-			for (const tok in list) {
+			for (const tok of list) {
 				if (tok) {
 					const item = schema.anyOf.find(item => item.const === tok);
 					if (item) format[key] = item.const;

package/package.json

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

package/ui/embed-helper.js

@@ -0,0 +1,10 @@
+Page.extend('element-embed', class HTMLElementEmbedHelper {
+	patch(state) {
+		const { editor } = state.scope;
+		if (!editor) return;
+		const id = editor.slug(this.title).slice(0, 32);
+		if (id != this.id) {
+			editor.blocks.mutate(this, { id });
+		}
+	}
+});

package/ui/embed.css

@@ -1,8 +1,24 @@
 element-embed {
 	display:block;
+	position:relative;
+	max-width:100%;
 	width:100%;
+	background-color:#DDD;
+	height:0;
+	padding-bottom:56.25%;
 }
 
 [contenteditable] element-embed iframe {
 	pointer-events:none;
 }
+
+element-embed > iframe {
+	position: absolute;
+	border: none;
+	width: 100%;
+	height: 100%;
+	top: 0px;
+	left: 0px;
+	margin: 0em;
+	padding: 0em;
+}

package/ui/embed.js

@@ -4,72 +4,64 @@ class HTMLElementEmbed extends Page.Element {
 		hash: null
 	};
 	static revealRatio = 0.2;
-	#defer = new Deferred();
 
 	reveal(state) {
 		this.classList.add('waiting');
 		state.consent(this);
-		// return this.#defer; // do not hang the chain
+	}
+	get currentSrc() {
+		return this.querySelector('iframe')?.src ?? "about:blank";
 	}
 	consent(state) {
 		const consent = state.scope.$consent;
 		this.classList.toggle('denied', consent == "no");
 		this.classList.toggle('waiting', consent == null);
 
-		this.iframe = this.querySelector('iframe');
+		const iframe = this.querySelector('iframe');
 		if (consent != "yes") {
-			if (this.iframe) this.iframe.remove();
-			this.#defer.resolve();
+			iframe.src = "";
 			return;
 		}
-		if (!this.iframe) {
-			this.innerHTML = `<iframe width="100%" height="100%" frameborder="0" scrolling="no" allow="autoplay; fullscreen; accelerometer; gyroscope"></iframe>`;
-			this.iframe = this.firstElementChild;
-		}
-		if (!this.iframe.allow) this.iframe.allowFullscreen = true;
+		if (!iframe.allow) iframe.allowFullscreen = true;
 
 		const opts = this.options;
-		const prev = Page.parse(this.currentSrc || this.iframe.src || "about:blank");
+		const prev = Page.parse(this.currentSrc);
 		const cur = Page.parse(opts.src || "about:blank");
 		cur.hash = opts.hash;
-		this.currentSrc = cur.toString();
+		const curSrc = cur.toString();
 
 		if (cur.samePath(prev) == false) {
 			this.classList.remove('error');
 			this.classList.add('loading');
-			this.iframe.setAttribute('src', this.currentSrc);
-		} else {
-			if (cur.hash != prev.hash) {
-				try {
-					this.iframe.contentWindow.location.replace(this.currentSrc);
-				} catch (err) {
-					this.iframe.setAttribute('src', this.currentSrc);
-				}
+			if (!state.scope.$write) {
+				iframe.allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
+			}
+			iframe.src = curSrc;
+		} else if (cur.hash != prev.hash) {
+			try {
+				iframe.contentWindow.location.replace(curSrc);
+			} catch (err) {
+				iframe.src = curSrc;
 			}
-			this.#defer.resolve();
 		}
 	}
 	captureClick(e, state) {
 		if (this.matches('.denied')) state.reconsent();
 	}
 	captureLoad() {
-		this.#defer.resolve();
 		this.classList.remove('loading');
 	}
 	captureError() {
-		this.#defer.resolve();
 		this.classList.add('error');
 	}
 	handleAllMessage(e, state) {
-		if (!e.origin || !this.options.src) return;
-		if (this.options.src.startsWith(e.origin) == false) return;
+		if (!e.origin || !this.options.source) return;
+		if (this.options.source.startsWith(e.origin) == false) return;
 		if (this.receiveMessage) this.receiveMessage(e.data ?? {});
 	}
 	close() {
-		if (this.iframe) {
-			this.iframe.remove();
-			delete this.iframe;
-		}
+		const iframe = this.querySelector('iframe');
+		if (iframe) iframe.src = "";
 	}
 }
 

package/ui/fieldset-list.js

@@ -207,7 +207,7 @@ class HTMLElementFieldsetList extends Page.Element {
 
 	#listToValues(values, list) {
 		for (let i = 0; i < list.length; i++) {
-			const obj = list[i];
+			const obj = list[i] ?? {};
 			for (const [key, val] of Object.entries(obj)) {
 				const parts = this.#prefix.slice();
 				parts.push(i);

package/ui/form.js

@@ -364,7 +364,6 @@ class HTMLElementForm extends Page.create(HTMLFormElement) {
 			} else {
 				vary = "patch";
 			}
-			scope.$vary = vary;
 		}
 		state.push(loc, { vary });
 	}

package/ui/heading.css

@@ -1,12 +1,3 @@
-[block-type="heading"] > a[aria-hidden="true"] {
-	display: block;
-	position: absolute;
-	visibility:hidden;
-	left: -1ch;
-}
-[block-type="heading"]:hover > a[aria-hidden="true"] {
-	visibility:visible;
-}
 h1,
 h2,
 h3,

package/ui/linkable.css

@@ -0,0 +1,5 @@
+[block-type][id] > a.linkable[aria-hidden="true"] {
+	display: block;
+	position: absolute;
+	left: -2ch;
+}

package/ui/media.js

@@ -1,5 +1,4 @@
 const HTMLElementMediaConstructor = Superclass => class extends Superclass {
-	#defer = new Deferred();
 
 	patch(state) {
 		this.classList.remove('error', 'loading');
@@ -15,17 +14,14 @@ const HTMLElementMediaConstructor = Superclass => class extends Superclass {
 			this.setAttribute('src', curSrc);
 		}
 		if (state.scope.$write) this.pause();
-		// return this.#defer; // do not hang chain
 	}
 	handleClick(e, state) {
 		if (state.scope.$write) e.preventDefault();
 	}
 	captureLoad() {
-		this.#defer.resolve();
 		this.classList.remove('loading');
 	}
 	captureError() {
-		this.#defer.resolve();
 		this.classList.remove('loading');
 		this.classList.add('error');
 	}