alchemy-form 0.1.2 → 0.1.5

package/element/00_form_base.js

@@ -123,4 +123,174 @@ Base.setProperty(function wrapper_type() {
 		this.setAttribute('wrapper-type', value);
 	}
 
+});
+
+/**
+ * Get the path of this field value in the current (sub)schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.4
+ * @version  0.1.4
+ */
+Base.setProperty(function field_path_in_current_schema() {
+
+	let result = [],
+	    parent = this.getParentField(),
+		name;
+
+	name = this.getPathEntryName();
+
+	if (name) {
+		result.push(name);
+	}
+
+	while (parent && !(parent instanceof Classes.Alchemy.Element.Form.FieldSchema)) {
+		name = parent.getPathEntryName();
+
+		if (name) {
+			result.unshift(name);
+		}
+
+		parent = parent.getParentField();
+	}
+
+	return result.join('.');
+});
+
+/**
+ * Get the path of this field value in the current record
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ */
+Base.setProperty(function field_path_in_record() {
+
+	let result = [],
+	    parent = this.getParentField(),
+		name;
+
+	name = this.getPathEntryName();
+
+	if (name) {
+		result.push(name);
+	}
+
+	while (parent) {
+		name = parent.getPathEntryName();
+
+		if (name) {
+			result.unshift(name);
+		}
+
+		parent = parent.getParentField();
+	}
+
+	return result.join('.');
+});
+
+/**
+ * Get the parent field/field-entry element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.4
+ *
+ * @return   {Alchemy.Element.Form.Base}
+ */
+Base.setMethod(function getParentField() {
+
+	let parent = this.parentElement;
+
+	while (parent) {
+
+		if (parent instanceof Classes.Alchemy.Element.Form.Base) {
+			return parent;
+		}
+
+		parent = parent.parentElement;
+	}
+
+	if (this.field_context) {
+		return this.field_context;
+	}
+
+	return false;
+});
+
+/**
+ * Get the name of this thing in a record path
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ *
+ * @return   {String}
+ */
+Base.setMethod(function getPathEntryName() {
+	return '';
+});
+
+/**
+ * Get this entry's path origin
+ * (The path to the container it's in)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ *
+ * @return   {String}
+ */
+Base.setMethod(function getPathOrigin() {
+
+	let current = this,
+	    origin;
+
+	while (current) {
+		origin = current.field_path_in_record;
+
+		if (origin) {
+			return origin;
+		}
+
+		current = current.getParentField();
+	}
+});
+
+/**
+ * Resolve the given path
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.3
+ * @version  0.1.3
+ * 
+ * @param    {String}   name   The name to resolve
+ * @param    {String}   origin The origin to use (optional)
+ *
+ * @return   {String}
+ */
+Base.setMethod(function resolvePath(name, origin) {
+
+	if (origin == null) {
+		origin = this.getPathOrigin();
+	}
+
+	if (!origin) {
+		return name;
+	}
+
+	if (!Array.isArray(origin)) {
+		origin = origin.split('.');
+	} else {
+		origin = origin.slice(0);
+	}
+
+	if (!origin.length) {
+		return name;
+	}
+
+	origin.pop();
+	origin.push(name);
+	
+	return origin.join('.');
 });

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

@@ -3,11 +3,9 @@
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
-var Field = Function.inherits('Alchemy.Element.Form.Base', function Field() {
-	Field.super.call(this);
-});
+const Field = Function.inherits('Alchemy.Element.Form.Base', 'Field');
 
 /**
  * The template to use for the content of this element
@@ -45,6 +43,15 @@ Field.setStatic('use_new_renderer_scope', true);
  */
 Field.setAttribute('field-name');
 
+/**
+ * The type of the field
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.4
+ * @version  0.1.4
+ */
+Field.setAttribute('field-type');
+
 /**
  * The view override
  *
@@ -77,9 +84,24 @@ Field.setAssignedProperty('widget_settings');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
-Field.addParentTypeGetter('alchemy_form', 'alchemy-form');
+Field.enforceProperty(function alchemy_form(new_value) {
+
+	if (new_value == null) {
+		new_value = this.queryUp('alchemy-form');
+
+		if (!new_value && this.field_context) {
+			new_value = this.field_context.queryUp('alchemy-form');
+		}
+
+		if (!new_value && this.alchemy_field_schema && this.alchemy_field_schema.alchemy_field) {
+			new_value = this.alchemy_field_schema.alchemy_field.alchemy_form;
+		}
+	}
+	
+	return new_value;
+});
 
 /**
  * Get the error area
@@ -111,7 +133,7 @@ Field.enforceProperty(function alchemy_field_schema(new_value, old_value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
 Field.enforceProperty(function config(new_value, old_value) {
 
@@ -124,6 +146,12 @@ Field.enforceProperty(function config(new_value, old_value) {
 		}
 	}
 
+	if (new_value && new_value.constructor && new_value.constructor.type_name) {
+		this.field_type = new_value.constructor.type_name;
+	} else {
+		this.field_type = null;
+	}
+
 	return new_value;
 });
 
@@ -187,6 +215,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 +293,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
  *
@@ -418,17 +493,20 @@ Field.setProperty(function wrapper_files() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
 Field.setProperty(function original_value() {
 
-	let alchemy_field_schema = this.alchemy_field_schema;
+	let alchemy_field_schema = this.alchemy_field_schema,
+	    path = this.field_path_in_current_schema;
 
 	if (alchemy_field_schema) {
 		let original_schema_value = alchemy_field_schema.original_value;
 
 		if (original_schema_value) {
-			return original_schema_value[this.field_name];
+			if (path) {
+				return Object.path(original_schema_value, path);
+			}
 		}
 
 		return;
@@ -437,9 +515,8 @@ Field.setProperty(function original_value() {
 	let form = this.alchemy_form;
 
 	if (form && form.document) {
-		return form.document[this.field_name];
+		return Object.path(form.document, path);
 	}
-
 });
 
 /**
@@ -447,7 +524,7 @@ Field.setProperty(function original_value() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.4
  */
 Field.setProperty(function value_element() {
 
@@ -458,7 +535,11 @@ Field.setProperty(function value_element() {
 		input = this.querySelector('alchemy-field-translatable');
 	} else if (this.is_array) {
 		input = this.querySelector('alchemy-field-array');
-	} else {
+	} else if (this.contains_schema) {
+		input = this.querySelector('alchemy-field-schema');
+	}
+
+	if (!input) {
 		input = this.querySelector('.alchemy-field-value');
 	}
 
@@ -470,7 +551,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 +559,8 @@ Field.setProperty(function value() {
 
 	if (element) {
 		return element.value;
+	} else {
+		return this.original_value;
 	}
 
 }, function setValue(value) {
@@ -593,7 +676,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 +690,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);
 	}
 
 });