alchemy-form 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.2.5 (2023-04-20)
+
+* Add more configuration to `al-code-input`
+
+## 0.2.4 (2023-02-26)
+
+* Don't look for a field when the path is not specified
+* Make `al-field-schema` elements use `Field#getSubSchema()` method
+* Add an icon to the translatable-field entry buttons to see if it has a translation or not
+
 ## 0.2.3 (2023-02-11)
 
 * Use `Scene#pushToHistory()` instead of directly calling `pushState`

package/assets/stylesheets/form/elements/_field_translatable.scss

@@ -3,6 +3,46 @@ al-field-translatable {
 	position: relative;
 
 	.prefix-buttons {
-		
+		button {
+			display: flex;
+			flex-flow: row;
+		}
+
+		.has-empty-content {
+			font-size: 0.7rem;
+		}
+
+		.has-content {
+			font-size: 0.9rem;
+		}
+
+		.has-empty-content,
+		.has-content {
+			margin-left: 0.5rem;
+		}
+
+		[data-has-content="true"] {
+			.has-empty-content {
+				display: none;
+			}
+		}
+
+		[data-has-content="false"] {
+			.has-content {
+				display: none;
+			}
+		}
+
+		[icon-name] {
+			color: #333;
+		}
+
+		[icon-name="ban"] {
+			color: tomato;
+		}
+
+		.has-content {
+			color: green;
+		}
 	}
 }

package/element/al_code_input.js

@@ -16,12 +16,57 @@ const CodeInput = Function.inherits('Alchemy.Element.Form.Base', 'CodeInput');
  */
 CodeInput.setTemplateFile('form/elements/code_input');
 
