[TASK] Followup improve "Overwrite files" message 82/41582/6
authorFrans Saris <franssaris@gmail.com>
Fri, 17 Jul 2015 16:23:22 +0000 (18:23 +0200)
committerFrans Saris <franssaris@gmail.com>
Sat, 18 Jul 2015 14:41:51 +0000 (16:41 +0200)
Make it possible to use exiting file when uploading files directly in
content element. Finetuned the handling of existing files + loading
bar behavior. And make the modal behave correct with multiple files.

Resolves: #68235
Releases: master
Change-Id: I2b307dd0e90e38ad58770b3fa28425c747b5c05b
Reviewed-on: http://review.typo3.org/41582
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Reviewed-by: Susanne Moog <typo3@susannemoog.de>
Tested-by: Susanne Moog <typo3@susannemoog.de>
typo3/sysext/backend/Resources/Public/JavaScript/DragUploader.js
typo3/sysext/backend/Resources/Public/JavaScript/Modal.js
typo3/sysext/lang/locallang_core.xlf

index 058893e..312bc05 100644 (file)
@@ -31,7 +31,8 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'moment', 'nprogress', 'TYPO
        var actions = {
                OVERRIDE: 'replace',
                RENAME: 'changeName',
-               SKIP: 'cancel'
+               SKIP: 'cancel',
+               USE_EXISTING: 'useExisting'
        };
 
        /*
@@ -45,7 +46,8 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'moment', 'nprogress', 'TYPO
                me.$element = $(element);
                me.$trigger = $(me.$element.data('dropzone-trigger'));
                me.$dropzone = $('<div />').addClass('dropzone').hide();
-               if (me.$element.data('file-irre-object') && me.$element.nextAll(me.$element.data('dropzone-target')).length !== 0) {
+               me.irreObjectUid = me.$element.data('file-irre-object');
+               if (me.irreObjectUid && me.$element.nextAll(me.$element.data('dropzone-target')).length !== 0) {
                        me.dropZoneInsertBefore = true;
                        me.$dropzone.insertBefore(me.$element.data('dropzone-target'));
                } else {
@@ -110,8 +112,6 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'moment', 'nprogress', 'TYPO
                me.processFiles = function(files) {
                        me.queueLength = files.length;
 
-                       // ask user if we should override files
-                       var override = false;
                        if (!me.$fileList.is(':visible')) {
                                me.$fileList.show();
                        }
@@ -119,48 +119,43 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'moment', 'nprogress', 'TYPO
                        NProgress.start();
                        percentagePerFile = 1 / files.length;
 
-                       // Add each file to queue and start upload
+                       // Check for each file if is already exist before adding it to the queue
                        var ajaxCalls = [];
                        $.each(files, function(i, file) {
-                               if (typeof askForOverride[i] === 'undefined') {
-                                       // check if the file exists
-                                       ajaxCalls[i] = $.ajax({
-                                               url: TYPO3.settings.ajaxUrls['TYPO3_tcefile::fileExists'],
-                                               data: {
-                                                       fileName: file.name,
-                                                       fileTarget: me.target
-                                               },
-                                               cache: false,
-                                               success: function(response) {
-                                                       var fileExists = typeof response.result !== 'undefined';
-                                                       if (fileExists) {
-                                                               askForOverride[i] = {
-                                                                       original: response.result,
-                                                                       uploaded: file,
-                                                                       action: actions.SKIP
-                                                               };
-                                                               NProgress.inc(percentagePerFile);
-                                                       } else {
-                                                               new FileQueueItem(me, file, 'cancel');
-                                                       }
+
+                               ajaxCalls[i] = $.ajax({
+                                       url: TYPO3.settings.ajaxUrls['TYPO3_tcefile::fileExists'],
+                                       data: {
+                                               fileName: file.name,
+                                               fileTarget: me.target
+                                       },
+                                       cache: false,
+                                       success: function(response) {
+                                               var fileExists = typeof response.result !== 'undefined';
+                                               if (fileExists) {
+                                                       askForOverride.push({
+                                                               original: response.result,
+                                                               uploaded: file,
+                                                               action: me.irreObjectUid ? actions.USE_EXISTING : actions.SKIP
+                                                       });
+                                                       NProgress.inc(percentagePerFile);
+                                               } else {
+                                                       new FileQueueItem(me, file, 'cancel');
                                                }
-                                       });
-                               } else {
-                                       if (askForOverride[i].action !== actions.SKIP) {
-                                               new FileQueueItem(me, askForOverride[i].uploaded, askForOverride[i].action);
                                        }
-                               }
-                       });
-                       if (ajaxCalls.length) {
-                               $.when.apply($, ajaxCalls).done(function () {
-                                       me.drawOverrideModal();
-                                       NProgress.done();
                                });
-                       }
+                       });
+
+                       $.when.apply($, ajaxCalls).done(function () {
+                               me.drawOverrideModal();
+                               NProgress.done();
+                       });
+
                        delete ajaxCalls;
                        me.$fileInput.val('');
                };
 
+
                me.fileInDropzone = function(event) {
                        me.$dropzone.addClass('drop-status-ok');
                };
@@ -228,7 +223,6 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'moment', 'nprogress', 'TYPO
                        if (me.queueLength > 0) {
                                me.queueLength--;
                                if (me.queueLength === 0) {
-                                       NProgress.done();
                                        $.ajax({
                                                url: TYPO3.settings.ajaxUrls['DocumentTemplate::getFlashMessages'],
                                                cache: false,
@@ -241,8 +235,6 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'moment', 'nprogress', 'TYPO
                                                        }
                                                }
                                        });
-                               } else {
-                                       NProgress.inc(percentagePerFile);
                                }
                        }
                };
@@ -252,26 +244,14 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'moment', 'nprogress', 'TYPO
                        if (amountOfItems === 0) {
                                return;
                        }
-                       var $records = $('<p/>').text(TYPO3.lang['file_upload.existingfiles.description']).append(
-                               $('<table/>', {class: 'table table-striped table-fixed'}).append(
+                       var $modalContent = $('<div/>').append(
+                               $('<p/>').text(TYPO3.lang['file_upload.existingfiles.description']),
+                               $('<table/>', {class: 'table table-striped'}).append(
                                        $('<tr />').append(
                                                $('<th/>'),
                                                $('<th/>').text(TYPO3.lang['file_upload.header.originalFile']),
                                                $('<th/>').text(TYPO3.lang['file_upload.header.uploadedFile']),
                                                $('<th/>').text(TYPO3.lang['file_upload.header.action'])
-                                       ),
-                                       $('<tr/>').append(
-                                               $('<td/>', {colspan: 3}).append(
-                                                       $('<label/>').text(TYPO3.lang['file_upload.actions.all.label'])
-                                               ),
-                                               $('<td/>').append(
-                                                       $('<select/>', {class: 'form-control t3js-actions-all'}).append(
-                                                               $('<option/>').val('').text(TYPO3.lang['file_upload.actions.all.empty']),
-                                                               $('<option/>').val(actions.SKIP).text(TYPO3.lang['file_upload.actions.all.skip']),
-                                                               $('<option/>').val(actions.RENAME).text(TYPO3.lang['file_upload.actions.all.rename']),
-                                                               $('<option/>').val(actions.OVERRIDE).text(TYPO3.lang['file_upload.actions.all.override'])
-                                                       )
-                                               )
                                        )
                                )
                        );
@@ -280,7 +260,7 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'moment', 'nprogress', 'TYPO
                                var $record = $('<tr />').append(
                                        $('<td />').append(
                                                (askForOverride[i].original.thumbUrl !== ''
-                                                       ? $('<img />', {src: askForOverride[i].original.thumbUrl})
+                                                       ? $('<img />', {src: askForOverride[i].original.thumbUrl, height: 40})
                                                        : $('<span />', {class: askForOverride[i].original.iconClasses})
                                                )
                                        ),
@@ -294,16 +274,17 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'moment', 'nprogress', 'TYPO
                                        ),
                                        $('<td />').append(
                                                $('<select />', {class: 'form-control t3js-actions', 'data-override': i}).append(
+                                                       (me.irreObjectUid ? $('<option/>').val(actions.USE_EXISTING).text(TYPO3.lang['file_upload.actions.use_existing']) : ''),
                                                        $('<option />').val(actions.SKIP).text(TYPO3.lang['file_upload.actions.skip']),
                                                        $('<option />').val(actions.RENAME).text(TYPO3.lang['file_upload.actions.rename']),
                                                        $('<option />').val(actions.OVERRIDE).text(TYPO3.lang['file_upload.actions.override'])
                                                )
                                        )
                                );
-                               $records.find('tr:last-child').before($record);
+                               $modalContent.find('table').append($record);
                        }
 
-                       var $modal = top.TYPO3.Modal.confirm(TYPO3.lang['file_upload.existingfiles.title'], $records, top.TYPO3.Severity.warning, [
+                       var $modal = top.TYPO3.Modal.confirm(TYPO3.lang['file_upload.existingfiles.title'], $modalContent, top.TYPO3.Severity.warning, [
                                {
                                        text: $(this).data('button-close-text') || TYPO3.lang['file_upload.button.cancel'] || 'Cancel',
                                        active: true,
@@ -314,25 +295,36 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'moment', 'nprogress', 'TYPO
                                        btnClass: 'btn-warning',
                                        name: 'continue'
                                }
-                       ]);
+                       ], ['modal-inner-scroll']);
+                       $modal.find('.modal-dialog').addClass('modal-lg');
+
+                       $modal.find('.modal-footer').prepend(
+                               $('<span/>').addClass('form-inline pull-left').append(
+                                       $('<label/>').text(TYPO3.lang['file_upload.actions.all.label']),
+                                       $('<select/>', {class: 'form-control t3js-actions-all'}).append(
+                                               $('<option/>').val('').text(TYPO3.lang['file_upload.actions.all.empty']),
+                                               (me.irreObjectUid ? $('<option/>').val(actions.USE_EXISTING).text(TYPO3.lang['file_upload.actions.all.use_existing']) : ''),
+                                               $('<option/>').val(actions.SKIP).text(TYPO3.lang['file_upload.actions.all.skip']),
+                                               $('<option/>').val(actions.RENAME).text(TYPO3.lang['file_upload.actions.all.rename']),
+                                               $('<option/>').val(actions.OVERRIDE).text(TYPO3.lang['file_upload.actions.all.override'])
+                                       )
+                               )
+                       );
+
                        $modal.on('change', '.t3js-actions-all', function() {
                                var $me = $(this),
                                        value = $me.val();
 
                                if (value !== '') {
                                        // mass action was selected, apply action to every file
-                                       $modal.find('.t3js-actions').attr('disabled', 'disabled');
-                                       for (var i = 0; i < amountOfItems; ++i) {
-                                               askForOverride[i].action = value;
-                                       }
-                               } else {
-                                       $modal.find('.t3js-actions').each(function (index, select) {
-                                               var $select = $(select);
-                                               $select.removeAttr('disabled');
-                                               if (typeof askForOverride[index] !== 'undefined') {
-                                                       askForOverride[index].action = $select.val();
-                                               }
+                                       $modal.find('.t3js-actions').each(function (i, select) {
+                                               var $select = $(select),
+                                                       index = parseInt($select.data('override'));
+                                               $select.val(value).prop('disabled', 'disabled');
+                                               askForOverride[index].action = $select.val();
                                        });
+                               } else {
+                                       $modal.find('.t3js-actions').removeProp('disabled');
                                }
                        }).on('change', '.t3js-actions', function() {
                                var $me = $(this),
@@ -340,15 +332,20 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'moment', 'nprogress', 'TYPO
                                askForOverride[index].action = $me.val();
                        }).on('button.clicked', function(e) {
                                if (e.target.name === 'cancel') {
+                                       askForOverride = [];
                                        top.TYPO3.Modal.dismiss();
                                } else if (e.target.name === 'continue') {
-                                       var files = [];
-                                       for (var i = 0; i < amountOfItems; ++i) {
-                                               if (askForOverride[i].action !== actions.SKIP) {
-                                                       files.push(askForOverride[i].item);
+                                       $.each(askForOverride, function(key, fileInfo) {
+                                               if (fileInfo.action === actions.USE_EXISTING) {
+                                                       DragUploader.addFileToIrre(
+                                                               me.irreObjectUid,
+                                                               fileInfo.original
+                                                       );
+                                               } else if (fileInfo.action !== actions.SKIP) {
+                                                       new FileQueueItem(me, fileInfo.uploaded, fileInfo.action);
                                                }
-                                       }
-                                       me.processFiles(files);
+                                       });
+                                       askForOverride = [];
                                        top.TYPO3.Modal.dismiss();
                                }
                        }).on('hidden.bs.modal', function() {
@@ -422,12 +419,10 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'moment', 'nprogress', 'TYPO
                                        me.$iconCol.html('<span class="' + data.result.upload[0].iconClasses + '">&nbsp;</span>');
                                }
 
-                               if (me.dragUploader.$element.data('file-irre-object')) {
-                                       inline.delayedImportElement(
-                                               me.dragUploader.$element.data('file-irre-object'),
-                                               'sys_file',
-                                               data.result.upload[0].uid,
-                                               'file'
+                               if (me.dragUploader.irreObjectUid) {
+                                       DragUploader.addFileToIrre(
+                                               me.dragUploader.irreObjectUid,
+                                               data.result.upload[0]
                                        );
                                        setTimeout(function() {
                                                me.$row.remove();
@@ -561,6 +556,15 @@ define('TYPO3/CMS/Backend/DragUploader', ['jquery', 'moment', 'nprogress', 'TYPO
                return string;
        };
 
+       DragUploader.addFileToIrre = function(irre_object, file) {
+               inline.delayedImportElement(
+                       irre_object,
+                       'sys_file',
+                       file.uid,
+                       'file'
+               );
+       };
+
        DragUploader.initialize = function() {
                var me = this,
                        opts = me.options;
index 0d45dd2..9a62e0f 100644 (file)
@@ -85,8 +85,9 @@ define('TYPO3/CMS/Backend/Modal', ['jquery', 'TYPO3/CMS/Backend/Notification', '
         * @param {string} content the content for the conform modal, e.g. the main question
         * @param {int} severity default top.TYPO3.Severity.warning
         * @param {array} buttons an array with buttons, default no buttons
+        * @param {array} additionalCssClasses additional css classes to add to the modal
         */
