alchemy-widget 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 0.2.4 (2023-01-30)
+
+* Fix the tree structure generation of the `al-toc` element
+* Make `TableOfContents#entries` return a flat list and `TableOfContents#tree` a tree structure
+* Also take siblings of heading elements into account for the `TableOfContents` scrollspy
+
+## 0.2.3 (2023-01-23)
+
+* Fix `List` widgets not having their content saved
+* Fix more issues with saving to the database
+
 ## 0.2.2 (2022-12-23)
 
 * Fix widgets not being populated properly

package/controller/alchemy_widgets_controller.js

@@ -225,7 +225,7 @@ AlchemyWidgets.setAction(async function uploadImage(conduit) {
 			id : result._id,
 		};
 
-		let default_path = alchemy.routeUrl('Media::image', params);
+		let default_path = alchemy.routeUrl('MediaFile#image', params);
 		let url = RURL.parse(default_path);
 
 		let path_800 = url.clone();

package/element/05-widget_element.js

@@ -389,6 +389,22 @@ Widget.setMethod(function getContextButton() {
 	return button;
 });
 
+/**
+ * Get a list of elements that could be child widgets
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.3
+ * @version  0.2.3
+ */
+Widget.setMethod(function getPossibleWidgetChildren() {
+
+	if (this.instance && typeof this.instance.getPossibleWidgetChildren == 'function') {
+		return this.instance.getPossibleWidgetChildren();
+	}
+
+	return this.children;
+});
+
 /**
  * Show the config button
  *

package/element/10-container_elements.js

@@ -139,19 +139,20 @@ AlchemyWidgets.setMethod(function applyValue(value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.3
  *
  * @return   {Array}
  */
 AlchemyWidgets.setMethod(function getWidgetsConfig() {
 
-	let widgets = [],
+	let children = this.getPossibleWidgetChildren(),
+	    widgets = [],
 	    child,
 	    temp,
 	    i;
 
-	for (i = 0; i < this.children.length; i++) {
-		child = this.children[i];
+	for (i = 0; i < children.length; i++) {
+		child = children[i];
 
 		if (child instanceof Classes.Alchemy.Element.Widget.Base) {
 			temp = child.value;

package/element/table_of_contents_element.js

@@ -1,3 +1,6 @@
+const RELATED_HEADING = Symbol('related_heading'),
+      RELATED_SIBLINGS = Symbol('related_siblings');
+
 /**
  * The table-of-contents element
  *
@@ -102,7 +105,7 @@ TableOfContents.setAttribute('truncate-length', {type: 'number'});
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.2.1
+ * @version  0.2.4
  */
 TableOfContents.setProperty(function entries() {
 
@@ -124,59 +127,42 @@ TableOfContents.setProperty(function entries() {
 
 	if (wrapper) {
 
-		let current_level = null,
-		    last_entry,
-		    elements = wrapper.querySelectorAll(this.elements_selector || 'h1,h2'),
-			element,
-			title,
-			i;
+		let heading_level = 0,
+		    heading,
+		    i;
 
-		for (i = 0; i < elements.length; i++) {
-			element = elements[i];
+		let headings = wrapper.querySelectorAll(this.elements_selector || 'h1, h2, h3, h4, h5, h6'),
+		    nodes = [];
 
-			if (!element.id) {
+		for (i = 0; i < headings.length; i++) {
+			heading = headings[i];
 
-				if (element.hawkejs_id) {
-					element.id = element.hawkejs_id;
+			if (!heading.id) {
+
+				if (heading.hawkejs_id) {
+					heading.id = heading.hawkejs_id;
 				}
 
-				if (!element.id) {
+				if (!heading.id) {
 					continue;
 				}
 			}
 
 			let title_element,
-			    starts_level,
-			    ends_level;
+			    title;
 
 			if (this.title_selector) {
-				title_element = element.querySelector(this.title_selector);
+				title_element = heading.querySelector(this.title_selector);
 			}
 
 			if (!title_element) {
-				title_element = element;
+				title_element = heading;
 			}
 
-			if (element.nodeName[0] == 'H' && isFinite(element.nodeName[1])) {
-				let heading_level = +element.nodeName[1];
-
-				if (current_level == null) {
-					current_level = heading_level;
-				} else if (heading_level > current_level) {
-					current_level++;
-
-					if (last_entry) {
-						last_entry.starts_level = true;
-					}
-				} else if (heading_level == current_level && last_entry) {
-					last_entry.starts_level = false;
-				} else if (heading_level < current_level) {
-					current_level--;
-
-					if (last_entry) {
-						last_entry.ends_level = true;
-					}
-				}
+			if (title_element.nodeName[0] == 'H' && isFinite(title_element.nodeName[1])) {
+				heading_level = +title_element.nodeName[1];
+			} else if (!heading_level) {
+				heading_level = 1;
 			}
 
 			title = (title_element.toc_title || title_element.textContent || '').trim();
@@ -190,86 +176,39 @@ TableOfContents.setProperty(function entries() {
 				continue;
 			}
 
-			last_entry = {
-				id           : element.id,
-				level        : current_level,
-				title        : title,
-				element      : element,
-				starts_level : starts_level,
-				ends_level   : ends_level,
+			let node = {
+				id       : heading.id,
+				level    : heading_level,
+				title    : title,
+				element  : heading,
 			};
 
-			result.push(last_entry);
+			nodes.push(node);
 		}
 
-		let ended_level = false,
-		    entries = result,
-		    current_branch,
-		    current_nodes = [];
-
-		result = current_nodes;
-		last_entry = null;
-
-		for (let entry of entries) {
-
-			if (ended_level) {
-
-				while (entry.level >= current_branch.level) {
-					current_branch = current_branch.parent;
-					current_nodes = current_branch?.children || result;
-
-					if (!current_branch) {
-						current_branch = result[result.length - 1];
-						break;
-					}
-				}
-
-				ended_level = false;
-			}
-
-			if (!current_branch) {
-				current_branch = entry;
-			} else {
-				entry.parent = current_branch;
-			}
-
-			if (entry.starts_level) {
-
-				current_branch = last_entry;
-
-				if (!current_branch.children) {
-					current_branch.children = [];
-				}
-
-				current_nodes = current_branch.children;
-			}
-			
-			current_nodes.push(entry);
-
-			if (entry.ends_level) {
-				ended_level = true;
-				current_branch = entry.parent;
-				current_nodes = current_branch.children || result;
-
-				if (!current_branch) {
-					current_branch = result[result.length - 1];
-					break;
-				}
-			}
-
-			last_entry = entry;
-		}
+		result = nodes;
 	}
 
 	return result;
 });
 
+/**
+ * Get the entries tree
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.4
+ * @version  0.2.4
+ */
+TableOfContents.setProperty(function tree() {
+	return Blast.listToTree(this.entries);
+});
+
 /**
  * Added to the dom for the first time
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.2.1
+ * @version  0.2.4
  */
 TableOfContents.setMethod(async function introduced() {
 
@@ -280,22 +219,51 @@ TableOfContents.setMethod(async function introduced() {
 		let class_name = this.intersection_class || 'visible',
 		    first_name = class_name + '-first';
 
+		let intersect_map = new Map();
+
 		for (let entry of entries) {
-			const id = entry.target.getAttribute('id');
+			const heading = entry.target[RELATED_HEADING] || entry.target;
+			const id = heading.getAttribute('id');
+
+			if (!id) {
+				continue;
+			}
 
 			let query = `a[href="#${id}"]`,
 			    element = this.querySelector(query);
-			
+
 			if (!element) {
-				return;
+				continue;
 			}
 
+			let value = intersect_map.get(element) || 0;
+
 			if (entry.intersectionRatio > 0) {
+				value++;
+			} else {
+				let siblings = heading[RELATED_SIBLINGS];
+
+				if (siblings?.length) {
+					for (let sibling of siblings) {
+						if (sibling.isVisible(-150)) {
+							value++;
+							break;
+						}
+					}
+				}
+			}
+
+			intersect_map.set(element, value);
+		};
+
+		for (let [element, value] of intersect_map) {
+
+			if (value > 0) {
 				element.classList.add(class_name);
 			} else {
 				element.classList.remove(class_name);
 			}
-		};
+		}
 
 		let is_visible,
 		    all_marked = this.querySelectorAll('.' + class_name + ', .' + first_name),
@@ -317,10 +285,31 @@ TableOfContents.setMethod(async function introduced() {
 				seen++;
 			}
 		}
-		
 	});
 
-	for (let entry of this.entries) {
+	let entries = this.entries,
+	    elements = [];
+
+	for (let entry of entries) {
 		observer.observe(entry.element);
+		elements.push(entry.element);
+	}
+
+	for (let element of elements) {
+
+		element[RELATED_SIBLINGS] = [];
+		let sibling = element.nextElementSibling;
+
+		while (sibling) {
+
+			if (elements.includes(sibling)) {
+				break;
+			}
+
+			element[RELATED_SIBLINGS].push(sibling);
+			sibling[RELATED_HEADING] = element;
+			observer.observe(sibling);
+			sibling = sibling.nextElementSibling;
+		}
 	}
 });

package/helper/widgets/05-list.js

@@ -11,6 +11,18 @@
  */
 const List = Function.inherits('Alchemy.Widget.Container', 'List');
 
+/**
+ * Get a list of elements that could be child widgets
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.3
+ * @version  0.2.3
+ */
+List.setMethod(function getPossibleWidgetChildren() {
+	let children = this.widget.querySelectorAll(':scope > ul > li > *');
+	return children;
+});
+
 /**
  * Dummy populate method
  *

package/helper/widgets/partial.js

@@ -57,7 +57,7 @@ Partial.constitute(function prepareSchema() {
 	let contents = this.createSchema();
 
 	contents.addField('name', 'String');
-	contents.addField('content', 'Widgets');
+	contents.addField('contents', 'Widgets');
 
 	this.schema.addField('contents', contents, {array: true});
 });
@@ -87,7 +87,26 @@ Partial.setMethod(async function populateWidget() {
 
 		if (this.config?.contents?.length) {
 			for (let entry of this.config.contents) {
-				variables[entry.name] = entry.contents;
+
+				let actual_contents;
+
+				if (entry.contents) {
+					if (entry.contents.config) {
+						actual_contents = entry.contents.config;
+					} else if (entry.contents.widgets) {
+						actual_contents = entry.contents.widgets;
+
+						let type = actual_contents?.[0]?.type;
+
+						if (type == 'container' || type == 'row') {
+							actual_contents = actual_contents[0].config?.widgets;
+						} else {
+							actual_contents = actual_contents[0];
+						}
+					}
+				}
+
+				variables[entry.name] = actual_contents;
 			}
 		}
 
@@ -180,7 +199,7 @@ Partial.setMethod(function _stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.3
  *
  * @return   {Object}
  */
@@ -206,7 +225,23 @@ Partial.setMethod(function syncConfig() {
 			contents.push(widget_config);
 		}
 
-		widget_config.contents = sub_widget.value;
+		let value = sub_widget.value,
+		    widget_contents;
+
+		if (value?.widgets) {
+			widget_contents = {
+				widgets : [{
+					type : 'row',
+					config : value,
+				}]
+			};
+		} else {
+			widget_contents = {
+				widgets: Array.cast(value)
+			};
+		}
+
+		widget_config.contents = widget_contents;
 	}
 
 	return this.config;

package/helper_field/widget.js

@@ -52,4 +52,26 @@ WidgetField.setMethod(function cast(value, to_datasource) {
 	}
 
 	return value;
-});
+});
+
+/**
+ * Convert to JSON
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.3
+ * @version  0.2.3
+ *
+ * @return   {Object}
+ */
+WidgetField.setMethod(function toDry() {
+
+	let {schema, ...options} = this.options;
+
+	let value = {
+		schema  : this.schema,
+		name    : this.name,
+		options : options,
+	};
+
+	return {value};
+});

package/helper_field/widgets.js

@@ -22,4 +22,18 @@ const WidgetsField = Function.inherits('Alchemy.Field.Schema', function Widgets(
 	}
 
 	Widgets.super.call(this, schema, name, options);
+});
+
+/**
+ * Get the client-side options
+ *
+ * @author   Jelle De Loecker   <jelle@develry.be>
+ * @since    0.2.3
+ * @version  0.2.3
+ *
+ * @return   {Object}
+ */
+WidgetsField.setMethod(function getOptionsForDrying() {
+	let {schema, ...options} = this.options;
+	return options;
 });

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-widget",
 	"description": "The widget plugin for the AlchemyMVC",
-	"version": "0.2.2",
+	"version": "0.2.4",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",

package/view/elements/table_of_contents.hwk

@@ -1,4 +1,4 @@
-<% all_entries = self.entries %>
+<% all_entries = self.tree %>
 
 {% macro printEntries %}
 	<ol>