alchemy-widget 0.1.5 → 0.2.0

package/element/00-widget_base_element.js

@@ -14,7 +14,16 @@ let Base = Function.inherits('Alchemy.Element', 'Alchemy.Element.Widget', 'Base'
  * @since    0.1.0
  * @version  0.1.0
  */
-Base.setStylesheetFile('alchemy-widgets');
+Base.setStylesheetFile('alchemy_widgets');
+
+/**
+ * Set the custom element prefix
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.2.0
+ */
+Base.setStatic('custom_element_prefix', 'al');
 
 /**
  * Don't register this as a custom element
@@ -22,9 +31,9 @@ Base.setStylesheetFile('alchemy-widgets');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-Base.setStatic('is_abstract_class', true, false);
+Base.makeAbstractClass();
 
 /**
  * The Widget class instance belonging to this element
@@ -114,6 +123,46 @@ Base.setProperty(function can_be_saved() {
 	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
  *
@@ -143,7 +192,7 @@ Base.setMethod(function getSiblingContainer(type) {
 			return next;
 		}
 
-		if (next.tagName != 'ALCHEMY-WIDGET-ADD-AREA') {
+		if (next.tagName != 'AL-WIDGET-ADD-AREA') {
 			return false;
 		}
 	}
@@ -232,13 +281,26 @@ 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() {
 
 	if (this.hasAttribute('editing')) {
 		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();
+			}
+		}
+	});
 });
 
 /**
@@ -246,7 +308,7 @@ Base.setMethod(function introduced() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.1.6
  */
 Base.setMethod(function gatherSaveData() {
 
@@ -263,6 +325,9 @@ Base.setMethod(function gatherSaveData() {
 		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,
 	};
 
@@ -292,4 +357,87 @@ Base.setMethod(async function save() {
 	};
 
 	let result = await alchemy.fetch(config);
+});
+
+/**
+ * Copy this widget's configuration to the clipboard
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Base.setMethod(async function copyConfigToClipboard() {
+
+	let value = this.value;
+	
+	if (!value) {
+		return;
+	}
+
+	value._altype = 'widget';
+	value.type = this.type;
+
+	try {
+		await navigator.clipboard.writeText(JSON.dry(value, null, '\t'));
+	} catch (err) {
+		console.error('Failed to copy:', err);
+	}
+});
+
+/**
+ * Get configuration from the clipboard and return it if it's valid
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Base.setMethod(async function getConfigFromClipboard() {
+
+	let result;
+
+	try {
+		result = await navigator.clipboard.readText();
+	} catch (err) {
+		return false;
+	}
+
+	if (result) {
+		result = result.trim();
+	}
+
+	if (!result || result[0] != '{') {
+		return false;
+	}
+
+	try {
+		result = JSON.undry(result);
+	} catch (err) {
+		return false;
+	}
+
+	if (result._altype != 'widget') {
+		return false;
+	}
+
+	if (result.type != this.type && !this.can_be_removed) {
+		return false;
+	}
+
+	return result;
+});
+
+/**
+ * Read the configuration from the clipboard & apply
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Base.setMethod(async function pasteConfigFromClipboard() {
+
+	let result = await this.getConfigFromClipboard();
+
+	if (result) {
+		this.value = result;
+	}
 });

package/element/05-widget_element.js

@@ -1,5 +1,5 @@
 /**
- * The alchemy-widget element
+ * The al-widget element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
@@ -7,15 +7,6 @@
  */
 let Widget = Function.inherits('Alchemy.Element.Widget.Base', 'Widget');
 
-/**
- * Set the custom element prefix
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-Widget.setStatic('custom_element_prefix', 'alchemy');
-
 /**
  * The type of widget
  *
@@ -52,6 +43,42 @@ Widget.setAssignedProperty('record');
  */
 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?
  *
@@ -89,11 +116,11 @@ Widget.setProperty(function value() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.1.6
  */
 Widget.setMethod(function onRecordAssignment(new_record, old_val) {
 	if (new_record && this.field) {
-		let value = new_record[this.field];
+		let value = this.getValueFromRecord(new_record);
 		this.applyValue(value);
 	}
 });
@@ -103,21 +130,83 @@ Widget.setMethod(function onRecordAssignment(new_record, old_val) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.1.6
  */
 Widget.setMethod(function onFieldAssignment(new_field, old_val) {
 	if (new_field && this.record) {
-		let value = this.record[new_field];
+		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.5
+ * @version  0.1.6
  */
 Widget.setMethod(function applyValue(value) {
 
@@ -157,7 +246,11 @@ Widget.setMethod(function applyValue(value) {
 	}
 
 	this.instance.config = config;
-	this.instance.populateWidget();
+	let promise = this.instance.populateWidget();
+
+	if (promise) {
+		this.delayAssemble(promise);
+	}
 });
 
 /**
@@ -261,14 +354,14 @@ Widget.setMethod(function removeEditEventListeners() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 Widget.setMethod(function getContextButton() {
 
-	let button = document.querySelector('alchemy-widget-context');
+	let button = document.querySelector('al-widget-context');
 
 	if (!button) {
-		button = this.createElement('alchemy-widget-context');
+		button = this.createElement('al-widget-context');
 		document.body.append(button);
 	}
 

package/element/10-container_elements.js

@@ -1,13 +1,13 @@
 /**
- * The alchemy-widgets element is the base "container" for all other widgets.
+ * The al-widgets element is the base "container" for all other widgets.
  * It should never be nested, though
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-let AlchemyWidgets = Function.inherits('Alchemy.Element.Widget', function AlchemyWidgets() {
-	AlchemyWidgets.super.call(this);
+let AlchemyWidgets = Function.inherits('Alchemy.Element.Widget', function AlWidgets() {
+	AlWidgets.super.call(this);
 
 	// Always create this dummy instance just in case?
 	this.instance = new Classes.Alchemy.Widget.Container();
@@ -19,9 +19,9 @@ let AlchemyWidgets = Function.inherits('Alchemy.Element.Widget', function Alchem
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-AlchemyWidgets.setStatic('custom_element_prefix', 'alchemy-widgets');
+AlchemyWidgets.setStatic('custom_element_prefix', 'al-widgets');
 
 /**
  * Don't add the edit event listeners
@@ -69,7 +69,7 @@ AlchemyWidgets.setProperty(function value() {
 	let widgets = this.getWidgetsConfig(),
 	    result;
 
-	if (this.nodeName == 'ALCHEMY-WIDGETS') {
+	if (this.nodeName == 'AL-WIDGETS') {
 		result = {widgets};
 	} else {
 		result = {
@@ -186,7 +186,7 @@ AlchemyWidgets.setMethod(function clear() {
 	for (i = 0; i < children.length; i++) {
 		child = children[i];
 
-		if (child.nodeName == 'ALCHEMY-WIDGET-ADD-AREA') {
+		if (child.nodeName == 'AL-WIDGET-ADD-AREA') {
 			continue;
 		}
 
@@ -240,7 +240,7 @@ AlchemyWidgets.setMethod(function addWidget(type, config) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @param    {Element}   element
  */
@@ -249,7 +249,7 @@ AlchemyWidgets.setMethod(function _appendWidgetElement(element) {
 	let add_area;
 
 	if (this.editing) {
-		add_area = this.querySelector(':scope > alchemy-widget-add-area');
+		add_area = this.querySelector(':scope > al-widget-add-area');
 	}
 
 	if (add_area) {
@@ -270,19 +270,19 @@ AlchemyWidgets.setMethod(function _appendWidgetElement(element) {
 AlchemyWidgets.setMethod(function initEventListeners() {});
 
 /**
- * The alchemy-widgets-column element
+ * The al-widgets-column element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-Function.inherits('Alchemy.Element.Widget.AlchemyWidgets', 'Column');
+Function.inherits('Alchemy.Element.Widget.AlWidgets', 'Column');
 
 /**
- * The alchemy-widgets-row element
+ * The al-widgets-row element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-Function.inherits('Alchemy.Element.Widget.AlchemyWidgets', 'Row');
+Function.inherits('Alchemy.Element.Widget.AlWidgets', 'Row');

package/element/11-alchemy_widgets_list_element.js

@@ -1,11 +1,11 @@
 /**
- * The alchemy-widgets-list element
+ * The al-widgets-list element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-const List = Function.inherits('Alchemy.Element.Widget.AlchemyWidgets', 'List');
+const List = Function.inherits('Alchemy.Element.Widget.AlWidgets', 'List');
 
 /**
  * Get the list element

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.0
+ * @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');
@@ -42,7 +42,7 @@ AddArea.setMethod(function showTypes(event) {
 
 	for (let widget of widgets) {
 
-		if (widget.type_name == 'container') {
+		if (!widget.canBeAdded(that.parentElement)) {
 			continue;
 		}
 
@@ -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();
 	});
 });