Sidebar affix, CSS vendor prefixes

Added sidebar scroll affix, CSS vendor prefixes, improves HTML structure
json-api · dgeb · May 19, 2015 · Mar 27, 2015 · Mar 27, 2015 · Mar 29, 2015
commit fd5e53fa2af7965ed6a9acf1cea6cc639070b2d5
diff --git a/Gemfile b/Gemfile
@@ -6,7 +6,7 @@ gem "rake", "~> 10.0"
 gem "jekyll", "~> 1.0"
 gem "redcarpet", "~> 2.2"
 gem "rb-fsevent", "~> 0.9"
-gem "compass", "~> 0.12"
-gem "sass", "~> 3.2"
+gem "compass", "~> 1.0"
+gem "sass", "~> 3.4"
 gem "launchy", "~> 2.3"
 gem "redcard", "~> 1.0"
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -7,7 +7,7 @@
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
 
     <!-- Use title if it's in the page YAML frontmatter -->
-    <title>JSON API :: {{ page..title }}</title>
+    <title>JSON:API - {{ page.title }}</title>
 
     <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
     <link href="/stylesheets/normalize.css" media="screen" rel="stylesheet" type="text/css" />
@@ -35,21 +35,25 @@
           <h1>JSON:API</h1>
           <div class="quicklinks">
             {% for link in site.quicklinks %}
-              <a href="{{link.url}}">{{link.title}}</a>
+              <a href="{{link.url}}" title="{{link.title}}">{{link.title}}</a>
             {% endfor %}
           </div>
         </div>
       </header>
     {% endif %}
     <div class="site-wrapper">
       {% if page.show_sidebar %}
-        <nav class="site-content-nav" id="document-outline">
-          <h2>{{ page.title }}</h2>
-        </nav>
+        <div class="sidebar">
+          <nav class="site-content-nav" id="document-outline">
+            <h2>{{ page.title }}</h2>
+          </nav>
+        </div>
       {% endif %}
-      <section class="site-content">
-        {{ content }}
-      </section>
+      <div class="content">
+        <section>
+          {{ content }}
+        </section>
+      </div>
     </div>
     <footer>
       <span>Built with <a href="http://jekyllrb.com/">Jekyll</a> and <a href="http://softwaremaniacs.org/soft/highlight/en/">Highlight.js</a></span>

diff --git a/javascripts/sidebar-nav.js b/javascripts/sidebar-nav.js
@@ -1,14 +1,29 @@
 $(document).ready(function() {
-    var articleOutline = createOutlineFromArticle($('.site-content').eq(0));
+    // Build navigation list
+    var articleOutline = createOutlineFromElement($('.content').eq(0));
     var navList = createArticleNavigationFromOutline(articleOutline);
     $("#document-outline").append(navList);
 
-    $("#document-outline li").click(function(event) {
-        $("#document-outline li").removeClass('active');
-        $(this).toggleClass('active');
-    })
+    // Scroll affix
+    fixElement($(".sidebar"), 50);
 });
 
+function fixElement(element, offset) {
+    var affixWaypoint = element.offset().top - offset;
+
+    $(window).scroll(function(event) {
+        var scrollPosition = $(window).scrollTop();
+
+        if(scrollPosition >= affixWaypoint) {
+            element.css('position', 'fixed');
+            element.css('top', offset + 'px');
+        } else {
+            element.css('position', 'relative');
+            element.css('top', '0');
+        }
+    });
+}
+
 /**
  * Returns an array in the form of:
  *  [{
@@ -20,11 +35,14 @@ $(document).ready(function() {
  *      href: "#anchor",
  *      children: [...]
  *  }];
+ *
+ * @param  {jQuery element} element The HTML element to create the outline from.
+ * @return {array}                  Array in the form described above.
  */
-function createOutlineFromArticle(article) {
+function createOutlineFromElement(element) {
     var outline = [];
 
-    $('h2', article).each(function() {
+    $('h2', element).each(function() {
         var item = {
             title: $(this).not('a').text(),
             href: $(this).find('a').attr('href') || "#",
@@ -48,27 +66,32 @@ function createOutlineFromArticle(article) {
 }
 
 /**
- * Creates a nested list from an array in the form returned by `createOutlineFromArticle`.
+ * Creates a nested list from an array in the form returned by `createOutlineFromElement`.
  */
-function createArticleNavigationFromOutline(outline) {
-    function createListFromItems(items) {
-        var ol = document.createElement('ol');
-        ol.class = "nav"
 
-        items.forEach(function(item) {
-            var a = document.createElement('a');
-            a.href = item.href;
-            a.appendChild(document.createTextNode(item.title));
+/**
+ * Creates a nested list from an array in the form returned by `createOutlineFromElement`.
+ * 
+ * @param  {array}   outline The outline from which to create a navigation list.
+ * @return {element}        The HTML element containing the navigation list.
+ */
+function createArticleNavigationFromOutline(outline) {
+    var ol = document.createElement('ol');
+    ol.class = "nav"
 
-            var li = document.createElement('li');
-            li.appendChild(a);
-            li.appendChild(createListFromItems(item.children));
+    outline.forEach(function(item) {
+        var a = document.createElement('a');
+        a.href = item.href;
+        a.appendChild(document.createTextNode(item.title));
 
-            ol.appendChild(li);
-        });
+        var li = document.createElement('li');
+        li.appendChild(a);
+        if(item.children.length > 0) {
+            li.appendChild(createArticleNavigationFromOutline(item.children));
+        }
 
-        return ol;
-    }
+        ol.appendChild(li);
+    });
 
-    return createListFromItems(outline);
+    return ol;
 }
diff --git a/stylesheets/all.css b/stylesheets/all.css
diff --git a/stylesheets/all.css.map b/stylesheets/all.css.map