alchemy-form 0.1.11 → 0.2.0

package/element/{alchemy_pager.js → al_pager.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-pager element
+ * The al-pager element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
@@ -12,41 +12,32 @@ const Pager = Function.inherits('Alchemy.Element.Form.Base', 'Pager');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 Pager.setTemplate(`<ul>
 	<li class="afp-first">
 		<a href="#" aria-label="First page">
-			<al-ico type="arrow-left-double"></al-ico>
+			<al-icon icon-name="left-to-line"></al-icon>
 		</a>
 	</li>
 	<li class="afp-prev">
 		<a href="#" aria-label="Previous page">
-			<al-ico type="arrow-left"></al-ico>
+			<al-icon icon-name="left"></al-icon>
 		</a>
 	</li>
 
 	<li class="afp-next">
 		<a href="#" aria-label="Next page">
-			<al-ico type="arrow-right"></al-ico>
+			<al-icon icon-name="right"></al-icon>
 		</a>
 	</li>
 	<li class="afp-last">
 		<a href="#" aria-label="Last page">
-			<al-ico type="arrow-right-double"></al-ico>
+			<al-icon icon-name="right-to-line"></al-icon>
 		</a>
 	</li>
 </ul>`, true);
 
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-Pager.setStylesheetFile('form/alchemy_pager');
-
 /**
  * Pager links
  *
@@ -176,7 +167,7 @@ Pager.setMethod(function getVisiblePagesElements() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @param    {Number}   page
  * @param    {Number}   amount_of_pages
@@ -209,7 +200,8 @@ Pager.setMethod(function showPage(page, amount_of_pages) {
 	    nr,
 	    i;
 
-	if (src && url_param) {
+	// Create let scope
+	if (true) {
 		let first_anchor = this.link_first.children[0],
 		    prev_anchor = this.link_prev.children[0],
 		    next_anchor = this.link_next.children[0],
@@ -217,46 +209,59 @@ Pager.setMethod(function showPage(page, amount_of_pages) {
 		    data,
 		    url;
 
-		data = {};
-		data[url_param] = {page: 1};
-		url = RURL.parse(src);
-		url.param(data);
+		if (url_param) {
+			data = {};
+			data[url_param] = {page: 1};
+			url = RURL.parse(src);
+			url.param(data);
+			first_anchor.setAttribute('href', url);
+		}
 
-		first_anchor.setAttribute('href', url);
+		first_anchor.dataset.page = 1;
 
 		let prev = page - 1;
 
 		if (prev < 1) prev = 1;
 
-		data = {};
-		data[url_param] = {page: prev};
-		url = RURL.parse(src);
-		url.param(data);
+		if (url_param) {
+			data = {};
+			data[url_param] = {page: prev};
+			url = RURL.parse(src);
+			url.param(data);
+			prev_anchor.setAttribute('href', url);
+		}
 
-		prev_anchor.setAttribute('href', url);
+		prev_anchor.dataset.page = prev;
 
 		let next = page + 1;
 
 		if (next > amount_of_pages) {
 			next_anchor.href = '#';
 			next_anchor.disabled = true;
+			next_anchor.removeAttribute('data-page');
 		} else {
 			next_anchor.disabled = false;
 
+			if (url_param) {
+				data = {};
+				data[url_param] = {page: next};
+				url = RURL.parse(src);
+				url.param(data);
+				next_anchor.setAttribute('href', url);
+			}
+
+			next_anchor.dataset.page = next;
+		}
+
+		if (url_param) {
 			data = {};
-			data[url_param] = {page: next};
+			data[url_param] = {page: amount_of_pages};
 			url = RURL.parse(src);
 			url.param(data);
-
-			next_anchor.setAttribute('href', url);
+			last_anchor.setAttribute('href', url);
 		}
 
-		data = {};
-		data[url_param] = {page: amount_of_pages};
-		url = RURL.parse(src);
-		url.param(data);
-
-		last_anchor.setAttribute('href', url);
+		last_anchor.dataset.page = amount_of_pages;
 	}
 
 	for (i = 0; i < page_links.length; i++) {
@@ -316,13 +321,16 @@ Pager.setMethod(function introduced() {
 
 	this.addEventListener('click', function onClick(e) {
 
-		if (e.target.nodeName != 'A') {
-			return;
-		}
-
-		let page_nr_el = e.target.queryParents('[data-page]');
+		let page_nr_el = e.target.queryUp('[data-page]');
 
 		if (!page_nr_el) {
+
+			let anchor = e.target.queryUp('a');
+
+			if (anchor && anchor.href == '#') {
+				e.preventDefault();
+			}
+
 			return;
 		}
 

package/element/{query_builder.js → al_query_builder.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-toggle custom element
+ * The al-toggle custom element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
@@ -14,16 +14,7 @@ const QueryBuilder = Function.inherits('Alchemy.Element.Form.Base', 'QueryBuilde
  * @since    0.1.6
  * @version  0.1.6
  */
-QueryBuilder.setTemplate(`<alchemy-query-builder-group></alchemy-query-builder-group>`, {plain_html: true, render_immediate: true});
-
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.6
- * @version  0.1.6
- */
-QueryBuilder.setStylesheetFile('form/query_builder');
+QueryBuilder.setTemplate(`<al-query-builder-group></al-query-builder-group>`, {plain_html: true, render_immediate: true});
 
 /**
  * The dataprovider used to get the variables
@@ -41,7 +32,7 @@ QueryBuilder.setAssignedProperty('dataprovider');
  * @since    0.1.6
  * @version  0.1.6
  */
-QueryBuilder.addElementGetter('root_group', ':scope > alchemy-query-builder-group');
+QueryBuilder.addElementGetter('root_group', ':scope > al-query-builder-group');
 
 /**
  * Get/set the value

package/element/{query_builder_entry.js → al_query_builder_entry.js}

@@ -127,7 +127,7 @@ QueryBuilderEntry.setProperty(function value() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.1.12
  */
 QueryBuilderEntry.setMethod(async function loadData(config, element) {
 
@@ -149,10 +149,11 @@ QueryBuilderEntry.setMethod(async function loadData(config, element) {
 		items = await this.loadValueTypeData(config);
 	}
 
-	console.log('Got items:', items);
-	items.clean(null);
-	items.clean(undefined);
-	items.clean(false);
+	if (items) {
+		items.clean(null);
+		items.clean(undefined);
+		items.clean(false);
+	}
 
 	return {
 		items: items,
@@ -334,7 +335,7 @@ QueryBuilderEntry.setMethod(async function applyValue(value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.0
  */
 QueryBuilderEntry.setMethod(async function applyValueTypeChanges() {
 
@@ -343,7 +344,7 @@ QueryBuilderEntry.setMethod(async function applyValueTypeChanges() {
 	let type = this.value_type_select.value;
 
 	if (type == 'variable') {
-		let select = this.createElement('alchemy-select');
+		let select = this.createElement('al-select');
 		select.value_item_template = 'form/select/qb_item';
 		select.option_item_template = 'form/select/qb_item';
 

package/element/{query_builder_group.js → al_query_builder_group.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-toggle custom element
+ * The al-query-builder-group custom element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
@@ -171,7 +171,7 @@ QueryBuilderGroup.setProperty(function value() {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.7
+ * @version  0.2.0
  */
 QueryBuilderGroup.setMethod(function applyValue(value) {
 
@@ -198,9 +198,9 @@ QueryBuilderGroup.setMethod(function applyValue(value) {
 
 		for (rule of value.rules) {
 			if (rule.type == 'qb_entry') {
-				element = this.createElement('alchemy-query-builder-entry');
+				element = this.createElement('al-query-builder-entry');
 			} else {
-				element = this.createElement('alchemy-query-builder-group');
+				element = this.createElement('al-query-builder-group');
 			}
 
 			element.assigned_data.value = rule;
@@ -214,7 +214,7 @@ QueryBuilderGroup.setMethod(function applyValue(value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.7
+ * @version  0.2.0
  */
 QueryBuilderGroup.setMethod(function introduced() {
 
@@ -225,14 +225,14 @@ QueryBuilderGroup.setMethod(function introduced() {
 	add_rule.addEventListener('click', e => {
 		e.preventDefault();
 		
-		let new_rule = this.createElement('alchemy-query-builder-entry');
+		let new_rule = this.createElement('al-query-builder-entry');
 		this.rules_list.append(new_rule);
 	});
 
 	add_group.addEventListener('click', e => {
 		e.preventDefault();
 
-		let new_group = this.createElement('alchemy-query-builder-group');
+		let new_group = this.createElement('al-query-builder-group');
 		this.rules_list.append(new_group);
 	});
 

package/element/{query_builder_value.js → al_query_builder_value.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-query-builder-value custom element
+ * The al-query-builder-value custom element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
@@ -186,7 +186,7 @@ QueryBuilderValue.setMethod(async function applySourceTypeChanges() {
 	let type = this.source_type_select.value;
 
 	if (type == 'variable') {
-		let select = this.createElement('alchemy-select');
+		let select = this.createElement('al-select');
 		select.dataprovider = this;
 		select.classList.add('qb-value-variable');
 		this.value_input_wrapper.append(select);

package/element/{query_builder_variable.js → al_query_builder_variable.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-query-builder-value custom element
+ * The al-query-builder-value custom element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.7

package/element/{alchemy_select.js → al_select.js}

@@ -1,20 +1,11 @@
 /**
- * The alchemy-select element
+ * The al-select element
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-const AlchemySelect = Function.inherits('Alchemy.Element.Form.Base', 'Select');
-
-/**
- * The remote url attribute
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-AlchemySelect.setAttribute('src');
+const AlchemySelect = Function.inherits('Alchemy.Element.Form.WithDataprovider', 'Select');
 
 /**
  * The value clear count
@@ -63,15 +54,6 @@ AlchemySelect.setAttribute('option-item-template');
  */
 AlchemySelect.setTemplateFile('form/elements/alchemy_select');
 
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-AlchemySelect.setStylesheetFile('form/alchemy_select');
-
 /**
  * Getter for the value-wrapper div
  *
@@ -135,16 +117,6 @@ AlchemySelect.addElementGetter('result_info', '.result-info');
  */
 AlchemySelect.setAssignedProperty('sortable');
 
-/**
- * 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.1.0
- * @version  0.1.0
- */
-AlchemySelect.setAssignedProperty('dataprovider');
-
 /**
  * The value property
  *
@@ -495,7 +467,7 @@ AlchemySelect.setMethod(function introduced() {
 
 	this.addEventListener('keydown', function onKeydown(e) {
 
-		// Only listen for keydowns on the alchemy-select itself
+		// Only listen for keydowns on the al-select itself
 		if (e.target != that) {
 			return;
 		}
@@ -779,7 +751,7 @@ AlchemySelect.setMethod(function getValueData(value) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @param    {Number}   page
  *
@@ -802,7 +774,7 @@ AlchemySelect.setMethod(function _ensureValueData(value) {
 
 	this.delayAssemble(pledge);
 
-	this._loadRemote({value: value}).done(function gotValueData(err, result) {
+	this.fetchRemoteData({value: value}).done(function gotValueData(err, result) {
 
 		if (err) {
 			return pledge.reject(err);
@@ -928,93 +900,49 @@ AlchemySelect.setMethod(function _processResponseList(list, page) {
 });
 
 /**
- * Load remote content
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.8
- *
- * @param    {Number}   page
+ * Construct the config object used to fetch data
  *
- * @return   {Pledge}
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
  */
-AlchemySelect.setMethod(function loadRemote(page) {
-
-	let pledge = new Classes.Pledge();
+AlchemySelect.setMethod(function getRemoteFetchConfig() {
 
 	// Don't perform request when everything has already been loaded
 	if (this.total_item_count >= this.loaded_item_count) {
-		pledge.resolve(true);
 		return;
 	}
 
-	if (!this.src && !this.dataprovider) {
-		pledge.resolve(false);
-		return pledge;
-	}
-
-	if (page == null) {
-		page = 1;
-	}
-
-	const that = this;
-
-	this.loading_dropdown = true;
-
-	let data = {
+	let config = {
 		search : this.search_value,
-		page   : page
-	};
-
-	this._loadRemote(data).done(gotResponse);
-
-	function gotResponse(err, data) {
-
-		if (err) {
-			that.loading_dropdown = false;
-			pledge.resolve(false);
-			throw err;
-		}
-
-		if (page == null || page == 1) {
-			Hawkejs.removeChildren(that.dropdown_content);
-		}
-
-		that._processResponseData(data, page);
-
-		pledge.resolve(true);
+		page   : this.page || 1,
 	};
 
-	return pledge;
+	return config;
 });
 
+
 /**
- * Load remote content
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
+ * Apply the fetched data
  *
- * @param    {Object)   config
- *
- * @return   {Pledge}
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
  */
-AlchemySelect.setMethod(function _loadRemote(config) {
+AlchemySelect.setMethod(function applyFetchedData(err, result, config) {
 
-	let pledge;
+	if (err) {
+		this.loading_dropdown = false;
+		return;
+	}
 
-	if (this.dataprovider) {
-		pledge = Blast.Classes.Pledge.cast(this.dataprovider.loadData(config, this));
-	} else {
-		let url = this.src;
+	let page = config.page;
 
-		pledge = this.hawkejs_helpers.Alchemy.getResource({
-			href : url,
-			get  : config
-		});
+	if (page == null || page == 1) {
+		Hawkejs.removeChildren(this.dropdown_content);
 	}
 
-	return pledge;
+	this._processResponseData(result, page);
 });
 
 /**
@@ -1091,7 +1019,7 @@ AlchemySelect.setMethod(function setLastSuccessfulLoadedPage(page) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.8
+ * @version  0.2.0
  *
  * @param    {Number}   page
  */
@@ -1131,9 +1059,8 @@ AlchemySelect.setMethod(function loadOptions(page) {
 		return;
 	}
 
-	// If an URL is provided, use that
-	if (this.src || this.dataprovider) {
-		return this.loadRemote(page);
+	if (this.can_fetch_remote_data) {
+		return this.loadRemoteData({page});
 	}
 
 	let field = this.model_field;
@@ -1291,7 +1218,7 @@ AlchemySelect.setMethod(function close(event) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.0
  *
  * @param    {String}   type    "value" or "option"
  * @param    {Mixed}    value   The actual value of this item
@@ -1301,7 +1228,7 @@ AlchemySelect.setMethod(function close(event) {
  */
 AlchemySelect.setMethod(function _makeValueItem(type, value, data) {
 
-	let item = this.createElement('alchemy-select-item');
+	let item = this.createElement('al-select-item');
 
 	// Set the type ("value" or "option")
 	item.type = type;
@@ -1350,7 +1277,7 @@ AlchemySelect.setMethod(function _makeValueItem(type, value, data) {
 		item.prepareRenderVariables = async function() {
 
 			try {
-				await that.loadRemote();
+				await that.loadRemoteData();
 			} catch (err) {
 				return
 			}
@@ -1796,11 +1723,11 @@ AlchemySelect.setMethod(function applyLocalFilter(query) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.8
+ * @version  0.2.0
  */
 AlchemySelect.setMethod('refreshRemote', Fn.throttle(function refreshRemote() {
 	this.loaded_page = 0;
-	this.loadRemote();
+	this.loadRemoteData();
 }, {
 	minimum_wait  : 350,
 	immediate     : false,

package/element/{alchemy_select_item.js → al_select_item.js}

@@ -1,14 +1,11 @@
 /**
- * The alchemy-select-item element
+ * The al-select-item element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-const Item = Function.inherits('Alchemy.Element.Form.Base', function SelectItem() {
-	SelectItem.super.call(this);
-	this.setAttribute('tabindex', '-1');
-});
+const Item = Function.inherits('Alchemy.Element.Form.Base', 'SelectItem');
 
 /**
  * Set the default inner template
@@ -28,6 +25,15 @@ Item.setTemplateFile('form/elements/alchemy_select_item');
  */
 Item.setAttribute('type');
 
+/**
+ * The type of this item: "value" or "option"
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Item.setAttribute('tabindex', {default: -1});
+
 /**
  * Is this item selected?
  *
@@ -65,16 +71,16 @@ Item.setAssignedProperty('value');
 Item.setAssignedProperty('data');
 
 /**
- * The parent alchemy-select item
+ * The parent al-select item
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.2.0
  */
 Item.enforceProperty(function alchemy_select(new_value) {
 
 	if (new_value == null) {
-		new_value = this.closest('alchemy-select');
+		new_value = this.closest('al-select');
 	}
 
 	return new_value;
@@ -85,13 +91,27 @@ Item.enforceProperty(function alchemy_select(new_value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.1.12
  */
 Item.setProperty(function display_title() {
 
-	if (!this.data) {
-		return '';
+	let result;
+
+	if (this.data) {
+		const model = this.data.$model;
+
+		if (model) {
+			result = model.getDisplayTitle(this.data, ['title', 'name']);
+		}
+	}
+
+	if (!result) {
+		if (this.data) {
+			result = this.data.title || this.data.name || this.data.$pk || this.value;
+		} else {
+			result = this.value;
+		}
 	}
 
-	return this.data.title || this.data.name || this.data.username || this.data.$pk || this.value;
+	return result || '';
 });