alchemy-widget 0.1.4 → 0.1.6

package/element/10-container_elements.js

@@ -83,6 +83,17 @@ AlchemyWidgets.setProperty(function value() {
 	return result;
 
 }, function setValue(value) {
+	this.applyValue(value);
+});
+
+/**
+ * Apply the given value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.5
+ * @version  0.1.5
+ */
+AlchemyWidgets.setMethod(function applyValue(value) {
 
 	let widgets,
 	    config;

package/element/20-add_area_element.js

@@ -24,7 +24,7 @@ let AddArea = Function.inherits('Alchemy.Element.Widget.Base', function AlchemyW
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  */
 AddArea.setMethod(function showTypes(event) {
 
@@ -42,7 +42,7 @@ AddArea.setMethod(function showTypes(event) {
 
 	for (let widget of widgets) {
 
-		if (widget.type_name == 'container') {
+		if (!widget.canBeAdded(that.parentElement)) {
 			continue;
 		}
 

package/element/widget_toolbar_element.js

@@ -15,7 +15,7 @@ let Toolbar = Function.inherits('Alchemy.Element.Widget.Base', function AlchemyW
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  *
  * @param    {HTMLElement}   widget
  */
@@ -37,7 +37,24 @@ Toolbar.setMethod(function showWidgetActions(widget) {
 		let button = this.createElement('button');
 		button.classList.add('aw-toolbar-button');
 
-		button.innerHTML = action.getButtonHTML();
+		let content = action.getButtonContent();
+
+		if (!content) {
+			content = action.title;
+		}
+
+		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);
+			}
+		}
+
 		button.setAttribute('title', action.title);
 
 		let is_selected = action.isAlreadySelected(widget);

package/helper/widget_action.js

@@ -141,30 +141,31 @@ Action.setMethod(function test(widget) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  *
- * @return   {String}
+ * @return   {HTMLElement|String}
  */
-Action.setMethod(function getButtonHTML() {
+Action.setMethod(function getButtonContent() {
 
-	let html;
+	let result;
 
 	if (this.icon) {
 
 		let icon = this.icon;
 
 		if (typeof icon == 'string') {
-			html = '<i class="' + icon + '"></i>';
+			result = Blast.Classes.Hawkejs.Hawkejs.createElement('al-ico');
+			result.setIcon(icon);
 		} else if (icon.html) {
-			html = icon.html;
+			result = Blast.Classes.Hawkejs.parseHTML(icon.html);
 		}
 	}
 
-	if (!html) {
-		html = this.name;
+	if (!result) {
+		result = this.name;
 	}
 
-	return html;
+	return result;
 });
 
 /**

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.0
+ * @version  0.1.6
  */
 Widget.constitute(function prepareSchema() {
 
@@ -120,6 +126,19 @@ Widget.constitute(function prepareSchema() {
 		array: true,
 	});
 
+	// Add the "save" action
+	let save = this.createAction('save', 'Save');
+
+	save.setHandler(function removeAction(widget_el, handle) {
+		return widget_el.save();
+	});
+
+	save.setTester(function saveAction(widget_el, handle) {
+		return widget_el.can_be_saved;
+	});
+
+	save.setIcon('floppy-disk');
+
 	// Add the remove action
 	let remove = this.createAction('remove', 'Remove');
 
@@ -130,16 +149,16 @@ Widget.constitute(function prepareSchema() {
 	});
 
 	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.setIcon('gears');
 
 	config.setHandler(function configAction(widget_el, handle) {
 		widget_el.instance.showConfig();
@@ -156,10 +175,15 @@ 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');
 
@@ -172,6 +196,10 @@ 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') {
@@ -181,7 +209,7 @@ Widget.constitute(function prepareSchema() {
 		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');
@@ -198,10 +226,15 @@ 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');
@@ -218,17 +251,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');
 });
 
 /**
@@ -268,6 +307,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
  *
@@ -449,11 +525,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() {
 
@@ -469,6 +545,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);
+		}
+	}
 });
 
 /**
@@ -476,16 +562,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();
 	}
@@ -518,13 +611,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();
@@ -549,7 +642,7 @@ Widget.setMethod(function syncConfig() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.12
  */
 Widget.setMethod(async function showConfig(fields) {
 
@@ -579,9 +672,11 @@ Widget.setMethod(async function showConfig(fields) {
 		}
 	}
 
+	let widget_settings = Object.assign({}, this.syncConfig());
+
 	let variables = {
 		schema           : this.schema,
-		widget_settings  : this.syncConfig(),
+		widget_settings,
 		fields           : fields
 	};
 
@@ -596,6 +691,9 @@ 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();
 

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
  *

package/helper/widgets/header.js

@@ -33,7 +33,7 @@ Header.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  */
 Header.constitute(function addActions() {
 
@@ -43,7 +43,7 @@ Header.constitute(function addActions() {
 	for (let level of levels) {
 		let level_action = this.createAction('make-level-' + level, 'Level ' + level);
 
-		level_action.setHandler(function setLevelAction(widget, toolbar) {
+		level_action.setHandler(function setLevelAction(widget, handle, toolbar) {
 
 			let content = widget.querySelector(query);
 

package/helper/widgets/partial.js

@@ -0,0 +1,215 @@
+/**
+ * The Partial Widget class
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {Object}   data
+ */
+const Partial = Function.inherits('Alchemy.Widget', 'Partial');
+
+/**
+ * Make this an abstract class
+ */
+Partial.makeAbstractClass();
+
+/**
+ * Get the type name
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.setStatic(function createClassTypeName() {
+	return 'partial_' + this.name.underscore();
+});
+
+/**
+ * Set the template to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.setStatic(function setTemplateFile(name) {
+	this.constitute(function _setTemplateFile() {
+		this.template_file = name;
+	});
+});
+
+/**
+ * Prepare the schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.constitute(function prepareSchema() {
+
+	this.schema.addField('view', 'String', {
+		title       : 'Partial View',
+		description : 'The actual HWK template to use for rendering this widget',
+	});
+
+	let contents = this.createSchema();
+
+	contents.addField('name', 'String');
+	contents.addField('content', 'Widgets');
+
+	this.schema.addField('contents', contents, {array: true});
+});
+
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {HTMLElement}   widget
+ */
+Partial.setMethod(async function populateWidget() {
+
+	let view = this.constructor.template_file || this.config.view;
+
+	if (view) {
+
+		let options = {
+			print : false,
+		};
+
+		let variables = {};
+
+		await this.addVariablesForRender(variables);
+
+		if (this.config?.contents?.length) {
+			for (let entry of this.config.contents) {
+				variables[entry.name] = entry.contents;
+			}
+		}
+
+		variables.config = this.config;
+
+		let placeholder = this.hawkejs_renderer.addSubtemplate(view, options, variables);
+
+		// If the widget is already part of the DOM,
+		// it's being edited and we need to manually kickstart the renderer
+		if (Blast.isBrowser && document.body.contains(this.widget)) {
+			await placeholder.getContent();
+		}
+
+		Hawkejs.removeChildren(this.widget);
+
+		this.widget.append(placeholder);
+	}
+
+	populateWidget.super.call(this);
+});
+
+/**
+ * Allow adding variables for rendering the partial
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.
+ * @version  0.1.
+ */
+Partial.setMethod(function addVariablesForRender(variables) {
+	// To be optionally implemented by child widgets
+});
+
+/**
+ * Get all the sub widgets by their name
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @return   {Object}
+ */
+Partial.setMethod(function getSubWidgets() {
+
+	let elements = this.widget.queryAllNotNested('[data-section-name]'),
+	    result = {};
+	
+	for (let element of elements) {
+		result[element.dataset.sectionName] = element;
+	}
+
+	return result;
+});
+
+/**
+ * Start the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.setMethod(function _startEditor() {
+
+	let sub_widgets = this.getSubWidgets();
+
+	for (let name in sub_widgets) {
+		let sub_widget = sub_widgets[name];
+		sub_widget.startEditor();
+	}
+});
+
+/**
+ * Stop the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.setMethod(function _stopEditor() {
+
+	let sub_widgets = this.getSubWidgets();
+
+	for (let name in sub_widgets) {
+		let sub_widget = sub_widgets[name];
+		sub_widget.stopEditor();
+	}
+
+	this.populateWidget();
+});
+
+/**
+ * Update the config values
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @return   {Object}
+ */
+Partial.setMethod(function syncConfig() {
+
+	let sub_widgets = this.getSubWidgets(),
+	    contents = this.config.contents;
+
+	if (!contents) {
+		contents = [];
+		this.config.contents = contents;
+	}
+
+	for (let name in sub_widgets) {
+		let sub_widget = sub_widgets[name];
+		let widget_config = contents.findByPath('name', name);
+
+		if (!widget_config) {
+			widget_config = {
+				name,
+			};
+
+			contents.push(widget_config);
+		}
+
+		widget_config.contents = sub_widget.value;
+	}
+
+	return this.config;
+});

package/helper/widgets/text.js

@@ -28,18 +28,28 @@ Text.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  *
  * @param    {HTMLElement}   widget
  */
 Text.setMethod(function populateWidget() {
 
+	let tag_name;
+
 	populateWidget.super.call(this);
 
-	let paragraph = this.createElement('p');
-	paragraph.textContent = this.config.content || '';
+	if (this.widget.dataset.textElementTag) {
+		tag_name = this.widget.dataset.textElementTag;
+	}
+
+	if (!tag_name) {
+		tag_name = 'p';
+	}
+
+	let text_element = this.createElement(tag_name);
+	text_element.textContent = this.config.content || '';
 
-	this.widget.append(paragraph);
+	this.widget.append(text_element);
 });
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-widget",
 	"description": "The widget plugin for the AlchemyMVC",
-	"version": "0.1.4",
+	"version": "0.1.6",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -15,6 +15,6 @@
 	"repository": "11ways/alchemy-widget",
 	"license": "MIT",
 	"engines": {
-		"node" : ">=12.0.0"
+		"node" : ">=14.0.0"
 	}
 }