alchemy-widget 0.1.6 → 0.2.0

package/element/widget_toolbar_element.js

@@ -1,92 +1,337 @@
 /**
- * The alchemy-widget-toolbar element
+ * The al-widget-toolbar element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
+ * @since    0.2.0
+ * @version  0.2.0
  */
-let Toolbar = Function.inherits('Alchemy.Element.Widget.Base', function AlchemyWidgetToolbar() {
-	AlchemyWidgetToolbar.super.call(this);
-	this.hidden = true;
+let Toolbar = Function.inherits('Alchemy.Element.Form.Stateful', 'Alchemy.Element.Widget', 'WidgetToolbar');
+
+/**
+ * The stylesheet to load for this element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Toolbar.setStylesheetFile('alchemy_widgets');
+
+/**
+ * Set the custom element prefix
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Toolbar.setStatic('custom_element_prefix', 'al');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Toolbar.setTemplateFile('widget/elements/al_widget_toolbar');
+
+/**
+ * The start-edit button
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Toolbar.addElementGetter('button_start', 'al-button.start-edit');
+
+/**
+ * The stop-edit button
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Toolbar.addElementGetter('button_stop', 'al-button.stop-edit');
+
+/**
+ * The stop-and-save button
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Toolbar.addElementGetter('button_stop_and_save', 'al-button.stop-and-save');
+
+/**
+ * The save-all button
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Toolbar.addElementGetter('button_save_all', 'al-button.save-all');
+
+/**
+ * Make sure the toolbar is visible
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Toolbar.setStatic(function show() {
+
+	if (!alchemy.hasPermission('alchemy.widgets.toolbar')) {
+		return;
+	}
+
+	let toolbar = document.querySelector('al-widget-toolbar');
+
+	if (toolbar) {
+		return;
+	}
+
+	toolbar = hawkejs.createElement('al-widget-toolbar');
+
+	hawkejs.scene.bottom_element.append(toolbar);
 });
 
 /**
- * Show the actions for the given widget
+ * Get all the root widgets
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.6
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Toolbar.setMethod(function getAllRootWidgets() {
+
+	let elements = document.body.queryAllNotNested('al-widgets'),
+	    result = [],
+	    i;
+
+	for (i = 0; i < elements.length; i++) {
+		result.push(elements[i]);
+	}
+
+	elements = document.body.queryAllNotNested('al-widget');
+
+	for (i = 0; i < elements.length; i++) {
+
+		if (elements[i].is_root_widget) {
+			result.push(elements[i]);
+		}
+	}
+
+	return result;
+});
+
+/**
+ * Start editing all the widgets
  *
- * @param    {HTMLElement}   widget
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
  */
-Toolbar.setMethod(function showWidgetActions(widget) {
+Toolbar.setMethod(function startEditing() {
 
-	if (!widget || !widget.instance) {
+	let i;
+
+	Blast.editing = true;
+	document.body.classList.add('editing-blocks');
+
+	let elements = this.getAllRootWidgets();
+
+	for (i = 0; i < elements.length; i++) {
+		elements[i].startEditor();
+	}
+
+	this.setState('editing');
+});
+
+/**
+ * Stop editing all the widgets
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Toolbar.setMethod(function stopEditing() {
+
+	if (!Blast.editing) {
 		return;
 	}
 
-	const that = this;
+	let i;
 
-	let actions = widget.instance.getToolbarActions();
+	Blast.editing = false;
+	document.body.classList.remove('editing-blocks');
 
-	// Clear all the old buttons
-	Hawkejs.removeChildren(this);
+	let elements = this.getAllRootWidgets();
 
-	for (let action of actions) {
+	for (i = 0; i < elements.length; i++) {
+		elements[i].stopEditor();
+	}
 
-		let button = this.createElement('button');
-		button.classList.add('aw-toolbar-button');
+	this.setState('ready');
+});
 
-		let content = action.getButtonContent();
+/**
+ * Save all the widgets
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Toolbar.setMethod(async function saveAll() {
 
-		if (!content) {
-			content = action.title;
+	if (this._saving) {
+		try {
+			await this._saving;
+		} catch (err) {
+			// Ignore;
 		}
+	}
 
-		if (typeof content == 'string') {
-			button.innerText = content;
-		} else if (content) {
-			if (Array.isArray(content)) {
-				for (let entry of content) {
-					button.append(entry);
-				}
-			} else {
-				button.append(content);
-			}
+	this._saving = null;
+
+	let elements = this.getAllRootWidgets();
+	let widget_data = [];
+	let pledge;
+
+	for (let element of elements) {
+		let entry = element.gatherSaveData();
+
+		if (entry) {
+			widget_data.push(entry);
 		}
+	}
 
-		button.setAttribute('title', action.title);
+	if (widget_data.length) {
+		let config = {
+			href : alchemy.routeUrl('AlchemyWidgets#save'),
+			post : {
+				widgets: widget_data
+			}
+		};
+
+		pledge = alchemy.fetch(config);
+		this._saving = pledge;
+	}
 
-		let is_selected = action.isAlreadySelected(widget);
+	return pledge;
+});
 
-		if (is_selected) {
-			button.classList.add('aw-button-selected');
+/**
+ * Save all and update the states
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @param    {Boolean}   before_stop
+ */
+Toolbar.setMethod(async function saveAllAndUpdateButtonStates(before_stop) {
+
+	let state = 'saving',
+	    button;
+
+	if (before_stop) {
+		button = this.button_stop_and_save;
+		state += '-before-stop';
+	} else {
+		button = this.button_save_all;
+	}
+
+	this.setState(state);
+	button.setState(state);
+
+	let save_error = null;
+
+	let restore_toolbar_state = this.wrapForCurrentState(() => {
+		if (save_error) {
+			this.setState('error');
+		} else {
+			this.setState('editing')
 		}
+	});
 
-		button.addEventListener('click', function onClick(e) {
+	let restore_button_state = button.wrapForCurrentState(() => {
 
-			e.preventDefault();
+		if (save_error) {
+			button.setState('error');
+		} else {
+			button.setState('saved', 2500, 'ready');
+		}
+	});
+
+	try {
+		await this.saveAll();
+	} catch (err) {
+		save_error = err;
+	}
 
-			action.applyOnWidget(widget, that);
-		});
+	restore_toolbar_state();
+	restore_button_state();
 
-		this.append(button);
+	if (save_error) {
+		return false;
 	}
+
+	return true;
 });
 
 /**
- * Close the toolbar
+ * This element has been added to the DOM for the first time
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
+ * @since    0.2.0
+ * @version  0.2.0
  */
-Toolbar.setMethod(function close() {
-	this.hidden = true;
+Toolbar.setMethod(function introduced() {
 
-	if (this.context_element && this.context_element.active_widget) {
-		this.context_element.active_widget.selectWidget();
-	}
+	this.button_start.addEventListener('activate', async e => {
+		this.startEditing();
+	});
+
+	this.button_stop.addEventListener('activate', async e => {
+		this.stopEditing();
+	});
+
+	this.button_save_all.addEventListener('activate', e => {
+		this.saveAllAndUpdateButtonStates(false);
+	});
 
-	this.context_element = null;
+	this.button_stop_and_save.addEventListener('activate', async e => {
+		let saved = await this.saveAllAndUpdateButtonStates(true);
+
+		if (saved) {
+			this.stopEditing();
+		}
+	});
+
+	hawkejs.scene.on('opening_url', e => {
+		this.stopEditing();
+	});
+});
+
+/**
+ * The element has been added to the dom
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Toolbar.setMethod(function connected() {
+	let html = document.querySelector('html');
+	html.classList.add('with-al-widget-toolbar');
+});
+
+/**
+ * The element has been removed from the dom
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Toolbar.setMethod(function disconnected() {
+	let html = document.querySelector('html');
+	html.classList.remove('with-al-widget-toolbar');
 });

package/helper/widget_action.js

@@ -5,7 +5,7 @@
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @param    {String}   name
  */
@@ -29,8 +29,8 @@ const Action = Function.inherits('Alchemy.Base', 'Alchemy.Widget', function Acti
 	// The icon to use for this action
 	this.icon = null;
 
-	// Close the toolbar after clicking?
-	this.close_toolbar = false;
+	// Close the actionbar after clicking?
+	this.close_actionbar = false;
 });
 
 /**
@@ -90,11 +90,11 @@ Action.setMethod(function setIcon(icon) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @param    {HTMLElement}   widget
  */
-Action.setMethod(function applyOnWidget(widget, toolbar) {
+Action.setMethod(function applyOnWidget(widget, actionbar) {
 
 	if (!this.handler) {
 		throw new Error('Failed to apply action "' + this.name + '" on widget, no handler found');
@@ -103,10 +103,10 @@ Action.setMethod(function applyOnWidget(widget, toolbar) {
 	let instance = widget.instance,
 	    handle = instance.getHandle();
 
-	this.handler(widget, handle, toolbar);
+	this.handler(widget, handle, actionbar);
 
-	if (this.close_toolbar) {
-		toolbar.close();
+	if (this.close_actionbar) {
+		actionbar.close();
 	}
 });
 
@@ -119,7 +119,7 @@ Action.setMethod(function applyOnWidget(widget, toolbar) {
  *
  * @param    {HTMLElement}   widget
  *
- * @return   {Boolean}
+ * @return   {Boolean|Promise}
  */
 Action.setMethod(function test(widget) {
 
@@ -154,7 +154,7 @@ Action.setMethod(function getButtonContent() {
 		let icon = this.icon;
 
 		if (typeof icon == 'string') {
-			result = Blast.Classes.Hawkejs.Hawkejs.createElement('al-ico');
+			result = Blast.Classes.Hawkejs.Hawkejs.createElement('al-icon');
 			result.setIcon(icon);
 		} else if (icon.html) {
 			result = Blast.Classes.Hawkejs.parseHTML(icon.html);

package/helper/widgets/00-widget.js

@@ -101,7 +101,7 @@ Widget.enforceProperty(function hawkejs_renderer(new_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.0
  */
 Widget.constitute(function prepareSchema() {
 
@@ -114,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,
 	});
@@ -126,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');
 
@@ -142,7 +170,7 @@ Widget.constitute(function prepareSchema() {
 	// 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 +185,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 +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!
@@ -187,7 +215,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 +230,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 +242,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 +267,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 +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);
 		}
 	}
@@ -476,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;
@@ -642,7 +677,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 +710,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 +733,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

@@ -51,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);
 
@@ -72,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);
 	}
 
@@ -100,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;