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