alchemy-widget 0.1.6 → 0.2.1

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
@@ -183,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;
 		}
 	}
@@ -348,4 +357,96 @@ 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.1
+ */
+Base.setMethod(async function copyConfigToClipboard() {
+
+	let value = this.value;
+	
+	if (!value) {
+		return;
+	}
+
+	value._altype = 'widget';
+	value.type = this.type;
+
+	let dried = JSON.dry(value, null, '\t');
+
+	try {
+		await navigator.clipboard.writeText(dried);
+	} catch (err) {
+		console.error('Failed to copy:', err);
+	}
+
+	localStorage._copied_widget_config = dried;
+});
+
+/**
+ * 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.1
+ */
+Base.setMethod(async function getConfigFromClipboard() {
+
+	let result;
+
+	try {
+		result = await navigator.clipboard.readText();
+	} catch (err) {
+
+		if (!localStorage._copied_widget_config) {
+			return false;
+		} else {
+			result = localStorage._copied_widget_config;
+		}
+	}
+
+	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
  *
@@ -88,6 +79,15 @@ Widget.setAssignedProperty('filter_value');
  */
 Widget.setAttribute('child-class');
 
+/**
+ * A role to give to each child widgets
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Widget.setAttribute('child-role');
+
 /**
  * Is this widget being edited?
  *
@@ -278,13 +278,11 @@ Widget.setMethod(function syncConfig() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  */
 Widget.setMethod(function startEditor() {
 
-	if (!this.instance) {
-		throw new Error('Unable to start the editor: this widget element has no accompanying instance');
-	}
+	this.assertWidgetInstance();
 
 	this.instance.startEditor();
 	this.addEditEventListeners();
@@ -295,19 +293,33 @@ Widget.setMethod(function startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.5
+ * @version  0.2.1
  */
 Widget.setMethod(function stopEditor() {
 
-	if (!this.instance) {
-		throw new Error('Unable to stop the editor: this widget element has no accompanying instance');
-	}
+	this.assertWidgetInstance();
 
 	this.unselectWidget();
 	this.instance.stopEditor();
 	this.removeEditEventListeners();
 });
 
+/**
+ * Make sure there is an instance
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Widget.setMethod(function assertWidgetInstance() {
+
+	if (!this.instance) {
+		console.error('Problem with widget element:', this);
+		throw new Error('Unable to stop the editor: this ' + this.tagName + ' element has no accompanying instance');
+	}
+
+});
+
 /**
  * Mouse click
  *
@@ -363,14 +375,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
@@ -62,21 +62,22 @@ AlchemyWidgets.setAssignedProperty('context_variables', function getContextData(
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  */
 AlchemyWidgets.setProperty(function value() {
 
-	let widgets = this.getWidgetsConfig(),
+	let config = this.instance.config,
+	    widgets = this.getWidgetsConfig(),
 	    result;
+	
+	config = Object.assign({}, config, {widgets});
 
-	if (this.nodeName == 'ALCHEMY-WIDGETS') {
-		result = {widgets};
+	if (this.nodeName == 'AL-WIDGETS') {
+		result = config;
 	} else {
 		result = {
 			type   : this.instance.constructor.type_name,
-			config : {
-				widgets : widgets
-			}
+			config : config,
 		};
 	}
 
@@ -91,7 +92,7 @@ AlchemyWidgets.setProperty(function value() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.2.1
  */
 AlchemyWidgets.setMethod(function applyValue(value) {
 
@@ -119,24 +120,18 @@ AlchemyWidgets.setMethod(function applyValue(value) {
 		if (config.class_names) {
 			Hawkejs.addClasses(this, config.class_names);
 		}
+	} else {
+		config = this.instance?.config || {};
 	}
 
 	if (!this.instance) {
 		return;
 	}
 
+	config.widgets = widgets;
+
 	this.instance.config = config;
 	this.instance.initContainer();
-
-	if (!widgets || !widgets.length) {
-		return;
-	}
-
-	let widget;
-
-	for (widget of widgets) {
-		this.addWidget(widget.type, widget.config);
-	}
 });
 
 /**
@@ -186,7 +181,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 +235,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 +244,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 +265,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.6
+ * @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');
@@ -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();
 	});
 });