alchemy-widget 0.1.6 → 0.2.1

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);