right aligned sidebar option

Dogfalo · Dec 31, 2014 · 3ba35de · 3ba35de
1 parent 9e6a508
commit 3ba35de
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 36 deletions.
diff --git a/bin/materialize.css b/bin/materialize.css
@@ -6248,6 +6248,10 @@ ul.table-of-contents a {
     -moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
     box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
     will-change: left; }
+    ul.side-nav.right {
+      will-change: right;
+      right: -250px;
+      left: auto; }
     ul.side-nav li {
       float: none;
       padding: 0 15px; }
@@ -6270,6 +6274,10 @@ ul.side-nav.full {
   -moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
   box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
   will-change: left; }
+  ul.side-nav.full.right {
+    will-change: right;
+    right: -250px;
+    left: auto; }
   ul.side-nav.full li {
     float: none;
     line-height: 64px;

diff --git a/bin/materialize.js b/bin/materialize.js
diff --git a/css/ghpages-materialize.css b/css/ghpages-materialize.css
@@ -6248,6 +6248,10 @@ ul.table-of-contents a {
     -moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
     box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
     will-change: left; }
+    ul.side-nav.right {
+      will-change: right;
+      right: -250px;
+      left: auto; }
     ul.side-nav li {
       float: none;
       padding: 0 15px; }
@@ -6270,6 +6274,10 @@ ul.side-nav.full {
   -moz-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
   box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
   will-change: left; }
+  ul.side-nav.full.right {
+    will-change: right;
+    right: -250px;
+    left: auto; }
   ul.side-nav.full li {
     float: none;
     line-height: 64px;

diff --git a/jade/javascript/javascript_content.html b/jade/javascript/javascript_content.html
@@ -257,7 +257,7 @@ <h4>Options</h4>
     <div class="col s12 m9 l10">
       <div id="tabs" class="section scrollspy">
         <h2 class="header">Navigation</h2>
-        
+
         <p class="caption">
           Here you can learn about our different navigation options. These components can help organize and divide your content into easier to read portions.
         </p>
@@ -347,17 +347,23 @@ <h5>Tabs HTML Structure</h5>
     &lt;/li>
   &lt;/ul>
   &lt;a href="#" data-activates="slide-out" class="button-collapse">&lt;i class="mdi-navigation-menu">&lt;/i>&lt;/a>
-        </code></pre>
+        </code></pre><br>
 
         <h5>jQuery Plugin Initialization</h5>
         <pre><code class="language-javascript col s12">
   $(".button-collapse").sideNav();
+        </code></pre><br>
+
+        <h5>Sidebar Alignment</h5>
+        <p>Add the option <code class="language-markup">right</code> to your initialization.</p>
+        <pre><code class="language-javascript col s12">
+  $(".button-collapse").sideNav({edge: 'right'});
         </code></pre>
       </div>
       <div id="pushpin" class="section scrollspy">
         <h4>Pushpin</h4>
         <p>Pushpin is our fixed positioning plugin. You can check out our live examples: The fixed tabs on top, and our fixed categories on the left. </p>
-        
+
         <h5>jQuery Plugin Options</h5>
         <table class="hoverable">
           <thead>
@@ -399,7 +405,7 @@ <h5>jQuery Plugin Initialization</h5>
   <div class="col hide-on-small-only m3 l2">
     <div style="height: 1px;">
       <ul class="section table-of-contents">
-        <li><a href="#waves">Waves</a></li>        
+        <li><a href="#waves">Waves</a></li>
         <li><a href="#customization">Customization</a></li>
       </ul>
     </div>
@@ -525,7 +531,7 @@ <h3 class="header">Slider</h3>
               <h3>This is our big Tagline!</h3>
               <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
             </div>
-          </li> 
+          </li>
           <li>
             <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
             <div class="caption left-align">
@@ -559,7 +565,7 @@ <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
           &lt;h3>This is our big Tagline!&lt;/h3>
           &lt;h5 class="light grey-text text-lighten-3">Here's our small slogan.&lt;/h5>
         &lt;/div>
-      &lt;/li> 
+      &lt;/li>
       &lt;li>
         &lt;img src="http://lorempixel.com/580/250/nature/2"> &lt;!-- random image -->
         &lt;div class="caption left-align">
@@ -630,7 +636,7 @@ <h4>Parallax Container CSS</h4>
   <div class="col hide-on-small-only m3 l2">
     <div style="height: 1px;">
       <ul class="section table-of-contents">
-        <li><a href="#collapsible">Collapsible</a></li>        
+        <li><a href="#collapsible">Collapsible</a></li>
         <li><a href="#accordion">Accordion</a></li>
         <li><a href="#expandable">Expandable</a></li>
       </ul>

diff --git a/javascript.html b/javascript.html
@@ -314,7 +314,7 @@ <h4>Options</h4>
     <div class="col s12 m9 l10">
       <div id="tabs" class="section scrollspy">
         <h2 class="header">Navigation</h2>
-        
+
         <p class="caption">
           Here you can learn about our different navigation options. These components can help organize and divide your content into easier to read portions.
         </p>
@@ -404,17 +404,23 @@ <h5>Tabs HTML Structure</h5>
     &lt;/li>
   &lt;/ul>
   &lt;a href="#" data-activates="slide-out" class="button-collapse">&lt;i class="mdi-navigation-menu">&lt;/i>&lt;/a>
-        </code></pre>
+        </code></pre><br>
 
         <h5>jQuery Plugin Initialization</h5>
         <pre><code class="language-javascript col s12">
   $(".button-collapse").sideNav();
+        </code></pre><br>
+
+        <h5>Sidebar Alignment</h5>
+        <p>Add the option <code class="language-markup">right</code> to your initialization.</p>
+        <pre><code class="language-javascript col s12">
+  $(".button-collapse").sideNav({edge: 'right'});
         </code></pre>
       </div>
       <div id="pushpin" class="section scrollspy">
         <h4>Pushpin</h4>
         <p>Pushpin is our fixed positioning plugin. You can check out our live examples: The fixed tabs on top, and our fixed categories on the left. </p>
-        
+
         <h5>jQuery Plugin Options</h5>
         <table class="hoverable">
           <thead>
@@ -456,7 +462,7 @@ <h5>jQuery Plugin Initialization</h5>
   <div class="col hide-on-small-only m3 l2">
     <div style="height: 1px;">
       <ul class="section table-of-contents">
-        <li><a href="#waves">Waves</a></li>        
+        <li><a href="#waves">Waves</a></li>
         <li><a href="#customization">Customization</a></li>
       </ul>
     </div>
@@ -582,7 +588,7 @@ <h3 class="header">Slider</h3>
               <h3>This is our big Tagline!</h3>
               <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
             </div>
-          </li> 
+          </li>
           <li>
             <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
             <div class="caption left-align">
@@ -616,7 +622,7 @@ <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
           &lt;h3>This is our big Tagline!&lt;/h3>
           &lt;h5 class="light grey-text text-lighten-3">Here's our small slogan.&lt;/h5>
         &lt;/div>
-      &lt;/li> 
+      &lt;/li>
       &lt;li>
         &lt;img src="http://lorempixel.com/580/250/nature/2"> &lt;!-- random image -->
         &lt;div class="caption left-align">
@@ -687,7 +693,7 @@ <h4>Parallax Container CSS</h4>
   <div class="col hide-on-small-only m3 l2">
     <div style="height: 1px;">
       <ul class="section table-of-contents">
-        <li><a href="#collapsible">Collapsible</a></li>        
+        <li><a href="#collapsible">Collapsible</a></li>
         <li><a href="#accordion">Accordion</a></li>
         <li><a href="#expandable">Expandable</a></li>
       </ul>

diff --git a/js/init.js b/js/init.js
@@ -24,15 +24,15 @@
         }
       });
     });
