alchemy-widget 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## 0.1.6 (2022-10-12)
+
+* Allow hiding widgets from the add-menu
+* Let actions return their button contents as elements instead of only html
+* Cancel clicks on widgets when editing them
+* Fix getting the `hawkejs_renderer` instance in a widget
+* Use `alchemy-chimera` style for the widget configuration dialog
+* Make renders wait for widgets that have to render their content asynchronously
+* Allow setting the element to use in a Text widget
+* Fix Header-widget level actions
+* Load the icon fonts as soon as the editor starts
+* Make the `rerender` method async
+* Use `child_class` property in the populate method
+* Add filter logic to widgets for getting specific values
+* Add abstract `Partial` widget class, to easily create a new widget with a pre-defined layout
+* Wait for widgets to render their contents before starting editor
+* Add `can_be_removed` property to widget elements
+* Add `can_be_moved` property to widget elements
+* Throw an error if `alchemy-form` is loaded before this plugin
+
+## 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

package/assets/stylesheets/alchemy-widgets.scss

@@ -1,5 +1,12 @@
 @import "alchemy-widget-symbols.scss";
 
+alchemy-widgets,
+alchemy-widgets-row,
+alchemy-widgets-column,
+alchemy-widget {
+	
+}
+
 alchemy-widgets,
 alchemy-widgets-row,
 alchemy-widgets-column {
@@ -11,7 +18,14 @@ alchemy-widgets-column {
 	}
 
 	> * {
-		flex: 10;
+		flex: 10 10 auto;
+	}
+}
+
+alchemy-widget {
+	&.aw-editing {
+		outline: 2px dashed rgba(0, 0, 0, 0.3);
+		outline-offset: -2px;
 	}
 }
 
@@ -35,7 +49,7 @@ alchemy-widgets-column {
 
 	> alchemy-widget-add-area {
 		position: absolute;
-		bottom: 1.5rem;
+		bottom: 0.2rem;
 		left: 50%;
 		transform: translateX(-50%);
 	}
@@ -67,6 +81,18 @@ alchemy-widgets-row {
 	}
 }
 
+alchemy-widget-add-area {
+	background: rgba(255,255,255,0.5);
+	padding: 0.5rem 2rem;
+	border-radius: 2rem;
+	z-index: 99999999;
+
+	.widget-button {
+		min-height: 2.5rem;
+		padding: 1rem;
+	}
+}
+
 alchemy-widgets-row,
 alchemy-widgets > alchemy-widgets-column,
 alchemy-widgets-column > alchemy-widgets-column,
@@ -164,7 +190,10 @@ alchemy-widget {
 		min-height: 2rem;
 
 		&:hover {
-			background: rgba(60, 60, 120, 0.1);
+			background: rgba(60, 60, 120, 0.2);
+
+			// This actually causes some glitches on Firefox :/
+			backdrop-filter: blur(4px);
 		}
 	}
 
