From: Matthias Schmidt <gravatronics@live.com>
Date: Fri, 25 Dec 2015 10:09:54 +0000 (+0100)
Subject: Complete new LanguageChooser implementation
X-Git-Tag: 3.0.0_Beta_1~2030^2~195
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=4151d26e611bf263c5216809fc803d213ad5a13d;p=GitHub%2FWoltLab%2FWCF.git

Complete new LanguageChooser implementation
---

diff --git a/com.woltlab.wcf/templates/messageFormMultilingualism.tpl b/com.woltlab.wcf/templates/messageFormMultilingualism.tpl
index 6c2c330cb4..353f09ff65 100644
--- a/com.woltlab.wcf/templates/messageFormMultilingualism.tpl
+++ b/com.woltlab.wcf/templates/messageFormMultilingualism.tpl
@@ -13,19 +13,17 @@
 	</dl>
 	
 	<script data-relocate="true">
-		//<![CDATA[
-		$(function() {
-			var $languages = {
-				{implode from=$availableContentLanguages item=contentLanguage}
-					'{@$contentLanguage->languageID}': {
-						iconPath: '{@$contentLanguage->getIconPath()}',
-						languageName: '{$contentLanguage}'
+		require(['WoltLab/WCF/Language/Chooser'], function(LanguageChooser) {
+			var languages = {
+				{implode from=$availableContentLanguages item=__language}
+					'{@$__language->languageID}': {
+						iconPath: '{@$__language->getIconPath()|encodeJS}',
+						languageName: '{$__language}'
 					}
 				{/implode}
 			};
 			
-			new WCF.Language.Chooser('languageIDContainer', 'languageID', {$languageID}, $languages);
+			LanguageChooser.init('languageIDContainer', 'languageID', {$languageID}, languages)
 		});
-		//]]>
 	</script>
 {/if}
\ No newline at end of file
diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
index 0c4a0f4393..92f53f752e 100644
--- a/com.woltlab.wcf/templates/pageHeaderUser.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl
@@ -207,25 +207,23 @@
 			{if $__wcf->getLanguage()->getLanguages()|count > 1}
 				<li id="pageLanguageContainer">
 					<script data-relocate="true">
-						//<![CDATA[
-						$(function() {
-							var $languages = {
-								{implode from=$__wcf->getLanguage()->getLanguages() item=language}
-									'{@$language->languageID}': {
-										iconPath: '{@$language->getIconPath()}',
-										languageName: '{$language}'
+						require(['WoltLab/WCF/Language/Chooser'], function(LanguageChooser) {
+							var languages = {
+								{implode from=$__wcf->getLanguage()->getLanguages() item=__language}
+									'{@$__language->languageID}': {
+										iconPath: '{@$__language->getIconPath()|encodeJS}',
+										languageName: '{$__language}'
 									}
 								{/implode}
 							};
 							
-							new WCF.Language.Chooser('pageLanguageContainer', 'languageID', {@$__wcf->getLanguage()->languageID}, $languages, function(item) {
-								var $location = window.location.toString().replace(/#.*/, '').replace(/(\?|&)l=[0-9]+/g, '');
-								var $delimiter = ($location.indexOf('?') == -1) ? '?' : '&';
+							LanguageChooser.init('pageLanguageContainer', 'languageID', {@$__wcf->getLanguage()->languageID}, languages, function(listItem) {
+								var location = window.location.toString().replace(/#.*/, '').replace(/(\?|&)l=[0-9]+/g, '');
+								var delimiter = (location.indexOf('?') == -1) ? '?' : '&';
 								
-								window.location = $location + $delimiter + 'l=' + item.data('languageID') + window.location.hash;
+								window.location = location + delimiter + 'l=' + elData(listItem, 'language-id') + window.location.hash;
 							});
 						});
-						//]]>
 					</script>
 				</li>
 			{/if}
diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Language/Chooser.js b/wcfsetup/install/files/js/WoltLab/WCF/Language/Chooser.js
index caa8b06438..4e8e292643 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Language/Chooser.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Language/Chooser.js
@@ -6,19 +6,19 @@
  * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module	WoltLab/WCF/Language/Chooser
  */
-define(['Dictionary', 'Language', 'Dom/Traverse', 'Dom/Util', 'Ui/SimpleDropdown'], function(Dictionary, Language, DomTraverse, DomUtil, UiSimpleDropdown) {
+define(['Dictionary', 'Language', 'Dom/Traverse', 'Dom/Util', 'ObjectMap', 'Ui/SimpleDropdown'], function(Dictionary, Language, DomTraverse, DomUtil, ObjectMap, UiSimpleDropdown) {
 	"use strict";
 	
 	var _choosers = new Dictionary();
 	var _didInit = false;
+	var _forms = new ObjectMap();
 	
-	var _callbackDropdownToggle = null;
 	var _callbackSubmit = null;
 	
 	/**
 	 * @exports	WoltLab/WCF/Language/Chooser
 	 */
-	var LanguageChooser = {
+	return {
 		/**
 		 * Initializes a language chooser.
 		 * 
@@ -26,8 +26,8 @@ define(['Dictionary', 'Language', 'Dom/Traverse', 'Dom/Util', 'Ui/SimpleDropdown
 		 * @param	{string}					chooserId		input element id
 		 * @param	{integer}					languageId		selected language id
 		 * @param	{object<integer, object<string, string>>}	languages		data of available languages
-		 * @param							callback		
-		 * @param							allowEmptyValue		
+		 * @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)) {
@@ -50,9 +50,7 @@ define(['Dictionary', 'Language', 'Dom/Traverse', 'Dom/Util', 'Ui/SimpleDropdown
 				container.appendChild(element);
 			}
 			
-			// todo: callback
-			
-			this._initElement(chooserId, element, languageId, languages, allowEmptyValue);
+			this._initElement(chooserId, element, languageId, languages, callback, allowEmptyValue);
 		},
 		
 		/**
@@ -65,7 +63,16 @@ define(['Dictionary', 'Language', 'Dom/Traverse', 'Dom/Util', 'Ui/SimpleDropdown
 			_callbackSubmit = this._submit.bind(this);
 		},
 		
-		_initElement: function(chooserId, element, languageId, languages, allowEmptyValue) {
+		/**
+		 * Sets up DOM and event listeners for a language chooser.
+		 *
+		 * @param	{string}					chooserId		chooser id
+		 * @param	{Element}					element			chooser element
+		 * @param	{integer}					languageId		selected language id
+		 * @param	{object<integer, object<string, string>>}	languages		data of available languages
+		 * @param	{boolean}					allowEmptyValue		true if no language may be selected
+		 */
+		_initElement: function(chooserId, element, languageId, languages, callback, allowEmptyValue) {
 			var container = element.parentNode;
 			if (!container.classList.contains('inputAddon')) {
 				container = elCreate('div');
@@ -176,22 +183,21 @@ define(['Dictionary', 'Language', 'Dom/Traverse', 'Dom/Util', 'Ui/SimpleDropdown
 			UiSimpleDropdown.init(dropdownToggle);
 			
 			_choosers.set(chooserId, {
+				callback: callback,
 				dropdownMenu: dropdownMenu,
 				dropdownToggle: dropdownToggle,
 				element: element
 			});
 			
 			// bind to submit event
-			var submit = DomTraverse.parentByTag(element, 'FORM');
-			if (submit !== null) {
-				submit.addEventListener('submit', _callbackSubmit);
+			var form = DomTraverse.parentByTag(element, 'FORM');
+			if (form !== null) {
+				form.addEventListener('submit', _callbackSubmit);
 				
-				// TODO: WHAT?
-				return;
-				var chooserIds = _forms.get(submit);
+				var chooserIds = _forms.get(form);
 				if (chooserIds === undefined) {
 					chooserIds = [];
-					_forms.set(submit, chooserIds);
+					_forms.set(form, chooserIds);
 				}
 				
 				chooserIds.push(chooserId);
@@ -228,6 +234,30 @@ define(['Dictionary', 'Language', 'Dom/Traverse', 'Dom/Util', 'Ui/SimpleDropdown
 			chooser.dropdownToggle.innerHTML = listItem.firstChild.innerHTML;
 			
 			_choosers.set(chooserId, chooser);
+			
+			// execute callback
+			if (typeof chooser.callback === 'function') {
+				chooser.callback(listItem);
+			}
+		},
+		
+		/**
+		 * Inserts hidden fields for the language chooser value on submit.
+		 *
+		 * @param	{object}	event		event object
+		 */
+		_submit: function(event) {
+			var elementIds = _forms.get(event.currentTarget);
+			
+			var input;
+			for (var i = 0, length = elementIds.length; i < length; i++) {
+				input = elCreate('input');
+				input.type = 'hidden';
+				input.name = elementIds[i];
+				input.value = this.getLanguageId(elementId);
+				
+				event.currentTarget.appendChild(input);
+			}
 		},
 		
 		/**
@@ -269,6 +299,4 @@ define(['Dictionary', 'Language', 'Dom/Traverse', 'Dom/Util', 'Ui/SimpleDropdown
 			this._select(chooserId, languageId);
 		}
 	};
-	
-	return LanguageChooser;
 });