[TASK] Disable save button after submit 66/44366/8
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Thu, 29 Oct 2015 17:38:03 +0000 (18:38 +0100)
committerMorton Jonuschat <m.jonuschat@mojocode.de>
Thu, 29 Oct 2015 19:30:07 +0000 (20:30 +0100)
To prevent multiple form submission in EditDocumentController the save
split button gets disabled after the first submit. To visualize activity,
the disk icon gets replaced by a spinner after submit.

Resolves: #62235
Releases: master
Change-Id: I170e2d879bd4f801a56037ab615c77331c0256e4
Reviewed-on: https://review.typo3.org/44366
Reviewed-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Tested-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Reviewed-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Tested-by: Morton Jonuschat <m.jonuschat@mojocode.de>
typo3/sysext/backend/Classes/Template/Components/Buttons/SplitButton.php
typo3/sysext/backend/Resources/Public/JavaScript/SplitButtons.js

index 0e0a778..da46375 100644 (file)
@@ -150,7 +150,7 @@ class SplitButton extends AbstractButton implements ButtonInterface
             $attributesString .= ' ' . htmlspecialchars($key) . '="' . htmlspecialchars($value) . '"';
         }
         $content = '
-        <div class="btn-group">
+        <div class="btn-group t3js-splitbutton">
             <button' . $attributesString . '>
                 ' . $items['primary']->getIcon()->render() . '
                 ' . htmlspecialchars($items['primary']->getTitle()) . '
index 79e23a1..3d7963a 100644 (file)
@@ -15,7 +15,7 @@
  * Module: TYPO3/CMS/Backend/SplitButtons
  * Initializes global handling of split buttons.
  */
-define(['jquery'], function($) {
+define(['jquery', 'TYPO3/CMS/Backend/Icons'], function($, Icons) {
        'use strict';
 
        /**
@@ -51,6 +51,24 @@ define(['jquery'], function($) {
 
                        $form.append($elem);
 
+                       // Disable submit buttons
+                       $form.on('submit', function() {
+                               var $affectedButton,
+                                       $splitButton = $me.closest('.t3js-splitbutton');
+
+                               if ($splitButton.length > 0) {
+                                       $splitButton.find('button').prop('disabled', true);
+                                       $affectedButton = $splitButton.children().first();
+                               } else {
+                                       $me.prop('disabled', true);
+                                       $affectedButton = $me;
+                               }
+
+                               Icons.getIcon('spinner-circle-dark', Icons.sizes.small).done(function(markup) {
+                                       $affectedButton.find('.t3js-icon').replaceWith(markup);
+                               });
+                       });
+
                        if (e.currentTarget.tagName === 'A' && !e.isDefaultPrevented()) {
                                $form.submit();
                                e.preventDefault();