alchemy-form 0.1.11 → 0.2.0

package/element/al_state.js

@@ -0,0 +1,26 @@
+/**
+ * The al-state element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+const State = Function.inherits('Alchemy.Element.Form.Stateful', 'State');
+
+/**
+ * The name of the state this element represents
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+State.setAttribute('state-name');
+
+/**
+ * Is this state active?
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+State.setAttribute('active', {boolean: true});

package/element/{string_input.js → al_string_input.js}

@@ -1,5 +1,5 @@
 /**
- * The alchemy-string-input custom element
+ * The al-string-input custom element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
@@ -306,7 +306,7 @@ StringInput.setMethod(async function revalidate(trigger, force) {
  * @since    0.1.3
  * @version  0.1.3
  */
- StringInput.setMethod(function introduced() {
+StringInput.setMethod(function introduced() {
 
 	const that = this,
 	      input = this.input_el;

package/element/al_tab_button.js

@@ -0,0 +1,138 @@
+/**
+ * The al-tab-button element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+const TabButton = Function.inherits('Alchemy.Element.Form.TabBase', 'TabButton');
+
+/**
+ * Set the ARIA role of the element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setRole('tab');
+
+/**
+ * Only the active tab should be tabable
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setAttribute('tabindex', {default: -1});
+
+/**
+ * The name of the tab
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setAttribute('tab-name');
+
+/**
+ * Is this tab active?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setAttribute('active', null, function setActive(value) {
+
+	if (value != null) {
+		this.activate(value);
+	}
+
+	return value;
+}, {boolean: true});
+
+/**
+ * Get the corresponding tab content element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setMethod(function getContentElement() {
+
+	const tab_name = this.dataset.tabName;
+
+	if (!tab_name) {
+		return;
+	}
+
+	let context = this.tab_context;
+
+	if (!context) {
+		return;
+	}
+
+	return context.querySelector('al-tab-content[tab-name="' + tab_name + '"]');
+});
+
+/**
+ * Activate this tab
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setMethod(function activate(value) {
+
+	let context = this.tab_context;
+
+	if (!context) {
+		return;
+	}
+
+	if (value == null) {
+		value = true;
+	}
+
+	let all_buttons = context.getAllTabButtons(),
+	    all_contents = context.getAllTabContents();
+
+	this.setAttributeSilent('active', value);
+
+	// If this tab is activated, others have to be deactivated
+	if (value) {
+		for (let button of all_buttons) {
+			if (button != this && button.active) {
+				button.active = false;
+			}
+		}
+
+		this.setAttribute('aria-selected', true);
+		this.setAttribute('tabindex', 0);
+	} else {
+		this.removeAttribute('aria-selected');
+		this.setAttribute('tabindex', -1);
+	}
+
+	for (let content of all_contents) {
+		if (content.tab_name == this.tab_name) {
+			content.active = value;
+		} else if (value) {
+			content.active = false;
+		}
+	}
+
+});
+
+/**
+ * Added to the DOM for the first time
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabButton.setMethod(function introduced() {
+
+	this.addEventListener('click', e => {
+		this.activate();
+	});
+});

package/element/al_tab_context.js

@@ -0,0 +1,102 @@
+/**
+ * The al-tab-context element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+const TabContext = Function.inherits('Alchemy.Element.Form.TabBase', 'TabContext');
+
+/**
+ * The "value", or active tab
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @return   {AlchemyTabButton[]}
+ */
+TabContext.setAttribute('value', function getValue(value) {
+
+	let all_buttons = this.getAllTabButtons();
+
+	if (all_buttons.length) {
+		value = '';
+
+		for (let entry of all_buttons) {
+			if (entry.active) {
+				value = entry.tab_name;
+				break;
+			}
+		}
+	}
+
+	return value;
+	
+}, function setValue(value) {
+
+	let all_buttons = this.getAllTabButtons(),
+	    activated = false;
+
+	if (all_buttons.length) {
+		for (let entry of all_buttons) {
+			if (entry.tab_name == value) {
+				entry.active = true;
+				activated = true;
+			} else {
+				entry.active = false;
+			}
+		}
+
+		// If nothing was activated, activate the first one
+		if (!activated) {
+			all_buttons[0].active = true;
+			value = all_buttons[0].tab_name;
+		}
+	}
+
+	return value;
+});
+
+/**
+ * Do something when this element is retained
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabContext.setMethod(function retained() {
+
+	let value = this.value;
+
+	if (!value) {
+		// Trigger setValue, which will select the first tab
+		this.value = '';
+	}
+});
+
+/**
+ * Get all the tab buttons
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @return   {AlchemyTabButton[]}
+ */
+TabContext.setMethod(function getAllTabButtons() {
+	return this.queryAllNotNested('al-tab-button');
+});
+
+/**
+ * Get all the tab contents
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @return   {AlchemyTabButton[]}
+ */
+TabContext.setMethod(function getAllTabContents() {
+	return this.queryAllNotNested('al-tab-panel');
+});

package/element/al_tab_list.js

@@ -0,0 +1,66 @@
+/**
+ * The al-tab-list element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+const TabList = Function.inherits('Alchemy.Element.Form.TabBase', 'TabList');
+
+/**
+ * Set the ARIA role of the element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabList.setRole('tablist');
+
+/**
+ * Move the current selection
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @param    {Number}   direction
+ */
+TabList.setMethod(function moveSelection(direction) {
+
+	let active_tab = this.querySelector('al-tab-button[active]'),
+	    all_tabs = Array.cast(this.querySelectorAll('al-tab-button')),
+	    index = all_tabs.indexOf(active_tab);
+	
+	index += direction;
+
+	let new_tab = all_tabs.atLoop(index);
+
+	if (new_tab) {
+		new_tab.active = true;
+		new_tab.focus();
+	}
+});
+
+/**
+ * Added to the DOM for the first time
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabList.setMethod(function introduced() {
+
+	// Arrows are only detected on keydown
+	this.addEventListener('keydown', e => {
+
+		let direction = 0;
+
+		if (e.key == 'ArrowLeft') {
+			direction = -1;
+		} else if (e.key == 'ArrowRight') {
+			direction = 1;
+		}
+
+		this.moveSelection(direction);
+	});
+});

package/element/al_tab_panel.js

@@ -0,0 +1,44 @@
+/**
+ * The al-tab-content element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+const TabPanel = Function.inherits('Alchemy.Element.Form.TabBase', 'TabPanel');
+
+/**
+ * Set the ARIA role of the element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabPanel.setRole('tabpanel');
+
+/**
+ * Make it tabable by default
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabPanel.setAttribute('tabindex', {default: 0});
+
+/**
+ * The name of the tab
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabPanel.setAttribute('tab-name');
+
+/**
+ * Is this tab active?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+TabPanel.setAttribute('active', {boolean: true});