alchemy-form 0.1.2 → 0.1.3

package/element/05_feedback_input.js

@@ -7,9 +7,7 @@ const VALUE = Symbol('value');
  * @since    0.1.0
  * @version  0.1.0
  */
-var FeedbackInput = Function.inherits('Alchemy.Element.Form', function FeedbackInput() {
-	FeedbackInput.super.call(this);
-});
+var FeedbackInput = Function.inherits('Alchemy.Element.Form.Base', 'FeedbackInput');
 
 /**
  * Don't register this as a custom element
@@ -20,6 +18,99 @@ var FeedbackInput = Function.inherits('Alchemy.Element.Form', function FeedbackI
  */
 FeedbackInput.setStatic('is_abstract_class', true, false);
 
+/**
+ * The stylesheet to load for this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+ FeedbackInput.setStylesheetFile('form/alchemy_feedback_input');
+
+/**
+ * The readonly attribute
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FeedbackInput.setAttribute('readonly', {boolean: true});
+
+/**
+ * Reference to the errors element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FeedbackInput.addElementGetter('errors_el', '.errors');
+
+/**
+ * Reference to the success element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FeedbackInput.addElementGetter('success_el', '.success');
+
+/**
+ * Reference to the inputbox element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FeedbackInput.addElementGetter('inputbox_el', '.inputbox');
+
+/**
+ * Reference to the input element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FeedbackInput.addElementGetter('input_el', '.input');
+
+/**
+ * The last validated value
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FeedbackInput.setProperty('last_validated_value', null);
+
+/**
+ * The validation counter
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FeedbackInput.setProperty('validation_counter', 0);
+
+/**
+ * Was this input valid after the last revalidation?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FeedbackInput.setProperty(function is_valid() {
+
+	if (this.classList.contains('error')) {
+		return false;
+	}
+
+	if (this.classList.contains('valid')) {
+		return true;
+	}
+
+	// Default to true
+	return true;
+});
+
 /**
  * The value property
  *
@@ -57,3 +148,171 @@ FeedbackInput.setProperty(function value() {
 
 	this[VALUE] = value;
 });
+
+/**
+ * Remove all errors
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FeedbackInput.setMethod(function removeErrors() {
+	this.classList.remove('valid');
+	this.classList.remove('error');
+	this.inputbox_el.classList.remove('valid');
+	this.inputbox_el.classList.remove('error');
+	Hawkejs.removeChildren(this.errors_el);
+	Hawkejs.removeChildren(this.success_el);
+});
+
+/**
+ * Get a message stirng or a microcopy object
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ *
+ * @return   {<micro-copy>|String}
+ */
+FeedbackInput.setMethod(function convertMessage(message, parameters) {
+
+	if (!message) {
+		return '';
+	}
+
+	let microcopy;
+
+	if (typeof message == 'string') {
+		if (!message.startsWith('microcopy:')) {
+			return message;
+		}
+
+		microcopy = this.createElement('micro-copy');
+		microcopy.key = message.after('microcopy:');
+
+		if (!parameters) {
+			parameters = {};
+		}
+
+		microcopy.parameters = parameters;
+	} else if (typeof message == 'object')  {
+
+		if (message instanceof Classes.Alchemy.Microcopy) {
+			microcopy = message.toElement();
+		} else {
+			microcopy = message;
+		}
+
+		if (parameters) {
+			microcopy.parameters = parameters;
+		} else {
+			parameters = microcopy.parameters;
+		}
+
+		if (!parameters) {
+			microcopy.parameters = parameters = {};
+		}
+	}
+
+	if (!parameters.field) {
+		parameters.field = this.getAttribute('input-name');
+	}
+
+	let friendly = this.dataset.friendly;
+
+	if (!friendly) {
+		let label = this.querySelector('[slot="label"]');
+
+		if (label) {
+			friendly = label.textContent;
+		}
+	}
+	
+	if (friendly) {
+		parameters.field = friendly;
+	}
+
+	return microcopy;
+});
+
+/**
+ * Add an error
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FeedbackInput.setMethod(function addError(message, parameters, clear_first, add_friendly) {
+
+	var p = this.createElement('p'),
+	    i = this.createElement('i'),
+	    span = this.createElement('span'),
+	    friendly = this.dataset.friendly,
+	    strong = this.createElement('strong');
+
+	if (typeof parameters == 'boolean') {
+		add_friendly = clear_first;
+		clear_first = parameters;
+		parameters = null;
+	}
+
+	if (clear_first) {
+		this.removeErrors();
+	}
+
+	p.classList.add('errorlabel');
+	i.classList.add('erroricon');
+	span.classList.add('text');
+
+	p.append(i);
+	p.append(span);
+
+	// Try getting a microcopy
+	message = this.convertMessage(message, parameters);
+
+	strong.append(message);
+	span.append(strong);
+
+	this.errors_el.append(p);
+
+	if (this.external_element) {
+		this.external_element.disabled = true;
+	}
+
+	if (this.show_element) {
+		this.show_element.hidden = true;
+	}
+
+	this.classList.add('error');
+	this.inputbox_el.classList.add('error');
+
+	if (this.activate_el) {
+		this.activate_el.classList.remove(this.activate_class);
+	}
+});
+
+/**
+ * Add a success message
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FeedbackInput.setMethod(function addSuccess(message, parameters, clear_first, add_friendly) {
+
+	var p = this.createElement('p');
+
+	message = this.convertMessage(message, parameters);
+
+	p.classList.add('successlabel');
+	p.append(message);
+
+	this.success_el.append(p);
+
+	this.classList.add('valid');
+	this.inputbox_el.classList.add('valid');
+
+	if (this.activate_el) {
+		this.activate_el.classList.add(this.activate_class);
+	}
+});

package/element/alchemy_field.js

@@ -187,6 +187,24 @@ Field.setProperty(function is_array() {
 	return false;
 });
 
+/**
+ * Is this a schema field?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+ Field.setProperty(function contains_schema() {
+
+	let config = this.config;
+
+	if (config) {
+		return config instanceof Classes.Alchemy.Field.Schema;
+	}
+
+	return false;
+});
+
 /**
  * Is this a translatable field?
  *
@@ -247,6 +265,35 @@ Field.setProperty(function field_description() {
 	return result;
 });
 
+/**
+ * Get the path of this field in the schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+Field.setProperty(function field_path_in_schema() {
+	return this.config && this.config.getPath();
+});
+
+/**
+ * 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}
+ */
+ Field.setMethod(function getPathEntryName() {
+
+	if (this.config && this.config.name) {
+		return this.config.name;
+	}
+
+	return '';
+});
+
 /**
  * Get the name of the model this field belongs to
  *
@@ -439,7 +486,6 @@ Field.setProperty(function original_value() {
 	if (form && form.document) {
 		return form.document[this.field_name];
 	}
-
 });
 
 /**
@@ -447,7 +493,7 @@ Field.setProperty(function original_value() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.3
  */
 Field.setProperty(function value_element() {
 
@@ -458,6 +504,8 @@ Field.setProperty(function value_element() {
 		input = this.querySelector('alchemy-field-translatable');
 	} else if (this.is_array) {
 		input = this.querySelector('alchemy-field-array');
+	} else if (this.contains_schema) {
+		input = this.querySelector('alchemy-field-schema');
 	} else {
 		input = this.querySelector('.alchemy-field-value');
 	}
@@ -470,7 +518,7 @@ Field.setProperty(function value_element() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.3
  */
 Field.setProperty(function value() {
 
@@ -478,6 +526,8 @@ Field.setProperty(function value() {
 
 	if (element) {
 		return element.value;
+	} else {
+		return this.original_value;
 	}
 
 }, function setValue(value) {
@@ -593,7 +643,7 @@ Field.setMethod(function removeErrors() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.3
  */
 Field.setMethod(function retained() {
 
@@ -607,15 +657,15 @@ Field.setMethod(function retained() {
 		id += this.field_name.slug();
 
 		this.id = id;
+	}
 
-		let label = this.querySelector('.form-field-info alchemy-label');
+	let label = this.querySelector('.form-field-info alchemy-label');
 
-		if (label && this.value_element) {
-			let v_id = id + '_fv';
+	if (label && this.value_element) {
+		let v_id = this.id + '_fv';
 
-			label.setAttribute('for', v_id);
-			this.value_element.setAttribute('id', v_id);
-		}
+		label.setAttribute('for', v_id);
+		this.value_element.setAttribute('id', v_id);
 	}
 
 });

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,33 @@ 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.3
  */
 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;
+
+			console.log('Other field:', other_field, 'of', this)
+
+			if (other_field && other_field.value && other_field.config && other_field.config.options) {
+				let values = other_field.config.options.values;
+
+				if (values) {
+					schema = values[other_field.value];
+
+					if (schema && schema.schema) {
+						schema = schema.schema;
+					}
+				}
+			}
+		}
+
+		return schema;
 	}
 });
 
@@ -37,12 +58,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 +103,56 @@ FieldSchema.setProperty(function value() {
 	throw new Error('Unable to set value of schema field');
 });
 
-return;
-
-
-
-
-
-
 /**
- * Added to the DOM for the first time
+ * Get the optional field that is supplying the schema
  *
  * @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 getSchemaSupplierField() {
 
-		let entry = e.target.queryUp('alchemy-field-array-entry');
-
-		entry.remove();
-	});
+	if (!this.alchemy_field || !this.alchemy_field.config || !this.alchemy_field.config.options) {
+		console.log('--no config found?')
+		return;
+	}
 
-	let add_entry = this.querySelector('.add-entry');
+	let schema = this.alchemy_field.config.options.schema;
 
-	if (add_entry) {
-		add_entry.addEventListener('click', function onClick(e) {
+	console.log('Schema is...', schema);
 
-			let field_context = that.field_context,
-			    alchemy_field = that.alchemy_field;
+	if (typeof schema == 'string') {
+		let other_field_path = this.resolvePath(schema);
 
-			e.preventDefault();
+		schema = null;
+	
+		let form = this.alchemy_field.alchemy_form;
 
-			let view_files = alchemy_field.view_files;
+		console.log(' -- Got form:', form);
 
-			if (!view_files || !view_files.length) {
-				throw new Error('Unable to add new entry for ' + alchemy_field.field_title);
-			}
+		if (form) {
+			console.log(' -- Looking for path:', other_field_path)
+			return form.findFieldByPath(other_field_path);
+		}
+	}
+});
 
-			let new_entry = that.createElement('alchemy-field-array-entry');
+/**
+ * Added to the DOM for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+FieldSchema.setMethod(function introduced() {
 
-			new_entry.alchemy_field_array = that;
+	let supplier_field = this.getSchemaSupplierField();
 
-			that.entries_element.append(new_entry);
+	if (supplier_field) {
+		supplier_field.addEventListener('change', e => {
+			this.rerender();
 		});
-	}
-
-});
 
+		this.rerender();
+	}
+});

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);
+		}
 	});
-
 });