alchemy-widget 0.2.0 → 0.2.2

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.2.0
+ * @version  0.2.1
  */
 Widget.constitute(function prepareSchema() {
 
@@ -126,6 +173,19 @@ 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');
 
@@ -167,6 +227,36 @@ 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');
 
@@ -537,7 +627,7 @@ Widget.setMethod(function _createWidgetElement() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.2
  *
  * @return   {HTMLElement}
  */
@@ -551,28 +641,69 @@ Widget.setMethod(function _createPopulatedWidgetElement() {
 
 	this.widget = element;
 
-	// See if it can be populated
-	if (typeof this.populateWidget == 'function') {
-		this.populateWidget(element);
-	}
+	this.loadWidget();
 
 	return element;
 });
 
+/**
+ * Load the widget element: populate it & finalize it
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.2
+ * @version  0.2.2
+ *
+ * @return   {Promise|null}
+ */
+Widget.setMethod(function loadWidget() {
+
+	let populate = this.populateWidget();
+
+	if (Pledge.isThenable(populate)) {
+		let pledge = new Pledge();
+
+		Pledge.done(populate, (err, result) => {
+
+			if (err) {
+				pledge.reject(err);
+			}
+
+			pledge.resolve(this.finalizePopulatedWidget());
+		});
+
+		return pledge;
+	} else {
+		return this.finalizePopulatedWidget();
+	}
+});
+
+/**
+ * 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];
@@ -580,6 +711,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) {
@@ -590,6 +727,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');
+	}
+
 });
 
 /**
@@ -597,7 +796,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() {
 
@@ -617,6 +816,8 @@ Widget.setMethod(async function startEditor() {
 	if (typeof this._startEditor == 'function') {
 		this._startEditor();
 	}
+
+	this.checkVisibility();
 });
 
 /**
@@ -624,7 +825,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() {
 
@@ -638,7 +839,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();
 });
 
 /**
@@ -646,13 +853,13 @@ Widget.setMethod(function stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.2
  */
 Widget.setMethod(async function rerender() {
 
 	Hawkejs.removeChildren(this.widget);
 
-	await this.populateWidget();
+	await this.loadWidget();
 
 	if (this.editing) {
 		this.startEditor();

package/helper/widgets/01-container.js

@@ -38,12 +38,32 @@ Container.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.2
+ */
+Container.setMethod(function initContainer() {
+	return this.loadWidget();
+});
+
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
  *
  * @return   {HTMLElement}
  */
-Container.setMethod(function initContainer() {
-	this.populateWidget();
+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);
+		}
+	}
 });
 
 /**

package/helper/widgets/alchemy_tabs_widget.js

@@ -133,8 +133,6 @@ Tabs.setMethod(function populateWidget() {
 	}
 
 	Hawkejs.replaceChildren(this.widget, wrapper);
-
-	return populateWidget.super.call(this);
 });
 
 /**
@@ -180,7 +178,7 @@ Tabs.setMethod(function _startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.0
+ * @version  0.2.2
  */
 Tabs.setMethod(function _stopEditor() {
 
@@ -191,5 +189,5 @@ Tabs.setMethod(function _stopEditor() {
 		sub_widget.stopEditor();
 	}
 
-	this.populateWidget();
+	this.loadWidget();
 });

package/helper/widgets/hawkejs_template.js

@@ -0,0 +1,60 @@
+/**
+ * The Widget Template class
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @param    {Object}   data
+ */
+const Template = Function.inherits('Alchemy.Widget.Sourcecode', 'HawkejsTemplate');
+
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ *
+ * @param    {HTMLElement}   widget
+ */
+Template.setMethod(async function populateWidget() {
+
+	let input = this.config.sourcecode;
+
+	if (input) {
+		input = input.trim();
+	}
+
+	Hawkejs.removeChildren(this.widget);
+
+	if (input) {
+
+		let hawkejs = this.hawkejs_renderer.hawkejs,
+		    hash = Object.checksum(input),
+		    name = 'interpret_' + hash,
+		    fnc;
+
+		if (hawkejs.templates[name]) {
+			fnc = hawkejs.templates[name];
+		} else {
+			fnc = hawkejs.compile({
+				template_name : name,
+				template      : input
+			});
+		}
+
+		let variables = {};
+		let placeholder = this.hawkejs_renderer.addSubtemplate(fnc, {print: false}, 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();
+		}
+
+		this.widget.append(placeholder);
+	}
+});

package/helper/widgets/header.js

@@ -78,18 +78,18 @@ Header.constitute(function addActions() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @return   {Object}
  */
 Header.setMethod(function syncConfig() {
 
-	let header = this.widget.children[0],
+	let header = this.widget.querySelector('h1, h2, h3, h4, h5'),
 	    content = '',
 	    level = 1;
 
 	if (header) {
-		content = header.innerHTML;
+		content = header.textContent;
 		level = parseInt(header.tagName[1]);
 	}
 
@@ -104,7 +104,7 @@ Header.setMethod(function syncConfig() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
@@ -113,11 +113,9 @@ Header.setMethod(function populateWidget() {
 	let level = this.config.level || 1;
 
 	let header = this.createElement('h' + level);
-	header.innerHTML = this.config.content || 'header level ' + level;
+	header.textContent = this.config.content || 'header level ' + level;
 
 	this.widget.append(header);
-
-	populateWidget.super.call(this);
 });
 
 /**

package/helper/widgets/html.js

@@ -1,3 +1,4 @@
+
 /**
  * The Widget HTML class
  *
@@ -23,19 +24,67 @@ Html.constitute(function prepareSchema() {
 	this.schema.addField('html', 'Html');
 });
 
+/**
+ * Start the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Html.setMethod(async function _startEditor() {
+
+	if (this.ckeditor) {
+		this.ckeditor.destroy();
+	}
+
+	let ckeditor_path = hawkejs.scene.exposed.ckeditor_path;
+
+	if (!ckeditor_path) {
+		return;
+	}
+
+	await hawkejs.require(ckeditor_path);
+
+	const options = {
+		toolbar: hawkejs.scene.exposed.ckeditor_toolbar,
+		updateSourceElementOnDestroy: true,
+		removePlugins: ['Markdown'],
+		simpleUpload: {
+			uploadUrl: alchemy.routeUrl('AlchemyWidgets#uploadImage'),
+			withCredentials: true,
+		},
+	};
+
+	let editor = await InlineEditor.create(this.widget, options);
+
+	this.ckeditor = editor;
+});
+
+/**
+ * Stop the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Html.setMethod(function _stopEditor() {
+	if (this.ckeditor) {
+		this.ckeditor.destroy();
+		this.ckeditor = null;
+	}
+});
+
 /**
  * Populate the widget
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
 Html.setMethod(function populateWidget() {
 	this.widget.innerHTML = this.config.html;
-
-	populateWidget.super.call(this);
 });
 
 /**

package/helper/widgets/markdown.js

@@ -28,14 +28,12 @@ Markdown.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
 Markdown.setMethod(function populateWidget() {
 
-	populateWidget.super.call(this);
-
 	let source = this.config.markdown || '';
 
 	if (!source) {
@@ -76,14 +74,14 @@ Markdown.setMethod(async function _startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.2
  */
 Markdown.setMethod(function _stopEditor() {
 
 	Hawkejs.removeChildren(this.widget);
 	this.easy_mde = null;
 
-	this.populateWidget();
+	return this.loadWidget();
 });
 
 /**

package/helper/widgets/partial.js

@@ -67,7 +67,7 @@ Partial.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
@@ -105,8 +105,6 @@ Partial.setMethod(async function populateWidget() {
 
 		this.widget.append(placeholder);
 	}
-
-	populateWidget.super.call(this);
 });
 
 /**
@@ -163,7 +161,7 @@ Partial.setMethod(function _startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.2
  */
 Partial.setMethod(function _stopEditor() {
 
@@ -174,7 +172,7 @@ Partial.setMethod(function _stopEditor() {
 		sub_widget.stopEditor();
 	}
 
-	this.populateWidget();
+	return this.loadWidget();
 });
 
 /**

package/helper/widgets/sourcecode.js

@@ -37,14 +37,12 @@ Sourcecode.setProperty('sourcecode_field', 'sourcecode');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
 Sourcecode.setMethod(function populateWidget() {
 
-	populateWidget.super.call(this);
-
 	let source = this.config[this.sourcecode_field] || '';
 
 	if (!source) {
@@ -82,13 +80,13 @@ Sourcecode.setMethod(function _startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.2
  */
 Sourcecode.setMethod(function _stopEditor() {
 
 	Hawkejs.removeChildren(this.widget);
 
-	this.populateWidget();
+	return this.loadWidget();
 });
 
 /**