Fix issues with multiple media manager dialogs on same page

diff --git a/com.woltlab.wcf/templates/mediaManager.tpl b/com.woltlab.wcf/templates/mediaManager.tpl
index d3f3563abb452f70cca1144973955589b461bc1f..ea78c3cc760a9f303a6c6e502a39fe2e5845c284 100644 (file)
--- 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 95fe0041b0eb27f1b4059ef980455779b58b72bc..189b3b4f57f4984ad5ad3e8d39d7b84d280ea03e 100644 (file)
--- 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 d3f3563abb452f70cca1144973955589b461bc1f..ea78c3cc760a9f303a6c6e502a39fe2e5845c284 100644 (file)
--- 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 3e1d561137b66e85b4b3445c13b4fe42dc5d3610..519ef8966a298b9a59d7f0000e4e377db7927c71 100644 (file)
--- 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 db2181b40002b734430b5e9d2664c0ec6051cdcc..aa181dfe2b4d93b27d7e16b2bfe5ce10eb98bdcf 100644 (file)
--- 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 4db5b2c7ee9575211d98084861a914fbde827b99..9ad00b9e26d27cf692f1f53eebc4bc58a937ebbe 100644 (file)
--- 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 e066ba6e062df12997d90ed4a20c2fb68b62946f..ee1d0026b59968b01f9c9a527df9da4875d386cd 100644 (file)
--- 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 52843b635644e4f76ad06017676c783945ae536e..11e22dd20d62e28af91fa834d14018039f37fdce 100644 (file)
--- 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 216c999925a993e11d6d61e3e48de29056239699..434856cb8f0d88f5027d9c04fa5dc0db424e15e1 100644 (file)
--- 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;