From 51ab10862f3eb4833b048be6eb5fc2e798819b9e Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 17 Apr 2016 17:41:14 +0200
Subject: [PATCH] Fixed language chooser / recaptcha

---
 com.woltlab.wcf/templates/pageHeaderUser.tpl  |   2 +-
 wcfsetup/install/files/js/WCF.js              | 131 +++---------------
 .../files/js/WoltLab/WCF/Language/Chooser.js  |  46 +++---
 wcfsetup/install/files/style/ui/dropdown.scss |   4 +
 .../install/files/style/ui/recaptcha.scss     |   4 +
 5 files changed, 58 insertions(+), 129 deletions(-)
 create mode 100644 wcfsetup/install/files/style/ui/recaptcha.scss

diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
index aebad8c360..4ed650ff1b 100644
--- a/com.woltlab.wcf/templates/pageHeaderUser.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl
@@ -118,7 +118,7 @@
 								window.location = location + delimiter + 'l=' + elData(listItem, 'language-id') + window.location.hash;
 							};
 							
-							LanguageChooser.init('pageLanguageContainer', 'languageID', {@$__wcf->getLanguage()->languageID}, languages, callback);
+							LanguageChooser.init('pageLanguageContainer', 'pageLanguageID', {@$__wcf->getLanguage()->languageID}, languages, callback);
 							EventHandler.add('com.woltlab.wcf.UserMenuMobile', 'more', function(data) {
 								if (data.identifier === 'com.woltlab.wcf.language') {
 									callback(data.parent);
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 86a47d671c..3ececfe6f2 100755
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -7252,122 +7252,31 @@ WCF.EditableItemList = Class.extend({
 
 /**
  * Provides a language chooser.
+ *
+ * @param       {string}                                containerId             input element conainer id
+ * @param       {string}                                chooserId               input element id
+ * @param       {int}                                   languageId              selected language id
+ * @param       {object<int, object<string, string>>}   languages               data of available languages
+ * @param       {function}                              callback                function called after a language is selected
+ * @param       {boolean}                               allowEmptyValue         true if no language may be selected
  * 
- * @param	string		containerID
- * @param	string		inputFieldID
- * @param	integer		languageID
- * @param	object		languages
- * @param	object		callback
+ * @deprecated  2.2 - please use `WoltLab/WCF/Language/Chooser` instead
  */
 WCF.Language.Chooser = Class.extend({
-	/**
-	 * callback object
-	 * @var	object
-	 */
-	_callback: null,
-	
-	/**
-	 * dropdown object
-	 * @var	jQuery
-	 */
-	_dropdown: null,
-	
-	/**
-	 * input field
-	 * @var	jQuery
-	 */
-	_input: null,
-	
 	/**
 	 * Initializes the language chooser.
-	 * 
-	 * @param	string		containerID
-	 * @param	string		inputFieldID
-	 * @param	integer		languageID
-	 * @param	object		languages
-	 * @param	object		callback
-	 * @param	boolean		allowEmptyValue
-	 */
-	init: function(containerID, inputFieldID, languageID, languages, callback, allowEmptyValue) {
-		var $container = $('#' + containerID);
-		if ($container.length != 1) {
-			console.debug("[WCF.Language.Chooser] Invalid container id '" + containerID + "' given");
-			return;
-		}
-		
-		// bind language id input
-		this._input = $('#' + inputFieldID);
-		if (!this._input.length) {
-			this._input = $('<input type="hidden" name="' + inputFieldID + '" value="' + languageID + '" />').appendTo($container);
-		}
-		
-		// handle callback
-		if (callback !== undefined) {
-			if (!$.isFunction(callback)) {
-				console.debug("[WCF.Language.Chooser] Given callback is invalid");
-				return;
-			}
-			
-			this._callback = callback;
-		}
-		
-		// create language dropdown
-		this._dropdown = $('<div class="dropdown" id="' + containerID + '-languageChooser" />').appendTo($container);
-		$('<div class="dropdownToggle boxFlag box24" data-toggle="' + containerID + '-languageChooser"></div>').appendTo(this._dropdown);
-		var $dropdownMenu = $('<ul class="dropdownMenu" />').appendTo(this._dropdown);
-		
-		for (var $languageID in languages) {
-			var $language = languages[$languageID];
-			var $item = $('<li class="boxFlag"><a class="box24"><div><img src="' + $language.iconPath + '" alt="" class="iconFlag" /></div> <div><h3>' + $language.languageName + '</h3></div></a></li>').appendTo($dropdownMenu);
-			$item.data('languageID', $languageID).click($.proxy(this._click, this));
-			
-			// update dropdown label
-			if ($languageID == languageID) {
-				var $html = $('' + $item.html());
-				var $innerContent = $html.children().detach();
-				this._dropdown.children('.dropdownToggle').empty().append($innerContent);
-			}
-		}
-		
-		// allow an empty selection (e.g. using as language filter)
-		if (allowEmptyValue) {
-			$('<li class="dropdownDivider" />').appendTo($dropdownMenu);
-			var $item = $('<li><a>' + WCF.Language.get('wcf.global.language.noSelection') + '</a></li>').data('languageID', 0).click($.proxy(this._click, this)).appendTo($dropdownMenu);
-			
-			if (languageID === 0) {
-				this._dropdown.children('.dropdownToggle').empty().append($item.html());
-			}
-		}
-		else if (languageID === 0) {
-			var $dropdownToggle = $('<div><span class="icon icon24 fa-question" /></div> <div><h3>' + WCF.Language.get('wcf.global.language.noSelection') + '</h3></div>');
-			this._dropdown.children('.dropdownToggle').empty().append($dropdownToggle);
-		}
-		
-		WCF.Dropdown.destroy(containerID + '-languageChooser');
-		WCF.Dropdown.init();
-	},
-	
-	/**
-	 * Handles click events.
-	 * 
-	 * @param	object		event
-	 */
-	_click: function(event) {
-		var $item = $(event.currentTarget);
-		var $languageID = $item.data('languageID');
-		
-		// update input field
-		this._input.val($languageID);
-		
-		// update dropdown label
-		var $html = $('' + $item.html());
-		var $innerContent = ($languageID === 0) ? $html : $html.children().detach();
-		this._dropdown.children('.dropdownToggle').empty().append($innerContent);
-		
-		// execute callback
-		if (this._callback !== null) {
-			this._callback($item);
-		}
+	 *
+	 * @param       {string}                                containerId             input element conainer id
+	 * @param       {string}                                chooserId               input element id
+	 * @param       {int}                                   languageId              selected language id
+	 * @param       {object<int, object<string, string>>}   languages               data of available languages
+	 * @param       {function}                              callback                function called after a language is selected
+	 * @param       {boolean}                               allowEmptyValue         true if no language may be selected
+	 */
+	init: function(containerId, chooserId, languageId, languages, callback, allowEmptyValue) {
+		require(['WoltLab/WCF/Language/Chooser'], function(LanguageChooser) {
+			LanguageChooser.init(containerId, chooserId, languageId, languages, callback, allowEmptyValue);
+		});
 	}
 });
 
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Language/Chooser.js b/wcfsetup/install/files/js/WoltLab/WCF/Language/Chooser.js
index 1ffff682d0..698089b66d 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Language/Chooser.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Language/Chooser.js
@@ -2,7 +2,7 @@
  * Dropdown language chooser.
  * 
  * @author	Alexander Ebert, Matthias Schmidt
- * @copyright	2001-2015 WoltLab GmbH
+ * @copyright	2001-2016 WoltLab GmbH
  * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module	WoltLab/WCF/Language/Chooser
  */
@@ -22,12 +22,12 @@ define(['Dictionary', 'Language', 'Dom/Traverse', 'Dom/Util', 'ObjectMap', 'Ui/S
 		/**
 		 * Initializes a language chooser.
 		 * 
-		 * @param	{string}					containerId		input element conainer id
-		 * @param	{string}					chooserId		input element id
-		 * @param	{int}   					languageId		selected language id
-		 * @param	{object<integer, object<string, string>>}	languages		data of available languages
-		 * @param	{function}					callback		function called after a language is selected
-		 * @param	{boolean}					allowEmptyValue		true if no language may be selected
+		 * @param       {string}                                containerId             input element conainer id
+		 * @param       {string}                                chooserId               input element id
+		 * @param       {int}                                   languageId              selected language id
+		 * @param       {object<int, object<string, string>>}   languages               data of available languages
+		 * @param       {function}                              callback                function called after a language is selected
+		 * @param       {boolean}                               allowEmptyValue         true if no language may be selected
 		 */
 		init: function(containerId, chooserId, languageId, languages, callback, allowEmptyValue) {
 			if (_choosers.has(chooserId)) {
@@ -66,23 +66,35 @@ define(['Dictionary', 'Language', 'Dom/Traverse', 'Dom/Util', 'ObjectMap', 'Ui/S
 		/**
 		 * Sets up DOM and event listeners for a language chooser.
 		 *
-		 * @param	{string}				chooserId		chooser id
-		 * @param	{Element}				element			chooser element
-		 * @param	{int}	        			languageId		selected language id
-		 * @param	{object<int, object<string, string>>}	languages		data of available languages
+		 * @param       {string}                                chooserId               chooser id
+		 * @param       {Element}                               element                 chooser element
+		 * @param       {int}                                   languageId              selected language id
+		 * @param       {object<int, object<string, string>>}   languages               data of available languages
 		 * @param       {function}                              callback                callback function invoked on selection change
-		 * @param	{boolean}				allowEmptyValue		true if no language may be selected
+		 * @param       {boolean}                               allowEmptyValue         true if no language may be selected
 		 */
 		_initElement: function(chooserId, element, languageId, languages, callback, allowEmptyValue) {
-			var container = element.parentNode;
-			container.classList.add('dropdown');
+			var container;
+			
+			if (element.parentNode.nodeName === 'DD') {
+				container = elCreate('div');
+				container.className = 'dropdown';
+				element.parentNode.insertBefore(container, element);
+			}
+			else {
+				container = element.parentNode;
+				container.classList.add('dropdown');
+			}
+			
+			elHide(element);
+			
 			var dropdownToggle = elCreate('a');
-			dropdownToggle.className = 'dropdownToggle boxFlag box24 inputPrefix';
-			container.insertBefore(dropdownToggle, element);
+			dropdownToggle.className = 'dropdownToggle boxFlag box24 inputPrefix' + (element.parentNode.nodeName === 'DD' ? ' button' : '');
+			container.appendChild(dropdownToggle);
 			
 			var dropdownMenu = elCreate('ul');
 			dropdownMenu.className = 'dropdownMenu';
-			DomUtil.insertAfter(dropdownMenu, dropdownToggle);
+			container.appendChild(dropdownMenu);
 			
 			var callbackClick = (function(event) {
 				var languageId = ~~elData(event.currentTarget, 'language-id');
diff --git a/wcfsetup/install/files/style/ui/dropdown.scss b/wcfsetup/install/files/style/ui/dropdown.scss
index 51f7a4bfb9..a08a23e525 100644
--- a/wcfsetup/install/files/style/ui/dropdown.scss
+++ b/wcfsetup/install/files/style/ui/dropdown.scss
@@ -274,6 +274,10 @@
 .boxFlag > .box24, .boxFlag.box24 {
 	display: flex !important;
 	min-height: 20px;
+	
+	&.dropdownToggle {
+		display: inline-flex !important;
+	}
 }
 
 @include large-screen-only {
diff --git a/wcfsetup/install/files/style/ui/recaptcha.scss b/wcfsetup/install/files/style/ui/recaptcha.scss
new file mode 100644
index 0000000000..b77b0085fd
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/recaptcha.scss
@@ -0,0 +1,4 @@
+/* Google ReCAPTCHA */
+#recaptcha_response_field {
+	margin-top: 20px;
+}
-- 
2.20.1