collections

js/forms/custom-elements/choices.js

@@ -2,6 +2,10 @@ class ChoicesElement extends HTMLSelectElement {
 	plugins = [];
 	connectedCallback() {
 
+		if (this.tomselect) {
+			return;
+		}
+
 		if (this.getAttribute('multiple')) {
 			this.plugins.push('remove_button');
 		}

js/forms/custom-elements/collection.js

@@ -7,7 +7,7 @@ class CollectionElement extends HTMLElement {
 		customElements.define('collection-element', CollectionElement);
 	}
 
-	static addFormToCollection(e) {
+	addFormToCollection(e) {
 		const collectionHolder = document.querySelector('.'+e.currentTarget.dataset.collectionHolderClass);
 		const item = document.createElement('div');
 
@@ -21,17 +21,19 @@ class CollectionElement extends HTMLElement {
 				collectionHolder.dataset.index
 			);
 
-		collectionHolderList.appendChild(item);
+		collectionHolderList.appendChild(item.firstChild);
 		collectionHolder.dataset.index++;
+
+		this.querySelectorAll('collection-entry-element').forEach((entry) => {
+			console.log('test');
+			entry.updateButtonStates();
+		});
 	}
 
 	/** connectedCallback **/
 	connectedCallback() {
 		this.#eBtnAdd = this.querySelector('.add_item_link');
-		this.#eBtnAdd.addEventListener('click', CollectionElement.addFormToCollection);
+		this.#eBtnAdd.addEventListener('click', this.addFormToCollection.bind(this));
 	}
 
-	#removeCollectionItem() {
-
-	}
 }

js/forms/custom-elements/collection_entry.js

@@ -1,6 +1,9 @@
 class CollectionEntryElement extends HTMLElement {
 
+	// Button elements
 	#eBtnDelete;
+	#eBtnMoveUp;
+	#eBtnMoveDown;
 
 	// register the custom element
 	static {
@@ -9,11 +12,96 @@ class CollectionEntryElement extends HTMLElement {
 
 	/** connectedCallback **/
 	connectedCallback() {
-		this.#eBtnDelete = this.querySelector('.remove_item_link');
-		this.#eBtnDelete.addEventListener('click', this.#removeCollectionItem.bind(this));
+
+		if ((this.dataset.new || this.dataset.allowDelete) && this.#eBtnDelete === undefined) {
+			this.#eBtnDelete = this.#createButton('Delete', 'ibo-button ibo-is-regular ibo-is-danger');
+			this.#eBtnDelete.addEventListener('click', this.#removeCollectionItem.bind(this));
+			this.appendChild(this.#eBtnDelete);
+		}
+
+		if (this.dataset.allowOrdering) {
+			if (this.#eBtnMoveUp === undefined) {
+				this.#eBtnMoveUp = this.#createButton('Move Up', 'ibo-button ibo-is-regular');
+				this.#eBtnMoveUp.addEventListener('click', this.#moveUp.bind(this));
+				this.appendChild(this.#eBtnMoveUp);
+			}
+			if (this.#eBtnMoveDown === undefined) {
+				this.#eBtnMoveDown = this.#createButton('Move Down', 'ibo-button ibo-is-regular');
+				this.#eBtnMoveDown.addEventListener('click', this.#moveDown.bind(this));
+				this.appendChild(this.#eBtnMoveDown);
+			}
+		}
+
+		this.updateButtonStates();
 	}
 
-	#removeCollectionItem(e) {
+	/**
+	 * Update the state of the buttons (enabled/disabled).
+	 *
+	 */
+	updateButtonStates() {
+
+		if(this.previousElementSibling === null) {
+			this.#eBtnMoveUp.setAttribute('disabled', 'disabled');
+		}
+		else{
+			this.#eBtnMoveUp.removeAttribute('disabled');
+		}
+
+		if(this.nextElementSibling === null) {
+			this.#eBtnMoveDown.setAttribute('disabled', 'disabled');
+		}
+		else{
+			this.#eBtnMoveDown.removeAttribute('disabled');
+		}
+	}
+
+	/**
+	 * Create a button element.
+	 *
+	 * @param label
+	 * @param className
+	 * @returns {HTMLButtonElement}
+	 */
+	#createButton(label, className) {
+
+		const btnElement = document.createElement('button');
+		btnElement.type = 'button';
+		btnElement.className = className;
+		btnElement.textContent = label;
+
+		return btnElement;
+	}
+
+	/**
+	 * Move this collection item up.
+	 *
+	 */
+	#moveUp() {
+		const prev = this.previousElementSibling;
+		if (prev) {
+			this.parentNode.insertBefore(this, prev);
+			prev.updateButtonStates();
+		}
+	}
+
+	/**
+	 * Move this collection item down.
+	 *
+	 */
+	#moveDown() {
+		const next = this.nextElementSibling;
+		if (next) {
+			this.parentNode.insertBefore(next, this);
+			next.updateButtonStates();
+		}
+	}
+
+	/**
+	 * Remove this collection item.
+	 *
+	 */
+	#removeCollectionItem() {
 		this.remove();
 	}
 }