Complete new LanguageChooser implementation

diff --git a/com.woltlab.wcf/templates/messageFormMultilingualism.tpl b/com.woltlab.wcf/templates/messageFormMultilingualism.tpl
index 6c2c330cb42d8d4b26f38261db627b65207e1c75..353f09ff659de13ff2bb8056301b390c90ba9bd8 100644 (file)
--- 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 0c4a0f43933b2a8ec5ada3c0966b5bb4e63b84b7..92f53f752e2805f78a015279154216c31d7abc40 100644 (file)
--- 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 caa8b064382ace247f8a0e5becca0b0e9e5665f7..4e8e292643348ba28227f5652f63470d67ac6cef 100644 (file)
--- 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;
 });