+/**
+ * Line number info
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.5
+ * @version  0.2.5
+ */
+CodeInput.setAttribute('show-line-numbers', {type: 'boolean', default: true});
+
+/**
+ * The ace mode to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.5
+ * @version  0.2.5
+ */
+CodeInput.setAttribute('language-mode');
+
+/**
+ * The theme to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.5
+ * @version  0.2.5
+ */
+CodeInput.setAttribute('color-theme');
+
+/**
+ * The minimum number of lines to show (height)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.5
+ * @version  0.2.5
+ */
+CodeInput.setAttribute('min-lines', {type: 'number'});
+
+/**
+ * The maximum number of lines to show (height)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.5
+ * @version  0.2.5
+ */
+CodeInput.setAttribute('max-lines', {type: 'number'});
+
 /**
  * Get/set the value
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.5
  */
 CodeInput.setProperty(function value(value) {
 
@@ -34,6 +79,11 @@ CodeInput.setProperty(function value(value) {
 	if (editor_el) {
 		return editor_el.textContent;
 	}
+
+	if (this.assigned_data.value) {
+		return this.assigned_data.value;
+	}
+
 }, function setValue(value) {
 
 	if (this._editor) {
@@ -51,6 +101,7 @@ CodeInput.setProperty(function value(value) {
 		return editor_el.textContent = value;
 	}
 
+	this.assigned_data.value = value;
 });
 
 /**
@@ -58,7 +109,7 @@ CodeInput.setProperty(function value(value) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.10
+ * @version  0.2.5
  */
 CodeInput.setMethod(async function introduced() {
 
@@ -68,7 +119,20 @@ CodeInput.setMethod(async function introduced() {
 
 	editor_el.hidden = false;
 
-	let editor = ace.edit(editor_el);
+	let theme = this.color_theme || 'ace/theme/tomorrow_night_eighties';
+
+	if (!theme.startsWith('ace/theme')) {
+		theme = 'ace/theme/' + theme;
+	}
+
+	let options = {
+		showLineNumbers : this.show_line_numbers,
+		minLines        : this.minLines || 4,
+		maxLines        : this.maxLines || 50,
+		theme           : theme,
+	};
+
+	let editor = ace.edit(editor_el, options);
 
 	editor.session.setUseWrapMode(true);
 	editor.setFontSize(16);
@@ -88,5 +152,17 @@ CodeInput.setMethod(async function introduced() {
 		editor.session.setMode(mode);
 	}
 
+	if (this.assigned_data.value) {
+		editor.setValue(this.assigned_data.value, -1);
+	}
+
+	if (this.language_mode) {
+		try {
+			editor.session.setMode('ace/mode/' + this.language_mode);
+		} catch (err) {
+			// Ignore
+		}
+	}
+
 	this._editor = editor;
 });

package/element/al_field_schema.js

@@ -21,47 +21,39 @@ FieldSchema.setTemplateFile('form/elements/alchemy_field_schema');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.12
+ * @version  0.2.4
  */
 FieldSchema.setProperty(function schema() {
 
-	if (this.alchemy_field && this.alchemy_field.config.options) {
-		let schema = this.alchemy_field.config.options.schema;
+	const field_element = this.alchemy_field;
+	const field = field_element?.config;
+
+	if (field?.options) {
+
+		let schema = field.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) {
-					let value;
-
-					if (values instanceof Classes.Alchemy.Map.Backed) {
-						value = values.get(other_field.value);
-					} else {
-						value = values[other_field.value];
-					}
-
-					if (value) {
-						if (value.schema) {
-							schema = value.schema;
-						} else if (value.value) {
-							// Enumified values can be wrapped on the server-side
-							value = value.value;
-
-							if (value.schema) {
-								schema = value.schema;
-							}
-						}
-					}
-
-					if (!schema) {
-						schema = value;
-					}
+
+			let parent_schema_value;
+
+			let parent_schema = field_element.queryParents('al-field[field-type="schema"]');
+
+			if (parent_schema) {
+				parent_schema_value = parent_schema.value;
+			} else {
+
+				const form = field_element.alchemy_form;
+
+				let record_value = form.value;
+
+				if (form.model) {
+					record_value = record_value[form.model];
 				}
+
+				parent_schema_value = record_value;
 			}
+
+			return field.getSubschema(parent_schema_value, schema)
 		}
 
 		return schema;

package/element/al_field_translatable.js

@@ -75,7 +75,44 @@ FieldTranslatable.setMethod(function showPrefix(prefix) {
 			element.hidden = true;
 		}
 	}
+});
+
+/**
+ * Check the translation contents
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.4
+ * @version  0.2.4
+ */
+FieldTranslatable.setMethod(function checkTranslationContents() {
+
+	let field = this.field_context?.config;
+
+	let has_content,
+	    buttons = this.querySelectorAll('button[data-has-content][data-prefix]'),
+	    button,
+	    prefix,
+	    values = this.value,
+	    value,
+	    i;
+	
+	for (i = 0; i < buttons.length; i++) {
+		button = buttons[i];
+		prefix = button.dataset.prefix;
+		value = values?.[prefix];
+
+		if (field) {
+			has_content = field.valueHasContent(value);
+		} else {
+			has_content = value != null && value !== '';
+		}
 
+		if (has_content) {
+			button.dataset.hasContent = 'true';
+		} else {
+			button.dataset.hasContent = 'false';
+		}
+	}
 });
 
 /**
@@ -83,15 +120,37 @@ FieldTranslatable.setMethod(function showPrefix(prefix) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.4
  */
 FieldTranslatable.setMethod(function introduced() {
 
-	const that = this;
+	const that = this,
+	      field = this.field_context;
+
+	let doTranslationCheck = Function.throttle(() => {
+
+		if (field?.purpose == 'view') {
+			return;
+		}
+
+		that.checkTranslationContents();
+	}, 500, true, true);
 
 	this.onEventSelector('click', '.prefix-buttons button[data-prefix]', function onClick(e) {
+
 		e.preventDefault();
-		that.showPrefix(this.dataset.prefix);
+
+		let button = this.closest('[data-prefix]');
+
+		if (!button) {
+			return;
+		}
+
+		that.showPrefix(button.dataset.prefix);
+		doTranslationCheck();
 	});
 
+	this.addEventListener('change', doTranslationCheck);
+	this.addEventListener('keyup', doTranslationCheck);
+	this.addEventListener('click', doTranslationCheck);
 });

package/element/al_field_translatable_entry.js

@@ -25,6 +25,22 @@ FieldTranslatableEntry.setTemplateFile('form/elements/alchemy_field_translatable
  */
 FieldTranslatableEntry.setAttribute('prefix');
 
+/**
+ * Does this translation entry have a valid value?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.4
+ * @version  0.2.4
+ */
+FieldTranslatableEntry.setProperty(function has_content() {
+
+	let field_translatable_el = this.field_context,
+	    field_el = field_translatable_el.field_context,
+	    field = field_el.config;
+
+	field.valueHasContent(this.value);
+});
+
 /**
  * Get the original value
  *
@@ -34,7 +50,9 @@ FieldTranslatableEntry.setAttribute('prefix');
  */
 FieldTranslatableEntry.setProperty(function original_value() {
 
-	let context_value = this.field_context.original_value;
+	let field_translatable_el = this.field_context;
+
+	let context_value = field_translatable_el.original_value;
 
 	if (context_value) {
 		return context_value[this.prefix];

package/element/al_form.js

@@ -289,7 +289,7 @@ Form.setMethod(async function showViolations(err) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.0
+ * @version  0.2.4
  *
  * @param    {String}   path
  *
@@ -297,6 +297,10 @@ Form.setMethod(async function showViolations(err) {
  */
 Form.setMethod(function findFieldByPath(path) {
 
+	if (!path) {
+		return;
+	}
+
 	let current = this,
 	    result,
 	    pieces = path.split('.'),

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-form",
 	"description": "Form plugin for Alchemy",
-	"version": "0.2.3",
+	"version": "0.2.5",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-form.git"

package/view/form/elements/alchemy_field_translatable.hwk

@@ -8,9 +8,24 @@
 <div class="prefix-buttons">
 	<% index = 0 %>
 	<% for (prefix in prefixes) { %>
-		<button data-prefix=<% prefix %>>
+		<% value = null %>
+		<% if (values) value = values[prefix] %>
+
+		<button
+			data-prefix={% prefix %}
+			data-has-content=<% alchemy_field.config.valueHasContent(value) ? 'true' : 'false' %>
+		>
 			<% if (index == 0) $0.classList.add('active') %>
-			{%= prefix %}
+
+			<span class="prefix-name">{{ prefix }}</span>
+
+			<al-icon-stack class="has-empty-content">
+				<al-icon icon-name="language"></al-icon>
+				<al-icon icon-name="ban" size=2></al-icon>
+			</al-icon-stack>
+
+			<al-icon class="has-content" icon-name="language"></al-icon>
+
 		</button>
 
 		<% index++ %>