RTL off-canvas right off-canvas

Fixes #184. Support off-canvas in right side (add data-pos="right" into toggle)
t3framework · Nov 28, 2013 · ea34be3 · ea34be3
1 parent 3474487
commit ea34be3
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 8 deletions.
diff --git a/source/plg_system_t3/base-bs3/js/off-canvas.js b/source/plg_system_t3/base-bs3/js/off-canvas.js
@@ -22,7 +22,9 @@ jQuery (document).ready(function($){
         $toggles = $('.off-canvas-toggle'),
         $offcanvas = $('.t3-off-canvas'),
         $close = $('.t3-off-canvas .close'),
-        $btn=null;
+        $btn=null,
+        $nav=null,
+        direction = 'left';
     // no wrapper, just exit
     if (!$wrapper.length) return ;
 
@@ -45,13 +47,21 @@ jQuery (document).ready(function($){
     });
 
     $toggles.click (function(e){
+        // detect direction
+
         stopBubble (e);
         if ($wrapper.hasClass ('off-canvas-open')) {
             oc_hide (e);
             return;
         }
 
         $btn = $(this);
+        $nav = $($btn.data('nav'))
+
+        direction = ($('html').attr('dir') == 'rtl' && $btn.data('pos')!='right') || ($('html').attr('dir') != 'rtl' && $btn.data('pos')=='right')  ? 'right':'left';
+
+        // add direction class to body
+        $('html').removeClass ('off-canvas-left off-canvas-right').addClass ('off-canvas-' + direction);
 
         // update effect class
         $wrapper[0].className = $wrapper.data('oclass') + ' ' + $btn.data('effect');
@@ -73,8 +83,11 @@ jQuery (document).ready(function($){
 
         // fix for old ie
         if ($.browser.msie && $.browser.version < 10) {
-            $inner.animate ({'padding-left':$('.t3-off-canvas').width()});
-            $('.t3-off-canvas').animate ({left: 0});
+            var p1 = {}, p2 = {};
+            p1['padding-'+direction] = $('.t3-off-canvas').width();
+            p2[direction] = 0;
+            $inner.animate (p1);
+            $nav.animate (p2);
         }
     };
 
@@ -92,8 +105,11 @@ jQuery (document).ready(function($){
 
         // fix for old ie
         if ($.browser.msie && $.browser.version < 10) {
-            $inner.animate ({'padding-left':0});
-            $('.t3-off-canvas').animate ({left: -$('.t3-off-canvas').width()});
+            var p1 = {}, p2 = {};
+            p1['padding-'+direction] = 0;
+            p2[direction] = -$('.t3-off-canvas').width();
+            $inner.animate (p1);
+            $nav.animate (p2);
         }
     };
 

diff --git a/source/plg_system_t3/base-bs3/less/off-canvas.less b/source/plg_system_t3/base-bs3/less/off-canvas.less
@@ -123,6 +123,14 @@ body {
   }
 }
 
+html[dir="rtl"].off-canvas-left,
+html[dir="ltr"].off-canvas-right {
+  .t3-off-canvas {
+    left: auto;
+    right: 0;
+  }
+}
+
 .off-canvas-open {
   .t3-off-canvas::after {
     width: 0;
@@ -334,6 +342,19 @@ body {
   transform: translate3d(0, 0, 0);
 }
 
+.off-canvas-right {
+  .off-canvas-effect-5.off-canvas-open .t3-wrapper {
+    -webkit-transform: translate3d(-@t3-off-canvas-width, 0, 0);
+    transform: translate3d(-@t3-off-canvas-width, 0, 0);
+  }
+
+  .off-canvas-effect-5.t3-off-canvas {
+    z-index: 1;
+    -webkit-transform: translate3d(-50%, 0, 0);
+    transform: translate3d(-50%, 0, 0);
+  }
+
+}
 
 // Effect 6: Rotate pusher
 // -----------------------
@@ -676,8 +697,16 @@ body.off-canvas-effect-14 {
 
 .old-ie {
   .t3-off-canvas {
-    z-index: 100;
+    z-index: 100!important;
     left: -@t3-off-canvas-width;
     visibility: visible;
   }
 }
+
+html[dir="rtl"].off-canvas-left.old-ie,
+html[dir="ltr"].off-canvas-right.old-ie {
+  .t3-off-canvas {
+    right: -@t3-off-canvas-width;
+    left: auto;
+  }
+}
diff --git a/source/tpl_t3_bs3_blank/tpls/blocks/off-canvas.php b/source/tpl_t3_bs3_blank/tpls/blocks/off-canvas.php
@@ -11,7 +11,7 @@
 	if (!$this->getParam('addon_offcanvas_enable')) return ;
 ?>
 
-<button class="btn btn-primary off-canvas-toggle" type="button" data-nav="#t3-off-canvas" data-effect="<?php echo $this->getParam('addon_offcanvas_effect', 'off-canvas-effect-4') ?>">
+<button class="btn btn-primary off-canvas-toggle" type="button" data-nav="#t3-off-canvas" data-pos="left" data-effect="<?php echo $this->getParam('addon_offcanvas_effect', 'off-canvas-effect-4') ?>">
   <i class="fa fa-bars"></i>
 </button>
 
@@ -29,4 +29,3 @@
 
 </div>
 <!-- //OFF-CANVAS SIDEBAR -->
-