From 5c1cc5ff6d0a8442fcdabebf1a5d8ba0b341fbc4 Mon Sep 17 00:00:00 2001
From: Matthias Schmidt <gravatronics@live.com>
Date: Sun, 29 Jan 2017 13:37:18 +0100
Subject: [PATCH] Fix issues with multiple media manager dialogs on same page

---
 com.woltlab.wcf/templates/mediaManager.tpl    |  10 +-
 .../files/acp/templates/mediaListItems.tpl    |   4 +-
 .../files/acp/templates/mediaManager.tpl      |  10 +-
 .../WoltLabSuite/Core/Media/Manager/Base.js   | 100 ++++++++++--------
 .../WoltLabSuite/Core/Media/Manager/Editor.js |   2 +-
 .../WoltLabSuite/Core/Media/Manager/Search.js |   9 +-
 .../WoltLabSuite/Core/Media/Manager/Select.js |   2 +-
 .../files/js/WoltLabSuite/Core/Ui/Dialog.js   |   9 +-
 wcfsetup/install/files/style/ui/media.scss    |   4 +-
 9 files changed, 86 insertions(+), 64 deletions(-)

diff --git a/com.woltlab.wcf/templates/mediaManager.tpl b/com.woltlab.wcf/templates/mediaManager.tpl
index d3f3563abb..ea78c3cc76 100644
--- a/com.woltlab.wcf/templates/mediaManager.tpl
+++ b/com.woltlab.wcf/templates/mediaManager.tpl
@@ -1,17 +1,17 @@
-<div class="inputAddon" id="mediaManagerSearch">
-	<input type="text" id="mediaManagerSearchField" placeholder="{lang}wcf.media.search.placeholder{/lang}">
+<div class="inputAddon mediaManagerSearch">
+	<input type="text" class="mediaManagerSearchField" placeholder="{lang}wcf.media.search.placeholder{/lang}">
 	<span class="inputSuffix">
-		<span id="mediaManagerSearchCancelButton" class="icon icon16 fa-times pointer jsTooltip" title="{lang}wcf.media.search.cancel{/lang}"></span>
+		<span class="icon icon16 fa-times mediaManagerSearchCancelButton pointer jsTooltip" title="{lang}wcf.media.search.cancel{/lang}"></span>
 	</span>
 </div>
 
 {if $__wcf->session->getPermission('admin.content.cms.canManageMedia')}
-	<div id="mediaManagerMediaUploadButton"></div>
+	<div class="mediaManagerMediaUploadButton"></div>
 {/if}
 
 <div class="jsClipboardContainer" data-type="com.woltlab.wcf.media">
 	<input type="checkbox" class="jsClipboardMarkAll" style="display: none;">
-	<ul id="mediaManagerMediaList">
+	<ul class="mediaManagerMediaList">
 		{include file='mediaListItems'}
 	</ul>
 </div>
diff --git a/wcfsetup/install/files/acp/templates/mediaListItems.tpl b/wcfsetup/install/files/acp/templates/mediaListItems.tpl
index 95fe0041b0..189b3b4f57 100644
--- a/wcfsetup/install/files/acp/templates/mediaListItems.tpl
+++ b/wcfsetup/install/files/acp/templates/mediaListItems.tpl
@@ -3,7 +3,7 @@
 		<div class="mediaThumbnail">
 			{@$media->getElementTag(144)}
 		</div>
-
+		
 		{assign var='__mediaTitle' value=$media->filename}
 		{if $media->title}
 			{assign var='__mediaTitle' value=$media->title}
@@ -11,7 +11,7 @@
 		<div class="mediaInformation">
 			<p class="mediaTitle">{$__mediaTitle}</p>
 		</div>
-
+		
 		<nav class="jsMobileNavigation buttonGroupNavigation">
 			<ul class="buttonList iconList">
 				<li class="mediaCheckbox">
