allow localization of elements via data-msg-text and data-msg-html

to distinguish from attributes i've reversed the order e.g. instead of
html-msg i've used msg-html

i've added the data prefix to allow for html validation.

this is important as an OPTION tag cannot have any children so currently
there is no way to localize it. This provides a route.

Documentation needed.

Change-Id: Iefdbbf0e55ab3c6c6a9564b568980a7319bc4453

diff --git a/resources/jquery/jquery.localize.js b/resources/jquery/jquery.localize.js
index 866778f..3e786ec 100644 (file)
--- a/resources/jquery/jquery.localize.js
+++ b/resources/jquery/jquery.localize.js
@@ -145,6 +145,17 @@ $.fn.localize = function ( options ) {
                } );
        } );
 
+       // HTML, Text for elements which cannot have children e.g. OPTION
+       $target.find( '[data-msg-text]' ).each( function() {
+               var $el = $( this );
+               $el.text( msg( options, $el.attr( 'data-msg-text' ) ) );
+       } );
+
+       $target.find( '[data-msg-html]' ).each( function() {
+               var $el = $( this );
+               $el.html( msg( options, $el.attr( 'data-msg-html' ) ) );
+       } );
+
        return $target;
 };
 

diff --git a/tests/qunit/suites/resources/jquery/jquery.localize.test.js b/tests/qunit/suites/resources/jquery/jquery.localize.test.js
index 86d6b62..c8e1d9f 100644 (file)
--- a/tests/qunit/suites/resources/jquery/jquery.localize.test.js
+++ b/tests/qunit/suites/resources/jquery/jquery.localize.test.js
@@ -112,3 +112,22 @@ QUnit.test( 'Options', 7, function ( assert ) {
        assert.strictEqual( $lc.text(), 'The Bazz (Wikipedia)', 'Combination of options prefix, params and keys - text' );
        assert.strictEqual( $lc.attr( 'title' ), 'Read more about bazz at Wikipedia (last modified: 3 minutes ago)', 'Combination of options prefix, params and keys - attr' );
 } );
+
+QUnit.test( 'Handle data text', 2, function ( assert ) {
+       var html, $lc;
+       mw.messages.set( 'option-one', 'Item 1' );
+       mw.messages.set( 'option-two', 'Item 2' );
+       html = '<select><option data-msg-text="option-one"></option><option data-msg-text="option-two"></option></select>';
+       $lc = $( html ).localize().find( 'option' );
+       assert.strictEqual( $lc.eq( 0 ).text(), mw.msg( 'option-one' ), 'data-msg-text becomes text of options' );
+       assert.strictEqual( $lc.eq( 1 ).text(), mw.msg( 'option-two' ), 'data-msg-text becomes text of options' );
+} );
+
+QUnit.test( 'Handle data html', 2, function ( assert ) {
+       var html, $lc;
+       mw.messages.set( 'html', 'behold... there is a <a>link</a> here!!' );
+       html = '<div><div data-msg-html="html"></div></div>';
+       $lc = $( html ).localize().find( 'a' );
+       assert.strictEqual( $lc.length, 1, 'link is created' );
+       assert.strictEqual( $lc.text(), 'link', 'the link text got added' );
+} );