@pageboard/html 0.14.8 → 0.14.10

package/ui/select.js

@@ -1,15 +1,6 @@
 class HTMLElementSelect extends Page.Element {
 	#observer;
 
-	static defaults = {
-		placeholder: null,
-		name: null,
-		value: null,
-		multiple: false,
-		disabled: false,
-		required: false
-	};
-
 	#child(sel) {
 		return this.children.find(node => node.matches(sel));
 	}
@@ -23,6 +14,49 @@ class HTMLElementSelect extends Page.Element {
 		return this.#child('select');
 	}
 
+	get name() {
+		return this.getAttribute('name');
+	}
+
+	get required() {
+		return this.hasAttribute('required');
+	}
+
+	get multiple() {
+		return this.hasAttribute('multiple');
+	}
+
+	get disabled() {
+		return this.hasAttribute('disabled');
+	}
+
+	get value() {
+		return this.getAttribute('value');
+	}
+
+	set name(n) {
+		this.setAttribute('name', n);
+	}
+
+	set required(b) {
+		if (b) this.setAttribute('required', '');
+		else this.removeAttribute('required');
+	}
+
+	set multiple(b) {
+		if (b) this.setAttribute('multiple', '');
+		else this.removeAttribute('multiple');
+	}
+
+	set disabled(b) {
+		if (b) this.setAttribute('disabled', '');
+		else this.removeAttribute('disabled');
+	}
+
+	set value(v) {
+		this.getAttribute('value', v);
+	}
+
 	handleClick(e, state) {
 		if (state.scope.$write) return;
 		const node = e.target;
@@ -32,7 +66,7 @@ class HTMLElementSelect extends Page.Element {
 			if (opt) {
 				opt.selected = true;
 				state.dispatch(opt, 'change');
-				this.#toggleMenu(false);
+				this.classList.remove('active');
 			}
 			return;
 		}
@@ -45,7 +79,7 @@ class HTMLElementSelect extends Page.Element {
 			}
 			return;
 		}
-		this.#toggleMenu();
+		this.classList.toggle('active');
 	}
 	handleChange(e, state) {
 		const opt = e.target;
@@ -55,17 +89,12 @@ class HTMLElementSelect extends Page.Element {
 			this.#deselectItem(opt);
 		}
 	}
-	#toggleMenu(show) {
-		const style = this.#menu.style;
-		if (show === undefined) show = !style.display;
-		style.display = show ? "block" : null;
-	}
 	#selectItem(opt) {
 		const select = this.#select;
 		const val = opt.getAttribute('value');
 		const item = this.#menuOption(val);
 