diff --git a/wcfsetup/install/files/acp/templates/mediaManager.tpl b/wcfsetup/install/files/acp/templates/mediaManager.tpl
index d3f3563abb..ea78c3cc76 100644
--- a/wcfsetup/install/files/acp/templates/mediaManager.tpl
+++ b/wcfsetup/install/files/acp/templates/mediaManager.tpl
@@ -1,17 +1,17 @@
-<div class="inputAddon" id="mediaManagerSearch">
-	<input type="text" id="mediaManagerSearchField" placeholder="{lang}wcf.media.search.placeholder{/lang}">
+<div class="inputAddon mediaManagerSearch">
+	<input type="text" class="mediaManagerSearchField" placeholder="{lang}wcf.media.search.placeholder{/lang}">
 	<span class="inputSuffix">
-		<span id="mediaManagerSearchCancelButton" class="icon icon16 fa-times pointer jsTooltip" title="{lang}wcf.media.search.cancel{/lang}"></span>
+		<span class="icon icon16 fa-times mediaManagerSearchCancelButton pointer jsTooltip" title="{lang}wcf.media.search.cancel{/lang}"></span>
 	</span>
 </div>
 
 {if $__wcf->session->getPermission('admin.content.cms.canManageMedia')}
-	<div id="mediaManagerMediaUploadButton"></div>
+	<div class="mediaManagerMediaUploadButton"></div>
 {/if}
 
 <div class="jsClipboardContainer" data-type="com.woltlab.wcf.media">
 	<input type="checkbox" class="jsClipboardMarkAll" style="display: none;">
