alchemy-form 0.1.12 → 0.2.1

package/element/10_dataprovider.js

@@ -0,0 +1,282 @@
+/**
+ * The base form element with dataproviders
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+const WithDataprovider = Function.inherits('Alchemy.Element.Form.Base', 'WithDataprovider');
+
+/**
+ * This is a static class (so it won't be registered)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+WithDataprovider.makeAbstractClass();
+
+/**
+ * The method to use for src requests
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+WithDataprovider.setAttribute('method');
+
+/**
+ * The page attribute
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+WithDataprovider.setAttribute('page', {number: true});
+
+/**
+ * The page-size attribute
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+WithDataprovider.setAttribute('page-size', {number: true});
+
+/**
+ * Keep track of the loadRemote calls
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+WithDataprovider.setProperty('load_remote_counter', 0);
+
+/**
+ * The dataprovider is an instance of something that will load
+ * the remote data for this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+WithDataprovider.setAssignedProperty('dataprovider');
+
+/**
+ * The records property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+WithDataprovider.setAssignedProperty('recordsource', null, function onRecordsource(value) {
+	this.setRecordsource(value);
+	return value;
+});
+
+/**
+ * Look for a new src value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+WithDataprovider.enforceProperty(function src(new_value, old_value) {
+
+	if (new_value == old_value) {
+		return new_value;
+	}
+
+	this.setAttributeSilent('src', new_value);
+
+	return new_value;
+});
+
+/**
+ * Can we fetch remote data?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+WithDataprovider.setProperty(function can_fetch_remote_data() {
+	return !!(this.src || this.dataprovider);
+});
+
+/**
+ * Observe SRC attribute
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+WithDataprovider.addObservedAttribute('src', function onSource(src) {
+	this.src = src;
+});
+
+/**
+ * The method to construct the config object used for fetching data
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+WithDataprovider.setAbstractMethod('getRemoteFetchConfig');
+
+/**
+ * Apply the fetched data to this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+WithDataprovider.setAbstractMethod('applyFetchedData');
+
+/**
+ * Set the recordsource
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @param    {*}   config
+ */
+WithDataprovider.setMethod(function setRecordsource(config) {
+
+	let url;
+
+	if (typeof config == 'object') {
+		let route_config = alchemy.routeConfig(config.route);
+
+		if (route_config?.methods && !this.method) {
+			if (route_config.methods.indexOf('post') > -1) {
+				this.method = 'post';
+			} else {
+				this.method = route_config.methods[0];
+			}
+		}
+
+		url = alchemy.routeUrl(config.route, config.parameters);
+	} else {
+		url = config;
+	}
+
+	if (url == '#') {
+		let current_url = this.getCurrentUrl();
+
+		if (current_url) {
+			url = ''+current_url;
+		}
+	}
+
+	this.src = url;
+
+	this.loadRemoteData();
+});
+
+/**
+ * Get the wanted page
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @return   {Number}
+ */
+WithDataprovider.setMethod(function getWantedPage() {
+
+	let page = this.page;
+
+	if (page) {
+		return page;
+	}
+
+	return 1;
+});
+
+/**
+ * Load the remote data and apply it
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @param    {Object}   fetch_config
+ */
+WithDataprovider.setMethod(function loadRemoteData(fetch_config) {
+
+	let pledge = new Classes.Pledge();
+
+	let config = this.getRemoteFetchConfig();
+
+	if (fetch_config) {
+		Object.assign(config, fetch_config);
+	}
+
+	if (!config) {
+		pledge.resolve(false);
+		return pledge;
+	}
+
+	let load_remote_id = ++this.load_remote_counter;
+
+	this.delayAssemble(async () => {
+
+		if (load_remote_id != this.load_remote_counter) {
+			pledge.resolve(false);
+			return;
+		}
+
+		let result,
+		    error;
+
+		try {
+			result = await this.fetchRemoteData(config);
+		} catch (err) {
+			error = err;
+		}
+
+		if (load_remote_id != this.load_remote_counter) {
+			pledge.resolve(false);
+			return;
+		}
+
+		this.applyFetchedData(error, result, config);
+
+		pledge.resolve(true);
+	});
+
+	return pledge;
+});
+
+/**
+ * Actually fetch the remote data
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @param    {Object}   config
+ *
+ * @return   {Pledge}
+ */
+WithDataprovider.setMethod(function fetchRemoteData(config) {
+
+	let pledge;
+
+	if (this.dataprovider) {
+		pledge = Pledge.cast(this.dataprovider.loadData(config, this));
+	} else {
+
+		let method = (this.method || 'get').toLowerCase();
+
+		let fetch_options = {
+			href     : this.src,
+			[method] : config,
+		};
+
+		pledge = this.hawkejs_helpers.Alchemy.getResource(fetch_options);
+	}
+
+	return pledge;
+});

