jquery.confirmable: Add a space between buttons

It should have always been there, my bad. Problems with lack of the
space:

* Languages with ligatures may decide to join the last letters of
  "Yes" with first letters of "No", producing a mess. (This was
  reported with a proposed solution as I0e6fcd83, I opted for doing
  this fix instead.)
* The "Yes" and "No" may be read together by screen readers, as
  "Yesno" (although I didn't test this), and similarly misinterpreted
  by other tools.
* The interface looks silly when copy-pasted.

Change-Id: I65c771fc22e105bf5978e6e4ee5068200f294b9e

diff --git a/resources/Resources.php b/resources/Resources.php
index a52b1ff..10cfbbb 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -200,6 +200,7 @@ return array(
                        'confirmable-confirm',
                        'confirmable-yes',
                        'confirmable-no',
+                       'word-separator',
                ),
                'styles' => 'resources/src/jquery/jquery.confirmable.css',
                'dependencies' => 'mediawiki.jqueryMsg',

diff --git a/resources/src/jquery/jquery.confirmable.js b/resources/src/jquery/jquery.confirmable.js
index 4b80d95..339e65a 100644 (file)
--- a/resources/src/jquery/jquery.confirmable.js
+++ b/resources/src/jquery/jquery.confirmable.js
@@ -36,6 +36,7 @@
         * @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.
@@ -126,7 +127,7 @@
 
                                $interface = $( '<span>' )
                                        .addClass( 'jquery-confirmable-interface' )
-                                       .append( $text, $buttonYes, $buttonNo );
+                                       .append( $text, options.i18n.space, $buttonYes, options.i18n.space, $buttonNo );
                                $interface = options.wrapperCallback( $interface );
 
                                // Render offscreen to measure real width
@@ -160,6 +161,7 @@
                buttonCallback: identity,
                handler: null,
                i18n: {
+                       space: ' ',
                        confirm: 'Are you sure?',
                        yes: 'Yes',
                        no: 'No'

diff --git a/resources/src/jquery/jquery.confirmable.mediawiki.js b/resources/src/jquery/jquery.confirmable.mediawiki.js
index 7ac04f4..d4a106e 100644 (file)
--- a/resources/src/jquery/jquery.confirmable.mediawiki.js
+++ b/resources/src/jquery/jquery.confirmable.mediawiki.js
@@ -6,6 +6,7 @@
 
 ( function ( mw, $ ) {
        $.fn.confirmable.defaultOptions.i18n = {
+               space: mw.message( 'word-separator' ).text(),
                confirm: mw.message( 'confirmable-confirm', mw.user ).text(),
                yes: mw.message( 'confirmable-yes' ).text(),
                no: mw.message( 'confirmable-no' ).text()