alchemy-widget 0.1.6 → 0.2.1

package/helper/widgets/alchemy_form_widget.js

@@ -0,0 +1,183 @@
+/**
+ * The Form Widget class
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.0
+ *
+ * @param    {Object}   data
+ */
+const AlchemyForm = Function.inherits('Alchemy.Widget', 'AlchemyForm');
+
+/**
+ * Prepare the schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.12
+ * @version  0.1.12
+ */
+AlchemyForm.constitute(function prepareSchema() {
+
+	this.setAddChecker(function(widget_element) {
+		return false;
+	});
+});
+
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.2.0
+ */
+AlchemyForm.setMethod(function populateWidget() {
+
+	let config = this.config,
+	    form = this.createElement('al-form');
+
+	let col_el = this.createElement('al-widgets-column'),
+	    col = col_el.instance;
+
+	col.parent_instance = this;
+
+	form.classList.add('al-widgets-container');
+
+	if (config.purpose) {
+		form.purpose = config.purpose;
+	}
+
+	if (config.mode) {
+		form.mode = config.mode;
+	}
+
+	if (this.config && this.config.widgets) {
+		let widgets = this.config.widgets.slice(0),
+		    widget,
+			i;
+		
+		for (i = 0; i < widgets.length; i++) {
+			widget = widgets[i];
+
+			if (widget.type == 'alchemy_field') {
+				widget = Object.assign({}, widget);
+				widget.config = Object.assign({}, widget.config);
+				widget.config.alchemy_form = form;
+				widgets[i] = widget;
+			}
+		}
+
+		col.widget.value = widgets;
+	}
+
+	let record = this.element.getContextVariable('record');
+
+	if (record) {
+		form.document = record;
+	}
+
+	if (config.model) {
+		form.model = config.model;
+	}
+
+	if (config.view_type) {
+		form.view_type = config.view_type;
+	}
+
+	form.append(col.widget);
+
+	this.element.append(form);
+
+	let violations = this.element.getContextVariable('form_violations');
+
+	if (violations) {
+		form.showError(violations);
+	}
+});
+
+/**
+ * Get the nested column
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.2.0
+ */
+AlchemyForm.setMethod(function getNestedColumn(widget) {
+
+	if (!widget) {
+		widget = this.widget;
+	}
+
+	if (!widget) {
+		return;
+	}
+
+	let col = widget.querySelector('al-form > al-widgets-column');
+
+	return col;
+});
+
+/**
+ * Start the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.0
+ */
+AlchemyForm.setMethod(function _startEditor() {
+
+	let col = this.getNestedColumn();
+
+	if (!col) {
+		return;
+	}
+
+	col.startEditor();
+});
+
+/**
+ * Stop the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.0
+ */
+AlchemyForm.setMethod(function _stopEditor() {
+
+	let col = this.getNestedColumn();
+
+	if (!col) {
+		return;
+	}
+
+	col.stopEditor();
+});
+
+/**
+ * Get the config of this widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.0
+ *
+ * @return   {Object}
+ */
+AlchemyForm.setMethod(function syncConfig() {
+
+	let config = this.config;
+
+	if (!config) {
+		config = this.config = {};
+	}
+
+	let col = this.getNestedColumn();
+
+	if (col) {
+		config.widgets = col.instance.syncConfig();
+	} else {
+		config.widgets = [];
+	}
+
+	return this.config;
+});

package/helper/widgets/alchemy_table_widget.js

@@ -0,0 +1,71 @@
+/**
+ * The Table Widget class
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.0
+ *
+ * @param    {Object}   data
+ */
+const AlchemyTable = Function.inherits('Alchemy.Widget', 'AlchemyTable');
+
+/**
+ * Prepare the schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.12
+ * @version  0.1.12
+ */
+AlchemyTable.constitute(function prepareSchema() {
+
+	this.setAddChecker(function(widget_element) {
+		return false;
+	});
+});
+
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.2.0
+ */
+AlchemyTable.setMethod(function populateWidget() {
+
+	let table = this.createElement('al-table'),
+	    config = this.config;
+
+	if (config.id) {
+		table.id = config.id;
+	}
+
+	// Always enable the actions?
+	table.has_actions = true;
+
+	if (config.fieldset) {
+		table.fieldset = config.fieldset;
+	}
+
+	if (config.page_size) {
+		table.page_size = config.page_size;
+	}
+
+	if (config.show_filters) {
+		table.show_filters = config.show_filters;
+	}
+
+	if (config.recordsource) {
+		table.recordsource = config.recordsource;
+	}
+
+	if (config.use_url_pagination) {
+		table.use_url_pagination = config.use_url_pagination;
+	}
+
+	table.purpose = config.purpose || 'view';
+	table.mode = config.mode || 'inline';
+
+	this.element.append(table);
+});

package/helper/widgets/alchemy_tabs_widget.js

