rework all documentation so that it can be published both on jsonselect.org and is viewable on github

Author: lloyd

JSONSelect_1.md JSONSelect.mdJSONSelect_1.md renamed to JSONSelect.md

@@ -1,9 +1,20 @@
-# JSONSelect 1
+**WARNING**: This document is a work in progress, just like JSONSelect itself.
+View or contribute to the latest version [on github](http://github.com/lloyd/JSONSelect/blob/master/JSONSelect.md)
 
-## Features
+# JSONSelect
 
-JSONSelect level 1 includes the following constructs, mostly from CSS3
-but with some differences.
+  1. [introduction](#introduction)
+  1. [language overview](#overview)
+  1. [grouping](#grouping)
+  1. [selectors](#selectors)
+  1. [pseudo classes](#pseudo)
+  1. [combinators](#combinators)
+  1. [planned additions](#additions)
+  1. [grammar](#grammar)
+
+## Introduction<a name="introduction"></a>
+
+## Language Overview<a name="overview"></a>
 
   * `string` -- type selectors
   * `*` -- the universal type selector
@@ -23,8 +34,27 @@ but with some differences.
   * `object string` -- a descendant combinator
   * `#bar > string` -- a child combinator
 
+## Grouping<a name="grouping"></a>
+
+## Selectors<a name="selectors"></a>
+
+## Psuedo Classes<a name="pseudo"></a>
+
+## Combinators<a name="combinators"></a>
+
+## Planned Additions<a name="additions"></a>
+
+  * `boolean#enabled ~ #email` -- a general sibling operator,
+    *without the ordering requirement*
+  * `:not()`
+  * `:has()`
+  * `[=value]` a node with a value of exactly `value`
+  * `[^=value]` a node whose value starts with `value`
+  * `[$=value]` a node whose value ends with `value`
+  * `[*=value]` a node whose value contains the substring `value`
+
 
-## A Semi-Formal Grammar
+## Grammar<a name="grammar"></a>
 
 (Adapted from [CSS3](http://www.w3.org/TR/css3-selectors/#descendant-combinators) and
  [json.org](http://json.org/))

JSONSelect_2.md

@@ -0,0 +1 @@
+../JSONSelect.md

site/JSONSelect.md

@@ -77,6 +77,10 @@ div.content {
     font-size: 90%;
 }
 
+#docs {
+    margin-top: 140px;
+}
+
 #splash .sample tt {
     font-size: 90%;
     padding: 0 .2em 0 .2em;
@@ -172,4 +176,3 @@ pre.doc {
     padding-top: 2em;
 }
 
-#cred > pre {

site/css/style.css

@@ -107,10 +107,15 @@
         <p><a href="http://json.org/">JSON</a> and <a href="http://www.w3.org/TR/css3-selectors/">CSS3 Selectors</a> are the prerequisites to JSONSelect's existence, so thanks to you guys too.</p>
         <p></p>
       </div>
+      <div style="display: none" id="docs" class="content">
+        Loading documentation...
+      </div>
     </div>
 
+
 <a href="https://github.com/lloyd/JSONSelect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/4c7dc970b89fd04b81c8e221ba88ff99a06c6b61/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub"></a>
   </body>
+  <script src="js/showdown.js"></script>
   <script src="js/jquery-1.6.1.min.js"></script>
   <script src="js/jquery.ba-hashchange.min.js"></script>
   <script src="js/jsonselect.js"></script>

site/index.html

@@ -1,21 +1,63 @@
 $(document).ready(function() {
-    // Bind the event.
-    $(window).hashchange(function(){
-        // Alerts every time the hash changes!
-        $("#main > .content").hide();
+    var docsLoaded = false;
+
+    $(window).hashchange(function(e){
+        e.preventDefault();
+        e.stopPropagation();
+
         if (location.hash === "#tryit") {
+            $("#main > .content").hide();
             $("#tryit input").val("").keyup();
             $("#tryit").fadeIn(400, function() {
                 $("#tryit input").val(".languagesSpoken .language").keyup();
             });
         } else if (location.hash === "#cred") {
             $("#main > .content").hide();
             $("#cred").fadeIn(400);
-        } else {
+        } else if (location.hash === '#overview' || location.hash === '') {
+            $("#main > .content").hide();
             $("#splash").fadeIn(400);
+        } else if (location.hash.substr(0,5) === "#docs") {
+            function showIt() {
+                var where = window.location.hash.substr(6);
+                console.log("scrollIt: " + where);
+                if (!where) {
+                    $("#docs").fadeIn(400);
+                } else {
+                    $("#docs").show();
+                    var dst = $("a[name='" + where + "']");
+                    if (dst.length) {
+                        console.log("want scrolltop: ", dst.offset().top - 100);
+                        $('html, body').animate({scrollTop:dst.offset().top - 100}, 500);
+                    }
+                }
+            }
+            $("#main > .content").hide();
+            if (!docsLoaded) {
+                $.get("JSONSelect.md").success(function(data) {
+                    var converter = new Showdown.converter();
+                    $("#docs").html(converter.makeHtml(data));
+                    $("#docs a").each(function() {
+                        var n = $(this).attr('href');
+                        if (typeof n === 'string' && n.substr(0,1) === '#') {
+                            $(this).attr('href', "#docs/" + n.substr(1));
+                        }
+                    });
+                    docsLoaded = true;
+                    showIt();
+                }).error(function() {
+                    $("#docs").text("Darnit, error fetching docs...").fadeIn(400);
+                });
+            } else {
+                showIt();
+            }
+        } else {
         }
+        return false;
     });
 
     // Trigger the event (useful on page load).
+    if (window.location.hash === "")
+        window.location.hash = "#overview";
     $(window).hashchange();
 });