-	<ul id="mediaManagerMediaList">
+	<ul class="mediaManagerMediaList">
 		{include file='mediaListItems'}
 	</ul>
 </div>
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js
index 3e1d561137..519ef8966a 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js
@@ -22,6 +22,8 @@ define(
 {
 	"use strict";
 	
+	var _mediaManagerCounter = 0;
+	
 	/**
 	 * @constructor
 	 */
@@ -32,12 +34,14 @@ define(
 			minSearchLength: 3
 		}, options);
 		
+		this._id = 'mediaManager' + _mediaManagerCounter++;
 		this._listItems = new Dictionary();
 		this._media = new Dictionary();
 		this._mediaCache = null;
 		this._mediaManagerMediaList = null;
 		this._search = null;
 		this._forceClipboard = false;
+		this._hadInitiallyMarkedItems = false;
 		
 		if (Permission.get('admin.content.cms.canManageMedia')) {
 			this._mediaEditor = new MediaEditor(this);
@@ -119,46 +123,7 @@ define(
 				}
 			}
 			
-			this._mediaManagerMediaList = elById('mediaManagerMediaList');
-			
-			// store list items locally
-			var listItems = DomTraverse.childrenByTag(this._mediaManagerMediaList, 'LI');
-			for (var i = 0, length = listItems.length; i < length; i++) {
-				var listItem = listItems[i];
-				
-				this._listItems.set(~~elData(listItem, 'object-id'), listItem);
-			}
-			
-			if (Permission.get('admin.content.cms.canManageMedia')) {
-				new MediaUpload('mediaManagerMediaUploadButton', 'mediaManagerMediaList', {
-					mediaManager: this
-				});
-				
-				var deleteAction = new WCF.Action.Delete('wcf\\data\\media\\MediaAction', '.mediaFile');
-				deleteAction._didTriggerEffect = function(element) {
-					this.removeMedia(elData(element[0], 'object-id'), true);
-				}.bind(this);
-			}
-			
-			if (Permission.get('admin.content.cms.canManageMedia') || this._forceClipboard) {
-				EventHandler.add('com.woltlab.wcf.clipboard', 'com.woltlab.wcf.media', this._clipboardAction.bind(this));
-				
-				Clipboard.setup({
-					hasMarkedItems: data.returnValues.hasMarkedItems ? true : false,
-					pageClassName: 'menuManagerDialog-' + this.getMode()
-				});
-			}
-			else {
-				this._removeClipboardCheckboxes();
-			}
-			
-			this._search = new MediaManagerSearch(this);
-			
-			if (!listItems.length) {
-				this._search.hideSearch();
-			}
-			
-			this._dialogShow();
+			this._hadInitiallyMarkedItems = data.returnValues.hasMarkedItems;
 		},
 		
 		/**
@@ -168,7 +133,7 @@ define(
 		 */
 		_dialogSetup: function() {
 			return {
-				id: 'mediaManager',
+				id: this._id,
 				options: {
 					onClose: this._dialogClose.bind(this),
 					onShow: this._dialogShow.bind(this),
@@ -192,7 +157,47 @@ define(
 		 * Is called if the media manager dialog is shown.
 		 */
 		_dialogShow: function() {
-			if (!this._mediaManagerMediaList) return;
+			if (!this._mediaManagerMediaList) {
+				this._mediaManagerMediaList = elByClass('mediaManagerMediaList', UiDialog.getDialog(this).dialog)[0];
+				
+				// store list items locally
+				var listItems = DomTraverse.childrenByTag(this._mediaManagerMediaList, 'LI');
+				for (var i = 0, length = listItems.length; i < length; i++) {
+					var listItem = listItems[i];
+					
+					this._listItems.set(~~elData(listItem, 'object-id'), listItem);
+				}
+				
+				if (Permission.get('admin.content.cms.canManageMedia')) {
+					var uploadButton = elByClass('mediaManagerMediaUploadButton', UiDialog.getDialog(this).dialog)[0];
+					new MediaUpload(DomUtil.identify(uploadButton), DomUtil.identify(this._mediaManagerMediaList), {
+						mediaManager: this
+					});
+					
+					var deleteAction = new WCF.Action.Delete('wcf\\data\\media\\MediaAction', '.mediaFile');
+					deleteAction._didTriggerEffect = function(element) {
+						this.removeMedia(elData(element[0], 'object-id'), true);
+					}.bind(this);
+				}
+				
+				if (Permission.get('admin.content.cms.canManageMedia') || this._forceClipboard) {
+					EventHandler.add('com.woltlab.wcf.clipboard', 'com.woltlab.wcf.media', this._clipboardAction.bind(this));
+					
+					Clipboard.setup({
+						hasMarkedItems: this._hadInitiallyMarkedItems ? true : false,
+						pageClassName: 'menuManagerDialog-' + this.getMode()
+					});
+				}
+				else {
+					this._removeClipboardCheckboxes();
+				}
+				
+				this._search = new MediaManagerSearch(this);
+				
+				if (!listItems.length) {
+					this._search.hideSearch();
+				}
+			}
 			
 			// only show media clipboard if editor is open
 			if (Permission.get('admin.content.cms.canManageMedia') || this._forceClipboard) {
@@ -210,7 +215,7 @@ define(
 				throw new Error("You are not allowed to edit media files.");
 			}
 			
-			UiDialog.close('mediaManager');
+			UiDialog.close(this);
 			
 			this._mediaEditor.edit(this._media.get(~~elData(event.currentTarget, 'object-id')));
 		},
@@ -323,6 +328,15 @@ define(
 			}
 		},
 		
+		/**
+		 * Returns the media manager dialog element.
+		 * 
+		 * @return	{Element}	media manager dialog
+		 */
+		getDialog: function() {
+			return UiDialog.getDialog(this).dialog;
+		},
+		
 		/**
 		 * Returns the mode of the media manager.
 		 *
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js
index db2181b400..aa181dfe2b 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js
@@ -22,7 +22,7 @@ define(['Core', 'Dictionary', 'Dom/Traverse', 'Language', 'Ui/Dialog', 'WoltLabS
 		
 		this._forceClipboard = true;
 		this._activeButton = null;
-		this._buttons = elByClass(this._options.buttonClass || 'jsMediaEditorButton');
+		this._buttons = elByClass(this._options.buttonClass || 'jsMediaEditorButton', this._options.editor.core.toolbar()[0]);
 		for (var i = 0, length = this._buttons.length; i < length; i++) {
 			this._buttons[i].addEventListener(WCF_CLICK_EVENT, this._click.bind(this));
 		}
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Search.js
index 4db5b2c7ee..9ad00b9e26 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Search.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Search.js
@@ -16,10 +16,11 @@ define(['Ajax', 'Core', 'Dom/Traverse', 'Dom/Util', 'EventKey', 'Language', 'Ui/
 		this._mediaManager = mediaManager;
 		this._searchMode = false;
 		
-		this._input = elById('mediaManagerSearchField');
+		this._searchContainer = elByClass('mediaManagerSearch', mediaManager.getDialog())[0];
+		this._input = elByClass('mediaManagerSearchField', mediaManager.getDialog())[0];
 		this._input.addEventListener('keypress', this._keyPress.bind(this));
 		
-		this._cancelButton = elById('mediaManagerSearchCancelButton');
+		this._cancelButton = elByClass('mediaManagerSearchCancelButton', mediaManager.getDialog())[0];
 		this._cancelButton.addEventListener(WCF_CLICK_EVENT, this._cancelSearch.bind(this));
 	}
 	MediaManagerSearch.prototype = {
@@ -111,7 +112,7 @@ define(['Ajax', 'Core', 'Dom/Traverse', 'Dom/Util', 'EventKey', 'Language', 'Ui/
 		 * Hides the media search.
 		 */
 		hideSearch: function() {
-			elHide(elById('mediaManagerSearch'));
+			elHide(this._searchContainer);
 		},
 		
 		/**
@@ -125,7 +126,7 @@ define(['Ajax', 'Core', 'Dom/Traverse', 'Dom/Util', 'EventKey', 'Language', 'Ui/
 		 * Shows the media search.
 		 */
 		showSearch: function() {
-			elShow(elById('mediaManagerSearch'));
+			elShow(this._searchContainer);
 		}
 	};
 	
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js
index e066ba6e06..ee1d0026b5 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Select.js
@@ -106,7 +106,7 @@ define(['Core', 'Dom/Traverse', 'Dom/Util', 'Language', 'ObjectMap', 'Ui/Dialog'
 			// show remove button
 			elShow(this._activeButton.nextElementSibling);
 			
-			UiDialog.close('mediaManager');
+			UiDialog.close(this);
 		},
 		
 		/**
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
index 52843b6356..11e22dd20d 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Dialog.js
@@ -604,10 +604,17 @@ define(
 		/**
 		 * Returns the dialog data for given element id.
 		 * 
-		 * @param	{string}	id	element id
+		 * @param	{(string|object)}	id	element id or callback object
 		 * @return	{(object|undefined)}	dialog data or undefined if element id is unknown
 		 */
 		getDialog: function(id) {
+			if (typeof id === 'object') {
+				var dialogData = _dialogObjects.get(id);
+				if (dialogData !== undefined) {
+					id = dialogData.id;
+				}
+			}
+			
 			return _dialogs.get(id);
 		},
 		
diff --git a/wcfsetup/install/files/style/ui/media.scss b/wcfsetup/install/files/style/ui/media.scss
index 216c999925..434856cb8f 100644
--- a/wcfsetup/install/files/style/ui/media.scss
+++ b/wcfsetup/install/files/style/ui/media.scss
@@ -1,4 +1,4 @@
-#mediaManagerMediaUploadButton > .button {
+.mediaManagerMediaUploadButton > .button {
 	margin: 0;
 	text-align: center;
 	width: 100%;
@@ -8,7 +8,7 @@
 	}
 }
 
-#mediaManagerMediaList {
+.mediaManagerMediaList {
 	font-size: 0;
 	margin-top: 5px;
 	
-- 
2.20.1