-		if (this.options.multiple) {
+		if (this.multiple) {
 			if (this.#child(`.label[data-value="${val}"]`) == null) {
 				this.#setText("").insertAdjacentHTML(
 					'beforeBegin',
@@ -81,7 +110,7 @@ class HTMLElementSelect extends Page.Element {
 	}
 	#deselectItem(opt) {
 		const val = opt.getAttribute('value');
-		if (this.options.multiple && val) {
+		if (this.multiple && val) {
 			const item = this.#child(`.label[data-value="${val}"]`);
 			if (item) item.remove();
 		}
@@ -95,9 +124,8 @@ class HTMLElementSelect extends Page.Element {
 		text.classList.remove('default');
 		return text;
 	}
-	#setPlaceholder(str) {
+	#setPlaceholder(str = '') {
 		const text = this.#text;
-		if (!str) str = this.options.placeholder;
 
 		const defaultOption = this.#select.querySelector('option[value=""]');
 		if (defaultOption) {
@@ -123,57 +151,44 @@ class HTMLElementSelect extends Page.Element {
 			this.#observer = null;
 		}
 	}
-	#fillSelect(state) {
-		const select = this.#select;
-		if (!select) return;
-		select.insertAdjacentHTML('afterBegin', '<option value="[item.dataset.value]">[children|at:*|repeat:item|.innerText]</option>');
-		select.fuse(this.#menu, state.scope);
-	}
-	setup(state) {
-		this.#observer = new MutationObserver(mutations => this.#fillSelect(state));
-		this.#observer.observe(this.#menu, {
-			childList: true
+	fill(values) {
+		this.#select.children.forEach(opt => {
+			if (opt.value) {
+				if (opt.selected) this.#selectItem(opt);
+				else this.#deselectItem(opt);
+			}
 		});
 	}
-
-	build(state) {
-		if (state.scope.$write) return;
-		if (this.children.length == 1) {
-			this.insertAdjacentHTML(
-				'afterBegin',
-				'<i class="dropdown icon"></i><div class="text"></div><select></select>'
-			);
-		}
+	prepare(editable) {
 		const select = this.#select;
-
-		select.disabled = this.options.disabled;
-		select.required = this.options.required;
-		select.multiple = this.options.multiple;
+		select.disabled = this.disabled;
+		select.required = this.required;
+		select.multiple = this.multiple;
 		if (!select.multiple) {
 			for (const node of this.querySelectorAll('.ui.label')) node.remove();
 		}
-		select.name = this.options.name;
-		if (!select.required) {
-			const menu = this.#menu;
-			if (!menu.querySelector('element-select-option[data-value=""]')) {
+		select.name = this.name;
+		const menu = this.#menu;
+		const defaultOption = menu.querySelector('element-select-option[data-value=""]');
+		if (!select.required && !editable) {
+			if (!defaultOption) {
 				menu.insertAdjacentHTML('afterBegin', `<element-select-option data-value="" block-type="input_select_option" class="item">-</element-select-option>`);
 			}
+		} else if (defaultOption) {
+			defaultOption.remove();
+		}
+		if (menu.children.length != select.children.length && !editable) {
+			// TODO do a better check
+			select.textContent = '';
+			select.insertAdjacentHTML('afterBegin', '<option value="[item.dataset.value]">[children|at:*|repeat:item|.innerText]</option>');
+			select.fuse(this.#menu, {});
 		}
-		this.#fillSelect(state);
 	}
-
-	patch(state) {
-		if (state.scope.$write) return;
-		if (this.children.length == 1) this.build(state);
-
-		state.finish(() => {
-			// synchronize after form has filled select
-			this.#select.children.forEach(opt => {
-				if (opt.value) {
-					if (opt.selected) this.#selectItem(opt);
-					else this.#deselectItem(opt);
-				}
-			});
+	setup() {
+		if (this.isContentEditable) return;
+		this.#observer = new MutationObserver(mutations => this.prepare());
+		this.#observer.observe(this.#menu, {
+			childList: true
 		});
 	}
 }

package/ui/site.css

@@ -258,24 +258,3 @@ body .ui.inverted::-webkit-scrollbar-thumb:hover {
 	margin-left: auto !important;
 	margin-right: auto !important;
 }
-
-/* for editor only, but semantic-ui dependent */
-[contenteditable] .ui.buttons .disabled.button,
-[contenteditable] .ui.disabled.button,
-[contenteditable] .ui.button:disabled,
-[contenteditable] .ui.disabled.button:hover,
-[contenteditable] .ui.disabled.active.button {
-	pointer-events: auto !important;
-}
-
-[contenteditable] .ui.dropdown[block-focused] > .menu {
-	overflow: visible;
-	width: auto;
-	height: auto;
-	top: 100% !important;
-	opacity: 1;
-}
-
-[contenteditable] .field[block-focused] .dropdown > .menu {
-	display: block !important;
-}

package/ui/sitemap-helper.js

@@ -1,73 +0,0 @@
-class HTMLElementSitepage extends Page.Element {
-	static defaults = {
-		url: null,
-		index: (x) => parseInt(x) || 0
-	};
-
-	patch(state) {
-		if (this.isConnected) this.syncBlock(state.scope);
-	}
-	setup(state) {
-		const content = this.querySelector('[block-content="children"]');
-		if (!content) return;
-		this.observer = new MutationObserver(mutations => this.updateChildren());
-		this.observer.observe(content, {
-			childList: true
-		});
-	}
-
-	close(state) {
-		if (this.observer) this.observer.disconnect();
-		delete this.observer;
-	}
-
-	updateChildren() {
-		if (this.updating) return;
-		const content = this.querySelector('[block-content="children"]');
-		if (!content) return;
-		this.updating = true;
-		const parentUrl = this.dataset.url || "";
-		const uniques = {};
-		Array.prototype.forEach.call(content.children, (child, index) => {
-			if (!child.matches('element-sitepage')) return; // cursor
-			const childUrl = child.dataset.url || '';
-			if (childUrl.startsWith('/.')) return;
-			const newUrl = parentUrl + "/" + childUrl.split('/').pop();
-			if (childUrl != newUrl && !uniques[newUrl]) {
-				child.setAttribute('data-url', newUrl);
-			}
-			uniques[newUrl] = true;
-			const curIndex = parseInt(child.dataset.index);
-			if (curIndex != index) {
-				child.setAttribute('data-index', index);
-			}
-		});
-		this.updating = false;
-	}
-
-	syncBlock(scope) {
-		if (!this.parentNode || this.matches('element-sitemap')) return;
-		const editor = scope.editor;
-		if (!editor || editor.closed) return;
-		const block = editor.blocks.get(this.getAttribute('block-id'));
-		if (!block.data) block.data = {};
-		const data = this.options;
-		if (Object.keys(data).some(key => data[key] != block.data[key])) {
-			Object.assign(block.data, data);
-			editor.dispatch(editor.utils.refreshTr(editor.state.tr, this, block));
-			this.updateChildren();
-		} else this.updateChildren();
-
-	}
-}
-
-
-Page.define('element-sitepage', HTMLElementSitepage);
-
-Page.setup(state => {
-	if (!state.scope.$write) return;
-	state.finish(() => {
-		Page.extend('element-sitemap', HTMLElementSitepage);
-	});
-});
-

package/ui/sitemap.css

@@ -1,53 +0,0 @@
-[block-type="sitemap"] {
-	min-height:2em;
-	position:relative;
-	display: block;
-	width: 100%;
-}
-[block-type="sitemap"] .caret-icon::before {
-	right:auto;
-	left:-0.8em;
-}
-.ui.list[block-type="sitemap"] {
-	padding:0.5em;
-	margin:0.5em;
-	box-shadow: -1px 1px 2px 1px grey;
-}
-
-[block-type="sitemap"] .list > .item > .content {
-	box-shadow: 0 1px 1px 1px grey;
-	padding-right: 0.5em;
-	padding-bottom:1px;
-	margin-bottom: 0;
-	min-height:1em;
-}
-
-[block-type="sitemap"] .list.content.active {
-	margin-top:0;
-	padding-bottom: 1em !important;
-	margin-left: 1em;
-	padding-top: 0 !important;
-	margin-right: 1em;
-}
-.ui.accordion[block-type="sitemap"] .title > a,
-.ui.accordion[block-type="sitemap"] .accordion .title > a {
-	padding-left:1.25em;
-}
-element-sitepage {
-	display:block;
-	position: relative;
-}
-element-sitepage .title.caret-icon.active {
-	padding-bottom:0 !important;
-}
-element-sitepage > .title > .label {
-	float:right;
-}
-
-element-sitepage > .title > a.description {
-	color: darkgrey;
-}
-element-sitepage > .title > a.redirection {
-	color:dodgerblue;
-}
-

package/ui/sitemap.js

@@ -1,78 +0,0 @@
-class HTMLElementSitemap extends Page.Element {
-	static makeTree(tree, parent) {
-		let page = tree._;
-		if (page) {
-			if (!parent.children) parent.children = [];
-			const old = parent.children.find(item => item.id == page.id);
-			if (!old) parent.children.push(page);
-			if (parent.content == null) parent.content = {};
-			if (parent.content.children == null) parent.content.children = "";
-			if (typeof parent.content.children == "string") {
-				parent.content.children += `<div block-id="${page.id}" block-type="${page.type}"></div>`;
-			}
-			delete tree._;
-		} else {
-			page = parent;
-		}
-		for (const name of Object.keys(tree).sort((a, b) => {
-			const pageA = tree[a]._;
-			const pageB = tree[b]._;
-			if (!pageA || !pageB) return 0;
-			let indexA = pageA.data.index;
-			if (indexA == null) indexA = Infinity;
-			let indexB = pageB.data.index;
-			if (indexB == null) indexB = Infinity;
-			if (indexA == indexB) return 0;
-			else if (indexA < indexB) return -1;
-			else if (indexA > indexB) return 1;
-		})) {
-			this.makeTree(tree[name], page);
-		}
-		return parent;
-	}
-
-	static transformResponse(res) {
-		const pages = res.items;
-		const tree = {};
-
-		for (const page of pages) {
-			if (!page.data.url) continue;
-			let branch = tree;
-			const arr = page.data.url.substring(1).split('/');
-			arr.forEach((name, i) => {
-				if (!branch[name]) branch[name] = {};
-				branch = branch[name];
-				if (i == arr.length - 1) branch._ = page;
-			});
-		}
-		return this.makeTree(tree, {
-			type: 'sitemap',
-			content: { children: '' },
-			children: []
-		});
-	}
-
-	async build(state) {
-		if (this.firstElementChild.children.length > 0 && state.scope.$write) {
-			// workaround... build is called a second time with pagecut-placeholder set
-			return;
-		}
-		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 = scope.render({
-			item: tree
-		});
-		// only change block content
-		const src = node.firstElementChild;
-		const dst = this.firstElementChild;
-		dst.textContent = '';
-		while (src.firstChild) dst.appendChild(src.firstChild);
-	}
-}
-
-
-Page.define('element-sitemap', HTMLElementSitemap);
-
-