alchemy-form 0.3.0-alpha.1 → 0.3.0-alpha.3

package/element/al_dropdown.js

@@ -0,0 +1,123 @@
+/**
+ * The <al-dropdown> element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+const Dropdown = Function.inherits('Alchemy.Element.Form.Base', 'Dropdown');
+
+/**
+ * The template code
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Dropdown.setTemplateFile('form/elements/al_dropdown');
+
+/**
+ * Is this dropdown open?
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Dropdown.defineStateVariable('is_open', {
+	type      : 'boolean',
+	default   : false,
+	on_change : function(editor) {
+		this.refreshDropdownPosition();
+	},
+});
+
+/**
+ * The dropdown wrapper element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Dropdown.defineStateVariable('items_wrapper', {
+	type    : 'element',
+	default : null,
+});
+
+/**
+ * The last chosen item
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Dropdown.defineStateVariable('last_chosen_item');
+
+/**
+ * The "selected" item, if any.
+ * (This requires custom logic to be set)
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Dropdown.defineStateVariable('selected_item');
+
+/**
+ * Toggle the dropdown state
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Dropdown.setMethod(function toggleDropdown() {
+	let is_open = this.getStateOptional('is_open');
+	is_open.value = !is_open.value;
+});
+
+/**
+ * Refresh the dropdown position
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Dropdown.setMethod(function refreshDropdownPosition() {
+
+	let is_open = this.getStateOptional('is_open');
+
+	if (!is_open.value) {
+		return;
+	}
+
+	let items_wrapper = this.getState('items_wrapper');
+
+	if (!items_wrapper) {
+		return;
+	}
+
+	let rect = this.getBoundingClientRect();
+
+	items_wrapper.style.left = rect.left + 'px';
+	items_wrapper.style.top = rect.bottom + 'px';
+});
+
+/**
+ * Added to the DOM for the first time
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Dropdown.setMethod(function introduced() {
+
+	let last_chosen_optional = this.getStateOptional('last_chosen_item');
+
+	this.addEventListener('click', e => {
+
+		let item = e.target.closest('al-dropdown-item');
+
+		if (item) {
+			last_chosen_optional.value = item;
+		}
+	});
+});

package/element/al_dropdown_item.js

@@ -0,0 +1,40 @@
+/**
+ * The <al-dropdown-item> element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+const DropdownItem = Function.inherits('Alchemy.Element.Form.Base', 'DropdownItem');
+
+/**
+ * This has the button role
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+DropdownItem.setRole('button');
+
+/**
+ * Is this item selected somehow?
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+DropdownItem.defineStateVariable('is_selected', {
+	type      : 'boolean',
+	default   : false,
+	on_change : function onSelectedChange(value) {
+		console.log('On change:', value);
+		if (value) {
+			let dropdown = this.closest('al-dropdown');
+
+			if (dropdown) {
+				let selected_item = dropdown.getStateOptional('selected_item');
+				selected_item.value = this;
+			}
+		}
+	}
+});

package/element/al_enum_badge.js

@@ -0,0 +1,157 @@
+/**
+ * The al-enum-badge class:
+ * Shows a selected enum value as a badge.
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+const EnumBadge = Function.inherits('Alchemy.Element.Form.Base', 'EnumBadge');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker <jelle@develry.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+EnumBadge.setTemplateFile('form/elements/al_enum_badge');
+
+/**
+ * The ID of the enum value to show.
+ * Can be a string, a number, an ObjectId representation.
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+EnumBadge.setAttribute('enum-id');
+
+/**
+ * The optional Model to get the info from,
+ * in case the source is a Model.
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+EnumBadge.setAttribute('model');
+
+/**
+ * The optional enum-class to use (if the source is not just a model)
+ * This class has to be available on the client-side!
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+EnumBadge.setAttribute('enum-class');
+
+/**
+ * See if we need to prepare any render variables
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+EnumBadge.setMethod(function prepareRenderVariables() {
+
+	let enum_id = this.enum_id;
+
+	if (!enum_id) {
+		return;
+	}
+
+	let enum_class = this.enum_class;
+
+	if (!enum_class) {
+
+		if (this.model) {
+			return this.prepareRenderVariablesFromModel();
+		}
+
+		return;
+	}
+
+	let constructor,
+	    parent = Object.path(Classes, enum_class);
+
+	if (parent?.is_namespace) {
+		parent = parent[parent.name];
+	}
+
+	if (!parent) {
+		return;
+	}
+
+	// Not sure this will always be correct.
+	// Might have to loop over all the children.
+	// Or use `getDescendantsDict()` or `getDescendantsMap()`
+	constructor = parent.getDescendant(enum_id);
+
+	if (!constructor) {
+		return;
+	}
+
+	let title = constructor.title,
+	    color,
+	    index,
+	    icon;
+
+	let enum_info = constructor.enum_info;
+
+	if (enum_info) {
+		if (enum_info.title) {
+			title = enum_info.title;
+		}
+
+		if (enum_info.icon) {
+			icon = enum_info.icon;
+		}
+
+		if (enum_info.index) {
+			index = enum_info.index;
+		}
+
+		if (enum_info.color) {
+			color = enum_info.color;
+		}
+	}
+
+	return {title, color, index, icon};
+});
+
+/**
+ * Get render variables from a model
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+EnumBadge.setMethod(async function prepareRenderVariablesFromModel() {
+
+	let enum_id = this.enum_id,
+	    model = this.model;
+
+	if (!enum_id || !model) {
+		return;
+	}
+
+	let resource_options = {
+		name   : 'FormApi#enumInfo',
+		params : {
+			model_name : model,
+			id         : enum_id
+		}
+	};
+
+	let result;
+
+	try {
+		result = await this.hawkejs_helpers.Alchemy.getResource(resource_options);
+	} catch (err) {
+		console.error('Failed to get enum info:', err);
+	}
+
+	return result;
+});