Merge branch 'rtl/js' of https://github.com/MohammadYounes/Semantic-UI into next

src/definitions/modules/popup.js

@@ -563,13 +563,14 @@ $.fn.popup = function(parameters) {
                 ? parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-top'), 10)
                 : 0,
               marginLeft    = (settings.inline)
-                ? parseInt( window.getComputedStyle(targetElement).getPropertyValue('margin-left'), 10)
+                ? parseInt( window.getComputedStyle(targetElement).getPropertyValue(module.is.rtl() ? 'margin-right' : 'margin-left'), 10)
                 : 0,
 
               target        = (settings.inline || settings.popup)
                 ? $target.position()
                 : $target.offset(),
 
+              computedPosition,
               positioning,
               offstagePosition
             ;
@@ -597,7 +598,14 @@ $.fn.popup = function(parameters) {
               }
             }
             module.debug('Calculating popup positioning', position);
-            switch(position) {
+
+            computedPosition = position;
+            if (module.is.rtl()) {
+              computedPosition = computedPosition.replace(/left|right/g, function (m) { return m == 'left' ? 'right' : 'left' });
+              module.debug('RTL: popup positioning updated', computedPosition);
+            }
+
+            switch (computedPosition) {
               case 'top left':
                 positioning = {
                   top    : 'auto',
@@ -806,6 +814,9 @@ $.fn.popup = function(parameters) {
           },
           hidden: function() {
             return !module.is.visible();
+          },
+          rtl: function () {
+            return $module.css('direction') == 'rtl';
           }
         },
 

src/definitions/modules/sidebar.js

@@ -196,8 +196,13 @@ $.fn.sidebar = function(parameters) {
             var
               width  = $module.outerWidth(),
               height = $module.outerHeight(),
+              negativeWidth = width * -1,
               style
             ;
+            if (module.is.rtl()) {
+              width *= -1;
+              negativeWidth *= -1;
+            }
             style  = ''
               + '<style title="' + namespace + '">'
               + ' .ui.visible.left.sidebar ~ .fixed,'
@@ -207,8 +212,8 @@ $.fn.sidebar = function(parameters) {
               + ' }'
               + ' .ui.visible.right.sidebar ~ .fixed,'
               + ' .ui.visible.right.sidebar ~ .pusher {'
-              + '   -webkit-transform: translate3d(-'+ width + 'px, 0, 0);'
-              + '           transform: translate3d(-'+ width + 'px, 0, 0);'
+              + '   -webkit-transform: translate3d('+ negativeWidth + 'px, 0, 0);'
+              + '           transform: translate3d('+ negativeWidth + 'px, 0, 0);'
               + ' }'
               + ' .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .fixed,'
               + ' .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher,'
@@ -238,8 +243,8 @@ $.fn.sidebar = function(parameters) {
                 + '           transform: translate3d('+ width + 'px, 0, 0);'
                 + ' }'
                 + ' .ui.visible.right.sidebar ~ .pusher:after {'
-                + '   -webkit-transform: translate3d(-'+ width + 'px, 0, 0);'
-                + '           transform: translate3d(-'+ width + 'px, 0, 0);'
+                + '   -webkit-transform: translate3d('+ negativeWidth + 'px, 0, 0);'
+                + '           transform: translate3d('+ negativeWidth + 'px, 0, 0);'
                 + ' }'
                 + ' .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher:after,'
                 + ' .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher:after {'
@@ -777,6 +782,9 @@ $.fn.sidebar = function(parameters) {
           },
           animating: function() {
             return $context.hasClass(className.animating);
+          },
+          rtl: function () {
+            return $module.css('direction') == 'rtl';
           }
         },