Fixed offcanvas position (only left was working). Fixes #195

Fixed calculating the position when 'auto' is used.
Off canvas navbar is positioned to the right by default and can be placed left with `.navmenu-fixed-left`.
Added link to off canvas navbar example in other offcanvas examples

docs/examples/navbar-offcanvas/index.html

@@ -44,9 +44,10 @@
         <div class="navbar-offcanvas offcanvas">
           <a class="navmenu-brand" href="#">Project name</a>
           <ul class="nav navbar-nav">
-            <li class="active"><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
+            <li><a href="../navmenu/">Slide in</a></li>
+            <li><a href="../navmenu-push/">Push</a></li>
+            <li><a href="../navmenu-reveal">Reveal</a></li>
+            <li class="active"><a href="./">Off canvas navbar</a></li>
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
               <ul class="dropdown-menu">
@@ -68,6 +69,11 @@
         <h1>Offcanvas Navbar example</h1>
         <p>This example demonstrates using the offcanvas plugin with the navbar.</p>
       </div>
+      
+      <p>
+        By default the navbar is show on the right side of the screen. You can show it on the left side instead by
+        adding <code>.navmenu-fixed-left</code> to the <code>.navbar-offcanvas</code>.
+      </p>
     </div> <!-- /container -->
 
 

docs/examples/navmenu-push/index.html

@@ -33,6 +33,7 @@
         <li><a href="../navmenu/">Slide in</a></li>
         <li class="active"><a href="./">Push</a></li>
         <li><a href="../navmenu-reveal/">Reveal</a></li>
+        <li><a href="../navbar-offcanvas/">Off canvas navbar</a></li>
       </ul>
       <ul class="nav navmenu-nav">
         <li><a href="#">Link</a></li>
@@ -76,5 +77,6 @@
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
     <script src="../../dist/js/jasny-bootstrap.min.js"></script>
+    <script src="../../../js/offcanvas.js"></script>
   </body>
 </html>

docs/examples/navmenu-reveal/index.html

@@ -33,6 +33,7 @@
         <li><a href="../navmenu/">Slide in</a></li>
         <li><a href="../navmenu-push/">Push</a></li>
         <li class="active"><a href="./">Reveal</a></li>
+        <li><a href="../navbar-offcanvas/">Off canvas navbar</a></li>
       </ul>
       <ul class="nav navmenu-nav">
         <li><a href="#">Link</a></li>
@@ -69,7 +70,7 @@
         <p class="lead">This example demonstrates the use of the offcanvas plugin with a reveal effect.</p>
         <p>On the contrary of the push effect, the menu doesn't move with the canvas.</p>
         <p>You get the reveal effect by wrapping the content in a div and setting the <code>canvas</code> option to target that div.</p>
-        <p>Note that in this example, the navmenu doesn't have the <code>.offcanvas</code> class, but is placed under the canvas by setting the <code>z-index</code>.</p>
+        <p>Note that in this example, the navmenu doesn't have the <code>offcanvas</code> class, but is placed under the canvas by setting the <code>z-index</code>.</p>
         <p>Also take a look at the examples for a navmenu with <a href="../navmenu">slide in effect</a> and <a href="../navmenu-push">push effect</a>.</p>
       </div><!-- /.container -->
     </div>

docs/examples/navmenu/index.html

@@ -33,6 +33,7 @@
         <li class="active"><a href="./">Slide in</a></li>
         <li><a href="../navmenu-push/">Push</a></li>
         <li><a href="../navmenu-reveal/">Reveal</a></li>
+        <li><a href="../navbar-offcanvas/">Off canvas navbar</a></li>
       </ul>
       <ul class="nav navmenu-nav">
         <li><a href="#">Link</a></li>

js/offcanvas.js

