Added JS and CSS for language choosers

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 5d55e8e9d54215a21302e50d38fa4db5d1833a60..d7889adc0e38f7417ac9b611340ed64ceced6b7e 100755 (executable)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -6012,6 +6012,106 @@ WCF.Sitemap = Class.extend({
        }
 });
 
+/**
+ * Provides a language chooser.
+ * 
+ * @param      string          containerID
+ * @param      string          inputFieldID
+ * @param      integer         languageID
+ * @param      object          languages
+ * @param      object          callback
+ */
+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
+        */
+       init: function(containerID, inputFieldID, languageID, languages, callback) {
+               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" 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"><div class="framed"><img src="' + $language.iconPath + '" alt="" class="iconFlag" /></div> <hgroup><h1>' + $language.languageName + '</h1></hgroup>').appendTo($dropdownMenu);
+                       $item.data('languageID', $languageID).click($.proxy(this._click, this));
+                       
+                       // update dropdown label
+                       if ($languageID == languageID) {
+                               this._dropdown.children('.dropdownToggle').html($item.html());
+                       }
+               }
+               
+               WCF.Dropdown.init();
+       },
+       
+       /**
+        * Handles click events.
+        * 
+        * @param       object          event
+        */
+       _click: function(event) {
+               var $item = $(event.currentTarget);
+               
+               // update input field
+               this._input.val($item.data('languageID'));
+               
+               // update dropdown label
+               this._dropdown.children('.dropdownToggle').html($item.html());
+               
+               // execute callback
+               if (this._callback !== null) {
+                       this._callback($item);
+               }
+       }
+});
+
 /**
  * Provides a toggleable sidebar with persistent visibility.
  */

diff --git a/wcfsetup/install/files/style/dropdown.less b/wcfsetup/install/files/style/dropdown.less
index 2f7cb79cc196a7615487140933eb433cbbfefe9e..7c00d4c3124562aeca12275fbe35cc60fc7658ea 100644 (file)
--- a/wcfsetup/install/files/style/dropdown.less
+++ b/wcfsetup/install/files/style/dropdown.less
@@ -139,6 +139,10 @@
                                padding: @wcfGapTiny @wcfGapMedium;
                        }
                        
+                       &.boxFlag {
+                               padding-top: 2px;
+                       }
+                       
                        > a,
                        > span {
                                clear: both;
@@ -177,4 +181,8 @@
                        display: block;
                }
        }
+       
+       .dropdownToggle {
+               cursor: pointer;
+       }
 }
\ No newline at end of file

diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 3a4996d53ec4f4f976af53f8fce224180172945c..226f402b3ded4e77dc050710381bd3389f161cb0 100644 (file)
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -160,6 +160,29 @@ img {
 .box128 { .box(128px, 14px); }
 .box256 { .box(256px, 21px); }
 
+/*
+       language selection
+*/
+.boxFlag {
+       cursor: pointer;
+       min-height: 23px;
+       padding: 0 @wcfGapTiny;
+       vertical-align: middle;
+       
+       > div {
+               float: left;
+       }
+       
+       > hgroup {
+               margin-left: 34px;
+               min-height: 23px;
+               
+               h1 {
+                       padding-top: 2px;
+               }
+       }
+}
+
 .boxHeadline {
        margin-top: @wcfGapMedium;
        
@@ -198,6 +221,11 @@ img {
 .icon128 { .icon(128px); }
 .icon256 { .icon(256px); }
 
+.iconFlag {
+       height: 15px;
+       width: 24px;
+}
+
 dl.dataList {
        dt {
                float: left;

diff --git a/wcfsetup/install/files/style/userPanel.less b/wcfsetup/install/files/style/userPanel.less
index c9684b4d8f9477f1e5308a85a368778e8c2a3c82..578d5206963b2630b164add801178d3317f23318 100644 (file)
--- a/wcfsetup/install/files/style/userPanel.less
+++ b/wcfsetup/install/files/style/userPanel.less
@@ -79,5 +79,9 @@
                background-position: 97% center;
                background-repeat: no-repeat;
                padding-right: 15px !important;
+               
+               > hgroup > h1 {
+                       color: @wcfUserPanelColor;
+               }
        }
 }
\ No newline at end of file