2 * jQuery confirmable plugin
4 * Released under the MIT License.
6 * @author Bartosz Dziewoński
8 * @class jQuery.plugin.confirmable
11 var identity = function ( data
) {
16 * Enable inline confirmation for given clickable element (like `<a />` or `<button />`).
18 * An additional inline confirmation step being shown before the default action is carried out on
21 * Calling `.confirmable( { handler: function () { … } } )` will fire the handler only after the
24 * The element will have the `jquery-confirmable-element` class added to it when it's clicked for
25 * the first time, which has `white-space: nowrap;` and `display: inline-block;` defined in CSS.
26 * If the computed values for the element are different when you make it confirmable, you might
27 * encounter unexpected behavior.
29 * @param {Object} [options]
30 * @param {string} [options.events='click'] Events to hook to.
31 * @param {Function} [options.wrapperCallback] Callback to fire when preparing confirmable
32 * interface. Receives the interface jQuery object as the only parameter.
33 * @param {Function} [options.buttonCallback] Callback to fire when preparing confirmable buttons.
34 * It is fired separately for the 'Yes' and 'No' button. Receives the button jQuery object as
35 * the first parameter and 'yes' or 'no' as the second.
36 * @param {Function} [options.handler] Callback to fire when the action is confirmed (user clicks
38 * @param {string} [options.i18n] Text to use for interface elements.
39 * @param {string} [options.i18n.space] Word separator to place between the three text messages.
40 * @param {string} [options.i18n.confirm] Text to use for the confirmation question.
41 * @param {string} [options.i18n.yes] Text to use for the 'Yes' button.
42 * @param {string} [options.i18n.no] Text to use for the 'No' button.
46 $.fn
.confirmable = function ( options
) {
47 options
= $.extend( true, {}, $.fn
.confirmable
.defaultOptions
, options
|| {} );
49 return this.on( options
.events
, function ( e
) {
50 var $element
, $text
, $buttonYes
, $buttonNo
, $wrapper
, $interface, $elementClone
,
51 interfaceWidth
, elementWidth
, rtl
, positionOffscreen
, positionRestore
, sideMargin
;
55 if ( $element
.data( 'jquery-confirmable-button' ) ) {
56 // We're running on a clone of this element that represents the 'Yes' or 'No' button.
57 // (This should never happen for the 'No' case unless calling code does bad things.)
61 // Only prevent native event handling. Stopping other JavaScript event handlers
62 // is impossible because they might have already run (we have no control over the order).
65 rtl
= $element
.css( 'direction' ) === 'rtl';
67 positionOffscreen
= { position
: 'absolute', right
: '-9999px' };
68 positionRestore
= { position
: '', right
: '' };
69 sideMargin
= 'marginRight';
71 positionOffscreen
= { position
: 'absolute', left
: '-9999px' };
72 positionRestore
= { position
: '', left
: '' };
73 sideMargin
= 'marginLeft';
76 if ( $element
.hasClass( 'jquery-confirmable-element' ) ) {
77 $wrapper
= $element
.closest( '.jquery-confirmable-wrapper' );
78 $interface = $wrapper
.find( '.jquery-confirmable-interface' );
79 $text
= $interface.find( '.jquery-confirmable-text' );
80 $buttonYes
= $interface.find( '.jquery-confirmable-button-yes' );
81 $buttonNo
= $interface.find( '.jquery-confirmable-button-no' );
83 interfaceWidth
= $interface.data( 'jquery-confirmable-width' );
84 elementWidth
= $element
.data( 'jquery-confirmable-width' );
86 $elementClone
= $element
.clone( true );
87 $element
.addClass( 'jquery-confirmable-element' );
89 elementWidth
= $element
.width();
90 $element
.data( 'jquery-confirmable-width', elementWidth
);
92 $wrapper
= $( '<span>' )
93 .addClass( 'jquery-confirmable-wrapper' );
94 $element
.wrap( $wrapper
);
96 // Build the mini-dialog
98 .addClass( 'jquery-confirmable-text' )
99 .text( options
.i18n
.confirm
);
101 // Clone original element along with event handlers to easily replicate its behavior.
102 // We could fiddle with .trigger() etc., but that is troublesome especially since
103 // Safari doesn't implement .click() on <a> links and jQuery follows suit.
104 $buttonYes
= $elementClone
.clone( true )
105 .addClass( 'jquery-confirmable-button jquery-confirmable-button-yes' )
106 .data( 'jquery-confirmable-button', true )
107 .text( options
.i18n
.yes
);
108 if ( options
.handler
) {
109 $buttonYes
.on( options
.events
, options
.handler
);
111 $buttonYes
= options
.buttonCallback( $buttonYes
, 'yes' );
113 // Clone it without any events and prevent default action to represent the 'No' button.
114 $buttonNo
= $elementClone
.clone( false )
115 .addClass( 'jquery-confirmable-button jquery-confirmable-button-no' )
116 .data( 'jquery-confirmable-button', true )
117 .text( options
.i18n
.no
)
118 .on( options
.events
, function ( e
) {
119 $element
.css( sideMargin
, 0 );
120 $interface.css( 'width', 0 );
123 $buttonNo
= options
.buttonCallback( $buttonNo
, 'no' );
125 // Prevent memory leaks
126 $elementClone
.remove();
128 $interface = $( '<span>' )
129 .addClass( 'jquery-confirmable-interface' )
130 .append( $text
, options
.i18n
.space
, $buttonYes
, options
.i18n
.space
, $buttonNo
);
131 $interface = options
.wrapperCallback( $interface );
133 // Render offscreen to measure real width
134 $interface.css( positionOffscreen
);
135 // Insert it in the correct place while we're at it
136 $element
.after( $interface );
137 interfaceWidth
= $interface.width();
138 $interface.data( 'jquery-confirmable-width', interfaceWidth
);
139 $interface.css( positionRestore
);
141 // Hide to animate the transition later
142 $interface.css( 'width', 0 );
145 // Hide element, show interface. This triggers both transitions.
146 // In a timeout to trigger the 'width' transition.
147 setTimeout( function () {
148 $element
.css( sideMargin
, -elementWidth
);
149 $interface.css( 'width', interfaceWidth
);
155 * Default options. Overridable primarily for internationalisation handling.
156 * @property {Object} defaultOptions
158 $.fn
.confirmable
.defaultOptions
= {
160 wrapperCallback
: identity
,
161 buttonCallback
: identity
,
165 confirm
: 'Are you sure?',