@@ -0,0 +1,193 @@
+/**
+ * The Widget Tabs class
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @param    {Object}   data
+ */
+const Tabs = Function.inherits('Alchemy.Widget', 'AlchemyTabs');
+
+/**
+ * Prepare the schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Tabs.constitute(function prepareSchema() {
+
+	let tab_entry = alchemy.createSchema();
+
+	tab_entry.addField('name', 'String', {
+		title                  : 'Tab Name',
+		description            : 'Used as the Tab\'s ID',
+		widget_config_editable : true,
+	});
+
+	tab_entry.addField('title', 'String', {
+		title                  : 'Tab Title',
+		description            : 'Used in the navigation menu',
+		widget_config_editable : true,
+	});
+
+	tab_entry.addField('icon', 'String', {
+		title                  : 'Tab Icon',
+		description            : 'Optional icon to use in the navigation menu',
+		widget_config_editable : true,
+	});
+
+	tab_entry.addField('contents', 'Widgets', {
+		widget_config_editable : false,
+	});
+
+	this.schema.addField('tabs', tab_entry, {
+		widget_config_editable : true,
+		array: true,
+	});
+});
+
+/**
+ * Get the config of this widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @return   {Object}
+ */
+Tabs.setMethod(function syncConfig() {
+
+	const config = this.config || {},
+	      tabs = config.tabs || [],
+		  widgets = this.getSubWidgets();
+	
+	for (let tab_config of tabs) {
+
+		if (!tab_config.name) {
+			continue;
+		}
+
+		let widget = widgets[tab_config.name];
+
+		tab_config.contents = widget?.value;
+	}
+
+	return this.config;
+});
+
+
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @param    {HTMLElement}   widget
+ */
+Tabs.setMethod(function populateWidget() {
+
+	const config = this.config || {},
+	      tabs = config.tabs || [];
+	
+	let wrapper = this.createElement('al-tab-context'),
+	    tablist = this.createElement('al-tab-list');
+	
+	wrapper.append(tablist);
+
+	for (let tab_config of tabs) {
+
+		if (!tab_config?.name) {
+			continue;
+		}
+
+		let tab_button = this.createElement('al-tab-button');
+		tab_button.tab_name = tab_config.name;
+		tab_button.id = 'tab-' + tab_config.name;
+
+		if (tab_config.icon) {
+			let ico = this.createElement('al-icon');
+			ico.icon_name = tab_config.icon;
+			tab_button.append(ico);
+		}
+
+		let span = this.createElement('span');
+		span.textContent = tab_config.title;
+		tab_button.append(span);
+
+		tablist.append(tab_button);
+
+		let tab_content = this.createElement('al-tab-panel');
+		tab_content.tab_name = tab_config.name;
+		wrapper.append(tab_content);
+
+		let widgets = this.createElement('al-widgets');
+		widgets.value = tab_config.contents;
+		widgets.setAttribute('data-tab-name', tab_config.name);
+
+		tab_content.append(widgets);
+	}
+
+	Hawkejs.replaceChildren(this.widget, wrapper);
+});
+
+/**
+ * Get all the sub widgets
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @return   {Object}
+ */
+Tabs.setMethod(function getSubWidgets() {
+
+	let elements = this.widget.queryAllNotNested('al-widgets[data-tab-name]'),
+	    result = {};
+	
+	for (let element of elements) {
+		result[element.dataset.tabName] = element;
+	}
+
+	return result;
+});
+
+/**
+ * Start the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Tabs.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.2.0
+ * @version  0.2.0
+ */
+Tabs.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();
+});

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

@@ -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, handle, toolbar) {
+		level_action.setHandler(function setLevelAction(widget, handle, actionbar) {
 
 			let content = widget.querySelector(query);
 
@@ -54,8 +54,8 @@ Header.constitute(function addActions() {
 			widget.instance.config.level = level;
 			widget.instance.rerender();
 
-			// Rerender the toolbar
-			toolbar.showWidgetActions(widget);
+			// Rerender the actionbar
+			actionbar.showWidgetActions(widget);
 		});
 
 		level_action.setIcon({html: '<span class="aw-header-h">H</span><span class="aw-header-level">' + level + '</span>'});
@@ -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) {
@@ -54,17 +52,21 @@ Markdown.setMethod(function populateWidget() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-Markdown.setMethod(function _startEditor() {
+Markdown.setMethod(async function _startEditor() {
 
 	Hawkejs.removeChildren(this.widget);
 
-	let input = this.createElement('alchemy-code-input');
-	input.textContent = this.config.markdown || '';
-	//area.value = this.config.markdown || '';
+	hawkejs.scene.enableStyle('https://unpkg.com/easymde/dist/easymde.min.css');
+	await hawkejs.require('https://unpkg.com/easymde/dist/easymde.min.js');
 
-	this.widget.append(input);
+	let element = this.createElement('textarea');
+	this.widget.append(element);
+	element.value = this.config.markdown || '';
+
+	const easyMDE = new EasyMDE({element});
+	this.easy_mde = easyMDE;
 });
 
 /**
@@ -77,6 +79,7 @@ Markdown.setMethod(function _startEditor() {
 Markdown.setMethod(function _stopEditor() {
 
 	Hawkejs.removeChildren(this.widget);
+	this.easy_mde = null;
 
 	this.populateWidget();
 });
@@ -86,17 +89,19 @@ Markdown.setMethod(function _stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @return   {Object}
  */
 Markdown.setMethod(function syncConfig() {
 
-	let input = this.widget.querySelector('alchemy-code-input, textarea');
+	let value = '';
 
-	if (input) {
-		this.config.markdown = input.value;
+	if (this.easy_mde) {
+		value = this.easy_mde.value();
 	}
 
+	this.config.markdown = value;
+
 	return this.config;
 });