@pageboard/html 0.10.24 → 0.10.26

package/elements/consent.js

@@ -16,11 +16,9 @@ exports.consent_form = {
 		id: "content",
 		nodes: "block+"
 	},
-	upgrade: {
-		'content.': 'content.content'
-	},
 	html: `<form is="element-consent" class="ui form" data-transient="[transient]">
-		<x[transient|?:template:div|fill] block-content="content"></x[transient|?:template:div|fill]>
+		<template block-content="content"></template>
+		<div class="view"></div>
 	</form>`,
 	scripts: ['../ui/storage.js', '../ui/consent.js'],
 	stylesheets: ['../ui/consent.css']

package/package.json

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

package/ui/consent.css

@@ -14,7 +14,18 @@ footer [block-type="consent_form"][data-transient="true"] {
 	display:none;
 }
 
-[contenteditable] [block-type="consent_form"][data-transient="true"],
-[block-type="consent_form"][data-transient="true"] > template {
+[block-type="consent_form"] > [block-content="content"] {
+	display:none;
+}
+[block-type="consent_form"] > .view {
+	position:relative;
+}
+[contenteditable] [block-type="consent_form"] > [block-content="content"] {
 	display:block;
+	min-height:1em;
+}
+
+[contenteditable] [block-focused="last"] > .form[block-type="consent_form"][data-transient="true"],
+.form[block-type="consent_form"][data-transient="true"][block-focused] {
+	display: block;
 }

package/ui/consent.js

@@ -7,47 +7,47 @@ class HTMLCustomConsentElement extends HTMLFormElement {
 		dataTransient: false
 	};
 
-	static ask() {
-		this.waiting = false;
+	static explicit;
+
+	static ask(consent) {
 		let tacit = true;
-		for (const node of document.querySelectorAll('[block-type="consent_form"]')) {
+		const forms = document.querySelectorAll('[block-type="consent_form"]');
+		this.explicit = forms.length > 0;
+		for (const node of forms) {
 			node.classList.add('visible');
-			tacit = false;
+			tacit = consent && !node.querySelector(`[name="${consent}"]`) || false;
 		}
-		return !tacit;
+		return tacit ? "yes" : null;
 	}
 	setup(state) {
 		if (this.isContentEditable) return;
-		if (this.options.transient) {
-			const tmpl = this.ownTpl.prerender();
-			if (tmpl.content && tmpl.children.length == 0) {
-				tmpl.appendChild(tmpl.content);
-			}
-		}
-		state.consent(this);
+		const view = this.ownView;
+		view.textContent = '';
+		const tmpl = this.ownTpl.prerender();
+		view.appendChild(tmpl.content.cloneNode(true));
+		state.chain('consent', this);
 	}
 	chainConsent(state) {
-		window.HTMLCustomFormElement.prototype.fill.call(this, state.scope.$consent);
+		window.HTMLCustomFormElement.prototype.fill.call(this, Page.storage.all());
 		if (this.options.transient) this.classList.remove('visible');
 	}
+	handleChange(e, state) {
+		if (e.type == "submit" || !this.elements.find(item => item.type == "submit")) {
+			this.handleSubmit(e, state);
+		}
+	}
 	handleSubmit(e, state) {
 		if (e.type == "submit") e.preventDefault();
 		if (this.isContentEditable) return;
 		const consents = window.HTMLCustomFormElement.prototype.read.call(this);
 		for (const [key, val] of Object.entries(consents)) {
-			Page.storage.set('consent.' + key, val);
+			Page.storage.set(key, val);
 		}
-		state.scope.$consent = consents;
 		state.runChain('consent');
 	}
-	handleChange(e, state) {
-		this.handleSubmit(e, state);
-	}
 	patch(state) {
 		if (this.isContentEditable) return;
-		if (this.options.transient) {
-			this.ownTpl.prerender();
-		}
+		this.ownTpl.prerender();
 	}
 	get ownTpl() {
 		return this.children.find(
@@ -59,46 +59,27 @@ class HTMLCustomConsentElement extends HTMLFormElement {
 	}
 }
 
-Page.ready(() => {
-	VirtualHTMLElement.define(`element-consent`, HTMLCustomConsentElement, 'form');
-});
-
-Page.State.prototype.consent = function (listener) {
-	this.scope.$consent ??= {};
+Page.State.prototype.consent = function (listener, ask) {
 	const { consent } = listener.constructor;
-	const val = Page.storage.get('consent.' + consent);
-	this.scope.$consent[consent] = val;
-	this.chain('consent', listener);
-	if (val === undefined) {
-		HTMLCustomConsentElement.waiting = true;
-	} else if (val === null) {
-		// setup finished but no consent is done yet, ask consent
-		this.reconsent(listener);
+	if (!consent) {
+		console.warn("Expected a static consent field", listener);
+		return;
 	}
-};
-
-Page.State.prototype.reconsent = function (listener) {
-	if (listener) this.consent(listener);
-	const consents = this.scope.$consent;
-	let asking = false;
-	for (const [key, val] of Object.entries(consents)) {
-		if (listener && key != listener.constructor.consent) continue;
-		if (val != "yes") {
-			asking = HTMLCustomConsentElement.ask();
-		}
-		if (!asking) {
-			if (val == null) consents[key] = "yes";
-		}
+	const cur = Page.storage.get(consent);
+	if (cur == null || ask) {
+		Page.storage.set(consent, HTMLCustomConsentElement.ask(consent));
 	}
-	return asking;
+	this.chain('consent', listener);
 };
 
-Page.paint((state) => {
+Page.ready(() => {
+	VirtualHTMLElement.define(`element-consent`, HTMLCustomConsentElement, 'form');
+});
+
+Page.paint(state => {
 	state.finish(() => {
-		let run = true;
-		if (HTMLCustomConsentElement.waiting) {
-			if (state.reconsent()) run = false;
+		if (!HTMLCustomConsentElement.explicit) {
+			state.runChain('consent');
 		}
-		if (run) state.runChain('consent');
 	});
 });

package/ui/embed.js

@@ -1,5 +1,5 @@
 class HTMLElementEmbed extends VirtualHTMLElement {
-	static consent = "embed";
+	static consent = "consent.embed";
 	static defaults = {
 		src: null,
 		hash: null
@@ -19,7 +19,7 @@ class HTMLElementEmbed extends VirtualHTMLElement {
 		return this.promise;
 	}
 	consent(state) {
-		const consent = state.scope.$consent[this.constructor.consent];
+		const consent = Page.storage.get(this.constructor.consent);
 		this.classList.toggle('denied', consent == "no");
 		this.classList.toggle('waiting', consent == null);
 
@@ -57,7 +57,7 @@ class HTMLElementEmbed extends VirtualHTMLElement {
 		}
 	}
 	captureClick(e, state) {
-		if (this.matches('.denied')) state.reconsent(this);
+		if (this.matches('.denied')) state.consent(this, true);
 	}
 	captureLoad() {
 		this.promise.done();

package/ui/storage.js

@@ -1,43 +1,28 @@
 class UserStore {
+	#store = window.localStorage ?? {};
+	all() {
+		return this.#store;
+	}
 	get(key) {
-		let storage = window.localStorage;
-		let val;
-		if (storage) {
-			try {
-				val = storage.getItem(key);
-			} catch(ex) {
-				storage = null;
-			}
-		}
-		if (!storage) {
-			val = this.getCookies()[key];
+		try {
+			return this.#store.getItem(key);
+		} catch (ex) {
+			console.error(ex);
 		}
-		return val;
 	}
 	set(key, val) {
-		let storage = window.localStorage;
-		if (storage) {
-			try {
-				storage.setItem(key, val);
-			} catch(ex) {
-				storage = null;
-			}
-		}
-		if (!storage) {
-			this.setCookie(key, val);
+		try {
+			if (val == null) return this.del(key);
+			else return this.#store.setItem(key, val);
+		} catch (ex) {
+			console.error(ex);
 		}
 	}
 	del(key) {
-		let storage = window.localStorage;
-		if (storage) {
-			try {
-				storage.removeItem(key);
-			} catch(ex) {
-				storage = null;
-			}
-		}
-		if (!storage) {
-			this.clearCookie(key);
+		try {
+			return this.#store.removeItem(key);
+		} catch (ex) {
+			console.error(ex);
 		}
 	}
 	clearCookies(re) {
@@ -68,5 +53,5 @@ class UserStore {
 	}
 }
 
-Page.setup(() => Page.storage = new UserStore());
+Page.paint(() => Page.storage = new UserStore());