Added 'remove media' button
authorMarcel Werk <burntime@woltlab.com>
Tue, 26 Jul 2016 17:15:36 +0000 (19:15 +0200)
committerMarcel Werk <burntime@woltlab.com>
Tue, 26 Jul 2016 17:15:36 +0000 (19:15 +0200)
wcfsetup/install/files/js/WoltLab/WCF/Media/Manager/Select.js

index 4e0924df1feae4707b8b69a11682da7c1ddc877d..fcc44dc8d28a7212610054eac31e7e5945246554 100644 (file)
@@ -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', 'ObjectMap', 'Ui/Dialog', 'WoltLab/WCF/Media/Manager/Base'], function(Core, DomTraverse, Language, ObjectMap, UiDialog, MediaManagerBase) {
+define(['Core', 'Dom/Traverse', 'Dom/Util', 'Language', 'ObjectMap', 'Ui/Dialog', 'WoltLab/WCF/Media/Manager/Base'], function(Core, DomTraverse, DomUtil, Language, ObjectMap, UiDialog, MediaManagerBase) {
        "use strict";
        
        /**
@@ -30,6 +30,18 @@ define(['Core', 'Dom/Traverse', 'Language', 'ObjectMap', 'Ui/Dialog', 'WoltLab/W
                                        this._buttons[i].addEventListener(WCF_CLICK_EVENT, this._click.bind(this));
                                        
                                        this._storeElements.set(button, storeElement);
+                                       
+                                       // add remove button
+                                       var removeButton = elCreate('p');
+                                       removeButton.className = 'button';
+                                       DomUtil.insertAfter(removeButton, button);
+                                       
+                                       var icon = elCreate('span');
+                                       icon.className = 'icon icon16 fa-times';
+                                       removeButton.appendChild(icon);
+                                       
+                                       if (!storeElement.value) elHide(removeButton);
+                                       removeButton.addEventListener(WCF_CLICK_EVENT, this._removeMedia.bind(this));
                                }
                        }
                }
@@ -84,6 +96,9 @@ define(['Core', 'Dom/Traverse', 'Language', 'ObjectMap', 'Ui/Dialog', 'WoltLab/W
                                }
                        }
                        
+                       // show remove button
+                       elShow(this._activeButton.nextElementSibling);
+                       
                        UiDialog.close('mediaManager');
                },
                
@@ -91,6 +106,7 @@ define(['Core', 'Dom/Traverse', 'Language', 'ObjectMap', 'Ui/Dialog', 'WoltLab/W
                 * @see WoltLab/WCF/Media/Manager/Base#_click
                 */
                _click: function(event) {
+                       event.preventDefault();
                        this._activeButton = event.currentTarget;
                        
                        MediaManagerSelect._super.prototype._click.call(this, event);
@@ -137,6 +153,28 @@ define(['Core', 'Dom/Traverse', 'Language', 'ObjectMap', 'Ui/Dialog', 'WoltLab/W
                        elData(icon, 'object-id', media.mediaID);
                        elAttr(icon, 'title', Language.get('wcf.media.button.choose'));
                        a.appendChild(icon);
+               },
+               
+               /**
+                * Handles clicking on the remove button.
+                *
+                * @param       {Event}         event           click event
+                */
+               _removeMedia: function(event) {
+                       event.preventDefault();
+                       
+                       var removeButton = event.currentTarget;
+                       elHide(removeButton);
+                       
+                       var button = removeButton.previousElementSibling;
+                       elById(elData(button, 'store')).value = 0;
+                       var display = elData(button, 'display');
+                       if (display) {
+                               var displayElement = elById(display);
+                               if (displayElement) {
+                                       displayElement.innerHTML = '';
+                               }
+                       }
                }
        });