alchemy-form 0.1.1 → 0.1.4

package/element/alchemy_field_array_entry.js

@@ -18,15 +18,6 @@ var FieldArrayEntry = Function.inherits('Alchemy.Element.Form.FieldEntry', funct
  */
 FieldArrayEntry.setTemplateFile('form/elements/alchemy_field_array_entry');
 
-/**
- * The prefix of this translation
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-FieldArrayEntry.setAttribute('index');
-
 /**
  * Get a reference to the alchemy-field-array parent
  *
@@ -43,6 +34,46 @@ FieldArrayEntry.enforceProperty(function alchemy_field_array(new_value, old_valu
 	return new_value;
 });
 
+/**
+ * Get the index of this entry
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FieldArrayEntry.setProperty(function index() {
+
+	let defined_index = this.getAttribute('index'),
+	    index;
+
+	let container = this.alchemy_field_array;
+
+	if (!container || !container.entries_element) {
+		if (defined_index) {
+			index = +defined_index;
+		}
+	} else {
+		let counter = -1,
+		    child;
+
+		for (let i = 0; i < container.entries_element.children.length; i++) {
+			child = container.entries_element.children[i];
+
+			if (child.tagName == 'ALCHEMY-FIELD-ARRAY-ENTRY') {
+				counter++;
+			}
+
+			if (child == this) {
+				break;
+			}
+		}
+
+		index = counter;
+	}
+
+	return index;
+});
+
 /**
  * Get the original value
  *
@@ -58,3 +89,16 @@ FieldArrayEntry.setProperty(function original_value() {
 		return context_value[this.index];
 	}
 });
+
+/**
+ * Get the name of this entry for use in a record path
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ *
+ * @return   {String}
+ */
+FieldArrayEntry.setMethod(function getPathEntryName() {
+	return '' + this.index;
+});

package/element/alchemy_field_schema.js

@@ -23,12 +23,36 @@ FieldSchema.setTemplateFile('form/elements/alchemy_field_schema');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
 FieldSchema.setProperty(function schema() {
 
 	if (this.alchemy_field && this.alchemy_field.config.options) {
-		return this.alchemy_field.config.options.schema;
+		let schema = this.alchemy_field.config.options.schema;
+
+		if (typeof schema == 'string') {
+			let other_field = this.getSchemaSupplierField();
+			schema = null;
+
+			if (other_field && other_field.value && other_field.config && other_field.config.options) {
+				let values = other_field.config.options.values;
+
+				if (values) {
+
+					if (values instanceof Classes.Alchemy.Map.Backed) {
+						schema = values.get(other_field.value);
+					} else {
+						schema = values[other_field.value];
+					}
+
+					if (schema && schema.schema) {
+						schema = schema.schema;
+					}
+				}
+			}
+		}
+
+		return schema;
 	}
 });
 
@@ -37,12 +61,21 @@ FieldSchema.setProperty(function schema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.3
  */
 FieldSchema.setProperty(function sub_fields() {
 
-	if (this.schema) {
-		return this.schema.getSorted();
+	let schema = this.schema;
+
+	if (schema) {
+
+		if (typeof schema != 'object') {
+			throw new Error('Expected a schema object, but found "' + typeof schema + '" instead');
+		}
+
+		if (schema) {
+			return schema.getSorted();
+		}
 	}
 
 	return [];
@@ -73,56 +106,87 @@ FieldSchema.setProperty(function value() {
 	throw new Error('Unable to set value of schema field');
 });
 
-return;
+/**
+ * Get the optional field that is supplying the schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FieldSchema.setMethod(function getSchemaSupplierField() {
 
+	if (!this.alchemy_field || !this.alchemy_field.config || !this.alchemy_field.config.options) {
+		return;
+	}
 
+	let schema = this.alchemy_field.config.options.schema;
 
+	if (typeof schema == 'string') {
+		let other_field_path = this.resolvePath(schema);
 
+		schema = null;
+	
+		let form = this.alchemy_field.alchemy_form;
 
+		if (form) {
+			return form.findFieldByPath(other_field_path);
+		}
+	}
+});
 
 /**
  * Added to the DOM for the first time
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
+ * @since    0.1.3
+ * @version  0.1.3
  */
-FieldArray.setMethod(function introduced() {
-
-	const that = this;
-
-	this.onEventSelector('click', '.remove', function onClick(e) {
-
-		e.preventDefault();
+FieldSchema.setMethod(function introduced() {
 
-		let entry = e.target.queryUp('alchemy-field-array-entry');
+	let supplier_field = this.getSchemaSupplierField();
 
-		entry.remove();
-	});
+	if (supplier_field) {
+		supplier_field.addEventListener('change', e => {
+			this.rerender();
+		});
 
-	let add_entry = this.querySelector('.add-entry');
+		this.rerender();
+	}
+});
 
-	if (add_entry) {
-		add_entry.addEventListener('click', function onClick(e) {
+/**
+ * Get the original value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.4
+ * @version  0.1.4
+ */
+FieldSchema.setProperty(function original_value() {
 
-			let field_context = that.field_context,
-			    alchemy_field = that.alchemy_field;
+	let field = this.alchemy_field,
+	    path = this.field_path_in_record;
 
-			e.preventDefault();
+	if (field && path) {
+		let form = field.alchemy_form || this.alchemy_form || this.field_context.alchemy_form;
 
-			let view_files = alchemy_field.view_files;
+		if (form) {
+			return Object.path(form.document, path);
+		}
+	}
 
-			if (!view_files || !view_files.length) {
-				throw new Error('Unable to add new entry for ' + alchemy_field.field_title);
-			}
+	let context = this.field_context.alchemy_field_schema,
+	    data;
 
-			let new_entry = that.createElement('alchemy-field-array-entry');
+	if (context) {
+		data = context.original_value;
+	} else {
+		context = this.field_context.alchemy_form || this.alchemy_field.alchemy_form;
+		data = context.document;
+	}
 
-			new_entry.alchemy_field_array = that;
+	path = this.field_path_in_current_schema;
 
-			that.entries_element.append(new_entry);
-		});
-	}
+	let result = Object.path(data, path);
 
+	return result;
 });
-

package/element/alchemy_form.js

@@ -5,18 +5,7 @@
  * @since    0.1.0
  * @version  0.1.0
  */
-var Form = Function.inherits('Alchemy.Element.Form.Base', function Form() {
-	Form.super.call(this);
-});
-
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@develry.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-Form.setStylesheetFile('form/form');
+var Form = Function.inherits('Alchemy.Element.Form.Base', 'Form');
 
 /**
  * The stylesheet to load for this element
@@ -108,7 +97,7 @@ Form.setProperty(function main_error_area() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.2
  */
 Form.setProperty(function value() {
 
@@ -125,6 +114,10 @@ Form.setProperty(function value() {
 	for (i = 0; i < fields.length; i++) {
 		field = fields[i];
 
+		if (field && field.readonly) {
+			continue;
+		}
+
 		result[field.field_name] = field.value;
 	}
 

package/element/alchemy_label.js

@@ -30,7 +30,7 @@ AlchemyLabel.setAttribute('for');
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.3
  */
 AlchemyLabel.setMethod(function introduced() {
 
@@ -46,8 +46,14 @@ AlchemyLabel.setMethod(function introduced() {
 			return;
 		}
 
-		element.click();
+		try {
+			// Trigger a click (for buttons & checkboxes)
+			element.click();
 
+			// Focus on the element (for inputs)
+			element.focus();
+		} catch (err) {
+			console.error('Failed to focus element:', err);
+		}
 	});
-
 });

package/element/alchemy_select.js

@@ -244,12 +244,16 @@ AlchemySelect.setProperty(function loaded_items() {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  *
  * @type     {Number}
  */
 AlchemySelect.setProperty(function loaded_item_count() {
-	return Object.size(this.options.values);
+	if (this.options.values) {
+		return this.options.values.size;
+	} else {
+		return 0;
+	}
 });
 
 /**
@@ -403,6 +407,7 @@ AlchemySelect.setMethod(function introduced() {
 	const that = this;
 
 	this._initAttributes();
+	this.enableFocusWithinEvent();
 
 	if (this.sortable) {
 		this.makeSortable();
@@ -417,6 +422,13 @@ AlchemySelect.setMethod(function introduced() {
 		});
 	}
 
+	this.addEventListener('focus-without', function onFocusOut(e) {
+		that.type_area.value = '';
+		that.refitTypeArea(e);
+		that.applyLocalFilter();
+		that.close();
+	});
+
 	// Give the type area focus when clicking on the wrapper
 	this.wrapper.addEventListener('click', function onClick(e) {
 		that.open();
@@ -430,24 +442,26 @@ AlchemySelect.setMethod(function introduced() {
 
 	this.addEventListener('keydown', function onKeydown(e) {
 
+		console.log('keydown:', e);
+
 		// Only listen for keydowns on the alchemy-select itself
 		if (e.target != that) {
 			return;
 		}
 
-		if (e.key == 'Space' || e.key == 'Enter') {
+		if (e.code == 'Space' || e.code == 'Enter') {
 			that.open(e);
-		} else if (e.key == 'Escape') {
+		} else if (e.code == 'Escape') {
 			that.close(e);
 		}
 	});
 
 	this.dropdown_content.addEventListener('keydown', function onKeydown(e) {
-		if (e.key == 'ArrowUp' || e.key == 'ArrowDown') {
+		if (e.code == 'ArrowUp' || e.code == 'ArrowDown') {
 			that.handleArrowKey(e);
-		} else if (e.key == 'Escape') {
+		} else if (e.code == 'Escape') {
 			that.close(e);
-		} else if (e.key == 'Enter') {
+		} else if (e.code == 'Enter') {
 			that.selectFocusedElement(e);
 		}
 	});
@@ -756,7 +770,7 @@ AlchemySelect.setMethod(function _ensureValueData(value) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
 AlchemySelect.setMethod(function _processPreloadedValues() {
 
@@ -774,9 +788,14 @@ AlchemySelect.setMethod(function _processPreloadedValues() {
 	let item,
 	    key;
 
-	for (key in values) {
+	let enum_values = new Classes.Alchemy.Map.Enum(values),
+	    value;
+
+	for (let key of enum_values.keys()) {
+		value = enum_values.get(key);
+
 		response.available++;
-		item = Object.assign({}, values[key]);
+		item = Object.assign({}, value);
 		item.id = key;
 
 		response.items.push(item);
@@ -905,7 +924,7 @@ AlchemySelect.setMethod(function _loadRemote(config) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
 AlchemySelect.setMethod(function recreateDropdownElements() {
 
@@ -915,8 +934,8 @@ AlchemySelect.setMethod(function recreateDropdownElements() {
 
 	Hawkejs.removeChildren(this.dropdown_content);
 
-	for (key in items) {
-		item = items[key];
+	for (let key of items.keys()) {
+		item = items.get(key);
 		item = this._makeOption(item.id, item);
 		this.addToDropdown(item);
 	}
@@ -1123,6 +1142,7 @@ AlchemySelect.setMethod(function open(event) {
  * @param    {Event}   event   The optional event
  */
 AlchemySelect.setMethod(function close(event) {
+	this.removeAttribute('aria-activedescendant');
 	this.setAttribute('aria-expanded', 'false');
 	this.type_area.setAttribute('aria-expanded', 'false');
 	this.type_area.setAttribute('tabindex', '-1');
@@ -1130,7 +1150,7 @@ AlchemySelect.setMethod(function close(event) {
 	this.classList.remove('open');
 	this.emit('close');
 
-	if (event === true || (event && event.key == 'Escape')) {
+	if (event === true || (event && event.code == 'Escape')) {
 		this.focus();
 		this.result_info.textContent = 'Gesloten';
 	}
@@ -1146,7 +1166,7 @@ AlchemySelect.setMethod(function close(event) {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  *
  * @param    {String}   type    "value" or "option"
  * @param    {Mixed}    value   The actual value of this item
@@ -1177,7 +1197,11 @@ AlchemySelect.setMethod(function _makeValueItem(type, value, data) {
 			this.options.values = {};
 		}
 
-		this.options.values[value] = data;
+		if (this.options.values instanceof Classes.Alchemy.Map.Enum) {
+			this.options.values.set(value, data);
+		} else {
+			this.options.values[value] = data;
+		}
 	}
 
 	// And the associated data
@@ -1196,8 +1220,12 @@ AlchemySelect.setMethod(function _makeValueItem(type, value, data) {
 				return
 			}
 
-			if (that.options.values && that.options.values[value]) {
-				data = that.options.values[value];
+			if (that.options.values) {
+				if (that.options.values instanceof Classes.Alchemy.Map.Enum) {
+					data = that.options.values.get(value);
+				} else if (that.options.values[value]) {
+					data = that.options.values[value];
+				}
 			}
 
 			this.data = data;
@@ -1303,7 +1331,7 @@ AlchemySelect.setMethod(function handleArrowKey(event) {
 		this.open();
 	}
 
-	if (event.key == 'ArrowUp') {
+	if (event.code == 'ArrowUp') {
 		direction = -1;
 	} else {
 		// Down
@@ -1391,18 +1419,27 @@ AlchemySelect.setMethod(function _focusOnOption(option_element) {
 		option_element = this.dropdown_content.children[option_element];
 	}
 
+	this.setAttribute('aria-activedescendant', null);
+
 	for (i = 0; i < this.dropdown_content.children.length; i++) {
 		element = this.dropdown_content.children[i];
 
 		if (element == option_element) {
 			element.classList.add('focused');
-			element.setAttribute('tabindex', 0);
+			//element.setAttribute('tabindex', 0);
 			this._selected_entry = element._entry;
 			selected_index = i;
-			element.focus();
+
+			//element.focus();
+
+			if (!element.id) {
+				element.id = this.hawkejs_view.getId();
+			}
+
+			this.setAttribute('aria-activedescendant', element.id);
 		} else {
 			element.classList.remove('focused');
-			element.setAttribute('tabindex', '-1');
+			//element.setAttribute('tabindex', '-1');
 		}
 	}
 
@@ -1507,7 +1544,7 @@ AlchemySelect.setMethod(function advanceCaret(direction) {
  */
 AlchemySelect.setMethod(function onTypeAreaKeydown(e, is_input) {
 
-	switch (e.key) {
+	switch (e.code) {
 		case 'ArrowUp':
 		case 'ArrowDown':
 			this.handleArrowKey(e);
@@ -1529,6 +1566,10 @@ AlchemySelect.setMethod(function onTypeAreaKeydown(e, is_input) {
 			this.removeItem(this.type_area.previousSibling);
 			break;
 
+		case 'Enter':
+			this.selectFocusedElement(e);
+			break;
+
 		case 'Delete':
 			if (this.type_area.value.length) {
 				return;
@@ -1549,7 +1590,7 @@ AlchemySelect.setMethod(function onTypeAreaKeydown(e, is_input) {
  */
 AlchemySelect.setMethod(function onTypeAreaKeyup(e, is_input) {
 
-	switch (e.key) {
+	switch (e.code) {
 		case 'ArrowUp':
 		case 'ArrowDown':
 		case 'ArrowLeft':
@@ -1818,13 +1859,13 @@ AlchemySelect.setMethod(function measureString(str, element, event) {
 			code === 32 // space
 		);
 
-		if (event.key == 'Delete' || event.key == 'Backspace') {
+		if (event.code == 'Delete' || event.code == 'Backspace') {
 			selection = this._getSelection(this.type_area);
 			if (selection.length) {
 				str = str.substring(0, selection.start) + str.substring(selection.start + selection.length);
-			} else if (event.key == 'Backspace' && selection.start) {
+			} else if (event.code == 'Backspace' && selection.start) {
 				str = str.substring(0, selection.start - 1) + str.substring(selection.start);
-			} else if (event.key == 'Delete' && typeof selection.start !== 'undefined') {
+			} else if (event.code == 'Delete' && typeof selection.start !== 'undefined') {
 				str = str.substring(0, selection.start) + str.substring(selection.start + 1);
 			}
 		} else if (printable) {

package/element/alchemy_table.js

@@ -126,6 +126,15 @@ Table.setAttribute('page-size', {number: true});
  */
 Table.setAttribute('show-filters', {boolean: true});
 
+/**
+ * Keep track of the loadRemote calls
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+Table.setProperty('load_remote_counter', 0);
+
 /**
  * Look for changes to the show-filters attribute
  *
@@ -834,7 +843,7 @@ Table.setMethod(function selectRow(row) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.3
  */
 Table.setMethod(function loadRemoteData() {
 
@@ -859,14 +868,24 @@ Table.setMethod(function loadRemoteData() {
 		body : body
 	};
 
+	let load_remote_id = ++this.load_remote_counter;
+
 	this.delayAssemble(async function() {
 
+		if (load_remote_id != that.load_remote_counter) {
+			return;
+		}
+
 		let result = await that.getResource(options);
 
 		if (!result) {
 			return;
 		}
 
+		if (load_remote_id != that.load_remote_counter) {
+			return;
+		}
+
 		let records = result.records;
 
 		that.records = records;

package/element/code_input.js

@@ -80,5 +80,20 @@ CodeInput.setMethod(async function introduced() {
 	editor.session.setUseWrapMode(true);
 	editor.setFontSize(16);
 
+	let parent_field = this.queryParents('alchemy-field');
+
+	if (parent_field && parent_field.widget_settings && parent_field.widget_settings.language_mode) {
+
+		let mode = parent_field.widget_settings.language_mode;
+
+		// Even though it correctly downloads the language mode file without it,
+		// it still requires the `ace/mode/` prefix
+		if (mode.indexOf('/') == -1) {
+			mode = 'ace/mode/' + mode;
+		}
+
+		editor.session.setMode(mode);
+	}
+
 	this._editor = editor;
 });