package/element/15_alchemy_field_entry.js

@@ -1,15 +1,13 @@
 var VALUE = Symbol('value');
 
 /**
- * The alchemy-field-entry element
+ * The al-field-entry element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-var FieldEntry = Function.inherits('Alchemy.Element.Form.FieldCustom', function FieldEntry() {
-	FieldEntry.super.call(this);
-});
+const FieldEntry = Function.inherits('Alchemy.Element.Form.FieldCustom', 'FieldEntry');
 
 /**
  * Don't register this as a custom element,
@@ -17,9 +15,9 @@ var FieldEntry = Function.inherits('Alchemy.Element.Form.FieldCustom', function
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-FieldEntry.setStatic('is_abstract_class', true, false);
+FieldEntry.makeAbstractClass();
 
 /**
  * Get the live value
@@ -55,16 +53,16 @@ FieldEntry.setProperty(function value() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 FieldEntry.setProperty(function value_element() {
 
 	let input;
 
-	if (this.is_array && this.tagName != 'ALCHEMY-FIELD-ARRAY' && this.tagName != 'ALCHEMY-FIELD-ARRAY-ENTRY') {
-		input = this.querySelector('alchemy-field-array');
+	if (this.is_array && this.tagName != 'AL-FIELD-ARRAY' && this.tagName != 'AL-FIELD-ARRAY-ENTRY') {
+		input = this.querySelector('al-field-array');
 	} else {
-		input = this.querySelector('alchemy-field-schema, .alchemy-field-value');
+		input = this.querySelector('al-field-schema, .alchemy-field-value');
 	}
 
 	return input;

package/element/20_query_builder_base.js

@@ -13,18 +13,9 @@ const QueryBuilderBase = Function.inherits('Alchemy.Element.Form.Base', 'QueryBu
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.0
  */
-QueryBuilderBase.setStatic('is_abstract_class', true, false);
-
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.6
- * @version  0.1.6
- */
-QueryBuilderBase.setStylesheetFile('form/query_builder');
+QueryBuilderBase.makeAbstractClass();
 
 /**
  * Get the dataprovider
@@ -53,10 +44,10 @@ QueryBuilderBase.enforceProperty(function dataprovider(new_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.0
  */
 QueryBuilderBase.setProperty(function root_query_builder() {
-	return this.queryParents('alchemy-query-builder');
+	return this.queryParents('al-query-builder');
 });
 
 /**

package/element/25_query_builder_data.js

@@ -13,9 +13,9 @@ const QueryBuilderData = Function.inherits('Alchemy.Element.Form.QueryBuilderBas
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.7
- * @version  0.1.7
+ * @version  0.2.0
  */
