Ticket #13525: nav-menu-rtl-js.13525.diff

wp-admin/js/nav-menu.dev.js

@@ -22 +22 @@
                 menuList : undefined,   // Set in init.
                 targetList : undefined, // Set in init.
                 menusChanged : false,
+                isRTL: !! ( 'undefined' != typeof isRtl && isRtl ),
 
                 // Functions that run on init.
                 init : function() {
@@ -52 +53 @@
                         // jQuery extensions
                         $.fn.extend({
                                 menuItemDepth : function() {
-                                        var margin = this.eq(0).css('margin-left');
+                                        var margin = api.isRTL ? this.eq(0).css('margin-right') : this.eq(0).css('margin-left');
                                         return api.pxToDepth( margin && -1 != margin.indexOf('px') ? margin.slice(0, -2) : 0 );
                                 },
                                 updateDepthClass : function(current, prev) {
@@ -244 +245 @@
                                 placeholder: 'sortable-placeholder',
                                 start: function(e, ui) {
                                         var height, width, parent, children, maxChildDepth, tempHolder;
+                                        
+                                        // handle placement for rtl orientation
+                                        if ( api.isRTL )
+                                                ui.item[0].style.right = 'auto';
 
                                         transport = ui.item.children('.menu-item-transport');
 
@@ -306 +311 @@
                                         // address sortable's incorrectly-calculated top in opera
                                         ui.item[0].style.top = 0;
 
+                                        // handle drop placement for rtl orientation
+                                        if ( api.isRTL ) {
+                                                ui.item[0].style.left = 'auto';
+                                                ui.item[0].style.right = 0;
+                                        }
+
                                 },
                                 change: function(e, ui) {
                                         // Make sure the placeholder is inside the menu.
@@ -317 +328 @@
                                 },
                                 sort: function(e, ui) {
                                         var offset = ui.helper.offset(),
-                                                depth = api.pxToDepth( offset.left - menuLeft );
+                                                depth = Math.abs( api.pxToDepth( offset.left - menuLeft ) );
                                         // Check and correct if depth is not within range.
                                         // Also, if the dragged element is dragged upwards over
                                         // an item, shift the placeholder to a child position.
@@ -656 +667 @@
                                         if( ! t.length ) return;
                                         left = t.offset().left;
                                         right = left + t.outerWidth();
-                                        if( right > fixedRight )
-                                                fluid.animate({ 'margin-left' :  "+=" + (fixedRight - right) + 'px' }, 'fast');
-                                        else if ( left < fixedLeft )
-                                                fluid.animate({ 'margin-left' :  "-=" + (left - fixedLeft) + 'px' }, 'fast');
+                                        if( right > fixedRight ) {
+                                                if ( api.isRTL )
+                                                        fluid.animate({ 'margin-right' :  "+=" + (fixedRight - right) + 'px' }, 'fast');
+                                                else
+                                                        fluid.animate({ 'margin-left' :  "+=" + (fixedRight - right) + 'px' }, 'fast');
+                                        } else if ( left < fixedLeft ) {
+                                                if ( api.isRTL )
+                                                        fluid.animate({ 'margin-right' :  "-=" + (left - fixedLeft) + 'px' }, 'fast');
+                                                else
+                                                        fluid.animate({ 'margin-left' :  "-=" + (left - fixedLeft) + 'px' }, 'fast');
+                                        }
                                         return t;
                                 },
                                 isTabVisible : function() {
@@ -681 +699 @@
                                 - fluid.css('padding-right').slice(0,-2) )
                                 return;
 
-                        // Set up right margin for overflow, unset padding
-                        fluid.css({
-                                'margin-right'  : (-1 * tabsWidth) + 'px',
-                                'padding' : 0
-                        });
+                        if ( api.isRTL ) {
+                                fluid.css({
+                                        'margin-left'  : (-1 * tabsWidth) + 'px',
+                                        'padding' : 0
+                                });
+                        } else {
+                                // Set up right margin for overflow, unset padding
+                                fluid.css({
+                                        'margin-right'  : (-1 * tabsWidth) + 'px',
+                                        'padding' : 0
+                                });
+                        }
 
                         // Build tab navigation
                         arrowLeft = $('<div class="nav-tabs-arrow nav-tabs-arrow-left"><a>&laquo;</a></div>');
@@ -722 +747 @@
                                         var last = tabs[that.last](),
                                                 fn = function() {
                                                         if( ! last.isTabVisible() )
-                                                                fluid.animate({ 'margin-left' :  that.operator + '90px' }, 300, "linear", fn);
+                                                                if ( api.isRTL )
+                                                                        fluid.animate({ 'margin-right' :  that.operator + '90px' }, 300, "linear", fn);
+                                                                else
+                                                                        fluid.animate({ 'margin-left' :  that.operator + '90px' }, 300, "linear", fn);
                                                 };
                                                 fn();
                                 }).mouseup(function(){