alchemy-widget 0.1.6 → 0.2.1

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
  *
@@ -79,12 +88,21 @@ TableOfContents.setAttribute('title-selector');
  */
 TableOfContents.setAttribute('intersection-class');
 
+/**
+ * Should titles be truncated?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+TableOfContents.setAttribute('truncate-length', {type: 'number'});
+
 /**
  * Get the entries
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.1.2
+ * @version  0.2.1
  */
 TableOfContents.setProperty(function entries() {
 
@@ -105,7 +123,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 +145,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,20 +157,107 @@ 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++;
+
+					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;
+					}
+				}
+			}
+
 			title = (title_element.toc_title || title_element.textContent || '').trim();
 
-			title = title.truncate(30);
+			if (this.truncate_length) {
+				title = title.truncate(this.truncate_length);
+			}
 
 			// Don't add empty titles
 			if (!title) {
 				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;
 		}
 	}
 
@@ -159,7 +269,7 @@ TableOfContents.setProperty(function entries() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.1.2
+ * @version  0.2.1
  */
 TableOfContents.setMethod(async function introduced() {
 
@@ -167,7 +277,8 @@ TableOfContents.setMethod(async function introduced() {
 
 	const observer = new IntersectionObserver(entries => {
 
-		let class_name = this.intersection_class || 'visible';
+		let class_name = this.intersection_class || 'visible',
+		    first_name = class_name + '-first';
 
 		for (let entry of entries) {
 			const id = entry.target.getAttribute('id');
@@ -185,6 +296,28 @@ TableOfContents.setMethod(async function introduced() {
 				element.classList.remove(class_name);
 			}
 		};
+
+		let is_visible,
+		    all_marked = this.querySelectorAll('.' + class_name + ', .' + first_name),
+		    element,
+			seen = 0,
+		    i;
+		
+		for (i = 0; i < all_marked.length; i++) {
+			element = all_marked[i];
+			is_visible = element.classList.contains(class_name);
+
+			if (is_visible && seen == 0) {
+				element.classList.add(first_name);
+			} else {
+				element.classList.remove(first_name);
+			}
+
+			if (is_visible) {
+				seen++;
+			}
+		}
+		
 	});
 
 	for (let entry of this.entries) {

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 = () => {