-QueryBuilderData.setStatic('is_abstract_class', true, false);
+QueryBuilderData.makeAbstractClass();
 
 /**
  * Check a filter

package/element/30_tab_base.js

@@ -0,0 +1,29 @@
+/**
+ * The base class for tab elements
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+const TabBase = Function.inherits('Alchemy.Element.Form.Base', 'TabBase');
+
+/**
+ * Don't register this as a custom element,
+ * but don't let child classes inherit this
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabBase.makeAbstractClass();
+
+/**
+ * Get the context element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabBase.setProperty(function tab_context() {
+	return this.queryUp('al-tab-context');
+});

package/element/40_stateful.js

@@ -0,0 +1,125 @@
+const STATE_COUNT = Symbol('state_count');
+
+/**
+ * The base stateful element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+const Stateful = Function.inherits('Alchemy.Element.Form.Base', 'Stateful');
+
+/**
+ * The current state
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Stateful.setAttribute('state', {default: 'default'});
+
+/**
+ * Add a state listener to all child classes
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Stateful.addObservedAttribute('state', function onChange(state) {
+	this.refresh();
+});
+
+/**
+ * The current state counter
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Stateful.setProperty(STATE_COUNT, 0);
+
+/**
+ * Set the state of the state (for a specific time)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @param    {String}   state_name
+ * @param    {Number}   duration_in_ms
+ * @param    {String}   final_state
+ */
+Stateful.setMethod(function setState(state_name, duration_in_ms, final_state) {
+
+	let old_state = this.state,
+	    state_count = ++this[STATE_COUNT];
+	
+	this.state = state_name;
+
+	if (duration_in_ms > 0 && Blast.isBrowser) {
+
+		if (final_state == null) {
+			final_state = old_state;
+		}
+
+		setTimeout(() => {
+			if (this[STATE_COUNT] != state_count) {
+				return;
+			}
+
+			this.state = final_state;
+		}, duration_in_ms);
+	}
+});
+
+/**
+ * Create a state scheduler function.
+ * This will only call the callback if the state count remains the same
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Stateful.setMethod(function wrapForCurrentState(callback) {
+
+	let count = this[STATE_COUNT];
+
+	return () => {
+
+		if (this[STATE_COUNT] != count) {
+			return false;
+		}
+
+		callback();
+
+		return true;
+	}
+});
+
+/**
+ * Refresh all the children
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Stateful.setMethod(function refresh() {
+
+	let current_state = this.state,
+	    state_parent,
+	    children = this.queryAllNotNested('[state-name]'),
+	    child,
+	    i;
+
+	for (i = 0; i < children.length; i++) {
+		child = children[i];
+
+		state_parent = child.queryParents('[state]');
+
+		if (state_parent != this) {
+			continue;
+		}
+
+		child.active = child.state_name == current_state;
+	}
+});

package/element/al_button.js

@@ -0,0 +1,147 @@
+/**
+ * The al-button element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+const Button = Function.inherits('Alchemy.Element.Form.Stateful', 'Button');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Button.setTemplateFile('form/elements/alchemy_button');
+
+/**
+ * Set the ARIA role of the element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Button.setRole('button');
+
+/**
+ * Make it tabable
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Button.setAttribute('tabindex', {default: 0});
+
+/**
+ * The allowed activatable states
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Button.setAttribute('activatable-states', {type: 'token_list'});
+
+/**
+ * Preconfigured behaviours
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Button.setAttribute('behaviour', {type: 'token_list'});
+
+/**
+ * Action instances
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Button.setAssignedProperty('action_instance');
+
+/**
+ * Emit the activate event
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.1
+ */
+Button.setMethod(function activate() {
+
+	let allowed_states = this.activatable_states;
+
+	if (!allowed_states.length) {
+		allowed_states = ['default', 'ready', 'idle'];
+	} else {
+		allowed_states = allowed_states.values();
+	}
+
+	if (allowed_states.indexOf(this.state) == -1) {
+		return;
+	}
+
+	let event = this.emit('activate');
+
+	if (event.defaultPrevented) {
+		return;
+	}
+
+	if (this.action_instance) {
+		this.action_instance.execute(event);
+	} else if (this.behaviour.contains('submit')) {
+		let form = this.queryUp('al-form, form');
+
+		if (form) {
+			let pledge = form.submit();
+
+			if (Pledge.isThenable(pledge)) {
+				let old_state = this.state;
+				this.setState('busy');
+
+				Pledge.done(pledge, err => {
+
+					let temp_state,
+					    duration;
+
+					if (err) {
+						temp_state = 'error';
+						duration = 2500;
+					} else {
+						temp_state = 'done';
+						duration = 1000;
+					}
+
+					this.setState(temp_state, duration, old_state);
+				});
+			} else {
+				this.setState('busy', 1000);
+			}
+		}
+	}
+});
+
+/**
+ * The element has been added to the dom for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Button.setMethod(function introduced() {
+
+	this.addEventListener('click', e => {
+		this.activate();
+	});
+
+	this.addEventListener('keyup', e => {
+
+		switch (e.key) {
+			case ' ':
+			case 'Enter':
+				this.activate();
+				break;
+		}
+	});
+});

package/element/{code_input.js → al_code_input.js}

@@ -16,15 +16,6 @@ const CodeInput = Function.inherits('Alchemy.Element.Form.Base', 'CodeInput');
  */
 CodeInput.setTemplateFile('form/elements/code_input');
 
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-CodeInput.setStylesheetFile('form/alchemy_code_input');
-
 /**
  * Get/set the value
  *
@@ -82,7 +73,7 @@ CodeInput.setMethod(async function introduced() {
 	editor.session.setUseWrapMode(true);
 	editor.setFontSize(16);
 
-	let parent_field = this.queryParents('alchemy-field');
+	let parent_field = this.queryParents('al-field');
 
 	if (parent_field && parent_field.widget_settings && parent_field.widget_settings.language_mode) {