@pageboard/html 0.11.26 → 0.11.28

package/elements/image.js

@@ -131,14 +131,11 @@ exports.image = {
 	html: `<element-image
 		class="[display.fit|or:none] [display.horizontal|or:] [display.vertical|or:]"
 		alt="[alt]"
-		data-src="[url|or:[$element.resources.empty]]"
+		data-src="[url]"
 		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>
 	</element-image>`,
-	resources: {
-		empty: '../ui/empty.png'
-	},
 	stylesheets: [
 		'../ui/loading.css',
 		'../ui/image.css'
@@ -281,7 +278,7 @@ exports.inlineImage = {
 	group: "inline",
 	tag: "img",
 	html: `<img is="element-img"
-		data-src="[url|or:[$element.resources.empty]]"
+		data-src="[url]"
 		data-crop="[crop.x];[crop.y];[crop.width];[crop.height];[crop.zoom]"
 		alt="" class="ui inline image
 		[display.avatar|?]
@@ -290,9 +287,6 @@ exports.inlineImage = {
 		[display.spaced|?]
 		[display.floated|pre:floated ]
 		[display.align|post: aligned]" />`,
-	resources: {
-		empty: '../ui/empty.png'
-	},
 	stylesheets: [
 		'../lib/components/image.css'
 	],

package/elements/list.js

@@ -1,18 +1,20 @@
 exports.list_item = {
 	title: 'Item',
 	inplace: true,
-	contents: "textblock list?",
+	contents: "textblock (ul|ol)?",
 	icon: '<i class="list icon"></i>',
 	html: `<li></li>`,
 };
+
 exports.textblock = {
 	title: 'Text',
 	inplace: true,
 	contents: "inline*",
 	html: '<span class="textblock"></span>'
 };
-exports.list = {
-	title: 'List',
+
+exports.ul = {
+	title: 'Unordered List',
 	properties: {
 		marker: {
 			title: 'Marker',
@@ -25,6 +27,36 @@ exports.list = {
 			}, {
 				const: 'square',
 				title: 'Square'
+			}, {
+				const: 'circle',
+				title: 'Circle'
+			}]
+		}
+	},
+	inplace: true,
+	contents: "list_item+",
+	group: "block",
+	icon: '<i class="list ul icon"></i>',
+	tag: 'ul',
+	parse: function(dom) {
+		let marker = null;
+		const style = dom.style.listStyleType;
+		if (style && this.properties.marker.anyOf.some(item => item.const == style)) {
+			marker = style;
+		}
+		return { marker };
+	},
+	html: `<ul style-list-style-type="[marker]"></ul>`
+};
+
+exports.ol = {
+	title: 'Ordered List',
+	properties: {
+		marker: {
+			title: 'Marker',
+			anyOf: [{
+				const: null,
+				title: 'Default'
 			}, {
 				const: 'decimal',
 				title: '1, 2, 3'
@@ -65,20 +97,15 @@ exports.list = {
 	contents: "list_item+",
 	group: "block",
 	icon: '<i class="list ol icon"></i>',
-	tag: 'ul,ol',
-	parse: function(dom) {
+	tag: 'ol',
+	parse: function (dom) {
 		let marker = null;
 		const style = dom.style.listStyleType;
 		if (style && this.properties.marker.anyOf.some(item => item.const == style)) {
 			marker = style;
-		} else if (dom.nodeName == "OL") {
-			marker = 'decimal';
 		}
-		return { marker };
+		const start = dom.getAttribute('start') || null;
+		return { marker, start };
 	},
-	html: `
-		<ul style-list-style-type="[marker]">[marker|eq:square:|eq:disc:|!|bmagnet:*]</ul>
-		<ol style-list-style-type="[marker]" start="[start]">[marker|eq:square:|eq:disc:|bmagnet:*]</ol>
-	`
+	html: `<ol style-list-style-type="[marker]" start="[start]"></ol>`
 };
-

package/elements/time.js

@@ -0,0 +1,176 @@
+exports.time = {
+	title: "Date Time",
+	icon: '<i class="clock outline icon"></i>',
+	inline: true,
+	inplace: true,
+	group: "inline nolink",
+	properties: {
+		datetime: {
+			title: 'Date and time',
+			type: 'string',
+			format: 'date-time',
+			nullable: true
+		},
+		timezone: {
+			title: ' Time zone',
+			type: 'string',
+			pattern: /\w+\/\w+/.source,
+			nullable: true,
+			$filter: {
+				name: 'intl',
+				of: 'timeZone'
+			}
+		},
+		format: {
+			title: 'Format',
+			type: 'object',
+			properties: {
+				weekday: {
+					title: 'Weekday',
+					anyOf: [
+						{
+							const: null,
+							title: 'none'
+						}, {
+							const: 'd',
+							title: 'short'
+						}, {
+							const: 'day',
+							title: 'long'
+						}
+					]
+				},
+				day: {
+					title: 'Day of month',
+					anyOf: [
+						{
+							const: null,
+							title: 'none'
+						}, {
+							const: 'D',
+							title: 'numeric'
+						}, {
+							const: 'DD',
+							title: 'two-digits'
+						}
+					]
+				},
+				month: {
+					title: 'Month',
+					anyOf: [
+						{
+							const: null,
+							title: 'none'
+						}, {
+							const: 'mon',
+							title: 'short'
+						}, {
+							const: 'month',
+							title: 'long'
+						}, {
+							const: 'M',
+							title: 'numeric'
+						}, {
+							const: 'MM',
+							title: 'two-digits'
+						}
+					]
+				},
+				year: {
+					title: 'Year',
+					anyOf: [
+						{
+							const: null,
+							title: 'none'
+						}, {
+							const: 'Y',
+							title: 'numeric'
+						}, {
+							const: 'YY',
+							title: 'two-digits'
+						}
+					]
+				},
+				hour: {
+					title: 'Hour',
+					anyOf: [
+						{
+							const: null,
+							title: 'none'
+						}, {
+							const: 'H',
+							title: 'numeric'
+						}, {
+							const: 'HH',
+							title: 'two-digits'
+						}
+					]
+				},
+				minute: {
+					title: 'Minute',
+					anyOf: [
+						{
+							const: null,
+							title: 'none'
+						}, {
+							const: 'm',
+							title: 'numeric'
+						}, {
+							const: 'mm',
+							title: 'two-digits'
+						}
+					]
+				},
+				second: {
+					title: 'Second',
+					anyOf: [
+						{
+							const: null,
+							title: 'none'
+						}, {
+							const: 's',
+							title: 'numeric'
+						}, {
+							const: 'ss',
+							title: 'two-digits'
+						}
+					]
+				},
+				timeZoneName: {
+					title: 'Timezone',
+					anyOf: [
+						{
+							const: null,
+							title: 'none'
+						}, {
+							const: 'tz',
+							title: 'offset'
+						}, {
+							const: 'timezone',
+							title: 'short'
+						}
+					]
+				}
+			}
+		}
+	},
+	parse: function (dom) {
+		const format = {};
+		const list = (dom.dataset.format ?? "").split(':');
+		for (const [key, schema] of Object.entries(this.properties.format.properties)) {
+			for (const tok in list) {
+				if (tok) {
+					const item = schema.anyOf.find(item => item.const === tok);
+					if (item) format[key] = item.const;
+				}
+			}
+		}
+		return {
+			datetime: dom.dateTime,
+			timezone: dom.dataset.timezone,
+			format
+		};
+	},
+	html: `<time datetime="[datetime|now|isoDate]" data-format="[format|values|join:%3A]" data-timezone="[timezone]" is="element-time"></time>`,
+	scripts: ['../ui/time.js']
+};

package/package.json

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

package/ui/consent.js

@@ -40,7 +40,7 @@ class HTMLCustomConsentElement extends HTMLFormElement {
 		if (consent == null) {
 			return;
 		}
-		Page.storage.set('consent', consent);
+		state.scope.storage.set('consent', consent);
 		state.scope.$consent = consent;
 		state.runChain('consent');
 	}
@@ -67,9 +67,9 @@ Page.ready(() => {
 	VirtualHTMLElement.define(`element-consent`, HTMLCustomConsentElement, 'form');
 });
 
-Page.State.prototype.consent = function (fn) {
+Page.constructor.prototype.consent = function (fn) {
 	const initial = this.scope.$consent === undefined;
-	let consent = Page.storage.get('consent');
+	let consent = this.scope.storage.get('consent');
 	if (consent == null && initial) consent = undefined;
 	this.scope.$consent = consent;
 	this.chain('consent', fn);
@@ -81,7 +81,7 @@ Page.State.prototype.consent = function (fn) {
 	}
 };
 
-Page.State.prototype.reconsent = function (fn) {
+Page.constructor.prototype.reconsent = function (fn) {
 	if (fn) this.consent(fn);
 	const consent = this.scope.$consent;
 	let asking = false;

package/ui/image.css

@@ -1,10 +1,3 @@
-img.loading[data-src]::after {
-	content: none;
-}
-img.error::after {
-	width: 100%;
-}
-
 element-image {
 	display:flex;
 	position:relative;
@@ -146,3 +139,7 @@ img[is="element-img"] {
 	max-width: 100%;
 	height:auto;
 }
+
+element-image[block-focused="last"] > [block-content="legend"] {
+	background-color: rgb(255 255 255 / 50%);
+}

package/ui/image.js

@@ -4,6 +4,9 @@ class HTMLElementImage extends VirtualHTMLElement {
 		crop: null
 	};
 
+	static defaultWidth = 240;
+	static defaultHeight = 180;
+
 	static getZoom({ w, h, rw, rh, fit }) {
 		let z = 100;
 		if (!rw && !rh) return z;
@@ -89,21 +92,37 @@ class HTMLElementImage extends VirtualHTMLElement {
 	}
 	patch(state) {
 		this.classList.remove('loading');
-		if (!this.options.src) return;
 		if (this.currentSrc != this.options.src) {
 			this.classList.remove('error');
 		}
-		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;
-		if (!this.currentSrc) this.placeholder();
+		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;
+			}
+		}
+		const { w, h } = this.dimensions;
+		this.image.width = w || this.dataset.width;
+		this.image.height = h || this.dataset.height;
+		if (!this.currentSrc) {
+			this.placeholder();
+		}
 	}
+
+	get currentSrc() {
+		const src = this.image?.currentSrc;
+		if (src?.startsWith('data:image/svg')) return null;
+		else return src;
+	}
+
 	reveal(state) {
 		const img = this.image;
 		if (!this.options.src) {
-			img.removeAttribute('src');
+			this.placeholder(true);
 			return;
 		}
 		const fit = this.fit;
@@ -143,11 +162,6 @@ class HTMLElementImage extends VirtualHTMLElement {
 		}
 		const curSrc = loc.toString();
 		if (curSrc != this.currentSrc) {
-			try {
-				this.currentSrc = curSrc;
-			} catch (e) {
-				// pass
-			}
 			this.classList.add('loading');
 			let done;
 			this.promise = new Promise(resolve => done = resolve);
@@ -157,23 +171,18 @@ class HTMLElementImage extends VirtualHTMLElement {
 		return this.promise;
 	}
 	captureLoad() {
-		this.promise.done();
+		this.promise?.done();
 		this.classList.remove('loading');
 		this.fix(this.image);
 	}
 	captureError() {
-		this.promise.done();
+		this.promise?.done();
 		this.classList.remove('loading');
 		this.classList.add('error');
-		this.placeholder();
+		this.placeholder(true);
 	}
-	placeholder() {
-		const { w, h } = this.dimensions;
-		this.image.width = w;
-		this.image.height = h;
-		this.image.src = "data:image/svg+xml," + encodeURIComponent(
-			`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 ${w} ${h}"></svg>`
-		);
+	placeholder(error) {
+		this.image.removeAttribute('src');
 	}
 }
 
@@ -187,28 +196,29 @@ class HTMLElementInlineImage extends HTMLImageElement {
 		dataCrop: null
 	};
 
+	static defaultWidth = 40;
+	static defaultHeight = 30;
+
 	get image() {
 		return this;
 	}
-	captureLoad() {
-		this.promise.done();
-		this.classList.remove('loading');
-		this.fix(this.image);
-	}
-	placeholder() {
-		const { w, h } = this.dimensions;
-		this.width = w;
-		this.height = h;
+
+	placeholder(error) {
+		if (error) {
+			this.image.src = "data:image/svg+xml," + encodeURIComponent(
+				`<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 ${this.image.width} ${this.image.height}"><text text-anchor="middle" dominant-baseline="central" x="50%" y="50%" fill="#aaa">${error ? '∅' : ''}</text></svg>`);
+		} else {
+			this.image.removeAttribute('src');
+		}
 	}
-}
 
-for (const name of ['patch', 'reveal', 'captureError', 'crop', 'dimensions', 'position', 'fit', 'findClass', 'fix']) {
-	Object.defineProperty(
-		HTMLElementInlineImage.prototype,
-		name,
-		Object.getOwnPropertyDescriptor(HTMLElementImage.prototype, name)
-	);
+	get currentSrc() {
+		const cur = super.currentSrc;
+		if (!cur && this.image.src?.startsWith('data:')) return this.src;
+		else return cur;
+	}
 }
 
+VirtualHTMLElement.inherits(HTMLElementInlineImage, HTMLElementImage);
 VirtualHTMLElement.define('element-image', HTMLElementImage);
 VirtualHTMLElement.define(`element-img`, HTMLElementInlineImage, 'img');

package/ui/loading.css

@@ -9,6 +9,7 @@
 	width: 100%;
 	top: 50%;
 	margin-top: -0.5rem;
+	line-height: 1rem;
 }
 
 @keyframes spinner {

package/ui/storage.js

@@ -68,5 +68,5 @@ class UserStore {
 	}
 }
 
-Page.setup(() => Page.storage = new UserStore());
+Page.setup(state => state.scope.storage = new UserStore());
 

package/ui/time.js

@@ -0,0 +1,22 @@
+class HTMLElementTime extends HTMLTimeElement {
+	constructor() {
+		super();
+		if (this.init) this.init();
+	}
+
+	static defaults = {
+		dataFormat: null,
+		dataTimezone: null,
+		datetime: null
+	};
+
+	patch(state) {
+		this.textContent = `[stamp|formatDate:[fmt]:[tz]]`.fuse({
+			stamp: this.dateTime,
+			fmt: this.dataset.format,
+			tz: this.dataset.timezone
+		}, state.scope);
+	}
+}
+
+VirtualHTMLElement.define(`element-time`, HTMLElementTime, 'time');

package/ui/transition.js

@@ -4,6 +4,7 @@ Object.defineProperty(document, 'body', {
 		return this.documentElement.querySelector('body:last-of-type');
 	}
 });
+
 Page.init(state => {
 	const root = document.documentElement;
 	function dtr(state) {
@@ -16,33 +17,10 @@ Page.init(state => {
 	Page.ready(dtr);
 	Page.patch(dtr);
 	Page.setup(dtr);
-	Page.error(dtr);
+	Page.catch(dtr);
 });
 
-Page.State.prototype.mergeBody = function(body, corpse) {
-	if (this.referrer.transition) {
-		this.referrer.transition.end();
-	}
-	if (body.isContentEditable || body.getAttribute('block-type') != corpse.getAttribute('block-type')) {
-		corpse.replaceWith(body);
-	} else {
-		this.transition = new Page.Transition(this, body, corpse);
-	}
-};
-
-Page.setup(state => {
-	if (state.transition) {
-		if (state.transition.ok) {
-			state.finish(() => {
-				return state.transition.start();
-			});
-		} else {
-			state.transition.end();
-		}
-	}
-});
-
-Page.Transition = class {
+class Transition {
 	static event(name) {
 		const low = name.toLowerCase();
 		const caps = name[0].toUpperCase() + low.substring(1);
@@ -144,9 +122,32 @@ Page.Transition = class {
 		this.root.scrollLeft = left;
 		delete this.from;
 		delete this.to;
-		delete this.state.transition;
+		delete this.state.scope.transition;
 		delete this.state;
 	}
+}
+
+Page.constructor.prototype.mergeBody = function (body, corpse) {
+	if (this.referrer.scope.transition) {
+		this.referrer.scope.transition.end();
+	}
+	if (body.isContentEditable || body.getAttribute('block-type') != corpse.getAttribute('block-type')) {
+		corpse.replaceWith(body);
+	} else {
+		this.scope.transition = new Transition(this, body, corpse);
+	}
 };
 
+Page.setup(state => {
+	const tr = state.scope.transition;
+	if (tr) {
+		if (tr.ok) {
+			state.finish(() => {
+				return tr.start();
+			});
+		} else {
+			tr.end();
+		}
+	}
+});