-       Modal.confirm = function(title, content, severity, buttons) {
+       Modal.confirm = function(title, content, severity, buttons, additionalCssClasses) {
                severity = (typeof severity !== 'undefined' ? severity : top.TYPO3.Severity.warning);
                buttons = buttons || [
                                {
@@ -100,7 +101,8 @@ define('TYPO3/CMS/Backend/Modal', ['jquery', 'TYPO3/CMS/Backend/Notification', '
                                        name: 'ok'
                                }
                        ];
-               $modal = Modal.show(title, content, severity, buttons);
+               additionalCssClasses = additionalCssClasses || [];
+               $modal = Modal.show(title, content, severity, buttons, additionalCssClasses);
                $modal.on('button.clicked', function(e) {
                        if (e.target.name === 'cancel') {
                                $(this).trigger('confirm.button.cancel');
@@ -143,11 +145,18 @@ define('TYPO3/CMS/Backend/Modal', ['jquery', 'TYPO3/CMS/Backend/Notification', '
         * @param {string} content the content for the conform modal, e.g. the main question
         * @param {int} severity default top.TYPO3.Severity.info
         * @param {array} buttons an array with buttons, default no buttons
+        * @param {array} additionalCssClasses additional css classes to add to the modal
         */
-       Modal.show = function(title, content, severity, buttons) {
+       Modal.show = function(title, content, severity, buttons, additionalCssClasses) {
                severity = (typeof severity !== 'undefined' ? severity : top.TYPO3.Severity.info);
                buttons = buttons || [];
+               additionalCssClasses = additionalCssClasses || [];
                Modal.currentModal = Modal.template.clone();
+               if (additionalCssClasses.length) {
+                       for (var i=0; i < additionalCssClasses.length; i++) {
+                               Modal.currentModal.addClass(additionalCssClasses[i]);
+                       }
+               }
                Modal.currentModal.attr('tabindex', '-1');
                Modal.currentModal.find('.modal-title').text(title);
                Modal.currentModal.find('.modal-header .close').on('click', function() {
@@ -243,6 +252,11 @@ define('TYPO3/CMS/Backend/Modal', ['jquery', 'TYPO3/CMS/Backend/Notification', '
                                        $clone = $me.clone().css('display', 'block').appendTo('body'),
                                        top = Math.max(0, Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2));
 
+                               if ($me.hasClass('modal-inner-scroll')) {
+                                       var maxHeight = $(window).height() - $clone.find('.modal-header').height() - $clone.find('.modal-footer').height() - 100;
+                                       $me.find('.modal-body').css({'max-height': maxHeight, 'overflow-y': 'auto'});
+                               }
+
                                $clone.remove();
                                $me.find('.modal-content').css('margin-top', top);
                        });
index d358098..36aec20 100644 (file)
@@ -529,6 +529,9 @@ Do you want to continue WITHOUT saving?</source>
                        <trans-unit id="file_upload.actions.override">
                                <source>Overwrite</source>
                        </trans-unit>
+                       <trans-unit id="file_upload.actions.use_existing">
+                               <source>Use existing file</source>
+                       </trans-unit>
                        <trans-unit id="file_upload.actions.all.label">
                                <source>Alternatively, choose a mass action:</source>
                        </trans-unit>
@@ -544,6 +547,9 @@ Do you want to continue WITHOUT saving?</source>
                        <trans-unit id="file_upload.actions.all.override">
                                <source>Overwrite all files</source>
                        </trans-unit>
+                       <trans-unit id="file_upload.actions.all.use_existing">
+                               <source>Use existing files</source>
+                       </trans-unit>
                        <trans-unit id="file_upload.button.cancel">
                                <source>Cancel</source>
                        </trans-unit>