-    
+
 
     // Floating-Fixed table of contents
     if ($('.table-of-contents').length) {
       var toc_offset = 112;
       $('.table-of-contents').each(function() {
         var origin = $(this);
         origin.pushpin({ top: toc_offset, bottom: $(document).height() - $('footer').height(), offset: $('.tabs-wrapper').height() });
-      });      
+      });
     }
 
 
@@ -43,7 +43,7 @@
         $timesToCheck = 3;
     function checkForChanges()
     {
-        if ($bsa.find('#carbonads').height() > 0) 
+        if ($bsa.find('#carbonads').height() > 0)
         {
               $('.table-of-contents').css('marginTop', 285);
               // Floating-Fixed table of contents
@@ -56,16 +56,16 @@
                 $(window).scroll(function() {
 
                   if (origin.is(":visible")) {
-                    origin.attr('data-origpos', origin.position().top - tabs_height + 285);            
-                    origin.attr('data-origmargin', 285);            
+                    origin.attr('data-origpos', origin.position().top - tabs_height + 285);
+                    origin.attr('data-origmargin', 285);
                   }
                 });
               });
         }
         else {
           $timesToCheck -= 1;
           if ($timesToCheck >= 0) {
-            setTimeout(checkForChanges, 500);            
+            setTimeout(checkForChanges, 500);
           }
         }
 
@@ -76,14 +76,14 @@
 
     // Tabs Fixed
     if ($('.tabs-wrapper').length) {
-      $('.tabs-wrapper .row').pushpin({ top: $('.tabs-wrapper').offset().top });      
+      $('.tabs-wrapper .row').pushpin({ top: $('.tabs-wrapper').offset().top });
     }
 
     // Github Latest Commit
     if ($('.github-commit').length) { // Checks if widget div exists (Index only)
       $.ajax({
         url: "https://api.github.com/repos/dogfalo/materialize/commits/master",
-        dataType: "json", 
+        dataType: "json",
         success: function (data) {
           var sha = data.sha,
               date = jQuery.timeago(data.commit.author.date);
@@ -94,18 +94,18 @@
           $('.github-commit').find('.sha').html(sha).attr('href', data.html_url);
 
           // console.log(returndata, returndata.commit.author.date, returndata.sha);
-        }  
-      });      
+        }
+      });
     }
