From 4151d26e611bf263c5216809fc803d213ad5a13d Mon Sep 17 00:00:00 2001 From: Matthias Schmidt Date: Fri, 25 Dec 2015 11:09:54 +0100 Subject: [PATCH] Complete new LanguageChooser implementation --- .../templates/messageFormMultilingualism.tpl | 16 ++--- com.woltlab.wcf/templates/pageHeaderUser.tpl | 22 +++---- .../files/js/WoltLab/WCF/Language/Chooser.js | 64 +++++++++++++------ 3 files changed, 63 insertions(+), 39 deletions(-) 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 @@ {/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}
    • {/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 * @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>} 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>} 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; }); -- 2.20.1