flip left and right on tooltips and popovers [morteza#67]

Gruntfile.js

@@ -62,15 +62,27 @@ module.exports = function(grunt) {
                 'dist/css/bootstrap-flipped.css', 
                 'dist/css/<%= pkg.name %>.min.css',
                 'dist/css/bootstrap-flipped.min.css']
-        }        
+        }
+    },
+
+    uglify: {
+      options: {
+        mangle: false
+      },
+      my_target: {
+        files: {
+          'dist/js/bootstrap-rtl.min.js': ['examples/originals/dist/js/bootstrap.js', 'js/bootstrap-rtl-addons.js']
+        }
+      }
     }
   });
 
 
 // Load uglify plugin
 grunt.loadNpmTasks('grunt-contrib-less');
 grunt.loadNpmTasks('grunt-banner');
+grunt.loadNpmTasks('grunt-contrib-uglify');
 
 // Default Task
-grunt.registerTask('default', ['less', 'usebanner']);
-};
+grunt.registerTask('default', ['less', 'usebanner', 'uglify']);
+};

bower.json

@@ -7,7 +7,8 @@
     "Morteza Ansarinia (http://github.com/morteza)"
   ],
   "main": [
-    "dist/css/bootstrap-rtl.css"
+    "dist/css/bootstrap-rtl.css",
+    "dist/js/bootstrap-rtl.min.js"
   ],
   "ignore": [
     "**/.*",

js/bootstrap-rtl-addons.js

@@ -0,0 +1,8 @@
+$.fn.tooltip.Constructor.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
+  return placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2 } :
+         placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
+         placement == 'right'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
+      /* placement == 'left' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
+};
+
+$.fn.popover.Constructor.prototype.getCalculatedOffset = $.fn.tooltip.Constructor.prototype.getCalculatedOffset;

less/bootstrap-rtl.less

@@ -48,7 +48,7 @@
 
 // Components w/ JavaScript
 @import "modals-rtl.less";
-//@import "tooltip.less";
+@import "tooltip-rtl.less";
 @import "popovers-rtl.less";
 @import "carousel-rtl.less";
 

less/popovers-rtl.less

@@ -6,9 +6,7 @@
 .popover {
   left: auto;
   text-align: right;
-}
 
-.popover {
   &.top > .arrow {
     right: 50%;
     left: auto;
@@ -19,6 +17,7 @@
       margin-left: auto;
     }
   }
+
   &.bottom > .arrow {
     right: 50%;
     left: auto;
@@ -30,4 +29,46 @@
     }
   }
 
+  &.right   { margin-left: -@popover-arrow-width; }
+  &.left    { margin-left: @popover-arrow-width; }
+
+  &.right > .arrow {
+    right: -@popover-arrow-outer-width;
+    left: auto;
+    border-right-width: 0;
+    border-left-width: @popover-arrow-width;
+    border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+    border-left-color: @popover-arrow-outer-color;
+    border-right-color: transparent;
+
+    &:after {
+      content: " ";
+      left: auto;
+      right: 1px;
+      border-right-width: 0;
+      border-left-width: @popover-arrow-width;
+      border-left-color: @popover-arrow-color;
+      border-right-color: transparent;
+    }
+  }
+
+  &.left > .arrow {
+    left: -@popover-arrow-outer-width;
+    right: auto;
+    border-left-width: 0;
+    border-right-width: @popover-arrow-width;
+    border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+    border-right-color: @popover-arrow-outer-color;
+    border-left-color: transparent;
+
+    &:after {
+      content: " ";
+      left: 1px;
+      right: auto;
+      border-left-width: 0;
+      border-right-width: @popover-arrow-width;
+      border-right-color: @popover-arrow-color;
+      border-left-color: transparent;
+    }
+  }
 }

less/tooltip-rtl.less

@@ -0,0 +1,45 @@
+//
+// Tooltips
+// --------------------------------------------------
+
+
+// Base class
+.tooltip {
+  &.right  { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
+  &.left   { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
+}
+
+// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
+.tooltip {
+  &.top-left .tooltip-arrow {
+    left: @tooltip-arrow-width;
+    right: auto;
+  }
+  &.top-right .tooltip-arrow {
+    right: @tooltip-arrow-width;
+    left: auto;
+  }
+  &.right .tooltip-arrow {
+    right: 0;
+    left: auto;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-left-color: @tooltip-arrow-color;
+    border-right-color: transparent;
+  }
+  &.left .tooltip-arrow {
+    left: 0;
+    right: auto;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-right-color: @tooltip-arrow-color;
+    border-left-color: transparent;
+  }
+  &.bottom-left .tooltip-arrow {
+    left: @tooltip-arrow-width;
+    right: auto;
+  }
+  &.bottom-right .tooltip-arrow {
+    right: @tooltip-arrow-width;
+    left: auto;
+  }
+}

package.json

@@ -22,7 +22,8 @@
   "devDependencies": {
     "grunt": "~0.4.5",
     "grunt-banner": "~0.2.3",
-    "grunt-contrib-less": "~0.12.0"
+    "grunt-contrib-less": "~0.12.0",
+    "grunt-contrib-uglify": "~0.9.1"
   },
   "engines": {
     "node": "~0.10.1"