@@ -1,8 +1,6 @@
 /* ========================================================================
- * Bootstrap: offcanvas.js v3.1.0
+ * Bootstrap: offcanvas.js v3.1.1
  * http://jasny.github.io/bootstrap/javascript/#offcanvas
- * 
- * Based on Boostrap collapse.js by Twitter, Inc. 
  * ========================================================================
  * Copyright 2013-2014 Arnold Daniels
  *
@@ -28,6 +26,7 @@
     this.$element = $(element)
     this.options  = $.extend({}, OffCanvas.DEFAULTS, options)
     this.state    = null
+    this.placement = null
     
     if (this.options.recalc) {
       this.calcClone()
@@ -42,14 +41,14 @@
 
   OffCanvas.DEFAULTS = {
     toggle: true,
-    placement: 'left',
+    placement: 'auto',
     autohide: true,
     recalc: true,
     disableScrolling: true
   }
 
   OffCanvas.prototype.offset = function () {
-    switch (this.options.placement) {
+    switch (this.placement) {
       case 'left':
       case 'right':  return this.$element.outerWidth()
       case 'top':
@@ -58,26 +57,31 @@
   }
   
   OffCanvas.prototype.calcPlacement = function () {
-    var horizontal = $(window).width() / this.$element.width(),
-        vertical = $(window).height() / this.$element.height()
-        
+    if (this.options.placement !== 'auto') {
+        this.placement = this.options.placement
+        return
+    }
+    
     if (!this.$element.hasClass('in')) {
       this.$element.css('visiblity', 'hidden !important').addClass('in')
     } 
     
+    var horizontal = $(window).width() / this.$element.width()
+    var vertical = $(window).height() / this.$element.height()
+        
     var element = this.$element
     function ab(a, b) {
       if (element.css(b) === 'auto') return a
       if (element.css(a) === 'auto') return b
       
-      var size_a = parseInt(element.css(a), 10),
-          size_b = parseInt(element.css(b), 10)
+      var size_a = parseInt(element.css(a), 10)
+      var size_b = parseInt(element.css(b), 10)
   
       return size_a > size_b ? b : a
     }
     
-    this.options.placement = horizontal > vertical ? ab('left', 'right') : ab('top', 'bottom')
-    
+    this.placement = horizontal >= vertical ? ab('left', 'right') : ab('top', 'bottom')
+      
     if (this.$element.css('visibility') === 'hidden !important') {
       this.$element.removeClass('in').css('visiblity', '')
     }
@@ -107,12 +111,12 @@
     // Use jQuery animation if CSS transitions aren't supported
     if (!$.support.transition) {
       var anim = {}
-      anim[this.options.placement] = "+=" + offset
+      anim[this.placement] = "+=" + offset
       return elements.animate(anim, 350, callback)
     }
 
-    var placement = this.options.placement,
-        opposite = this.opposite(placement)
+    var placement = this.placement
+    var opposite = this.opposite(placement)
     
     elements.each(function() {
       if ($(this).css(placement) !== 'auto')
@@ -129,7 +133,7 @@
 
   OffCanvas.prototype.disableScrolling = function() {
     var bodyWidth = $('body').width()
-    var prop = 'padding-' + this.opposite(this.options.placement)
+    var prop = 'padding-' + this.opposite(this.placement)
 
     if ($('body').data('offcanvas-style') === undefined) $('body').data('offcanvas-style', $('body').attr('style'))
     
@@ -151,14 +155,18 @@
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    if (this.options.placement === 'auto') this.calcPlacement()
-
     this.state = 'sliding'
-
+    this.calcPlacement();
+    
     var elements = this.getCanvasElements()
-    var offset = this.offset(),
-        placement = this.options.placement,
-        opposite = this.opposite(placement)
+    var placement = this.placement
+    var opposite = this.opposite(placement)
+    var offset = this.offset()
+
+    if (elements.index(this.$element) !== -1) {
+      this.$element.css(placement, -1 * offset)
+      this.$element.css(placement); // Workaround: Need to get the CSS property for it to be applied before the next line of code
+    }
 
     elements.addClass('canvas-sliding').each(function() {
       $(this).data('offcanvas-style', $(this).attr('style') || '')
@@ -169,8 +177,6 @@
       }
     })
     
-    if (elements.index(this.$element) !== -1) this.$element.css(placement, -1 * offset)
-
     if (this.options.disableScrolling) this.disableScrolling()
     
     var complete = function () {
@@ -196,11 +202,13 @@
     this.state = 'sliding'
 
     var elements = $('.canvas-slid')
+    var placement = this.placement
     var offset = -1 * this.offset()
 
     var complete = function () {
       this.state = null
-
+      this.placement = null
+      
       this.$element.removeClass('in')
       
       elements.removeClass('canvas-sliding')
@@ -233,9 +241,9 @@
   OffCanvas.prototype.recalc = function () {
     if (this.state !== 'slid' || this.$calcClone.css('display') === 'none') return
     
+    var placement = this.placement
     var offset = -1 * this.offset()
     
-    var placement = this.options.placement
     this.getCanvasElements().each(function() {
       $(this).css(placement, (parseInt($(this).css(placement), 10) || 0) + offset)
     }).removeClass('canvas-slid')
@@ -257,10 +265,10 @@
     return this.each(function () {
       var $this   = $(this)
       var data    = $this.data('bs.offcanvas')
-      var options = $.extend({}, OffCanvas.DEFAULTS, $this.data(), typeof option == 'object' && option)
+      var options = $.extend({}, OffCanvas.DEFAULTS, $this.data(), typeof option === 'object' && option)
 
       if (!data) $this.data('bs.offcanvas', (data = new OffCanvas(this, options)))
-      if (typeof option == 'string') data[option]()
+      if (typeof option === 'string') data[option]()
     })
   }
 

less/navmenu.less

@@ -26,11 +26,14 @@
   border-radius: 0;
 }
 .navmenu-fixed-left,
-.navbar-offcanvas {
+.navbar-offcanvas.navmenu-fixed-left {
   left: 0;
+  right: auto;
   border-width: 0 1px 0 0;
 }
-.navmenu-fixed-right {
+.navmenu-fixed-right,
+.navbar-offcanvas {
+  left: auto;
   right: 0;
   border-width: 0 0 0 1px;
 }