jQuery confirmation plugin
Simple confirmation plugin for jQuery.
Installation
To make the plugin work you need to include jQuery and styles from within ssd-confirm.css file as well as either minified or src version of the plugin.
<link href="./assets/css/ssd-confirm.css" rel="stylesheet"> <script src="./node_modules/jquery/dist/jquery.js"></script> <script src="./src/jquery.ssd-confirm.js"></script>You also need to add the following html towards the bottom of your page structure (all data attributes are configurable):
Confirmation dialog
<div data-ssd-confirm> <div data-ssd-confirm-block="remove"> <p data-ssd-confirm-content></p> <nav> <span data-button-wrapper> <span class="small alert button" data-ssd-confirm-yes data-trigger >YES</span> <span class="small alert disabled button hide" data-processing ><i class="fa fa-spinner fa-spin fa-fw"></i></span> </span> <span class="small button" data-ssd-confirm-no>NO</span> </nav> </div> </div> <div data-ssd-confirm-overlay></div>Example list of records
<table class="table-list"> <thead> <tr> <th> Name </th> <th class="col-1"> <span class="small secondary disabled button" > <i class="fa fa-trash fa-fw"></i> </span> </th> </tr> </thead> <tbody> <tr data-row> <td> Remove row after confirming </td> <td> <span class="small button" data-ssd-confirm-trigger="remove" data-ssd-confirm-message="Are you sure you wish to remove this record?<br />There is no undo!" data-ssd-confirm-url="/remove.json" data-ssd-confirm-behaviour="removeRow" > <i class="fa fa-trash fa-fw"></i> </span> </td> </tr> <tr data-row> <td> Reload after confirming </td> <td> <span class="small button" data-ssd-confirm-trigger="remove" data-ssd-confirm-message="Are you sure you wish to remove this record?<br />There is no undo!" data-ssd-confirm-url="/remove.json" data-ssd-confirm-behaviour="reload" > <i class="fa fa-trash fa-fw"></i> </span> </td> </tr> <tr data-row> <td> Reload after confirming </td> <td> <span class="small button" data-ssd-confirm-trigger="remove" data-ssd-confirm-message="Are you sure you wish to remove this record?<br />There is no undo!" data-ssd-confirm-url="/remove.json" data-ssd-confirm-behaviour="reload" > <i class="fa fa-trash fa-fw"></i> </span> </td> </tr> </tbody> </table>Considering the above, here's how the data attributes from the two code blocks are referring to each other
data-ssd-confirm-trigger: Associated value (in this caseremove) corresponds to thedata-ssd-confirm-block. You can have number of different purpose blocks.data-ssd-confirm-message: Message that will be injected into thedata-ssd-confirm-content.data-ssd-confirm-url: End point to be called when theYesbutton within the confirmation dialog is triggered.data-ssd-confirm-behaviour: Method that will be executed after successful call.
Instantiating plugin
Call plugin on the instance of the trigger you wish to apply it to.
$('[data-ssd-confirm-trigger]').ssdConfirm();Options
dataType: 'ssd-confirm-trigger', // trigger 'data-*' attribute - corresponds to the 'dataConfirmBlock'. dataMessage: 'ssd-confirm-message', // trigger 'data-*' attribute - corresponds to the 'dataConfirmContent'. dataUrl: 'ssd-confirm-url', // trigger 'data-*' attribute that stores the url / uri to be called when 'Yes' button is triggered. dataBehaviour: 'ssd-confirm-behaviour', // trigger 'data-*' attribute that indicates what method should be executed after successful call. dataConfirmWrapper: 'ssd-confirm', // dialog wrapper 'data-*' attribute. dataConfirmBlock: 'ssd-confirm-block', // dialog block type 'data-*' attribute - corresponds to 'dataType'. dataConfirmContent: 'ssd-confirm-content', // dialog content 'data-*' attribute - corresponds to 'dataMessage'. dataButtonWrapper: 'button-wrapper', // dialog button wrapper 'data-*' attribute - used when you want to show 'pending' button when ajax call is being made. dataButtonTrigger: 'trigger', // dialog trigger 'data-*' attribute - to be used with 'Yes' button. dataButtonProcessing: 'processing', // dialog processing 'data-*' attribute - to be used with button that swaps 'Yes' button when ajax call is being made. dataButtonYes: 'ssd-confirm-yes', // dialog 'yes' button 'data-*' attribute. dataButtonNo: 'ssd-confirm-no', // dialog 'no' button 'data-*' attribute. dataRecordWrapper: 'row', // list record wrapper 'data-*' attribute. dataOverlay: 'ssd-confirm-overlay', // overlay 'data-*' attribute. classActive: 'active', // dialog css class used to reveal the confirmation dialog (by default it slides it down). classShow: 'show', // dialog / overlay css class to reveal given block of the confirmation dialog and overlay. classHide: 'hide', // dialog css class to hide 'yes' / 'processing' buttons. extendBlocks: {}, // object that can extend blocks (currently only 'remove'). extendBehaviours: {} // object that can extend behaviours (currently only 'reload' and 'removeRow'). actionProperties: function(trigger, properties) { return properties; } // allows you to modify properties before the call is made. Behaviours
Currently there are only 2 behaviours, but you can add more by adding them to the extendBehaviours option.
reload: Reloads page. removeRow: Removes the container of the record. This option requires `dataRecordWrapper` to be applied to the container of your record (default `data-row`), which should contain the trigger button. Example of removeRow:
<tr data-row> <td> Record name </td> <td> <span class="small button" data-ssd-confirm-trigger="remove" data-ssd-confirm-message="Are you sure you wish to remove this record?<br />There is no undo!" data-ssd-confirm-url="/remove.json" data-ssd-confirm-behaviour="removeRow" > <i class="fa fa-trash fa-fw"></i> </span> </td> </tr>Behaviour methods take 3 arguments:
* data: // data returned from ajax call * trigger: // instance of the 'yes' button * properties: // object containing: * url: // url / uri to be called * behaviour: // behaviour name * originator: // instance of the button that triggered the dialog * processing: // instance of the 'processing' button if exists - otherwise 'null' 
