alchemy-widget 0.1.6 → 0.2.0

package/helper/widgets/alchemy_field_widget.js

@@ -0,0 +1,112 @@
+/**
+ * The Field Widget class
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.0
+ *
+ * @param    {Object}   data
+ */
+const AlchemyField = Function.inherits('Alchemy.Widget', 'AlchemyField');
+
+/**
+ * Prepare the schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.12
+ */
+AlchemyField.constitute(function prepareSchema() {
+
+	this.setAddChecker(function(widget_element) {
+		return false;
+	});
+});
+
+/**
+ * Find the al-form parent
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.4
+ * @version  0.2.0
+ */
+AlchemyField.enforceProperty(function alchemy_form(new_value) {
+
+	if (!new_value && this.config && this.config.alchemy_form) {
+		new_value = this.config.alchemy_form;
+	}
+
+	if (!new_value) {
+
+		let parent = this.parent_instance;
+		
+		while (parent) {
+
+			new_value = parent.alchemy_form;
+
+			if (new_value) {
+				break;
+			}
+
+			if (parent.element) {
+				new_value = parent.element.querySelector('al-form');
+
+				if (new_value) {
+					break;
+				}
+			}
+			
+			parent = parent.parent_instance;
+		}
+	}
+
+	return new_value;
+});
+
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.2.0
+ */
+AlchemyField.setMethod(function populateWidget() {
+
+	let config = this.config;
+
+	let alchemy_form = this.alchemy_form;
+
+	let field_el = this.createElement('al-field');
+
+	if (alchemy_form) {
+		field_el.alchemy_form = alchemy_form;
+	}
+
+	field_el.field_name = config.field;
+
+	field_el.applyOptions(config);
+
+	this.element.append(field_el);
+});
+
+/**
+ * Get the config of this widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.0
+ *
+ * @return   {Object}
+ */
+AlchemyField.setMethod(function syncConfig() {
+
+	let config = this.config;
+
+	if (!config) {
+		config = this.config = {};
+	}
+
+	return this.config;
+});

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,195 @@
+/**
+ * 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);
+
+	return populateWidget.super.call(this);
+});
+
+/**
+ * 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/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>'});

package/helper/widgets/markdown.js

@@ -54,17 +54,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');
+
+	let element = this.createElement('textarea');
+	this.widget.append(element);
+	element.value = this.config.markdown || '';
 
-	this.widget.append(input);
+	const easyMDE = new EasyMDE({element});
+	this.easy_mde = easyMDE;
 });
 
 /**
@@ -77,6 +81,7 @@ Markdown.setMethod(function _startEditor() {
 Markdown.setMethod(function _stopEditor() {
 
 	Hawkejs.removeChildren(this.widget);
+	this.easy_mde = null;
 
 	this.populateWidget();
 });
@@ -86,17 +91,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;
 });

package/helper/widgets/sourcecode.js

@@ -65,13 +65,13 @@ Sourcecode.setMethod(function populateWidget() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 Sourcecode.setMethod(function _startEditor() {
 
 	Hawkejs.removeChildren(this.widget);
 
-	let input = this.createElement('alchemy-code-input');
+	let input = this.createElement('al-code-input');
 	input.textContent = this.config[this.sourcecode_field] || '';
 
 	this.widget.append(input);
@@ -96,13 +96,13 @@ Sourcecode.setMethod(function _stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @return   {Object}
  */
 Sourcecode.setMethod(function syncConfig() {
 
-	let input = this.widget.querySelector('alchemy-code-input, textarea');
+	let input = this.widget.querySelector('al-code-input, textarea');
 
 	if (input) {
 		this.config[this.sourcecode_field] = input.value;

package/helper/widgets/table_of_contents.js

@@ -16,13 +16,13 @@ const Toc = Function.inherits('Alchemy.Widget', 'TableOfContents');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.1.2
+ * @version  0.2.0
  */
 Toc.setMethod(function populateWidget() {
 
 	populateWidget.super.call(this);
 
-	let toc = this.createElement('table-of-contents');
+	let toc = this.createElement('al-toc');
 
 	if (this.config.parent_selector) {
 		toc.parent_selector = this.config.parent_selector;

package/helper/widgets_helper.js

@@ -0,0 +1,26 @@
+/**
+ * The Widgets helper
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @param    {ViewRender}    view
+ */
+const Widgets = Function.inherits('Alchemy.Helper', 'Widgets');
+
+/**
+ * Function to execute on the client side, when the scene is made
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @param    {Scene}   scene
+ * @param    {Object}  options
+ */
+Widgets.setStatic(function onScene(scene, options) {
+	Blast.setImmediate(() => {
+		Classes.Alchemy.Element.Widget.WidgetToolbar.show();
+	});
+});