-  
+
     // Toggle Flow Text
     var toggleFlowTextButton = $('#flow-toggle')
     toggleFlowTextButton.click( function(){
       $('#flow-text-demo').children('p').each(function(){
           $(this).toggleClass('flow-text');
         })
     });
-    
+
 //    Toggle Containers on page
     var toggleContainersButton = $('#container-toggle-button');
     toggleContainersButton.click(function(){

diff --git a/js/sideNav.js b/js/sideNav.js
@@ -41,20 +41,30 @@
     $.fn.sideNav = function (options) {
       var defaults = {
         menuWidth: 240,
-        activationWidth: 70
+        activationWidth: 70,
+        edge: 'left'
       }
       options = $.extend(defaults, options);
 
       $(this).each(function(){
         var $this = $(this);
         var menu_id = $("#"+ $this.attr('data-activates'));
+        if (options.edge != 'left') {
+          menu_id.addClass('right');
+        }
 
         function removeMenu() {
           $('#sidenav-overlay').animate({opacity: 0}, {duration: 300, queue: false, easing: 'easeOutQuad',
             complete: function() {
               $(this).remove();
             } });
-          menu_id.velocity({left: -1 * (options.menuWidth + 10)}, {duration: 300, queue: false, easing: 'easeOutQuad'});
+
+          if (options.edge === 'left') {
+            menu_id.velocity({left: -1 * (options.menuWidth + 10)}, {duration: 300, queue: false, easing: 'easeOutQuad'});
+          }
+          else {
+            menu_id.velocity({right: -1 * (options.menuWidth + 10)}, {duration: 300, queue: false, easing: 'easeOutQuad'});
+          }
           enable_scroll();
         }
 
@@ -80,7 +90,13 @@
                   panning = false;
                   menuOut = false;
                   removeMenu();
-                  menu_id.velocity({left: -1 * options.menuWidth}, {duration: 300, queue: false, easing: 'easeOutQuad'});
+
+                  if (options.edge === 'left') {
+                    menu_id.velocity({left: -1 * options.menuWidth}, {duration: 300, queue: false, easing: 'easeOutQuad'});
+                  }
+                  else {
+                    menu_id.velocity({right: -1 * options.menuWidth}, {duration: 300, queue: false, easing: 'easeOutQuad'});
+                  }
                   overlay.animate({opacity: 0}, {duration: 300, queue: false, easing: 'easeOutQuad',
                     complete: function() {
                       $(this).remove();
@@ -97,7 +113,12 @@
               else if (x < (options.menuWidth / 2)) { menuOut = false; }
               else if (x >= (options.menuWidth / 2)) { menuOut = true; }
 
-              menu_id.velocity({left: (-1 * options.menuWidth) + x}, {duration: 50, queue: false, easing: 'easeOutQuad'});
+              if (options.edge === 'left') {
+                menu_id.velocity({left: (-1 * options.menuWidth) + x}, {duration: 50, queue: false, easing: 'easeOutQuad'});
+              }
+              else {
+                menu_id.velocity({right: (-1 * options.menuWidth) + x}, {duration: 50, queue: false, easing: 'easeOutQuad'});
+              }
 
                 // Percentage overlay
                 var overlayPerc = x / options.menuWidth;
@@ -142,7 +163,12 @@
             }
             else {
               disable_scroll();
-              menu_id.velocity({left: 0}, {duration: 300, queue: false, easing: 'easeOutQuad'});
+              if (options.edge === 'left') {
+                menu_id.velocity({left: 0}, {duration: 300, queue: false, easing: 'easeOutQuad'});
+              }
+              else {
+                menu_id.velocity({right: 0}, {duration: 300, queue: false, easing: 'easeOutQuad'});
+              }
 
               var overlay = $('<div id="sidenav-overlay"></div>');
               overlay.css('opacity', 0)

diff --git a/sass/components/_sideNav.scss b/sass/components/_sideNav.scss
@@ -8,9 +8,17 @@
     background-color: #FFF;
     z-index: 999;
     @include box-shadow-2(0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15));
-    
+
     will-change: left;
 
+    // Right Align
+    &.right {
+      will-change: right;
+      right: -250px;
+      left: auto;
+    }
+
+
     li {
       float: none;
       padding: 0 15px;
@@ -33,9 +41,16 @@ ul.side-nav.full {
   background-color: #FFF;
   z-index: 999;
   @include box-shadow-2(0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15));
-  
+
   will-change: left;
 
+  // Right Align
+  &.right {
+    will-change: right;
+    right: -250px;
+    left: auto;
+  }
+
   li {
     float: none;
     line-height: 64px;
@@ -59,6 +74,6 @@ ul.side-nav.full {
   bottom: 0px;
   background-color: rgba(0,0,0,.5);
   z-index: 998;
-  
+
   will-change: opacity;
 }