Final for now

doc/site/js/main.js

@@ -1,12 +1,13 @@
 var editor;
+var embedded_editor;
 $(function() {
-    this.isApi = location.href.indexOf("/api") >= 0;
-    if (!this.isApi) {
-        hljs.initHighlighting();
-        editor = ace.edit("ace_editor_demo");
-        var javascriptMode = require("ace/mode/javascript").Mode;
-        editor.getSession().setMode(new javascriptMode());
-    }
+    hljs.initHighlighting();
+    editor = ace.edit("ace_editor_demo");
+    embedded_editor = ace.edit("embedded_ace_code");
+    var javascriptMode = require("ace/mode/javascript").Mode;
+    var htmlMode = require("ace/mode/html").Mode;
+    editor.getSession().setMode(new javascriptMode());
+    embedded_editor.getSession().setMode(new htmlMode());
     
     $("ul.menu-list li").click(function(e) {
         if (e.target.tagName === "LI") {
@@ -18,21 +19,67 @@ $(function() {
             window.location = anchor.attr("href");
         }
     });
+    
+    // used when page is access directly
+    function magicClickInterceptor(e) {
+        e.preventDefault();
+            
+        var state = {};
+        state.api = $(this).attr("href").substring(6, $(this).attr("href").length - 5);
+        $.bbq.pushState(state);
+        
+        $("#apiHolder").removeClass("apiIntro").removeClass("span8");
+        $("#apiHolder").load($(this).attr("href") + " #documentation", function(){
+            ux();
+            setupClicker();
+        
+            // handles dropping in from new link
+            var section = $.bbq.getState("section");
+            if (section) {
+                $("li#dropdown_" + section.replace(/\./g, '\\.') + " a").triggerHandler('click');
+            }
+            
+            setupDisqus();
+        });
+    }
+    
+    $('.menu-item a').click(magicClickInterceptor);
+    $('a.argument').click(function (e) {
+        e.preventDefault();
+            
+        var state = {};
+        state.api = $(this).attr("href").substring(6, $(this).attr("href").length - 5);
+        $.bbq.pushState(state);
+        
+        $("#apiHolder").load($(this).attr("href") + " #documentation", function(){
+            $("#apiHolder").removeClass("apiIntro").removeClass("span8");
+            ux();
+            setupClicker();
+        
+            // handles dropping in from new link
+            var section = $.bbq.getState("section");
+            if (section) {
+                $("li#dropdown_" + section.replace(/\./g, '\\.') + " a").triggerHandler('click');
+            }
+            
+            setupDisqus();
+        });
+    });
+    
      var tabs = $("#tabnav"),
          tab_a_selector = "a";
 
      var firstLoad = true;
-     var _self = this;
-     tabs.find(tab_a_selector).click(function(e) {
-        if (_self.isApi || $(this).attr("href").indexOf("/api/") >= 0) {
-             window.location = $(this).attr("href");
-        }
-         
+     
+     tabs.find(tab_a_selector).click(function(e) {         
         e.preventDefault();
+        embedded_editor.resize();
+        editor.resize();
         if ($(this).attr("href") === "/")
             return;
-        if ($(this).attr("href") === "#api") {
+        if ($(this).attr("href").indexOf("#api") === 0) {
             $("#top_container").addClass("collapse");
+            scrollIntoPosition(null, 0);
         }
         else if ($(this).is(":visible")) {
             if (firstLoad) {
@@ -48,28 +95,36 @@ $(function() {
             }
         }
 
-        function scrollIntoPosition(el) {
-            if ($("body").scrollTop() > 345) {
+        function scrollIntoPosition(el, overridePosition) {
+            if (typeof overridePosition !== "undefined") {
+                $("body").stop().animate({
+                    scrollTop: overridePosition
+                }, 400);
+            }
+            else if ($("body").scrollTop() > 345) {
                 $("body").stop().animate({
                     scrollTop: ($(el).offset().top - 15)
                 }, 400);
             }
         }
-    
-        
+
         $(this).tab("show");
 
         var state = {};
-        state["nav"] = $(this).attr("href").substr(1);
+        state.nav = $(this).attr("href").substr(1);
         $.bbq.pushState(state);
      });
 
-    if (!this.isApi) {
-         $(window).on("hashchange", function(e) {
-             tabs.each(function() {
-                var idx = $.bbq.getState("nav") || "about";
-                $(this).find(tab_a_selector + "[href='#" + idx + "']").triggerHandler('click');
-             });
-         }).trigger("hashchange");
-    }
+     $(window).on("hashchange", function(e) {
+         tabs.each(function() {
+            var idx = $.bbq.getState("nav") || "about";
+            $(this).find(tab_a_selector + "[href='#" + idx + "']").triggerHandler('click');
+            
+            // handles dropping in from new link
+            var api = $.bbq.getState("api");
+            if (api) {
+                $(tab_a_selector + "[href='./api/" + api + ".html']").triggerHandler('click');
+            }
+         });
+     }).trigger("hashchange");
 });

doc/site/style.css

@@ -5,15 +5,16 @@ body {
     font-family: Helvetica, Arial;
 }
 
-#ace_editor_wrapper {
+.ace_editor_wrapper {
     height: 275px;
     position: relative;
     border: 1px solid #DDD;
-    border-radius: 5px;
+    border-radius: 4px;
+    border-bottom-right-radius: 0px;
     margin-top: 5px;
 }
 
-#ace_editor_demo {
+#ace_editor_demo, #embedded_ace_code {
     left: 0px;
     top: 0px;
     bottom: 1px;
@@ -272,17 +273,17 @@ UL.menu-list LI a:hover {
 
 li#add_your_site p {
     font-size: 32px;
-    border: 3px solid rgb(52, 160, 52);
-    color: rgb(52, 160, 52);
+    border: 3px solid #34A034;
+    color: #34A034;
     border-radius: 34px;
-    padding: 4px 4px 4px 7px;
-    width: 22px;
+    padding: 3px 4px 4px 6px;
+    width: 20px;
     height: 22px;
     line-height: 18px;
     position: relative;
-    left: 31px;
-    top: 20px;
-    background: rgba(255, 255, 255, 1);
+    left: 33px;
+    top: 22px;
+    background: #fff;
 }
 
 ul.menu-list li#add_your_site a {
@@ -424,15 +425,22 @@ pre .xml .javascript, pre .xml .css {
 
 #embed_link {
     text-align: right;
+    padding-top: 0;
 }
 #embed_link a {
     color: #059C05;
     font-weight: 100;
     font-family: helvetica;
-    text-transform: uppercase;
     font-size: 13px;
     display: inline-block;
     padding: 2px 10px;
+    background: #f4f4f4;
+    border: 1px solid #ddd;
+    border-top: none;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    text-shadow: 0px 1px 0px rgba(255, 255, 255, 1);
+    text-decoration: none;
 }
 
 p.highlight_note {
@@ -449,4 +457,9 @@ p.highlight_note {
 
 p.highlight_note a {
     color: #537CC7;
+}
+
+.apiIntro {
+    padding-left: 15px;
+    padding-bottom: 10px;
 }