From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 31 Mar 2016 17:38:54 +0000 (+0200)
Subject: Added generic toggle logic for input elements
X-Git-Tag: 3.0.0_Beta_1~1986^2~2
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=2f1c9e8f9a53bd0ad645d4248e213e2ff8625492;p=GitHub%2FWoltLab%2FWCF.git

Added generic toggle logic for input elements
---

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Toggle/Input.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Toggle/Input.js
new file mode 100644
index 0000000000..16a1c1a355
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Toggle/Input.js
@@ -0,0 +1,108 @@
+/**
+ * Provides a simple toggle to show or hide certain elements when the
+ * target element is checked.
+ * 
+ * Be aware that the list of elements to show or hide accepts selectors
+ * which will be passed to `elBySel()`, causing only the first matched
+ * element to be used. If you require a whole list of elements identified
+ * by a single selector to be handled, please provide the actual list of
+ * elements instead.
+ * 
+ * Usage:
+ * 
+ * new UiToggleInput('input[name="foo"][value="bar"]', {
+ *      show: ['#showThisContainer', '.makeThisVisibleToo'],
+ *      hide: ['.notRelevantStuff', elById('fooBar')]
+ * });
+ * 
+ * @author	Alexander Ebert
+ * @copyright	2001-2016 WoltLab GmbH
+ * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module	WoltLab/WCF/Ui/Toggle/Input
+ */
+define(['Core'], function(Core) {
+	"use strict";
+	
+	/**
+	 * @param       {string}        elementSelector         element selector used with `elBySel()`
+	 * @param       {Object}        options                 toggle options
+	 * @constructor
+	 */
+	function UiToggleInput(elementSelector, options) { this.init(elementSelector, options); }
+	UiToggleInput.prototype = {
+		/**
+		 * Initializes a new input toggle.
+		 * 
+		 * @param       {string}        elementSelector         element selector used with `elBySel()`
+		 * @param       {Object}        options                 toggle options
+		 */
+		init: function(elementSelector, options) {
+			this._element = elBySel(elementSelector);
+			if (this._element === null) {
+				throw new Error("Unable to find element by selector '" + elementSelector + "'.");
+			}
+			
+			var type = (this._element.nodeName === 'INPUT') ? elAttr(this._element, 'type') : '';
+			if (type !== 'checkbox' && type !== 'radio') {
+				throw new Error("Illegal element, expected input[type='checkbox'] or input[type='radio'].");
+			}
+			
+			this._options = Core.extend({
+				hide: [],
+				show: []
+			}, options);
+			
+			['hide', 'show'].forEach((function(type) {
+				var element, i, length;
+				for (i = 0, length = this._options[type].length; i < length; i++) {
+					element = this._options[type][i];
+					
+					if (typeof element !== 'string' && !(element instanceof Element)) {
+						throw new TypeError("The array '" + type + "' may only contain string selectors or DOM elements.");
+					}
+				}
+			}).bind(this));
+			
+			this._element.addEventListener('change', this._change.bind(this));
+		},
+		
+		/**
+		 * Triggered when element is checked / unchecked.
+		 * 
+		 * @param       {Event}         event   event object
+		 * @protected
+		 */
+		_change: function(event) {
+			var showElements = event.currentTarget.checked;
+			
+			this._handleElements(this._options.show, showElements);
+			this._handleElements(this._options.hide, !showElements);
+		},
+		
+		/**
+		 * Loops through the target elements and shows / hides them.
+		 * 
+		 * @param       {Array}         elements        list of elements or selectors
+		 * @param       {boolean}       showElement     true if elements should be shown
+		 * @protected
+		 */
+		_handleElements: function(elements, showElement) {
+			var element, tmp;
+			for (var i = 0, length = elements.length; i < length; i++) {
+				element = elements[i];
+				if (typeof element === 'string') {
+					tmp = elBySel(element);
+					if (tmp === null) {
+						throw new Error("Unable to find element by selector '" + element + "'.");
+					}
+					
+					elements[i] = element = tmp;
+				}
+				
+				window[(showElement ? 'elShow' : 'elHide')](element);
+			}
+		}
+	};
+	
+	return UiToggleInput;
+});