alchemy-widget 0.1.5 → 0.2.0

package/helper/widgets/00-widget.js

@@ -77,14 +77,20 @@ Widget.setProperty(function element() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  *
  * @type     {Hawkejs.Renderer}
  */
 Widget.enforceProperty(function hawkejs_renderer(new_value) {
 
-	if (!new_value && Blast.isBrowser) {
-		new_value = hawkejs.scene.general_renderer;
+	if (!new_value) {
+		if (this.parent_instance && this.parent_instance.hawkejs_renderer) {
+			new_value = this.parent_instance.hawkejs_renderer;
+		} else if (this.widget && this.widget.hawkejs_renderer) {
+			new_value = this.widget.hawkejs_renderer;
+		} else if (Blast.isBrowser) {
+			new_value = hawkejs.scene.general_renderer;
+		}
 	}
 
 	return new_value;
@@ -95,7 +101,7 @@ Widget.enforceProperty(function hawkejs_renderer(new_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.5
+ * @version  0.2.0
  */
 Widget.constitute(function prepareSchema() {
 
@@ -108,7 +114,7 @@ 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', 
+		description : 'Configure extra CSS classes to the wrapper `al-widget` element', 
 		array: true,
 		widget_config_editable: true,
 	});
@@ -120,6 +126,34 @@ Widget.constitute(function prepareSchema() {
 		array: true,
 	});
 
+	// Add the "copy to clipboard" action
+	let copy = this.createAction('copy', 'Copy to clipboard');
+
+	copy.setHandler(function copyAction(widget_el, handle) {
+		return widget_el.copyConfigToClipboard();
+	});
+
+	copy.setTester(function copyAction(widget_el, handle) {
+		return true;
+	});
+
+	copy.setIcon('clipboard');
+	copy.close_actionbar = true;
+
+	// Add the "paste from clipboard" action
+	let paste = this.createAction('paste', 'Replace from clipboard');
+
+	paste.setHandler(function pasteAction(widget_el, handle) {
+		return widget_el.pasteConfigFromClipboard();
+	});
+
+	paste.setTester(function pasteAction(widget_el, handle) {
+		return widget_el.getConfigFromClipboard();
+	});
+
+	paste.setIcon('paste');
+	paste.close_actionbar = true;
+
 	// Add the "save" action
 	let save = this.createAction('save', 'Save');
 
@@ -131,26 +165,28 @@ Widget.constitute(function prepareSchema() {
 		return widget_el.can_be_saved;
 	});
 
+	save.setIcon('floppy-disk');
+
 	// Add the remove action
 	let remove = this.createAction('remove', 'Remove');
 
-	remove.close_toolbar = true;
+	remove.close_actionbar = true;
 
 	remove.setHandler(function removeAction(widget_el, handle) {
 		handle.remove();
 	});
 
 	remove.setTester(function removeTester(widget_el, handle) {
-		// The root alchemy-widgets element should not be removed
-		return widget_el.tagName !== 'ALCHEMY-WIDGETS';
+		return widget_el.can_be_removed;
 	});
 
-	remove.setIcon('gg-trash');
+	remove.setIcon('trash');
 
 	// Add the config action
 	let config = this.createAction('config', 'Config');
 
-	config.close_toolbar = true;
+	config.close_actionbar = true;
+	config.setIcon('gears');
 
 	config.setHandler(function configAction(widget_el, handle) {
 		widget_el.instance.showConfig();
@@ -159,7 +195,7 @@ Widget.constitute(function prepareSchema() {
 	// The move-left action
 	let move_left = this.createAction('move-left', 'Move left');
 
-	move_left.close_toolbar = true;
+	move_left.close_actionbar = true;
 
 	move_left.setHandler(function moveLeftAction(widget_el, handle) {
 		// Hawkejs custom element method!
@@ -167,14 +203,19 @@ Widget.constitute(function prepareSchema() {
 	});
 
 	move_left.setTester(function moveLeftTest(widget_el, handle) {
+
+		if (!widget_el.can_be_moved) {
+			return false;
+		}
+
 		return !!handle.previousElementSibling;
 	});
 
-	move_left.setIcon('gg-arrow-left');
+	move_left.setIcon('arrow-left');
 
 	let move_right = this.createAction('move-right', 'Move right');
 
-	move_right.close_toolbar = true;
+	move_right.close_actionbar = true;
 
 	move_right.setHandler(function moveRightAction(widget_el, handle) {
 		// Hawkejs custom element method!
@@ -183,21 +224,25 @@ Widget.constitute(function prepareSchema() {
 
 	move_right.setTester(function moveRightTest(widget_el, handle) {
 
+		if (!widget_el.can_be_moved) {
+			return false;
+		}
+
 		let next = handle.nextElementSibling;
 
-		if (!next || next.tagName == 'ALCHEMY-WIDGET-ADD-AREA') {
+		if (!next || next.tagName == 'AL-WIDGET-ADD-AREA') {
 			return false;
 		}
 
 		return true;
 	});
 
-	move_right.setIcon('gg-arrow-right');
+	move_right.setIcon('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.close_actionbar = true;
 
 	move_in_left.setHandler(function moveLeftAction(widget_el, handle) {
 		// Hawkejs custom element method!
@@ -209,15 +254,20 @@ Widget.constitute(function prepareSchema() {
 	});
 
 	move_in_left.setTester(function moveLeftTest(widget_el, handle) {
+
+		if (!widget_el.can_be_moved) {
+			return false;
+		}
+
 		return !!handle.previous_container;
 	});
 
-	move_in_left.setIcon('gg-arrow-left');
+	move_in_left.setIcon('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.close_actionbar = true;
 
 	move_in_right.setHandler(function moveRightAction(widget_el, handle) {
 		// Hawkejs custom element method!
@@ -229,17 +279,23 @@ Widget.constitute(function prepareSchema() {
 	});
 
 	move_in_right.setTester(function moveRightTest(widget_el, handle) {
-		console.log('Right test of:', handle)
+
+		if (!widget_el.can_be_moved) {
+			return false;
+		}
+
 		return !!handle.next_container;
 	});
 
-	move_in_right.setIcon('gg-arrow-right');
+	move_in_right.setIcon('arrow-right');
 
 	let css_class = this.createAction('css-class', 'CSS Class');
 
 	css_class.setHandler(function setCssClass(widget_el, handle) {
 		widget_el.instance.showConfig(['main_class_names']);
 	});
+
+	css_class.setIcon('tags');
 });
 
 /**
@@ -279,6 +335,43 @@ Widget.setStatic(function createAction(name, title) {
 	return action;
 });
 
+/**
+ * Add a check to see if the widget can be added to the current location
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {Boolean|Function}   checker
+ */
+Widget.setStatic(function setAddChecker(checker) {
+	this.add_checker = checker;
+});
+
+/**
+ * Actually perform the add-check
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {Alchemy.Element.Widget.Base}   widget_element
+ */
+Widget.setStatic(function canBeAdded(widget_element) {
+
+	if (this.add_checker != null) {
+		const type = typeof this.add_checker;
+
+		if (type == 'function') {
+			return this.add_checker(widget_element);
+		} else if (type == 'boolean') {
+			return this.add_checker;
+		}
+	}
+
+	return true;
+});
+
 /**
  * unDry an object
  *
@@ -356,22 +449,29 @@ Widget.setMethod(function toDry() {
 });
 
 /**
- * Get an array of toolbar actions
+ * Get an array of actionbar actions
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @return   {Array}
  */
-Widget.setMethod(function getToolbarActions() {
+Widget.setMethod(async function getActionbarActions() {
 
 	let sorted = this.constructor.actions.getSorted(),
 	    result = [],
 	    action;
 
 	for (action of sorted) {
-		if (action.test(this.widget)) {
+
+		let tester = action.test(this.widget);
+
+		if (Pledge.isThenable(tester)) {
+			tester = await tester;
+		}
+
+		if (tester) {
 			result.push(action);
 		}
 	}
@@ -411,17 +511,17 @@ Widget.setMethod(function createElement(tag_name) {
 
 /**
  * Create an instance of the HTML element representing this widget
- * This will probably be just <alchemy-widget>
+ * This will probably be just <al-widget>
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @return   {HTMLElement}
  */
 Widget.setMethod(function _createWidgetElement() {
 
-	let element = this.createElement('alchemy-widget');
+	let element = this.createElement('al-widget');
 
 	// Set the type of the widget to our type
 	element.type = this.constructor.type_name;
@@ -460,11 +560,11 @@ Widget.setMethod(function _createPopulatedWidgetElement() {
 });
 
 /**
- * Dummy populate method
+ * Populate the contents of the widget
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.2
+ * @version  0.1.6
  */
 Widget.setMethod(function populateWidget() {
 
@@ -480,6 +580,16 @@ Widget.setMethod(function populateWidget() {
 		}
 	}
 
+	let child_classes = this.widget.child_class;
+
+	if (child_classes) {
+		let children = this.widget.children,
+		    i;
+		
+		for (i = 0; i < children.length; i++) {
+			Hawkejs.addClasses(children[i], child_classes);
+		}
+	}
 });
 
 /**
@@ -487,16 +597,23 @@ Widget.setMethod(function populateWidget() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  */
-Widget.setMethod(function startEditor() {
+Widget.setMethod(async function startEditor() {
 
 	// Show this is being edited
 	this.editing = true;
 
+	// Make sure the icon font is loaded
+	if (this.hawkejs_renderer?.helpers?.Media) {
+		this.hawkejs_renderer.helpers.Media.loadIconFont();
+	}
+
 	// Add the appropriate class to the current widget wrapper
 	this.widget.classList.add('aw-editing');
 
+	await this.widget.waitForTasks();
+
 	if (typeof this._startEditor == 'function') {
 		this._startEditor();
 	}
@@ -529,13 +646,13 @@ Widget.setMethod(function stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  */
-Widget.setMethod(function rerender() {
+Widget.setMethod(async function rerender() {
 
 	Hawkejs.removeChildren(this.widget);
 
-	this.populateWidget();
+	await this.populateWidget();
 
 	if (this.editing) {
 		this.startEditor();
@@ -560,7 +677,7 @@ Widget.setMethod(function syncConfig() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 Widget.setMethod(async function showConfig(fields) {
 
@@ -590,9 +707,12 @@ Widget.setMethod(async function showConfig(fields) {
 		}
 	}
 
+	let widget_settings = Object.assign({}, this.syncConfig());
+
 	let variables = {
+		title            : this.constructor.title,
 		schema           : this.schema,
-		widget_settings  : this.syncConfig(),
+		widget_settings,
 		fields           : fields
 	};
 
@@ -607,10 +727,13 @@ Widget.setMethod(async function showConfig(fields) {
 	let dialog = dialog_contents.queryParents('he-dialog'),
 	    button = dialog_contents.querySelector('.btn-apply');
 
+	dialog_contents.classList.add('default-form-editor');
+	hawkejs.scene.enableStyle('chimera/chimera');
+
 	button.addEventListener('click', e => {
 		e.preventDefault();
 
-		let form = dialog.querySelector('alchemy-form');
+		let form = dialog.querySelector('al-form');
 
 		Object.assign(this.config, form.value);
 

package/helper/widgets/01-container.js

@@ -11,6 +11,11 @@
  */
 const Container = Function.inherits('Alchemy.Widget', 'Container');
 
+/**
+ * Make this an abstract class
+ */
+Container.makeAbstractClass();
+
 /**
  * Prepare the schema
  *
@@ -46,13 +51,13 @@ Container.setMethod(function initContainer() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @return   {HTMLElement}
  */
 Container.setMethod(function _createWidgetElement() {
 
-	let tag_name = 'alchemy-widgets-' + this.constructor.type_name;
+	let tag_name = 'al-widgets-' + this.constructor.type_name;
 
 	let element = this.createElement(tag_name);
 
@@ -67,14 +72,14 @@ Container.setMethod(function _createWidgetElement() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 Container.setMethod(function _startEditor() {
 
-	let add_area = this.widget.querySelector(':scope > alchemy-widget-add-area');
+	let add_area = this.widget.querySelector(':scope > al-widget-add-area');
 
 	if (!add_area) {
-		add_area = this.createElement('alchemy-widget-add-area');
+		add_area = this.createElement('al-widget-add-area');
 		this.widget.append(add_area);
 	}
 
@@ -95,11 +100,11 @@ Container.setMethod(function _startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 Container.setMethod(function _stopEditor() {
 
-	let add_area = this.widget.querySelector(':scope > alchemy-widget-add-area');
+	let add_area = this.widget.querySelector(':scope > al-widget-add-area');
 
 	if (add_area) {
 		add_area.remove();

package/helper/widgets/05-list.js

@@ -22,7 +22,7 @@ List.setMethod(function initContainer() {
 
 	let ul = this.createElement('ul');
 
-	Classes.Alchemy.Element.Widget.AlchemyWidgets.prototype._appendWidgetElement.call(this.widget, ul);
+	Classes.Alchemy.Element.Widget.AlWidgets.prototype._appendWidgetElement.call(this.widget, ul);
 
 	this.widget.list_element = ul;
 

package/helper/widgets/alchemy_field_widget.js

@@ -0,0 +1,112 @@
+/**
+ * The Field Widget class
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.0
+ *
+ * @param    {Object}   data
+ */
+const AlchemyField = Function.inherits('Alchemy.Widget', 'AlchemyField');
+
+/**
+ * Prepare the schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.12
+ */
+AlchemyField.constitute(function prepareSchema() {
+
+	this.setAddChecker(function(widget_element) {
+		return false;
+	});
+});
+
+/**
+ * Find the al-form parent
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.4
+ * @version  0.2.0
+ */
+AlchemyField.enforceProperty(function alchemy_form(new_value) {
+
+	if (!new_value && this.config && this.config.alchemy_form) {
+		new_value = this.config.alchemy_form;
+	}
+
+	if (!new_value) {
+
+		let parent = this.parent_instance;
+		
+		while (parent) {
+
+			new_value = parent.alchemy_form;
+
+			if (new_value) {
+				break;
+			}
+
+			if (parent.element) {
+				new_value = parent.element.querySelector('al-form');
+
+				if (new_value) {
+					break;
+				}
+			}
+			
+			parent = parent.parent_instance;
+		}
+	}
+
+	return new_value;
+});
+
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.2.0
+ */
+AlchemyField.setMethod(function populateWidget() {
+
+	let config = this.config;
+
+	let alchemy_form = this.alchemy_form;
+
+	let field_el = this.createElement('al-field');
+
+	if (alchemy_form) {
+		field_el.alchemy_form = alchemy_form;
+	}
+
+	field_el.field_name = config.field;
+
+	field_el.applyOptions(config);
+
+	this.element.append(field_el);
+});
+
+/**
+ * Get the config of this widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.0
+ *
+ * @return   {Object}
+ */
+AlchemyField.setMethod(function syncConfig() {
+
+	let config = this.config;
+
+	if (!config) {
+		config = this.config = {};
+	}
+
+	return this.config;
+});