alchemy-widget 0.1.2 → 0.1.5

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.1.5 (2022-07-14)
+
+* Unselect widgets when stopping the editor
+* Add front-end save ability to widgets
+
+## 0.1.4 (2022-06-23)
+
+* Use `he-context-menu` element to show widgets to add
+* Add widget actions to move across container boundaries
+
+## 0.1.3 (2022-03-21)
+
+* Catch and print errors when appending a widget to a container
+
 ## 0.1.2 (2022-02-20)
 
 * Add `table-of-contents` element and widget

package/assets/stylesheets/alchemy-widgets.scss

@@ -11,7 +11,7 @@ alchemy-widgets-column {
 	}
 
 	> * {
-		flex: 1;
+		flex: 10;
 	}
 }
 
@@ -53,7 +53,7 @@ alchemy-widgets {
 
 alchemy-widgets-row {
 	flex-flow: row;
-	flex: 1 1 auto;
+	flex: 10 10 auto;
 
 	&.aw-editing {
 		padding-right: 5rem;
@@ -91,7 +91,7 @@ alchemy-widgets-column > alchemy-widgets-column,
 }
 
 alchemy-widgets-column {
-	flex: 1 1 auto;
+	flex: 10 10 auto;
 }
 
 alchemy-widgets-column,
@@ -149,8 +149,8 @@ alchemy-widget-add-area {
 	display: flex;
 	align-content: center;
 	min-height: 26px;
-	min-width: 26px;
 	align-items: center;
+	text-transform: uppercase;
 
 	&:hover {
 		color: #388ae5;

package/bootstrap.js

@@ -0,0 +1,6 @@
+Router.add({
+	name       : 'AlchemyWidgets#save',
+	methods    : 'post',
+	paths      : '/api/alchemywidgets/save',
+	policy     : 'logged_in',
+});

package/controller/alchemy_widgets_controller.js

@@ -0,0 +1,111 @@
+/**
+ * The Alchemy Widgets Controller class
+ *
+ * @author     Jelle De Loecker   <jelle@elevenways.be>
+ * @since      0.1.5
+ * @version    0.1.5
+ */
+const AlchemyWidgets = Function.inherits('Alchemy.Controller', 'AlchemyWidgets');
+
+/**
+ * Aggregate all the records to save
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ *
+ * @param    {Object[]}   fields
+ *
+ * @return   {Document[]}
+ */
+AlchemyWidgets.setMethod(async function aggregate(widgets) {
+
+	let result = {};
+
+	for (let widget of widgets) {
+
+		if (!widget || !widget.model || !widget.field) {
+			throw new Error('Unable to save Widget: no model or field was given');
+		}
+	
+		const model = alchemy.getModel(widget.model);
+	
+		if (!model) {
+			throw new Error('Unable to save Widget: model "' + widget.model + '" not found');
+		}
+	
+		let field = model.getField(widget.field);
+	
+		if (!field) {
+			throw new Error('Unable to save Widget: field "' + widget.field + '" does not exist inside model "' + widget.model + '"');
+		}
+	
+		let record;
+	
+		if (widget.pk) {
+
+			if (result[widget.pk]) {
+				record = result[widget.pk];
+			} else {
+				record = await model.findByPk(widget.pk);
+				result[widget.pk] = record;
+			}
+		} else {
+
+			if (result[model.name]) {
+				record = result[model.name];
+			} else {
+				record = model.createDocument();
+				result[model.name] = record;
+			}
+		}
+	
+		let field_language = widget.field_languages?.[widget.field];
+	
+		if (field_language) {
+			if (!record[widget.field]) {
+				record[widget.field] = {};
+			}
+	
+			record[widget.field][field_language] = widget.value;
+		} else {
+			record[widget.field] = widget.value;
+		}
+	}
+
+	return Object.values(result);
+});
+
+/**
+ * The save action
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ *
+ * @param    {Conduit}   conduit
+ */
+AlchemyWidgets.setAction(async function save(conduit) {
+
+	const body = conduit.body;
+
+	if (!body || !body.widgets?.length) {
+		return conduit.error('Unable to save Widgets: no widgets were given');
+	}
+
+	let records = await this.aggregate(body.widgets);
+
+	let saved_pks = [];
+
+	for (let record of records) {
+		await record.save();
+		saved_pks.push(record.$pk);
+	}
+
+	let result = {
+		saved_pks,
+		saved : true,
+	};
+
+	conduit.end(result);
+});

package/element/00-widget_base_element.js

@@ -42,9 +42,120 @@ Base.setAssignedProperty('instance');
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
-Base.setProperty('parent_container');
+Base.setProperty(function parent_container() {
+
+	let container,
+	    current = this.parentElement;
+	
+	while (current) {
+		if (current.is_container) {
+			container = current;
+			break;
+		}
+
+		current = current.parentElement;
+	}
+
+	return container;
+});
+
+/**
+ * The next container across container boundaries
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.4
+ * @version  0.1.4
+ */
+Base.setProperty(function next_container() {
+	return this.getSiblingContainer('next');
+});
+
+/**
+ * The previous container across container boundaries
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.4
+ * @version  0.1.4
+ */
+Base.setProperty(function previous_container() {
+	return this.getSiblingContainer('previous');
+});
+
+/**
+ * Is this the root element?
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ */
+Base.setProperty(function is_root_widget() {
+	return !this.parent_container;
+});
+
+/**
+ * Can this widget be saved?
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ */
+Base.setProperty(function can_be_saved() {
+
+	if (!this.is_root_widget) {
+		return false;
+	}
+
+	if (!this.record || !this.field) {
+		return false;
+	}
+
+	return true;
+});
+
+/**
+ * Get a sibling container
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.4
+ * @version  0.1.4
+ */
+Base.setMethod(function getSiblingContainer(type) {
+	let property;
+
+	if (type == 'next') {
+		property = 'nextElementSibling';
+	} else if (type == 'previous') {
+		property = 'previousElementSibling';
+	} else {
+		return false;
+	}
+
+	if (!this[property] && !this.parent_container) {
+		return;
+	}
+
+	let next = this[property];
+
+	if (next) {
+		if (next.is_container) {
+			return next;
+		}
+
+		if (next.tagName != 'ALCHEMY-WIDGET-ADD-AREA') {
+			return false;
+		}
+	}
+
+	next = this.parent_container[property];
+
+	if (next && next.is_container) {
+		return next;
+	}
+
+	return false;
+});
 
 /**
  * Look for a context variable
@@ -128,5 +239,57 @@ Base.setMethod(function introduced() {
 	if (this.hasAttribute('editing')) {
 		this.startEditor();
 	}
+});
+
+/**
+ * Get the configuration used to save data
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ */
+Base.setMethod(function gatherSaveData() {
+
+	if (!this.is_root_widget) {
+		return;
+	}
+
+	if (!this.record || !this.field) {
+		return;
+	}
+
+	let result = {
+		model : this.record.$model_name,
+		pk    : this.record.$pk,
+		field : this.field,
+		value : this.value,
+		field_languages : this.record.$hold.translated_fields,
+	};
+
+	return result;
+});
+
+/**
+ * Save the current configuration
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ */
+Base.setMethod(async function save() {
+
+	let data = this.gatherSaveData();
+	
+	if (!data) {
+		return;
+	}
+
+	let config = {
+		href : alchemy.routeUrl('AlchemyWidgets#save'),
+		post : {
+			widgets: [data]
+		}
+	};
 
+	let result = await alchemy.fetch(config);
 });

package/element/05-widget_element.js

@@ -34,6 +34,24 @@ Widget.setAttribute('type');
  */
 Widget.setProperty('is_alchemy_widget', true);
 
+/**
+ * The database record to work with
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ */
+Widget.setAssignedProperty('record');
+
+/**
+ * The fieldname in the record to work with
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ */
+Widget.setAssignedProperty('field');
+
 /**
  * Is this widget being edited?
  *
@@ -55,7 +73,7 @@ Widget.setProperty(function editing() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.5
  */
 Widget.setProperty(function value() {
 	return {
@@ -63,6 +81,45 @@ Widget.setProperty(function value() {
 		config   : this.instance.syncConfig(),
 	}
 }, function setValue(value) {
+	this.applyValue(value);
+});
+
+/**
+ * Received a new record
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ */
+Widget.setMethod(function onRecordAssignment(new_record, old_val) {
+	if (new_record && this.field) {
+		let value = new_record[this.field];
+		this.applyValue(value);
+	}
+});
+
+/**
+ * Received a new field name
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ */
+Widget.setMethod(function onFieldAssignment(new_field, old_val) {
+	if (new_field && this.record) {
+		let value = this.record[new_field];
+		this.applyValue(value);
+	}
+});
+
+/**
+ * Apply the given value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ */
+Widget.setMethod(function applyValue(value) {
 
 	let config,
 	    type;
@@ -136,7 +193,7 @@ Widget.setMethod(function startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.5
  */
 Widget.setMethod(function stopEditor() {
 
@@ -144,6 +201,7 @@ Widget.setMethod(function stopEditor() {
 		throw new Error('Unable to stop the editor: this widget element has no accompanying instance');
 	}
 
+	this.unselectWidget();
 	this.instance.stopEditor();
 	this.removeEditEventListeners();
 });

package/element/10-container_elements.js

@@ -32,6 +32,15 @@ AlchemyWidgets.setStatic('custom_element_prefix', 'alchemy-widgets');
  */
 AlchemyWidgets.setProperty('add_edit_event_listeners', false);
 
+/**
+ * Indicate this is a container
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.4
+ * @version  0.1.4
+ */
+AlchemyWidgets.setProperty('is_container', true);
+
 /**
  * Context variables
  *
@@ -74,6 +83,17 @@ AlchemyWidgets.setProperty(function value() {
 	return result;
 
 }, function setValue(value) {
+	this.applyValue(value);
+});
+
+/**
+ * Apply the given value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ */
+AlchemyWidgets.setMethod(function applyValue(value) {
 
 	let widgets,
 	    config;
@@ -179,15 +199,26 @@ AlchemyWidgets.setMethod(function clear() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.3
  *
  * @param    {String}   type
  * @param    {Object}   config
  */
 AlchemyWidgets.setMethod(function addWidget(type, config) {
 
+	let instance;
+
 	// Create the instance of the widget
-	let instance = this.instance.createChildWidget(type, config);
+	try {
+		instance = this.instance.createChildWidget(type, config);
+	} catch (err) {
+		config = {
+			original_config : config,
+			html            : '<pre>' + err.message + '\n' + err.stack + '</pre>',
+		};
+
+		instance = this.instance.createChildWidget('html', config);
+	}
 
 	// Attach the renderer
 	instance.hawkejs_renderer = this.hawkejs_renderer;
@@ -195,9 +226,6 @@ AlchemyWidgets.setMethod(function addWidget(type, config) {
 	// Get the actual widget HTML element
 	let element = instance.element;
 
-	// Make the element know what its parent container is
-	element.parent_container = this;
-
 	this._appendWidgetElement(element);
 
 	element.value = config;

package/element/20-add_area_element.js

@@ -26,11 +26,9 @@ let AddArea = Function.inherits('Alchemy.Element.Widget.Base', function AlchemyW
  * @since    0.1.0
  * @version  0.1.0
  */
-AddArea.setMethod(function showTypes() {
+AddArea.setMethod(function showTypes(event) {
 
-	let that = this,
-	    types_element = this.querySelector('.widget-types'),
-	    widgets = alchemy.getClassGroup('widgets');
+	let that = this;
 
 	let context_button = document.querySelector('alchemy-widget-context');
 
@@ -38,31 +36,25 @@ AddArea.setMethod(function showTypes() {
 		context_button.unselectedWidget();
 	}
 
-	this.classList.add('show-types');
+	let context = this.createElement('he-context-menu');
 
-	Hawkejs.removeChildren(types_element);
+	let widgets = Object.values(alchemy.getClassGroup('widgets')).sortByPath(1, 'title');
 
-	for (let key in widgets) {
+	for (let widget of widgets) {
 
-		if (key == 'container') {
+		if (widget.type_name == 'container') {
 			continue;
 		}
 
-		let widget = widgets[key];
-
-		let button = this.createElement('button');
-		button.setAttribute('data-type', key);
-		button.textContent = widget.title;
-
-		button.addEventListener('click', function onClick(e) {
-			e.preventDefault();
-			that.classList.remove('show-types');
-
-			that.parentElement.addWidget(key);
+		context.addEntry({
+			title : widget.title,
+			icon  : null,
+		}, e => {
+			that.parentElement.addWidget(widget.type_name);
 		});
-
-		types_element.append(button);
 	}
+
+	context.show(event);
 });
 
 /**
@@ -107,7 +99,7 @@ AddArea.setMethod(function introduced() {
 
 	add_button.addEventListener('click', function onClick(e) {
 		e.preventDefault();
-		that.showTypes();
+		that.showTypes(e);
 	});
 
 	let context_button = this.querySelector('.menu-button');

package/element/table_of_contents_element.js

@@ -1,193 +1,193 @@
-/**
- * The table-of-contents element
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-const TableOfContents = Function.inherits('Alchemy.Element.App', 'TableOfContents');
-
-/**
- * The template to use for the content of this element
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setTemplateFile('elements/table_of_contents');
-
-/**
- * Set the content
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setAssignedProperty('content');
-
-/**
- * The role of this element
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setRole('navigation');
-
-/**
- * The parent query
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setAttribute('parent-selector');
-
-/**
- * The children query
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setAttribute('children-selector');
-
-/**
- * The elements query
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setAttribute('elements-selector');
-
-/**
- * The elements query
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setAttribute('title-selector');
-
-/**
- * The class to add when intersecting (visible)
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setAttribute('intersection-class');
-
-/**
- * Get the entries
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setProperty(function entries() {
-
-	let result = [],
-		parent = this.parentElement,
-		wrapper;
-
-	if (this.parent_selector) {
-		parent = this.queryParents(this.parent_selector);
-	}
-
-	if (parent) {
-		wrapper = parent;
-	}
-
-	if (wrapper && this.children_selector) {
-		wrapper = wrapper.querySelector(this.children_selector);
-	}
-
-	if (wrapper) {
-		let elements = wrapper.querySelectorAll(this.elements_selector || 'h1,h2'),
-			element,
-			title,
-			i;
-
-		for (i = 0; i < elements.length; i++) {
-			element = elements[i];
-
-			if (!element.id) {
-
-				if (element.hawkejs_id) {
-					element.id = element.hawkejs_id;
-				}
-
-				if (!element.id) {
-					continue;
-				}
-			}
-
-			let title_element;
-
-			if (this.title_selector) {
-				title_element = element.querySelector(this.title_selector);
-			}
-
-			if (!title_element) {
-				title_element = element;
-			}
-
-			title = (title_element.toc_title || title_element.textContent || '').trim();
-
-			title = title.truncate(30);
-
-			// Don't add empty titles
-			if (!title) {
-				continue;
-			}
-
-			result.push({
-				id      : element.id,
-				title   : title,
-				element : element,
-			});
-		}
-	}
-
-	return result;
-});
-
-/**
- * Added to the dom for the first time
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.2
- * @version  0.1.2
- */
-TableOfContents.setMethod(async function introduced() {
-
-	await this.rerender();
-
-	const observer = new IntersectionObserver(entries => {
-
-		let class_name = this.intersection_class || 'visible';
-
-		for (let entry of entries) {
-			const id = entry.target.getAttribute('id');
-
-			let query = `a[href="#${id}"]`,
-			    element = this.querySelector(query);
-			
-			if (!element) {
-				return;
-			}
-
-			if (entry.intersectionRatio > 0) {
-				element.classList.add(class_name);
-			} else {
-				element.classList.remove(class_name);
-			}
-		};
-	});
-
-	for (let entry of this.entries) {
-		observer.observe(entry.element);
-	}
+/**
+ * The table-of-contents element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+const TableOfContents = Function.inherits('Alchemy.Element.App', 'TableOfContents');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setTemplateFile('elements/table_of_contents');
+
+/**
+ * Set the content
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setAssignedProperty('content');
+
+/**
+ * The role of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setRole('navigation');
+
+/**
+ * The parent query
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setAttribute('parent-selector');
+
+/**
+ * The children query
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setAttribute('children-selector');
+
+/**
+ * The elements query
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setAttribute('elements-selector');
+
+/**
+ * The elements query
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setAttribute('title-selector');
+
+/**
+ * The class to add when intersecting (visible)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setAttribute('intersection-class');
+
+/**
+ * Get the entries
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setProperty(function entries() {
+
+	let result = [],
+		parent = this.parentElement,
+		wrapper;
+
+	if (this.parent_selector) {
+		parent = this.queryParents(this.parent_selector);
+	}
+
+	if (parent) {
+		wrapper = parent;
+	}
+
+	if (wrapper && this.children_selector) {
+		wrapper = wrapper.querySelector(this.children_selector);
+	}
+
+	if (wrapper) {
+		let elements = wrapper.querySelectorAll(this.elements_selector || 'h1,h2'),
+			element,
+			title,
+			i;
+
+		for (i = 0; i < elements.length; i++) {
+			element = elements[i];
+
+			if (!element.id) {
+
+				if (element.hawkejs_id) {
+					element.id = element.hawkejs_id;
+				}
+
+				if (!element.id) {
+					continue;
+				}
+			}
+
+			let title_element;
+
+			if (this.title_selector) {
+				title_element = element.querySelector(this.title_selector);
+			}
+
+			if (!title_element) {
+				title_element = element;
+			}
+
+			title = (title_element.toc_title || title_element.textContent || '').trim();
+
+			title = title.truncate(30);
+
+			// Don't add empty titles
+			if (!title) {
+				continue;
+			}
+
+			result.push({
+				id      : element.id,
+				title   : title,
+				element : element,
+			});
+		}
+	}
+
+	return result;
+});
+
+/**
+ * Added to the dom for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.2
+ * @version  0.1.2
+ */
+TableOfContents.setMethod(async function introduced() {
+
+	await this.rerender();
+
+	const observer = new IntersectionObserver(entries => {
+
+		let class_name = this.intersection_class || 'visible';
+
+		for (let entry of entries) {
+			const id = entry.target.getAttribute('id');
+
+			let query = `a[href="#${id}"]`,
+			    element = this.querySelector(query);
+			
+			if (!element) {
+				return;
+			}
+
+			if (entry.intersectionRatio > 0) {
+				element.classList.add(class_name);
+			} else {
+				element.classList.remove(class_name);
+			}
+		};
+	});
+
+	for (let entry of this.entries) {
+		observer.observe(entry.element);
+	}
 });

package/element/widget_toolbar_element.js

@@ -38,6 +38,7 @@ Toolbar.setMethod(function showWidgetActions(widget) {
 		button.classList.add('aw-toolbar-button');
 
 		button.innerHTML = action.getButtonHTML();
+		button.setAttribute('title', action.title);
 
 		let is_selected = action.isAlreadySelected(widget);
 

package/helper/widgets/00-widget.js

@@ -95,7 +95,7 @@ Widget.enforceProperty(function hawkejs_renderer(new_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.5
  */
 Widget.constitute(function prepareSchema() {
 
@@ -107,15 +107,30 @@ Widget.constitute(function prepareSchema() {
 
 	// Extra classnames for the wrapper
 	this.schema.addField('wrapper_class_names', 'String', {
+		title       : 'Wrapper CSS classes',
+		description : 'Configure extra CSS classes to the wrapper `alchemy-widget` element', 
 		array: true,
 		widget_config_editable: true,
 	});
 
 	// Classnames for the inserted element (if any)
 	this.schema.addField('main_class_names', 'String', {
+		title       : 'Main CSS classes',
+		description : 'Configure extra CSS classes for the main inserted element', 
 		array: true,
 	});
 
+	// Add the "save" action
+	let save = this.createAction('save', 'Save');
+
+	save.setHandler(function removeAction(widget_el, handle) {
+		return widget_el.save();
+	});
+
+	save.setTester(function saveAction(widget_el, handle) {
+		return widget_el.can_be_saved;
+	});
+
 	// Add the remove action
 	let remove = this.createAction('remove', 'Remove');
 
@@ -179,6 +194,47 @@ Widget.constitute(function prepareSchema() {
 
 	move_right.setIcon('gg-arrow-right');
 
+	// The move-in-left action
+	let move_in_left = this.createAction('move-in-left', 'Move in left');
+
+	move_in_left.close_toolbar = true;
+
+	move_in_left.setHandler(function moveLeftAction(widget_el, handle) {
+		// Hawkejs custom element method!
+		let container = handle.previous_container;
+
+		if (container) {
+			container.append(handle);
+		}
+	});
+
+	move_in_left.setTester(function moveLeftTest(widget_el, handle) {
+		return !!handle.previous_container;
+	});
+
+	move_in_left.setIcon('gg-arrow-left');
+
+	// The move-in-right action
+	let move_in_right = this.createAction('move-in-right', 'Move in right');
+
+	move_in_right.close_toolbar = true;
+
+	move_in_right.setHandler(function moveRightAction(widget_el, handle) {
+		// Hawkejs custom element method!
+		let container = handle.next_container;
+
+		if (container) {
+			container.prepend(handle);
+		}
+	});
+
+	move_in_right.setTester(function moveRightTest(widget_el, handle) {
+		console.log('Right test of:', handle)
+		return !!handle.next_container;
+	});
+
+	move_in_right.setIcon('gg-arrow-right');
+
 	let css_class = this.createAction('css-class', 'CSS Class');
 
 	css_class.setHandler(function setCssClass(widget_el, handle) {
@@ -212,11 +268,11 @@ Widget.setStatic(function createSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
-Widget.setStatic(function createAction(name) {
+Widget.setStatic(function createAction(name, title) {
 
-	let action = new Classes.Alchemy.Widget.Action(name);
+	let action = new Classes.Alchemy.Widget.Action(name, title || name.titleize());
 
 	this.actions.set(name, action);
 

package/package.json

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