@@ -181,6 +210,7 @@ alchemy-widget-toolbar {
 	background-color: white;
 	border-radius: 4px;
 	border: 1px solid #dadada;
+	font-size: 2rem;
 
 	&[hidden] {
 		display: none;
@@ -200,8 +230,8 @@ alchemy-widget-context {
 }
 
 alchemy-widget-toolbar {
-	min-height: 2rem;
-	min-width: 2rem;
+	min-height: 2.5rem;
+	min-width: 2.5rem;
 	display: flex;
 
 	> * {
@@ -209,7 +239,9 @@ alchemy-widget-toolbar {
 	}
 
 	.aw-toolbar-button {
+		font-size: 2.5rem;
 		border-radius: 4px;
+		padding: 0.6rem;
 
 		&:hover {
 			color: rgb(112, 118, 132);
@@ -240,6 +272,22 @@ alchemy-widget[type="header"] {
 	}
 }
 
+alchemy-widget[type="text"] {
+
+	&.aw-editing {
+		&,
+		& > * {
+			min-width: 5rem;
+			min-height: 3rem;
+		}
+
+		& > * {
+			display: inline-block;
+			width: 100%;
+		}
+	}
+}
+
 .aw-toolbar-button {
 
 	.aw-header-h {
@@ -255,4 +303,14 @@ alchemy-widget[type="header"] {
 
 table-of-contents {
 	display: block;
+}
+
+[data-he-template="widget/widget_config"] {
+	alchemy-label {
+		padding: 0.5rem;
+
+		[data-he-name="field-title"] {
+			display: block;
+		}
+	}
 }

package/bootstrap.js

@@ -0,0 +1,10 @@
+if (alchemy.plugins.form) {
+	throw new Error('The alchemy-form plugin has to be loaded AFTER alchemy-widget');
+}
+
+Router.add({
+	name       : 'AlchemyWidgets#save',
+	methods    : 'post',
+	paths      : '/api/alchemywidgets/save',
+	policy     : 'logged_in',
+});

package/controller/alchemy_widgets_controller.js

@@ -0,0 +1,187 @@
+/**
+ * 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.6
+ *
+ * @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_definition;
+
+		if (widget.value_path) {
+			field_definition = model.getField(widget.field + '.' + widget.value_path);
+		} else {
+			field_definition = model.getField(widget.field);
+		}
+
+		if (!field_definition) {
+			continue;
+		}
+
+		// The optional translation key
+		let field_language = widget.field_languages?.[widget.field];
+		let target_field_value = record[widget.field];
+		let target_container;
+		let target_key;
+		let path_for_language;
+
+		// Do incredibly complicated filter stuff
+		if (widget.filter_value) {
+
+			if (!widget.filter_target || !widget.value_path) {
+				continue;
+			}
+
+			// Create the root field if needed
+			if (!target_field_value) {
+				target_field_value = [];
+				record[widget.field] = target_field_value;
+			}
+
+			if (target_field_value && Array.isArray(target_field_value)) {
+				target_key = widget.value_path;
+
+				for (let index = 0; index < target_field_value.length; index++) {
+					let entry = target_field_value[index];
+
+					if (entry[widget.filter_target] == widget.filter_value) {
+						target_container = entry;
+						path_for_language = widget.field + '.' + index + '.' + target_key;
+						break;
+					}
+				}
+
+				if (!target_container) {
+					target_container = {
+						[widget.filter_target] : widget.filter_value,
+						[target_key]           : {},
+					};
+
+					let new_index = target_field_value.push(target_container) - 1;
+					path_for_language = widget.field + '.' + new_index + '.' + target_key;
+				}
+			}
+		} else {
+			target_container = record;
+			target_key = widget.field;
+		}
+
+		if (!field_language && path_for_language) {
+			field_language = widget.field_languages?.[path_for_language];
+		}
+
+		if (!field_language && field_definition.is_translatable) {
+			field_language = this.conduit.active_prefix;
+
+			if (!field_language) {
+				continue;
+			}
+		}
+
+		if (field_language) {
+			if (!target_container) {
+				target_container = record[widget.field] = {};
+			}
+
+
+			if (!target_container[target_key]) {
+				target_container[target_key] = {};
+			}
+
+			target_container = target_container[target_key];
+			target_key = field_language;
+		}
+
+		target_container[target_key] = 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

@@ -83,6 +83,77 @@ 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;
+});
+
+/**
+ * Can this widget be removed?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @type    {Boolean}
+ */
+Base.setProperty(function can_be_removed() {
+
+	// Widgets without a "parent_instance" are mostly
+	// hardcoded in some template (like in a Partial widget)
+	if (!this.instance?.parent_instance) {
+		return false;
+	}
+
+	return true;
+});
+
+/**
+ * Can this widget be moved?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @type    {Boolean}
+ */
+Base.setProperty(function can_be_moved() {
+
+	// Widgets without a "parent_instance" are mostly
+	// hardcoded in some template (like in a Partial widget)
+	if (!this.instance?.parent_instance) {
+		return false;
+	}
+
+	return true;
+});
+
 /**
  * Get a sibling container
  *
@@ -201,7 +272,7 @@ Base.setMethod(function rerender() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  */
 Base.setMethod(function introduced() {
 
@@ -209,4 +280,72 @@ Base.setMethod(function introduced() {
 		this.startEditor();
 	}
 
+	this.addEventListener('click', e => {
+
+		let is_editing = this.instance?.editing;
+
+		if (is_editing) {
+			let anchor = e.target.closest('a');
+
+			if (anchor) {
+				e.preventDefault();
+			}
+		}
+	});
+});
+
+/**
+ * Get the configuration used to save data
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.6
+ */
+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,
+		filter_target   : this.filter_target,
+		filter_value    : this.filter_value,
+		value_path      : this.value_path,
+		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,60 @@ 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');
+
+/**
+ * The path to the value inside the field
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Widget.setAssignedProperty('value_path');
+
+/**
+ * The path to the field to filter on
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Widget.setAssignedProperty('filter_target');
+
+/**
+ * The filter value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Widget.setAssignedProperty('filter_value');
+
+/**
+ * CSS classes to put on the direct children
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Widget.setAttribute('child-class');
+
 /**
  * Is this widget being edited?
  *
@@ -55,7 +109,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 +117,107 @@ 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.6
+ */
+Widget.setMethod(function onRecordAssignment(new_record, old_val) {
+	if (new_record && this.field) {
+		let value = this.getValueFromRecord(new_record);
+		this.applyValue(value);
+	}
+});
+
+/**
+ * Received a new field name
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.6
+ */
+Widget.setMethod(function onFieldAssignment(new_field, old_val) {
+	if (new_field && this.record) {
+		let value = this.getValueFromRecord(this.record);
+		this.applyValue(value);
+	}
+});
+
+/**
+ * Get the values to work with from the given record
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Widget.setMethod(function getValueFromRecord(record) {
+
+	if (!record) {
+		return;
+	}
+
+	let value;
+
+	if (this.field) {
+		value = record[this.field];
+	} else {
+		value = record;
+	}
+
+	if (!value) {
+		return;
+	}
+
+	if (this.filter_value) {
+		if (!Array.isArray(value) || !this.filter_target) {
+			return;
+		}
+
+		let inputs = value;
+		value = [];
+
+		for (let input of inputs) {
+			if (input[this.filter_target] == this.filter_value) {
+				value.push(input);
+			}
+		}
+	}
+
+	if (this.value_path) {
+		if (!Array.isArray(value)) {
+			return;
+		}
+
+		let inputs = value;
+		value = [];
+
+		for (let input of inputs) {
+			if (input[this.value_path]) {
+				value.push(input[this.value_path]);
+			}
+		}
+	}
+
+	if (Array.isArray(value)) {
+		value = value[0];
+	}
+
+	return value;
+});
+
+/**
+ * Apply the given value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.6
+ */
+Widget.setMethod(function applyValue(value) {
 
 	let config,
 	    type;
@@ -100,7 +255,11 @@ Widget.setProperty(function value() {
 	}
 
 	this.instance.config = config;
-	this.instance.populateWidget();
+	let promise = this.instance.populateWidget();
+
+	if (promise) {
+		this.delayAssemble(promise);
+	}
 });
 
 /**
@@ -136,7 +295,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 +303,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();
 });