[FEATURE] RequireJS module for split buttons 28/43928/9
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Fri, 9 Oct 2015 09:47:06 +0000 (11:47 +0200)
committerMarkus Klein <markus.klein@typo3.org>
Fri, 9 Oct 2015 11:11:15 +0000 (13:11 +0200)
A new RequireJS module for split button handling has been added.

Resolves: #70531
Releases: master
Change-Id: I4a1b0386df2fa00e317f5d602df0701661fdda84
Reviewed-on: http://review.typo3.org/43928
Reviewed-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Tested-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>
typo3/sysext/backend/Classes/Template/Components/Buttons/SplitButton.php
typo3/sysext/backend/Classes/Template/ModuleTemplate.php
typo3/sysext/backend/Resources/Public/JavaScript/SplitButtons.js [new file with mode: 0644]
typo3/sysext/core/Documentation/Changelog/master/Feature-70531-RequireJSModuleForSplitButtons.rst [new file with mode: 0644]

index e9cc8a8..dfd1431 100644 (file)
@@ -140,6 +140,7 @@ class SplitButton extends AbstractButton implements ButtonInterface
                <div class="btn-group">
                        <button
                                type="submit"
+                               name="' . htmlspecialchars($items['primary']->getName()) . '"
                                value="' . htmlspecialchars($items['primary']->getValue()) . '"
                                class="btn btn-sm btn-default ' . htmlspecialchars($items['primary']->getClasses()) . '"
                        >
@@ -154,7 +155,7 @@ class SplitButton extends AbstractButton implements ButtonInterface
         foreach ($items['options'] as $option) {
             $content .= '
                                <li>
-                                       <a href="#">' . $option->getIcon()->render() . ' ' . htmlspecialchars($option->getTitle()) . '</a>
+                                       <a href="#" class="' . htmlspecialchars($option->getClasses()) . '" data-name="' . htmlspecialchars($option->getName()) . '" data-value="' . htmlspecialchars($option->getValue()) . '">' . $option->getIcon()->render() . ' ' . htmlspecialchars($option->getTitle()) . '</a>
                                </li>
                        ';
         }
index 1049868..a551fe5 100644 (file)
@@ -232,6 +232,7 @@ class ModuleTemplate
         $this->pageRenderer->loadRequireJsModule('bootstrap');
         $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/ContextHelp');
         $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/DocumentHeader');
+        $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/SplitButtons');
     }
 
     /**
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/SplitButtons.js b/typo3/sysext/backend/Resources/Public/JavaScript/SplitButtons.js
new file mode 100644 (file)
index 0000000..6781d1a
--- /dev/null
@@ -0,0 +1,65 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with DocumentHeader source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+/**
+ * Initializes global handling of split buttons.
+ */
+define('TYPO3/CMS/Backend/SplitButtons', ['jquery'], function($) {
+       "use strict";
+
+       var SplitButtons = {
+               preSubmitCallbacks: []
+       };
+
+       /**
+        * Initializes the save handling
+        */
+       SplitButtons.initializeSaveHandling = function() {
+               $(document).on('click', 'button[name^="_save"], a[data-name^="_save"]', function(e) {
+                       var $me = $(this),
+                               $form = $me.closest('form'),
+                               name = $me.data('name') || this.name,
+                               value = $me.data('value') || this.value,
+                               $elem = $('<input />').attr('type', 'hidden').attr('name', name).attr('value', value);
+
+                       // Run any preSubmit callbacks
+                       for (var i = 0; i < SplitButtons.preSubmitCallbacks.length; ++i) {
+                               SplitButtons.preSubmitCallbacks[i](e);
+                       }
+
+                       $form.append($elem);
+
+                       if (e.currentTarget.tagName === 'A' && !e.isDefaultPrevented()) {
+                               $form.submit();
+                               e.preventDefault();
+                       }
+               });
+       };
+
+       /**
+        * Adds a callback being executed before submit
+        *
+        * @param callback
+        */
+       SplitButtons.addPreSubmitCallback = function(callback) {
+               if (typeof callback !== 'function') {
+                       throw 'callback must be a function.';
+               }
+
+               SplitButtons.preSubmitCallbacks.push(callback);
+       };
+
+       $(SplitButtons.initializeSaveHandling);
+
+       return SplitButtons;
+});
diff --git a/typo3/sysext/core/Documentation/Changelog/master/Feature-70531-RequireJSModuleForSplitButtons.rst b/typo3/sysext/core/Documentation/Changelog/master/Feature-70531-RequireJSModuleForSplitButtons.rst
new file mode 100644 (file)
index 0000000..3960a83
--- /dev/null
@@ -0,0 +1,31 @@
+====================================================
+Feature: #70531 - RequireJS module for split buttons
+====================================================
+
+Description
+===========
+
+A RequireJS module for split button has been added. The module can be used in another RequireJS modules to
+add callbacks being executed before the submit takes place. As the callback receives the click event,
+the submit can be modified, e.g aborting the submit.
+
+
+Impact
+======
+
+To use the ``SplitButtons`` module, include it in your own RequireJS module:
+
+.. code-block:: javascript
+
+       define('Vendor/Ext/Module', ['TYPO3/CMS/Backend/SplitButtons'], function(SplitButtons) {
+               // Your code...
+       });
+
+
+Callbacks will be added by calling ``SplitButtons.addPreSubmitCallback``:
+
+.. code-block:: javascript
+
+       SplitButtons.addPreSubmitCallback(function(e) {
+               // Code being executed as callback before submit
+       });
\ No newline at end of file