Unified language chooser
authorMarcel Werk <burntime@woltlab.com>
Wed, 15 Nov 2017 17:29:30 +0000 (18:29 +0100)
committerMarcel Werk <burntime@woltlab.com>
Wed, 15 Nov 2017 17:29:36 +0000 (18:29 +0100)
com.woltlab.wcf/templates/register.tpl
com.woltlab.wcf/templates/settings.tpl

index 2c49cd1529e6fcca29ef9ef777497b99d38b3f15..99399df2124eedbe9a596b1e2d230c6d01951643 100644 (file)
                        
                        <dl>
                                <dt><label for="languageID">{lang}wcf.user.language{/lang}</label></dt>
-                               <dd>
-                                       <select id="languageID" name="languageID">
-                                               {foreach from=$availableLanguages item=language}
-                                                       <option value="{@$language->languageID}"{if $language->languageID == $languageID} selected{/if}>{$language}</option>
-                                               {/foreach}
-                                       </select>
-                                       <small>{lang}wcf.user.language.description{/lang}</small>
+                               <dd id="languageIDContainer">
+                                       <script data-relocate="true">
+                                               $(function() {
+                                                       var $languages = {
+                                                               {implode from=$availableLanguages item=language}
+                                                               '{@$language->languageID}': {
+                                                                       iconPath: '{@$language->getIconPath()|encodeJS}',
+                                                                       languageName: '{@$language|encodeJS}'
+                                                               }
+                                                               {/implode}
+                                                       };
+                                                       
+                                                       require(['WoltLabSuite/Core/Language/Chooser'], function(LanguageChooser) {
+                                                               LanguageChooser.init('languageIDContainer', 'languageID', {@$languageID}, $languages);
+                                                               
+                                                               var small = elCreate('small');
+                                                               small.innerHTML = '{lang}wcf.user.language.description{/lang}';
+                                                               elById('languageIDContainer').appendChild(small);
+                                                       });
+                                               });
+                                       </script>
+                                       <noscript>
+                                               <select name="languageID" id="languageID">
+                                                       {foreach from=$availableLanguages item=language}
+                                                               <option value="{@$language->languageID}"{if $language->languageID == $languageID} selected{/if}>{$language}</option>
+                                                       {/foreach}
+                                               </select>
+                                       </noscript>
                                </dd>
                        </dl>
                        
index a453533b2d948df2d669dc38b8df79b3560f9e39..87992dcf088dd415cccb638f6a2e15be348c9abf 100644 (file)
                                                                        {/implode}
                                                                };
                                                                
-                                                               new WCF.Language.Chooser('languageIDContainer', 'languageID', {@$languageID}, $languages);
+                                                               require(['WoltLabSuite/Core/Language/Chooser'], function(LanguageChooser) {
+                                                                       LanguageChooser.init('languageIDContainer', 'languageID', {@$languageID}, $languages);
+                                                                       
+                                                                       var small = elCreate('small');
+                                                                       small.innerHTML = '{lang}wcf.user.language.description{/lang}';
+                                                                       elById('languageIDContainer').appendChild(small);
+                                                               });
                                                        });
                                                </script>
                                                <noscript>