From a5423278ebf72ec29fc5637f867edc743984bad9 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 16 Jul 2012 14:44:35 +0200
Subject: [PATCH] Added JS and CSS for language choosers

---
 wcfsetup/install/files/js/WCF.js            | 100 ++++++++++++++++++++
 wcfsetup/install/files/style/dropdown.less  |   8 ++
 wcfsetup/install/files/style/layout.less    |  28 ++++++
 wcfsetup/install/files/style/userPanel.less |   4 +
 4 files changed, 140 insertions(+)

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 5d55e8e9d5..d7889adc0e 100755
--- 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 2f7cb79cc1..7c00d4c312 100644
--- 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 3a4996d53e..226f402b3d 100644
--- 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 c9684b4d8f..578d520696 100644
--- 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
-- 
2.20.1