Merge pull request #111 from nodes-vapor/feature/confirm-modal-updates

Feature/confirm modal updates

Author: siemensikkema

Public/AdminPanel/js/modal-confirmation.js

@@ -10,11 +10,19 @@ let modalConfirmation = (function() {
             modalText = !modalText ? 'Are you sure you want to continue?' : modalText;
 
             // Confirmation path
-            let modalConfirmationPath = $(element).attr('href')
+            let modalConfirmationPath = $(element).attr('href');
 
             // Confirmation type
             let modalConfirmButtonType = $(element).data('button');
-            modalConfirmButtonType = !modalConfirmButtonType ? 'primary' : modalConfirmButtonType
+            modalConfirmButtonType = !modalConfirmButtonType ? 'primary' : modalConfirmButtonType;
+
+            // Confirmation button text
+            let confirmButtonText = $(element).data('confirm-btn');
+            confirmButtonText = !confirmButtonText ? 'Confirm' : confirmButtonText;
+
+            // Dismiss button text
+            let dismissButtonText = $(element).data('dismiss-btn');
+            dismissButtonText = !dismissButtonText ? 'Close' : dismissButtonText;
 
             let closure = function(e) {
                 e.preventDefault();
@@ -23,7 +31,7 @@ let modalConfirmation = (function() {
                     <div class="modal fade" id="modalConfirmation" tabindex="-1" role="dialog" aria-labelledby="modalConfirmationLabel" aria-hidden="true">
                         <div class="modal-dialog" role="document">
                             <div class="modal-content">
-                                <form method="POST" action="${modalConfirmationPath}">
+                                <form method="POST" action="${modalConfirmationPath}" id="confirmModalForm">
                                     <div class="modal-header">
                                         <h5 class="modal-title">${modalTitle}</h5>
                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -34,23 +42,52 @@ let modalConfirmation = (function() {
                                         <p>${modalText}</p>
                                     </div>
                                     <div class="modal-footer">
-                                        <button type="submit" class="btn btn-${modalConfirmButtonType}">Confirm</button>
-                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                                        <button type="submit" class="btn btn-${modalConfirmButtonType}">${confirmButtonText}</button>
+                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">${dismissButtonText}</button>
                                     </div>
                                 </form>
                             </div>
                         </div>
                     </div>
                 `;
 
-                $('body').append(modal)
-                $('#modalConfirmation').modal()
+                $('body').append(modal);
+                $('#modalConfirmation').modal();
+
+                // Custom "Confirm"-action
+                if (typeof modalConfirmation.actions.confirm === "function") {
+                    // Identify confirm button, interrupt default behavior, execute custom action
+                    let confirmBtn = $("#modalConfirmation .modal-footer button[type='submit']");
+
+                    confirmBtn.click(function(event) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        modalConfirmation.actions.confirm(event);
+                    });
+                }
+
+                // Custom "Dismiss"-action
+                if (typeof(modalConfirmation.actions.dismiss) === "function") {
+                    // Identify dismiss button, interrupt default behavior, execute custom action
+                    let dismissBtn = $("#modalConfirmation .modal-footer button[type='button']");
+
+                    dismissBtn.click(function(event) {
+                        event.stopPropagation();
+                        event.preventDefault();
+                        modalConfirmation.actions.dismiss(event);
+                    });
+                }
+
                 $('#modalConfirmation').on('hidden.bs.modal', function (e) {
-                    $('#modalConfirmation').remove()
+                    $('#modalConfirmation').remove();
                 })
             };
 
             $(element).click(closure);
+        },
+        actions: {
+            confirm: null,
+            dismiss: null
         }
     }
 })();

README.md

@@ -1,3 +1,43 @@
 # admin-panel
 
 A description of this package.
+
+
+#### Confirm Modal
+
+Admin Panel includes a generic confirmation modal for links, out of the box. Using HTML data attributes on `<a>`-tags the modal can be configured in different ways. Just add a data attribute to your link and you're all set.
+
+Triggering the modal will append a HTML-element form to the DOM, containing title, text, confirm button and dismiss button.
+
+By default confirm submits the form and dismiss will remove the HTML-element from the DOM
+
+**Basic usage**
+
+```HTML
+<a href="#" data-confirm="true">Open modal</a>
+```
+
+**Data Attributes**
+
+|Attribute|Description|example|
+|---------|-----------|-------|
+|data-confirm|Initialize the modal|`data-confirm="true"`|
+|data-title|Sets the title of the modal|`data-title="Please confirm"`|
+|data-text|Sets the text of the modal|`data-text="Are you sure you want to continue?"`|
+|data-button|Sets bootstrap css selector for the confirm button|`data-button="danger"` _[primary,secondary,success,danger,warning,info,light,dark]_|
+|data-confirm-btn|Set the text label on the "confirm"-button|`data-confirm-btn="Yes"`|
+|data-dismiss-btn|Set the text label on the "dismiss"-button|`data-confirm-btn="No"`|
+
+**Override default behavior**
+
+```javascript
+// Override modal confirm action
+modalConfirmation.actions.confirm = function(event) {
+    alert("Confirmed");
+}
+
+// Overríde modal dismiss action
+modalConfirmation.actions.dismiss = function(event) {
+    alert("Dismissed");
+}
+```