From fa9093a1506562f3e3ec9293883c6e27fd6217b3 Mon Sep 17 00:00:00 2001
From: Matthias Schmidt <gravatronics@live.com>
Date: Fri, 1 Jan 2016 08:25:58 +0100
Subject: [PATCH] Mark selected media in MediaManagerSelect dialog

---
 .../js/WoltLab/WCF/Media/Manager/Select.js    | 25 ++++++++++++++++---
 wcfsetup/install/files/style/ui/media.scss    | 18 +++++++++++++
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Media/Manager/Select.js b/wcfsetup/install/files/js/WoltLab/WCF/Media/Manager/Select.js
index 229540040e..0a3ed32e13 100644
--- a/wcfsetup/install/files/js/WoltLab/WCF/Media/Manager/Select.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Media/Manager/Select.js
@@ -6,7 +6,7 @@
  * @license	GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module	WoltLab/WCF/Media/Manager/Select
  */
-define(['Core', 'Dom/Traverse', 'Language', 'Ui/Dialog', 'WoltLab/WCF/Media/Manager/Base'], function(Core, DomTraverse, Language, UiDialog, MediaManagerBase) {
+define(['Core', 'Dom/Traverse', 'Language', 'ObjectMap', 'Ui/Dialog', 'WoltLab/WCF/Media/Manager/Base'], function(Core, DomTraverse, Language, ObjectMap, UiDialog, MediaManagerBase) {
 	"use strict";
 	
 	/**
@@ -17,6 +17,8 @@ define(['Core', 'Dom/Traverse', 'Language', 'Ui/Dialog', 'WoltLab/WCF/Media/Mana
 		
 		this._activeButton = null;
 		this._buttons = elByClass(this._options.buttonClass || 'jsMediaSelectButton');
+		this._storeElements = new ObjectMap();
+		
 		for (var i = 0, length = this._buttons.length; i < length; i++) {
 			var button = this._buttons[i];
 			
@@ -26,6 +28,8 @@ define(['Core', 'Dom/Traverse', 'Language', 'Ui/Dialog', 'WoltLab/WCF/Media/Mana
 				var storeElement = elById(store);
 				if (storeElement && storeElement.tagName === 'INPUT') {
 					this._buttons[i].addEventListener('click', this._click.bind(this));
+					
+					this._storeElements.set(button, storeElement);
 				}
 			}
 		}
@@ -71,11 +75,12 @@ define(['Core', 'Dom/Traverse', 'Language', 'Ui/Dialog', 'WoltLab/WCF/Media/Mana
 			if (display) {
 				var displayElement = elById(display);
 				if (displayElement) {
-					// TODO: add visual representation of the media file to display element
-					
 					if (media.isImage) {
 						displayElement.innerHTML = '<img src="' + media.smallThumbnailLink + '" alt="' + media.altText + '" />';
 					}
+					else {
+						// TODO: add visual representation of the non-image media file
+					}
 				}
 			}
 			
@@ -90,7 +95,19 @@ define(['Core', 'Dom/Traverse', 'Language', 'Ui/Dialog', 'WoltLab/WCF/Media/Mana
 			
 			MediaManagerSelect._super.prototype._click.call(this, event);
 			
-			// TODO: highlight selected medium?
+			if (!this._mediaManagerMediaList) return;
+			
+			var storeElement = this._storeElements.get(this._activeButton);
+			var listItems = DomTraverse.childrenByTag(this._mediaManagerMediaList, 'LI'), listItem;
+			for (var i = 0, length = listItems.length; i < length; i++) {
+				listItem = listItems[i];
+				if (storeElement.value && storeElement.value == elData(listItem, 'object-id')) {
+					listItem.classList.add('jsSelected');
+				}
+				else {
+					listItem.classList.remove('jsSelected');
+				}
+			}
 		},
 		
 		/**
diff --git a/wcfsetup/install/files/style/ui/media.scss b/wcfsetup/install/files/style/ui/media.scss
index 58a72dbc14..1d72e49e6c 100644
--- a/wcfsetup/install/files/style/ui/media.scss
+++ b/wcfsetup/install/files/style/ui/media.scss
@@ -48,6 +48,24 @@
 			}
 		}
 		
+		&.jsSelected {
+			// @todo colors
+			> .mediaInformation,
+			> .buttonGroupNavigation {
+				background-color: fade-out(green, 10%);
+				color: white;
+				
+				a {
+					color: white;
+				}
+				
+				.icon {
+					color: white;
+					text-shadow: none;
+				}
+			}
+		}
+		
 		&.uploadFailed {
 			cursor: pointer;
 			
-- 
2.20.1