alchemy-widget 0.1.6 → 0.2.0

package/element/20-add_area_element.js

@@ -1,17 +1,17 @@
 /**
- * The alchemy-widgets element
+ * The al-widgets element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-let AddArea = Function.inherits('Alchemy.Element.Widget.Base', function AlchemyWidgetAddArea() {
-	AlchemyWidgetAddArea.super.call(this);
+let AddArea = Function.inherits('Alchemy.Element.Widget.Base', function WidgetAddArea() {
+	WidgetAddArea.super.call(this);
 
 	this.innerHTML = `
 <div class="main-button">
-	<button class="add-button widget-button" title="Add"><i class="gg-math-plus"></i></button>
-	<button class="menu-button widget-button" title="Menu"><i class="gg-menu-grid-o"></i></button>
+	<button class="add-button widget-button" title="Add"><al-icon icon-name="plus"></al-icon></button>
+	<button class="menu-button widget-button" title="Menu"><al-icon icon-name="grid"></al-icon></button>
 </div>
 <div class="widget-types">
 	TYPES
@@ -24,16 +24,16 @@ let AddArea = Function.inherits('Alchemy.Element.Widget.Base', function AlchemyW
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.0
  */
 AddArea.setMethod(function showTypes(event) {
 
 	let that = this;
 
-	let context_button = document.querySelector('alchemy-widget-context');
+	let context_button = document.querySelector('al-widget-context');
 
-	if (context_button && context_button.active_widget) {
-		context_button.unselectedWidget();
+	if (context_button) {
+		context_button.forceUnselection();
 	}
 
 	let context = this.createElement('he-context-menu');
@@ -58,27 +58,27 @@ AddArea.setMethod(function showTypes(event) {
 });
 
 /**
- * Show the toolbar
+ * Show the actionbar
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-AddArea.setMethod(function showToolbar() {
+AddArea.setMethod(function showActionbar() {
 
-	if (!this.toolbar) {
-		this.toolbar = document.createElement('alchemy-widget-toolbar');
-		this.append(this.toolbar);
+	if (!this.actionbar) {
+		this.actionbar = document.createElement('al-widget-actionbar');
+		this.append(this.actionbar);
 	}
 
-	if (this.toolbar.context_element == this && !this.toolbar.hidden) {
-		this.toolbar.close();
+	if (this.actionbar.context_element == this && !this.actionbar.hidden) {
+		this.actionbar.close();
 		return;
 	}
 
-	this.toolbar.hidden = false;
-	this.toolbar.context_element = this;
-	this.toolbar.showWidgetActions(this.parentElement);
+	this.actionbar.hidden = false;
+	this.actionbar.context_element = this;
+	this.actionbar.showWidgetActions(this.parentElement);
 
 });
 
@@ -106,6 +106,6 @@ AddArea.setMethod(function introduced() {
 
 	context_button.addEventListener('click', function onClick(e) {
 		e.preventDefault();
-		that.showToolbar();
+		that.showActionbar();
 	});
 });

package/element/table_of_contents_element.js

@@ -16,6 +16,15 @@ const TableOfContents = Function.inherits('Alchemy.Element.App', 'TableOfContent
  */
 TableOfContents.setTemplateFile('elements/table_of_contents');
 
+/**
+ * Set the actual tag name
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TableOfContents.setTagName('AL-TOC');
+
 /**
  * Set the content
  *
@@ -84,7 +93,7 @@ TableOfContents.setAttribute('intersection-class');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.1.2
+ * @version  0.2.0
  */
 TableOfContents.setProperty(function entries() {
 
@@ -105,7 +114,10 @@ TableOfContents.setProperty(function entries() {
 	}
 
 	if (wrapper) {
-		let elements = wrapper.querySelectorAll(this.elements_selector || 'h1,h2'),
+
+		let current_level = null,
+		    last_entry,
+		    elements = wrapper.querySelectorAll(this.elements_selector || 'h1,h2'),
 			element,
 			title,
 			i;
@@ -124,7 +136,9 @@ TableOfContents.setProperty(function entries() {
 				}
 			}
 
-			let title_element;
+			let title_element,
+			    starts_level,
+				ends_level;
 
 			if (this.title_selector) {
 				title_element = element.querySelector(this.title_selector);
@@ -134,6 +148,25 @@ TableOfContents.setProperty(function entries() {
 				title_element = element;
 			}
 
+			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++;
+					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;
+					}
+				}
+			}
+
 			title = (title_element.toc_title || title_element.textContent || '').trim();
 
 			title = title.truncate(30);
@@ -143,11 +176,74 @@ TableOfContents.setProperty(function entries() {
 				continue;
 			}
 
-			result.push({
-				id      : element.id,
-				title   : title,
-				element : element,
-			});
+			last_entry = {
+				id           : element.id,
+				level        : current_level,
+				title        : title,
+				element      : element,
+				starts_level : starts_level,
+				ends_level   : ends_level,
+			};
+
+			result.push(last_entry);
+		}
+
+		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;
 		}
 	}
 

package/element/widget_actionbar_element.js

@@ -0,0 +1,92 @@
+/**
+ * The al-widget-actionbar element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.2.0
+ */
+let Actionbar = Function.inherits('Alchemy.Element.Widget.Base', function WidgetActionbar() {
+	WidgetActionbar.super.call(this);
+	this.hidden = true;
+});
+
+/**
+ * Show the actions for the given widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.2.0
+ *
+ * @param    {HTMLElement}   widget
+ */
+Actionbar.setMethod(async function showWidgetActions(widget) {
+
+	if (!widget || !widget.instance) {
+		return;
+	}
+
+	const that = this;
+
+	let actions = await widget.instance.getActionbarActions();
+
+	// Clear all the old buttons
+	Hawkejs.removeChildren(this);
+
+	for (let action of actions) {
+
+		let button = this.createElement('button');
+		button.classList.add('aw-actionbar-button');
+
+		let content = action.getButtonContent();
+
+		if (!content) {
+			content = action.title;
+		}
+
+		if (typeof content == 'string') {
+			button.innerText = content;
+		} else if (content) {
+			if (Array.isArray(content)) {
+				for (let entry of content) {
+					button.append(entry);
+				}
+			} else {
+				button.append(content);
+			}
+		}
+
+		button.setAttribute('title', action.title);
+
+		let is_selected = action.isAlreadySelected(widget);
+
+		if (is_selected) {
+			button.classList.add('aw-button-selected');
+		}
+
+		button.addEventListener('click', function onClick(e) {
+
+			e.preventDefault();
+
+			action.applyOnWidget(widget, that);
+		});
+
+		this.append(button);
+	}
+});
+
+/**
+ * Close the actionbar
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.0
+ */
+Actionbar.setMethod(function close() {
+	this.hidden = true;
+
+	if (this.context_element && this.context_element.active_widget) {
+		this.context_element.active_widget.selectWidget();
+	}
+
+	this.context_element = null;
+});

package/element/widget_context_element.js

@@ -1,14 +1,14 @@
 /**
- * The alchemy-widget-context element
+ * The al-widget-context element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-let Awc = Function.inherits('Alchemy.Element.Widget.Base', function AlchemyWidgetContext() {
-	AlchemyWidgetContext.super.call(this);
+let Awc = Function.inherits('Alchemy.Element.Widget.Base', function WidgetContext() {
+	WidgetContext.super.call(this);
 
-	this.innerHTML = `<button class="menu-button widget-button" title="Menu"><i class="gg-menu-grid-o"></i></button>`;
+	this.innerHTML = `<button class="menu-button widget-button" title="Menu"><al-icon icon-name="grid"></al-icon></button>`;
 	this.hidden = true;
 });
 
@@ -45,48 +45,64 @@ Awc.setMethod(function moveToWidget(widget) {
 });
 
 /**
- * Exiting the given widget
+ * The given widget has been unselected
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 Awc.setMethod(function unselectedWidget(widget) {
 
 	this.hidden = true;
 	this.active_widget = null;
 
-	if (this.toolbar) {
-		this.toolbar.hidden = true;
+	if (this.actionbar) {
+		this.actionbar.hidden = true;
 	}
 });
 
 /**
- * Show the toolbar
+ * Force unselecting any widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Awc.setMethod(function forceUnselection() {
+
+	if (this.active_widget) {
+		this.active_widget.unselectWidget();
+	} else {
+		this.unselectedWidget();
+	}
+});
+
+/**
+ * Show the actionbar
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-Awc.setMethod(function toggleToolbar() {
+Awc.setMethod(function toggleActionbar() {
 
 	if (!this.active_widget) {
 		return;
 	}
 
-	if (!this.toolbar) {
-		this.toolbar = document.createElement('alchemy-widget-toolbar');
-		this.append(this.toolbar);
+	if (!this.actionbar) {
+		this.actionbar = document.createElement('al-widget-actionbar');
+		this.append(this.actionbar);
 	}
 
-	if (this.toolbar.context_element == this && !this.toolbar.hidden) {
-		this.toolbar.close();
+	if (this.actionbar.context_element == this && !this.actionbar.hidden) {
+		this.actionbar.close();
 		return;
 	}
 
-	this.toolbar.hidden = false;
-	this.toolbar.context_element = this;
-	this.toolbar.showWidgetActions(this.active_widget);
+	this.actionbar.hidden = false;
+	this.actionbar.context_element = this;
+	this.actionbar.showWidgetActions(this.active_widget);
 });
 
 /**
@@ -94,7 +110,7 @@ Awc.setMethod(function toggleToolbar() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 Awc.setMethod(function introduced() {
 
@@ -110,7 +126,7 @@ Awc.setMethod(function introduced() {
 			return that.exitingWidget();
 		}
 
-		that.toggleToolbar();
+		that.toggleActionbar();
 	});
 
 	document.addEventListener('click', e => {
@@ -129,7 +145,7 @@ Awc.setMethod(function introduced() {
 			return;
 		}
 
-		return this.unselectedWidget();
+		return this.forceUnselection();
 	});
 
 	let update_scroll = () => {