MDL-36613 usability: Dock icons are correct in RTL mode
authorFrederic Massart <fred@moodle.com>
Mon, 19 Nov 2012 10:32:37 +0000 (18:32 +0800)
committerFrederic Massart <fred@moodle.com>
Tue, 20 Nov 2012 05:00:01 +0000 (13:00 +0800)
blocks/dock.js
lib/javascript-static.js

index ca685d5..6e56390 100644 (file)
@@ -536,7 +536,7 @@ M.core_dock.fixTitleOrientation = function(item, title, text) {
     });
 
     // Positioning is different when in RTL mode.
-    if (Y.one(document.body).hasClass('dir-rtl')) {
+    if (right_to_left()) {
         title.setStyle('left', width/2 - height);
     } else {
         title.setStyle('right', width/2 - height);
@@ -837,7 +837,11 @@ M.core_dock.genericblock.prototype = {
 
         // Must set the image src seperatly of we get an error with XML strict headers
         var moveto = Y.Node.create('<input type="image" class="moveto customcommand requiresjs" alt="'+M.str.block.addtodock+'" title="'+M.str.block.addtodock+'" />');
-        moveto.setAttribute('src', M.util.image_url('t/block_to_dock', 'moodle'));
+        var icon = 't/block_to_dock';
+        if (right_to_left()) {
+            icon = 't/block_to_dock_rtl';
+        }
+        moveto.setAttribute('src', M.util.image_url(icon, 'moodle'));
         moveto.on('movetodock|click', this.move_to_dock, this, commands);
 
         var blockaction = node.one('.block_action');
@@ -903,7 +907,11 @@ M.core_dock.genericblock.prototype = {
 
         // Must set the image src seperatly of we get an error with XML strict headers
         var movetoimg = Y.Node.create('<img alt="'+M.str.block.undockitem+'" title="'+M.str.block.undockitem+'" />');
-        movetoimg.setAttribute('src', M.util.image_url('t/dock_to_block', 'moodle'));
+        var icon = 't/dock_to_block';
+        if (right_to_left()) {
+            icon = 't/dock_to_block_rtl';
+        }
+        movetoimg.setAttribute('src', M.util.image_url(icon, 'moodle'));
         var moveto = Y.Node.create('<a class="moveto customcommand requiresjs"></a>').append(movetoimg);
         if (location.href.match(/\?/)) {
             moveto.set('href', location.href+'&dock='+this.id);
index fa0dfc0..6044ea1 100644 (file)
@@ -111,7 +111,7 @@ M.util.CollapsibleRegion = function(Y, id, userpref, strtooltip) {
     // Get the height of the div at this point before we shrink it if required
     var height = this.div.get('offsetHeight');
     var collapsedimage = 't/collapsed'; // ltr mode
-    if ( Y.one(document.body).hasClass('dir-rtl') ) {
+    if (right_to_left()) {
         collapsedimage = 't/collapsed_rtl';
     } else {
         collapsedimage = 't/collapsed';
@@ -140,7 +140,7 @@ M.util.CollapsibleRegion = function(Y, id, userpref, strtooltip) {
     animation.on('end', function() {
         this.div.toggleClass('collapsed');
         var collapsedimage = 't/collapsed'; // ltr mode
-        if ( Y.one(document.body).hasClass('dir-rtl') ) {
+        if (right_to_left()) {
             collapsedimage = 't/collapsed_rtl';
             } else {
             collapsedimage = 't/collapsed';
@@ -1209,6 +1209,20 @@ function getElementsByClassName(oElm, strTagName, name) {
     return (arrReturnElements)
 }
 
+/**
+ * Return whether we are in right to left mode or not.
+ *
+ * @return boolean
+ */
+function right_to_left() {
+    var body = Y.one('body');
+    var rtl = false;
+    if (body && body.hasClass('dir-rtl')) {
+        rtl = true;
+    }
+    return rtl;
+}
+
 function openpopup(event, args) {
 
     if (event) {