alchemy-widget 0.1.6 → 0.2.1

package/helper/widgets/00-widget.js

@@ -5,14 +5,18 @@
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @param    {Object}   config
  */
 const Widget = Function.inherits('Alchemy.Base', 'Alchemy.Widget', function Widget(config) {
 
 	// The configuration of this widget
-	this.config = config || {};
+	if (config) {
+		this.config = config;
+	}
+
+	this.originalconfig = this.config;
 
 	// Are we currently editing?
 	this.editing = false;
@@ -72,6 +76,24 @@ Widget.setProperty(function element() {
 	return this.widget = element;
 });
 
+/**
+ * The config object
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @type     {Object}
+ */
+Widget.enforceProperty(function config(new_value) {
+
+	if (!new_value) {
+		new_value = {};
+	}
+
+	return new_value;
+});
+
 /**
  * A reference to the renderer
  *
@@ -96,12 +118,37 @@ Widget.enforceProperty(function hawkejs_renderer(new_value) {
 	return new_value;
 });
 
+/**
+ * Visibility of the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @type     {Boolean}
+ */
+Widget.enforceProperty(function is_hidden(new_value) {
+
+	if (new_value == null) {
+		new_value = this.config.hidden;
+
+		if (new_value == null) {
+			new_value = false;
+		}
+	} else {
+		this.config.hidden = new_value;
+		this.queueVisibilityUpdate();
+	}
+
+	return new_value;
+});
+
 /**
  * Prepare the schema & actions
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.1
  */
 Widget.constitute(function prepareSchema() {
 
@@ -114,7 +161,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,
 	});
@@ -126,6 +173,47 @@ Widget.constitute(function prepareSchema() {
 		array: true,
 	});
 
+	// Should this widget be hidden?
+	this.schema.addField('hidden', 'Boolean', {
+		title       : 'Should this widget be hidden?',
+		description : 'Hidden widgets are only visible during editing', 
+		default     : false,
+	});
+
+	this.schema.addField('language', 'String', {
+		title       : 'Language override',
+		description : 'If the content of this widget is in a different language, set it here', 
+		widget_config_editable : 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');
 
@@ -139,10 +227,40 @@ Widget.constitute(function prepareSchema() {
 
 	save.setIcon('floppy-disk');
 
+	// Add the hide action
+	let hide = this.createAction('hide', 'Hide');
+
+	hide.close_actionbar = true;
+
+	hide.setHandler(function hideAction(widget_el, handle) {
+		widget_el.instance.is_hidden = true;
+	});
+
+	hide.setTester(function hideTester(widget_el, handle) {
+		return !widget_el.instance.is_hidden;
+	});
+
+	hide.setIcon('eye-slash');
+
+	// Add the show action
+	let show = this.createAction('show', 'Show');
+
+	show.close_actionbar = true;
+
+	show.setHandler(function showAction(widget_el, handle) {
+		widget_el.instance.is_hidden = false;
+	});
+
+	show.setTester(function showTester(widget_el, handle) {
+		return widget_el.instance.is_hidden;
+	});
+
+	show.setIcon('eye');
+
 	// 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();
@@ -157,7 +275,7 @@ Widget.constitute(function prepareSchema() {
 	// 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) {
@@ -167,7 +285,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!
@@ -187,7 +305,7 @@ Widget.constitute(function prepareSchema() {
 
 	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!
@@ -202,7 +320,7 @@ Widget.constitute(function prepareSchema() {
 
 		let next = handle.nextElementSibling;
 
-		if (!next || next.tagName == 'ALCHEMY-WIDGET-ADD-AREA') {
+		if (!next || next.tagName == 'AL-WIDGET-ADD-AREA') {
 			return false;
 		}
 
@@ -214,7 +332,7 @@ Widget.constitute(function prepareSchema() {
 	// 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!
@@ -239,7 +357,7 @@ Widget.constitute(function prepareSchema() {
 	// 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!
@@ -421,22 +539,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);
 		}
 	}
@@ -476,17 +601,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;
@@ -524,20 +649,34 @@ Widget.setMethod(function _createPopulatedWidgetElement() {
 	return element;
 });
 
+
+/**
+ * Populate the actual widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Widget.setMethod(function populateWidget() {
+	// Does nothing on its own
+});
+
 /**
  * Populate the contents of the widget
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.1
  */
-Widget.setMethod(function populateWidget() {
+Widget.setMethod(function finalizePopulatedWidget() {
 
-	if (this.config && this.config.wrapper_class_names) {
+	const config = this.config;
+
+	if (config.wrapper_class_names) {
 		let name,
 		    i;
 
-		let class_names = Array.cast(this.config.wrapper_class_names);
+		let class_names = Array.cast(config.wrapper_class_names);
 
 		for (i = 0; i < class_names.length; i++) {
 			name = class_names[i];
@@ -545,6 +684,12 @@ Widget.setMethod(function populateWidget() {
 		}
 	}
 
+	if (config.language) {
+		this.widget.setAttribute('lang', config.language);
+	} else {
+		this.widget.removeAttribute('lang');
+	}
+
 	let child_classes = this.widget.child_class;
 
 	if (child_classes) {
@@ -555,6 +700,68 @@ Widget.setMethod(function populateWidget() {
 			Hawkejs.addClasses(children[i], child_classes);
 		}
 	}
+
+	let child_roles = this.widget.child_role;
+
+	if (child_roles) {
+		let children = this.widget.children,
+		    child,
+		    i;
+		
+		for (i = 0; i < children.length; i++) {
+			child = children[i];
+
+			if (!child.hasAttribute('role')) {
+				child.setAttribute('role', child_roles);
+			}
+		}
+	}
+
+	this.checkVisibility();
+});
+
+/**
+ * Queue a widget element visibility update
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Widget.setMethod(function queueVisibilityUpdate() {
+
+	if (this._visibility_update_queue) {
+		clearTimeout(this._visibility_update_queue);
+	}
+
+	this._visibility_update_queue = setTimeout(() => {
+		this.checkVisibility();
+		this._visibility_update_queue = null;
+	}, 50);
+});
+
+/**
+ * Check the widget element visibility
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Widget.setMethod(function checkVisibility() {
+
+	let should_be_hidden = this.is_hidden;
+
+	if (this.editing) {
+		this.widget.hidden = false;
+	} else {
+		this.widget.hidden = should_be_hidden;
+	}
+
+	if (should_be_hidden) {
+		this.widget.classList.add('aw-hidden');
+	} else {
+		this.widget.classList.remove('aw-hidden');
+	}
+
 });
 
 /**
@@ -562,7 +769,7 @@ Widget.setMethod(function populateWidget() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.1
  */
 Widget.setMethod(async function startEditor() {
 
@@ -582,6 +789,8 @@ Widget.setMethod(async function startEditor() {
 	if (typeof this._startEditor == 'function') {
 		this._startEditor();
 	}
+
+	this.checkVisibility();
 });
 
 /**
@@ -589,7 +798,7 @@ Widget.setMethod(async function startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  */
 Widget.setMethod(function stopEditor() {
 
@@ -603,7 +812,13 @@ Widget.setMethod(function stopEditor() {
 
 	if (typeof this._stopEditor == 'function') {
 		this._stopEditor();
+
+		// Remove the editing class again
+		// (some editors will try to restore the original classes)
+		this.widget.classList.remove('aw-editing');
 	}
+
+	this.checkVisibility();
 });
 
 /**
@@ -611,13 +826,14 @@ Widget.setMethod(function stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.1
  */
 Widget.setMethod(async function rerender() {
 
 	Hawkejs.removeChildren(this.widget);
 
 	await this.populateWidget();
+	await this.finalizePopulatedWidget();
 
 	if (this.editing) {
 		this.startEditor();
@@ -642,7 +858,7 @@ Widget.setMethod(function syncConfig() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.12
+ * @version  0.2.0
  */
 Widget.setMethod(async function showConfig(fields) {
 
@@ -675,6 +891,7 @@ Widget.setMethod(async function showConfig(fields) {
 	let widget_settings = Object.assign({}, this.syncConfig());
 
 	let variables = {
+		title            : this.constructor.title,
 		schema           : this.schema,
 		widget_settings,
 		fields           : fields
@@ -697,7 +914,7 @@ Widget.setMethod(async function showConfig(fields) {
 	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

@@ -46,18 +46,40 @@ Container.setMethod(function initContainer() {
 	this.populateWidget();
 });
 
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @return   {HTMLElement}
+ */
+Container.setMethod(function populateWidget() {
+
+	const widgets = this.config.widgets;
+
+	if (widgets?.length) {
+		let widget;
+
+		for (widget of widgets) {
+			this.widget.addWidget(widget.type, widget.config);
+		}
+	}
+});
+
 /**
  * Create an instance of the HTML element representing this widget
  *
  * @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);
 
@@ -72,14 +94,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);
 	}
 
@@ -100,11 +122,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;
+});