Mark selected media in MediaManagerSelect dialog

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 229540040e50312e7ed70f7b41073f1cb56011b3..0a3ed32e13a0e34224d2341280da3882e1d86607 100644 (file)
--- 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 58a72dbc141be41f122d7bef98a757b35865e5c4..1d72e49e6c53a2f1d014c625eb5f273d91d8b468 100644 (file)
--- 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;