More changes

config.rb

@@ -50,7 +50,7 @@ set :images_dir, 'images'
 
 set :markdown_engine, :redcarpet
 
-set :markdown, :fenced_code_blocks => true, :smartypants => true, :disable_indented_code_blocks => true, :prettify => true, :with_toc_data => true, :tables => true
+set :markdown, :fenced_code_blocks => true, :smartypants => true, :disable_indented_code_blocks => true, :prettify => true, :tables => true
 
 # Activate the syntax highlighter
 activate :syntax

source/javascripts/jquery.tocify.js

 /* jquery Tocify - v1.8.0 - 2013-09-16
 * http://www.gregfranko.com/jquery.tocify.js/
-* Copyright (c) 2013 Greg Franko; Licensed MIT */
+* Copyright (c) 2013 Greg Franko; Licensed MIT
+* Modified lightly by Robert Lord to fix a bug I found,
+* and also so it adds ids to headers
+* also because I want height caching, since the
+* height lookup for h1s and h2s was causing serious
+* lag spikes below 30 fps */
 
 // Immediately-Invoked Function Expression (IIFE) [Ben Alman Blog Post](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) that calls another IIFE that contains all of the plugin logic.  I used this pattern so that anyone viewing this code would not have to scroll to the bottom of the page to view the local parameters that were passed to the main IIFE.
 (function(tocify) {
@@ -149,6 +154,10 @@
             // Generates the HTML for the dynamic table of contents
             self._generateToc();
 
+            // Caches heights and anchors
+            self.cachedHeights = [],
+            self.cachedAnchors = [];
+
             // Adds CSS classes to the newly generated table of contents HTML
             self._addCSSClasses();
 
@@ -377,6 +386,10 @@
 
             hashValue = this._generateHashValue(arr, self, index);
 
+            // ADDED BY ROBERT
+            // actually add the hash value to the element's id
+            self.attr("id", "link-" + hashValue);
+
             // Appends a list item HTML element to the last unordered list HTML element found within the HTML element calling the plugin
             item = $("<li/>", {
 
@@ -414,10 +427,16 @@
                 hashGeneratorOption = this.options.hashGenerator;
 
             if (hashGeneratorOption === "pretty") {
+                // remove weird characters
+
 
                 // prettify the text
                 hashValue = self.text().toLowerCase().replace(/\s/g, "-");
 
+                // ADDED BY ROBERT
+                // remove weird characters
+                hashValue = hashValue.replace(/[^\x00-\x7F]/g, "");
+
                 // fix double hyphens
                 while (hashValue.indexOf("--") > -1) {
                     hashValue = hashValue.replace(/--/g, "-");
@@ -645,28 +664,22 @@
                         // _Local variables_
 
                         // Stores the distance to the closest anchor
-                        var closestAnchorDistance = null,
-
-                            // Stores the index of the closest anchor
+                        var // Stores the index of the closest anchor
                             closestAnchorIdx = null,
-
-                            // Keeps a reference to all anchors
-                            anchors = $(self.options.context).find("div[data-unique]"),
-
                             anchorText;
 
+                        self.calculateHeights();
+
                         // Determines the index of the closest anchor
-                        anchors.each(function(idx) {
-                            var distance = /*Math.abs*/(($(this).next().length ? $(this).next() : $(this)).offset().top - winScrollTop - self.options.highlightOffset);
-                            if (distance < 0) {
-                                closestAnchorDistance = distance;
+                        self.cachedAnchors.each(function(idx) {
+                            if (self.cachedHeights[idx] - $(window).scrollTop() < 0) {
                                 closestAnchorIdx = idx;
                             } else {
                                 return false;
                             }
                         });
 
-                        anchorText = $(anchors[closestAnchorIdx]).attr("data-unique");
+                        anchorText = $(self.cachedAnchors[closestAnchorIdx]).attr("data-unique");
 
                         // Stores the list item HTML element that corresponds to the currently traversed anchor tag
                         elem = $('li[data-unique="' + anchorText + '"]');
@@ -684,9 +697,9 @@
 
                         if(self.options.scrollHistory) {
 
-                            if(window.location.hash !== anchorText) {
+                            if(window.location.hash !== "#" + anchorText) {
 
-                                window.location.hash = anchorText;
+                                window.location.replace("#" + anchorText);
 
                             }
 
@@ -707,6 +720,23 @@
 
         },
 
+        // calculateHeights
+        // ----
+        //      ADDED BY ROBERT
+        calculateHeights: function() {
+            var self = this;
+            if (self.cachedHeights.length == 0) {
+                self.cachedHeights = [];
+                self.cachedAnchors = [];
+                var anchors = $(self.options.context).find("div[data-unique]");
+                anchors.each(function(idx) {
+                    var distance = (($(this).next().length ? $(this).next() : $(this)).offset().top - self.options.highlightOffset);
+                    self.cachedHeights[idx] = distance;
+                });
+                self.cachedAnchors = anchors;
+            }
+        },
+
         // Show
         // ----
         //      Opens the current sub-header
@@ -956,7 +986,7 @@
                 $("html, body").animate({
 
                     // Sets the jQuery `scrollTop` to the top offset of the HTML div tag that matches the current list item's `data-unique` tag
-                    "scrollTop": $('div[data-unique="' + elem.attr("data-unique") + '"]').offset().top - ($.isFunction(scrollTo) ? scrollTo.call() : scrollTo) + "px"
+                    "scrollTop": $('div[data-unique="' + elem.attr("data-unique") + '"]').next().offset().top - ($.isFunction(scrollTo) ? scrollTo.call() : scrollTo) + "px"
 
                 }, {
 

source/javascripts/lang_selector.js

+languages = []
 function activateLanguage(language) {
   $("#lang-selector a").removeClass('active');
   $("#lang-selector a[data-language-name='" + language + "']").addClass('active');
-  $(".highlight").hide();
+  for (var i=0; i < languages.length; i++) {
+    $(".highlight." + languages[i]).hide();
+  }
   $(".highlight." + language).show();
-  $(".highlight.text").show(); // always show text
 }
 
-function setupLanguages(languages) {
+function setupLanguages(l) {
+  languages = l;
   currentLanguage = languages[0];
 
-  activateLanguage(languages[0]);
+  if (location.search.substr(1) != "") {
+    activateLanguage(location.search.substr(1));
+  } else {
+    activateLanguage(languages[0]);
+  }
 
   $("#lang-selector a").bind("click", function() {
     activateLanguage($(this).data("language-name"));
@@ -17,3 +24,4 @@ function setupLanguages(languages) {
   });
 
 }
+

source/layouts/layout.erb

@@ -15,7 +15,7 @@
 
     <script>
       $(function() {
-        $("#toc").tocify({
+        var toc = $("#toc").tocify({
           selectors: "h1,h2",
           extendPage: false,
           theme: "none",
@@ -25,11 +25,12 @@
           ignoreSelector: ".toc-ignore",
           hashGenerator: 'pretty',
           highlightOffset: 60,
+          scrollTo: -2,
           scrollHistory: true
         });
         setupLanguages([
           <% current_page.data.languages.each do |lang| %>
-            ['<%= lang %>'],
+            ['<%= lang[0] %>'],
           <% end %>
         ]);
       });
@@ -38,20 +39,18 @@
 
   <body class="<%= page_classes %>">
     <div id="toc">
-      <div class="toc-bottom">
-        <%= current_page.data.external_links %>
-      </div>
+      <%= image_tag "logo.png" %>
       <!-- table of contents will be inserted here -->
     </div>
     <div class="page-wrapper">
       <div class="content">
-        <h1 id="bigtitle" class="bigtitle toc-ignore"><%= current_page.data.title || "API Documentation" %></h1>
+        <!-- <h1 id="bigtitle" class="bigtitle toc-ignore"><%= current_page.data.title || "API Documentation" %></h1> -->
         <%= yield %>
       </div>
       <div class="dark-box">
         <div id="lang-selector">
           <% current_page.data.languages.each do |lang| %>
-            <a href="#" data-language-name="<%= lang %>"><%= lang %></a>
+            <a href="#" data-language-name="<%= lang[0] %>"><%= lang[1] %></a>
           <% end %>
         </div>
       </div>

source/stylesheets/all.css.scss

@@ -14,6 +14,7 @@ html, body {
   color: $main-text-color;
   padding: 0;
   margin: 0;
+  -webkit-font-smoothing: antialiased;
 }
 
 .page-wrapper {
@@ -21,12 +22,11 @@ html, body {
   min-width: 700px;
   position: relative;
   z-index: 10;
-  background-color: #fff;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  background-color: $main-bg;
 
+  padding-top: 10px; // prevent headers margin from overflowing
   .dark-box {
-    width: 50%;
+    width: $examples-width;
     background: $examples-bg;
     position: absolute;
     right: 0;
@@ -40,6 +40,7 @@ html, body {
     z-index: 50;
     font-weight: bold;
     background-color: $lang-select-bg;
+    @include background-image(linear-gradient(top, #1d82c6, #1864ab));
     border-bottom: 1px solid #000;
     a {
       background-color: $lang-select-bg;
@@ -50,6 +51,7 @@ html, body {
       padding: 0 10px;
       border-right: 1px solid $lang-select-border;
       line-height: 30px;
+      @include background-image(linear-gradient(top, #1d82c6, #1864ab));
 
       &:hover {
         background-color: $lang-select-hover-bg;
@@ -60,6 +62,7 @@ html, body {
         border-top: 1px solid $examples-bg;
         border-right-color: $examples-bg;
         margin-bottom: -1px;
+        background-image: none;
         position: relative;
         z-index: 70;
       }
@@ -84,73 +87,117 @@ html, body {
   }
 
   code {
-    background-color: #ebf2f4;
-    border-radius: 5px;
+    background-color: rgba(0,0,0,0.05);
     padding: 3px;
+    border-radius: 3px;
   }
 
-  &>h1, &>h2, &>h3, &>p, &>table {
-    margin-right: 50%;
+  &>h1, &>h2, &>h3, &>p, &>table, &>ul, &>ol {
+    margin-right: $examples-width;
     @include box-sizing(border-box);
     padding: 0 $main-padding;
     display: block;
+    @include embedded-text;
+  }
+
+  &>ul, &>ol {
+    padding-left: $main-padding + 15px;
+  }
+
+  li {
+
   }
 
   &>h1, &>h2, &>div { // the div is the tocify hidden div for placeholding stuff
     clear:both;
   }
 
-  th,td {
-    text-align: left;
-    padding: 10px;
-    border-bottom: 1px solid $line-color;
-    vertical-align: top;
-    line-height: 1.6;
-  }
+  table {
+    th,td {
+      text-align: left;
+      vertical-align: top;
+      line-height: 1.6;
+    }
+
+    th {
+      padding: 5px 10px;
+      border-bottom: 1px solid #666;
+      vertical-align: bottom;
+      // @include background-image(linear-gradient(bottom, darken($main-bg, 3%), $main-bg));
+      @include embedded-text;
+    }
+
+    td {
+      padding: 10px;
+    }
 
-  th {
-    padding-top: 0; // so that there isn't an awk space above tables
+    tr:nth-child(even) {
+      background-color: lighten($main-bg,4.2%);
+    }
   }
 
   h1#bigtitle {
-    margin-top: 0.5em;
+    margin-top: 0;
+    margin-bottom: 0;
     font-size: 35px;
+    text-align: center;
   }
 
   h1 {
     font-size: 30px;
-    margin-top: 1.5em;
-    margin-bottom: 0.5em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    margin-top: 2em;
+    margin-bottom: 0;
+    border-top: 1px solid #bbb;
+    @include background-image(linear-gradient(top, #fff, #f9f9f9));
+    @include embedded-text;
   }
 
   h2 {
     font-size: 20px;
     margin-top: 2em;
-    margin-bottom: 1em;
+    margin-bottom: 0;
+    padding-bottom: 1.2em;
+  }
+
+  h2, h1 + p {
+    border-top: 1px solid #ccc;
+    padding-top: 1.2em;
+    @include background-image(linear-gradient(top, rgba(#fff,0.75), rgba(#fff, 0)));
+    @include embedded-text;
+  }
+
+  h1 + h2, h1 + div + h2 {
+    margin-top: 0;
   }
 
   h3 {
-    font-size: 15px;
-    margin-top: 1.2em;
-    margin-bottom: 1.2em;
+    font-size: 12px;
+    margin-top: 2.5em;
+    margin-bottom: 0.8em;
+    text-transform: uppercase;
+    @include embedded-text;
   }
 
   h1,h2,h3 {
     font-weight: bold;
   }
 
-  p {
+  p, li {
     line-height: 1.6;
+    margin-top: 0;
   }
 
   pre, blockquote {
     float:right;
-    width: 50%;
+    width: $examples-width;
     clear:right;
     @include box-sizing(border-box);
     padding: 0 $main-padding;
     margin: 0;
     color: #fff;
+    @include text-shadow(0px 1px 2px rgba(0,0,0,0.4));
   }
 
   pre {
@@ -159,6 +206,7 @@ html, body {
     @include fancy-inset-border-top;
     @include fancy-inset-border-bottom;
   }
+
 }
 
 /* The Table of Contents container element */
@@ -171,6 +219,12 @@ html, body {
   width: $nav-width;
   background-color: $nav-bg;
   font-size: 13px;
+  font-weight: bold;
+
+  &>img {
+    display: block;
+    margin-bottom: $logo-margin;
+  }
 }
 
 .tocify-item>a {
@@ -179,7 +233,7 @@ html, body {
   overflow-x:hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  @include text-shadow(0px -1px 1px rgba(0,0,0,0.3));
+  @include text-shadow(0px -1px 1px rgba(0,0,0,0.5));
 }
 
 /* The Table of Contents is composed of multiple nested unordered lists.  These styles remove the default styling of an unordered list because it is ugly. */
@@ -199,8 +253,8 @@ html, body {
 }
 
 .tocify .tocify-focus {
-  background-color: #1d82c6;
   @include box-shadow(0px 1px 0px #000);
+  @include background-image(linear-gradient(top, #1d82c6, #1864ab));
 }
 
 /* Top level header elements */
@@ -211,6 +265,8 @@ html, body {
 .tocify-subheader {
     display: none;
     background-color: $nav-subitem-bg;
+    font-weight: 500;
+    @include background-image(linear-gradient(top, darken($nav-subitem-bg,2%),$nav-subitem-bg 10%, $nav-subitem-bg 90%, darken($nav-subitem-bg,2%)));
     .tocify-item>a {
       padding-left: $nav-padding + $nav-indent;
       font-size: 12px;

source/stylesheets/variables.scss

@@ -11,6 +11,7 @@ $code-bg: #262626;
 $nav-subitem-bg: #262626;
 $lang-select-bg: #1d82c6;
 $lang-select-hover-bg: #175fa1;
+$main-bg: #eaf2f6;
 
 // border colors
 $lang-select-border: #113a6f;
@@ -22,6 +23,8 @@ $lang-select-border: #113a6f;
 // $nav-subitem-bg: #262626;
 $lang-select-text: #fff;
 
+$examples-width: 40%;
+
 // indentation amount for sub-items
 $nav-indent: 10px;
 
@@ -34,6 +37,9 @@ $main-text-color: #333;
 // currently just the color of table borders
 $line-color: #cfcfcf;
 
+// margin between nav items and logo
+$logo-margin: 0px;
+
 
 // these are for the code blocks on the right, and the
 // subheader navbar thing that swoops in
@@ -45,3 +51,7 @@ $line-color: #cfcfcf;
   border-bottom: 1px solid #404040;
   box-shadow: none;
 }
+
+@mixin embedded-text($opacity: 1) {
+  @include text-shadow(0px 1px 0px rgba(#fff,$opacity));
+}
\ No newline at end of file