Page Menu
Home
WickedGov Phorge
Search
Configure Global Search
Log In
Files
F1429216
jquery.confirmable.js
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
8 KB
Referenced Files
None
Subscribers
None
jquery.confirmable.js
View Options
/**
* Enable inline confirmation for clickable elements.
*
* @module jquery.confirmable
* @author Bartosz Dziewoński
* @license MIT
*/
(
function
()
{
const
identity
=
(
data
)
=>
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.
*
* To use this {@link jQuery} plugin, load the `jquery.confirmable` module with {@link mw.loader}.
*
* @example
* mw.loader.using( 'jquery.confirmable' ).then( () => {
* $( 'button' ).confirmable();
* } );
* @memberof module:jquery.confirmable
* @method
* @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.delegate] Optional selector used for jQuery event delegation
* @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='Are you sure?'] Text to use for the confirmation question.
* @param {string} [options.i18n.yes='Yes'] Text to use for the 'Yes' button.
* @param {string} [options.i18n.no='No'] Text to use for the 'No' button.
* @param {string} [options.i18n.yesTitle] Optional title text to use for the 'Yes' button.
* @param {string} [options.i18n.noTitle] Optional title text to use for the 'No' button.
* @return {jQuery}
*/
$
.
fn
.
confirmable
=
function
(
options
)
{
options
=
$
.
extend
(
true
,
{},
$
.
fn
.
confirmable
.
defaultOptions
,
options
||
{}
);
if
(
options
.
delegate
===
null
)
{
return
this
.
on
(
options
.
events
,
(
e
)
=>
{
$
.
fn
.
confirmable
.
handler
(
e
,
options
);
}
);
}
return
this
.
on
(
options
.
events
,
options
.
delegate
,
(
e
)
=>
{
$
.
fn
.
confirmable
.
handler
(
e
,
options
);
}
);
};
$
.
fn
.
confirmable
.
handler
=
function
(
event
,
options
)
{
const
$element
=
$
(
event
.
target
);
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).
event
.
preventDefault
();
const
rtl
=
$element
.
css
(
'direction'
)
===
'rtl'
;
let
positionOffscreen
,
positionRestore
,
sideMargin
,
elementSideMargin
;
if
(
rtl
)
{
positionOffscreen
=
{
position
:
'absolute'
,
right
:
'-9999px'
};
positionRestore
=
{
position
:
''
,
right
:
''
};
sideMargin
=
'marginRight'
;
elementSideMargin
=
parseInt
(
$element
.
css
(
'margin-right'
)
);
}
else
{
positionOffscreen
=
{
position
:
'absolute'
,
left
:
'-9999px'
};
positionRestore
=
{
position
:
''
,
left
:
''
};
sideMargin
=
'marginLeft'
;
elementSideMargin
=
parseInt
(
$element
.
css
(
'margin-left'
)
);
}
$element
.
addClass
(
'hidden'
);
let
$wrapper
,
$interface
,
interfaceWidth
,
elementWidth
,
elementPadding
;
// eslint-disable-next-line no-jquery/no-class-state
if
(
$element
.
hasClass
(
'jquery-confirmable-element'
)
)
{
$wrapper
=
$element
.
closest
(
'.jquery-confirmable-wrapper'
);
$interface
=
$wrapper
.
find
(
'.jquery-confirmable-interface'
);
interfaceWidth
=
$interface
.
data
(
'jquery-confirmable-width'
);
elementWidth
=
$element
.
data
(
'jquery-confirmable-width'
);
elementPadding
=
$element
.
data
(
'jquery-confirmable-padding'
);
// Restore visibility to interface text if it is opened again after being cancelled.
const
$existingText
=
$interface
.
find
(
'.jquery-confirmable-text'
);
$existingText
.
removeClass
(
'hidden'
);
}
else
{
const
$elementClone
=
$element
.
clone
(
true
);
$element
.
addClass
(
'jquery-confirmable-element'
);
elementWidth
=
$element
.
width
();
elementPadding
=
parseInt
(
$element
.
css
(
'padding-left'
)
)
+
parseInt
(
$element
.
css
(
'padding-right'
)
);
$element
.
data
(
'jquery-confirmable-width'
,
elementWidth
);
$element
.
data
(
'jquery-confirmable-padding'
,
elementPadding
);
$wrapper
=
$
(
'<span>'
)
.
addClass
(
'jquery-confirmable-wrapper'
);
$element
.
wrap
(
$wrapper
);
// Build the mini-dialog
const
$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.
let
$buttonYes
=
$elementClone
.
clone
(
true
)
.
addClass
(
'jquery-confirmable-button jquery-confirmable-button-yes'
)
.
removeClass
(
'hidden'
)
.
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.
let
$buttonNo
=
$elementClone
.
clone
(
false
)
.
addClass
(
'jquery-confirmable-button jquery-confirmable-button-no'
)
.
removeClass
(
'hidden'
)
.
data
(
'jquery-confirmable-button'
,
true
)
.
text
(
options
.
i18n
.
no
)
.
on
(
options
.
events
,
(
e
)
=>
{
$element
.
css
(
sideMargin
,
elementSideMargin
)
.
removeClass
(
'hidden'
);
$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
)
.
css
(
positionRestore
)
// Hide to animate the transition later
.
css
(
'width'
,
0
);
}
// Hide element, show interface. This triggers both transitions.
// In a timeout to trigger the 'width' transition.
setTimeout
(
()
=>
{
$element
.
css
(
sideMargin
,
-
elementWidth
-
elementPadding
);
$interface
.
css
(
'width'
,
interfaceWidth
)
.
css
(
sideMargin
,
elementSideMargin
);
},
1
);
};
/**
* Default options. Overridable primarily for internationalisation handling.
*
* @property {Object} defaultOptions
*/
$
.
fn
.
confirmable
.
defaultOptions
=
{
events
:
'click'
,
wrapperCallback
:
identity
,
buttonCallback
:
identity
,
handler
:
null
,
delegate
:
null
,
i18n
:
{
space
:
' '
,
confirm
:
'Are you sure?'
,
yes
:
'Yes'
,
no
:
'No'
,
yesTitle
:
undefined
,
noTitle
:
undefined
}
};
}()
);
File Metadata
Details
Attached
Mime Type
text/x-asm
Expires
Sat, May 16, 17:17 (10 h, 21 m)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
9b/eb/bdf35838b54c380fde78ef4ce995
Default Alt Text
jquery.confirmable.js (8 KB)
Attached To
Mode
rMWPROD MediaWiki Production
Attached
Detach File
Event Timeline
Log In to Comment