Testing new mobile TOC menu

_layouts/default.html

@@ -90,7 +90,9 @@
             </div>
         </footer>
 
-        <!-- Twitter -->
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+        <script src="/scripts/fastclick.js"></script>
+        <script src="/scripts/setup.js"></script>
         <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
     </body>
 </html>

less/all.less

@@ -288,6 +288,61 @@ pre{
     }
 }
 
+@media (max-width: 375px) {
+    .site-navigation{
+        background: fade(white, 95%);
+        columns: 1;
+        max-height: 100vh;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        z-index: 100;
+
+        &:before{
+            background: @phpPurpleDark;
+            box-sizing: border-box;
+            content: "\27A4   Table of Contents";
+            display: block;
+            height: 40px;
+            padding: 0 10px;
+            width: 100vh;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            color: white;
+            font-family: @sans;
+            font-size: 13px;
+            line-height: 40px;
+            text-transform: uppercase;
+            z-index: 2;
+        }
+
+        > ul{
+            background: fade(white, 96%);
+            border-top: 3px solid @phpPurple;
+            box-shadow: fade(black, 25%) 0 -5px 10px;
+            box-sizing: border-box;
+            padding: 20px;
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+            position: absolute;
+            left: 0;
+            bottom: 40px;
+            height: 50vh;
+            width: 100vh;
+            transform: translate(0,100vh);
+            transition: all 0.2s ease;
+            z-index: 1;
+        }
+
+        &.open{
+            > ul{
+                transform: translate(0,0);
+            }
+        }
+    }
+}
+
 /******************************************************************************
  * Content
  *****************************************************************************/

scripts/setup.js

@@ -1,80 +1,18 @@
 (function ($) {
-    // Load contributors
+    // Attach FastClick
-    var $contributors = $('#contributors');
+    var attachFastClick = Origami.fastclick;
-    if ( $contributors.length ) {
+    attachFastClick(document.body);
-        var fail = function () {
-            $contributors.html('<p>This project would not be possible without the help of <a href="https://github.com/codeguy/php-the-right-way/graphs/contributors">our amazing contributors</a> on GitHub.</p>');
-        };
-        $.ajax({
-            cache: false,
-            dataType: 'jsonp',
-            timeout: 3000,
-            type: 'GET',
-            url: 'https://api.github.com/repos/codeguy/php-the-right-way/contributors?per_page=100'
-        }).done(function (data) {
-            if ( data.data && data.data.length ) {
-                var $ul = $('<ul></ul>'), dataLength = data.data.length;
-                for ( var i = 0; i < dataLength; i++ ) {
-                    $ul.append(['<li><a href="https://github.com/', data.data[i].login, '" target="_blank">', data.data[i].login, '</a></li>'].join(''));
-                }
-                $contributors.html($ul);
-            } else {
-                fail();
-            }
-        }).fail(fail);
-    }
-})(jQuery);
 
-(function ($) {
+    // Mobile TOC menu
-    //Add current view's highlighting to the navigation
+    var $window = $(window),
-    
+        $nav = $('.site-navigation');
-    /** helper for highlighting */
+    $nav.click(function (e) {
-    function highlightNav(navLinks,id)
+        var $target = $(e.target);
-    {
+        if ($target.is($nav) && $window.width() <= 375) {
-        navLinks.filter('[href="/#'+id+'"]').addClass("active");
+            $nav.toggleClass('open');
         }
-
+        if ($target.is('a')) {
-    $(window).scroll(function() {
+            $nav.removeClass('open');
-        //console.log("They see me scrollin, they hatin");
-
-        //clear highlighting
-        var navLinks = $('.site-navigation a');
-        navLinks.removeClass("active");
-
-        //calc current viewport
-        var viewTop = $(window).scrollTop();
-        var viewBottom = viewTop + $(window).height();
-
-        //for all h1 and h2 elements, check if they are visible
-        //performance tweak: stop each() after the first element is found to be behind view
-        var previous = "";
-        var foundOne = false;
-        var fallback = "";
-        $('h1, h2').each(function(i,e) {
-            //get element position;
-            var eTop = $(e).offset().top;
-            var eBottom = eTop + $(e).height();
-            var id=e.id;
-            id = id.replace("_title", "");
-
-            if (eTop >= viewTop) {
-                //if we are passed the view and no heading was highlighted yet, store previous one as fallback
-                if (! foundOne) {
-                    fallback=previous;
-                }
-                if (eBottom <= viewBottom) {
-                    highlightNav(navLinks, id);
-                    foundOne = true;
-                } else {
-                    return false; //break the each(), the rest is below
-                }
-            }
-            previous=id;
-        });
-        //no h1/h2 is in the viewport, so highlight the last one above
-        if (! foundOne) {
-            highlightNav(navLinks, fallback);
         }
     });
 })(jQuery);
-