RGL Browser: Improved UI, history support

lib/doc/browse/index.html

@@ -43,7 +43,8 @@
       <div id="code" class="panel code maxheight">
         <pre class="prettyprint lang-gf linenums maxheight scroll-y"></pre>
       </div>
-      <div id="help" class="panel help maxheight scroll-y">
+      <div id="help" class="panel help maxheight">
+      <div class="maxheight scroll-y">
 
         <h3>Understanding the scope information</h3>
         <p>The scope information shown by this tool is basically the output of running GF with the <code>--tags</code> flag. This lists all the functions visible in the scope of a module, one per line. Each line can have two possible forms:</p>
@@ -80,17 +81,18 @@
         <h3>Known issues and To-do</h3>
         <ul>
           <li>Some way of browsing just the API</li>
-          <li>Better visual cues for functions in scope</li>
           <li>The page sometimes stalls when handling large files (in particular the dictionary modules)</li>
         </ul>
       </div>
+      </div>
     </div>
     <br style="clear:both" />
   </div>
   <footer id="footer">
-  John J. Camilleri. <em>Updated 2012-05-16.</em>
+  John J. Camilleri. <em>Updated 2012-05-25.</em>
   </footer>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+  <script src="jquery.history.min.js"></script>
   <script src="google-code-prettify/prettify.js"></script>
   <script src="google-code-prettify/lang-gf.js"></script>
   <script src="script.js"></script>

lib/doc/browse/jquery.history.min.js

@@ -0,0 +1,15 @@
+/*
+ MIT License {@link http://creativecommons.org/licenses/MIT/}
+ MIT License {@link http://creativecommons.org/licenses/MIT/}
+*/
+"undefined"===typeof window.console&&(window.console={});
+"undefined"===typeof window.console.emulated&&("function"===typeof window.console.log?window.console.hasLog=!0:("undefined"===typeof window.console.log&&(window.console.log=function(){}),window.console.hasLog=!1),"function"===typeof window.console.debug?window.console.hasDebug=!0:("undefined"===typeof window.console.debug&&(window.console.debug=!window.console.hasLog?function(){}:function(){for(var b=["console.debug:"],a=0;a<arguments.length;a++)b.push(arguments[a]);window.console.log.apply(window.console,
+b)}),window.console.hasDebug=!1),"function"===typeof window.console.warn?window.console.hasWarn=!0:("undefined"===typeof window.console.warn&&(window.console.warn=!window.console.hasLog?function(){}:function(){for(var b=["console.warn:"],a=0;a<arguments.length;a++)b.push(arguments[a]);window.console.log.apply(window.console,b)}),window.console.hasWarn=!1),"function"===typeof window.console.error?window.console.hasError=!0:("undefined"===typeof window.console.error&&(window.console.error=function(){var b=
+"An error has occured.";if(window.console.hasLog){for(var b=["console.error:"],a=0;a<arguments.length;a++)b.push(arguments[a]);window.console.log.apply(window.console,b);b="An error has occured. More information is available in your browser's javascript console."}for(a=0;a<arguments.length;++a){if(typeof arguments[a]!=="string")break;b=b+("\n"+arguments[a])}if(typeof Error!=="undefined")throw Error(b);throw b;}),window.console.hasError=!1),"function"===typeof window.console.trace?window.console.hasTrace=
+!0:("undefined"===typeof window.console.trace&&(window.console.trace=function(){window.console.error("console.trace does not exist")}),window.console.hasTrace=!1),window.console.emulated=!0);
+(function(b){if(b.History)window.console.warn("$.History has already been defined...");else{b.History={options:{debug:false},state:"",$window:null,$iframe:null,handlers:{generic:[],specific:{}},extractHash:function(a){return a.replace(/^[^#]*#/,"").replace(/^#+|#+$/,"")},getState:function(){return b.History.state},setState:function(a){var c=b.History,a=c.extractHash(a);c.state=a;return c.state},getHash:function(){return b.History.extractHash(window.location.hash||location.hash)},setHash:function(a){a=
+b.History.extractHash(a);if(typeof window.location.hash!=="undefined"){if(window.location.hash!==a)window.location.hash=a}else if(location.hash!==a)location.hash=a;return a},go:function(a){var c=b.History,a=c.extractHash(a),d=c.getHash(),f=c.getState();if(a!==d)c.setHash(a);else{a!==f&&c.setState(a);c.trigger()}return true},hashchange:function(){var a=b.History,c=a.getHash();a.go(c);return true},bind:function(a,c){var d=b.History;if(c){typeof d.handlers.specific[a]==="undefined"&&(d.handlers.specific[a]=
+[]);d.handlers.specific[a].push(c)}else d.handlers.generic.push(a);return true},trigger:function(a){var c=b.History;typeof a==="undefined"&&(a=c.getState());var d,f,g,e;if(typeof c.handlers.specific[a]!=="undefined"){e=c.handlers.specific[a];d=0;for(f=e.length;d<f;++d){g=e[d];g(a)}}e=c.handlers.generic;d=0;for(f=e.length;d<f;++d){g=e[d];g(a)}return true},construct:function(){var a=b.History;b(document).ready(function(){a.domReady()});return true},configure:function(a){var c=b.History;c.options=b.extend(c.options,
+a);return true},domReadied:false,domReady:function(){var a=b.History;if(!a.domRedied){a.domRedied=true;a.$window=b(window);a.$window.bind("hashchange",this.hashchange);setTimeout(a.hashchangeLoader,200);return true}},nativeSupport:function(a){var a=a||b.browser,c=a.version,d=parseInt(c,10),f=c.split(/[^0-9]/g),c=parseInt(f[0],10),g=parseInt(f[1],10),f=parseInt(f[2],10),e=false;a.msie&&d>=8?e=true:a.webkit&&d>=528?e=true:a.mozilla?c>1?e=true:c===1&&(g>9?e=true:g===9&&f>=2&&(e=true)):a.opera&&(c>10?
+e=true:c===10&&g>=60&&(e=true));return e},hashchangeLoader:function(){var a=b.History;if(a.nativeSupport())a.getHash()&&a.$window.trigger("hashchange");else{var c;if(b.browser.msie){a.$iframe=b('<iframe id="jquery-history-iframe" style="display: none;"></$iframe>').prependTo(document.body)[0];a.$iframe.contentWindow.document.open();a.$iframe.contentWindow.document.close();var d=false;c=function(){var b=a.getHash(),c=a.getState(),e=a.extractHash(a.$iframe.contentWindow.document.location.hash);if(c!==
+b){if(!d){a.$iframe.contentWindow.document.open();a.$iframe.contentWindow.document.close();a.$iframe.contentWindow.document.location.hash=b}d=false;a.$window.trigger("hashchange")}else if(c!==e){d=true;a.setHash(e)}}}else c=function(){var b=a.getHash();a.getState()!==b&&a.$window.trigger("hashchange")};setInterval(c,200)}return true}};b.History.construct()}})(jQuery);

lib/doc/browse/script.js

@@ -4,25 +4,26 @@
 */
 $(document).ready(function() {
 
-    var loading = function(b){
+    var loadCount = 0;
-        if (b)
+    var showLoading = function(){
-            $("#loading").show();
+        loadCount++;
-        else
+        $("#loading").show();
+    }
+    var hideLoading = function(){
+        loadCount = Math.max(loadCount-1, 0);
+        if (loadCount == 0)
             $("#loading").hide();
     }
 
-    var scrollToY = function(y, callback){
-        $("html, body").animate({ scrollTop: y }, "slow", callback);
-    }
     var scrollToTop = function() {
-        scrollToY(0);
+        $("html, body").animate({ scrollTop: 0 }, "slow");
     }
     var scrollToCodeLine = function(lineNo) {
         showPanel("#code", function() {
             // Find exact line, using the classes generated by google prettify
             var obj = $("#code pre li.L"+(lineNo%10)+":eq("+Math.floor(lineNo/10)+")").prev();
-            var y = Math.max(obj.offset().top - 75, 0);
+            var y = Math.max(obj.offset().top - obj.parent().offset().top - 75, 0);
-            scrollToY(y, function(){
+            $("#code pre").animate({ scrollTop: y }, "slow", function(){
                 highlight(obj);
             });
         });
@@ -82,11 +83,11 @@ $(document).ready(function() {
                     .appendTo(lang_select);
             }
             setLanguage("english");
-            loading(false);
+            hideLoading();
         },
         error: function(){
+            hideLoading();
             alert("Error getting index. Try reloading page, or just give up.");
-            loading(false);
         }
     });
 
@@ -103,14 +104,10 @@ $(document).ready(function() {
         for (i in index['languages'][lang]) {
             var module = index['languages'][lang][i];
             if (!module) continue;
-            $('<span>')
+            $('<a>')
                 .html(module)
                 .addClass('button')
-                .click((function(lang, module){
+                .attr('href', "#"+lang+"/"+module+".gf")
-                    return function() {
-                        loadFile(lang, module);
-                    }
-                })(lang, module))
                 .appendTo("#modules");
         }
     };
@@ -118,8 +115,16 @@ $(document).ready(function() {
     // Initialize the panels & tabs
     // obj can be just a plain selector or a jQuery object
     var showPanel = function(obj, callback){
-        $(".panel").hide();
+        showLoading();
-        $(obj).show(0, callback);
+        setTimeout(function(){
+            $(".panel:visible").hide();
+            $(obj).show(0, callback);
+            recalculateHeights();
+            hideLoading();
+        }, 500); // this ensures the loading displays
+    }
+    var getPanel = function() {
+        return $('.panel:visible').first();
     }
     $(".panel").each(function(a,b){
         $("<a>")
@@ -154,7 +159,7 @@ $(document).ready(function() {
     // Load a tags file
     var loadTagsFile = function(module) {
         clearScope();
-        loading(true);
+        showLoading();
         $.ajax({
             url: "tags/"+module+".gf-tags",
             type: "GET",
@@ -164,48 +169,24 @@ $(document).ready(function() {
                     var s = d.split("\t");
                     if (c == "indir") {
                         var name = s[2].slice(s[2].lastIndexOf('/')+1);
-                        var anchor = '<a href="'+s[2]+'">'+name+'</a>';
+                        var url = "#"+name;
+                        var anchor = '<a href="'+url+'">'+name+'</a>';
                         return '<tr class="indir" name="'+b+'"><th>'+b+'</th><td>'+c+'</td><td>'+s[0]+'</td><td>'+s[1]+'</td><td>'+anchor+'</td><td></td></tr>'
                     } else {
-                        var anchor = '<a href="'+s[0]+'">'+s[0]+'</a>';
+                        var bits = s[0].split("/"); // ["lib", "src", "english", "AdjectiveEng.gf:43-46"]
+                        var url = "#"+bits[3]+"/"+bits[4];
+                        var anchor = '<a href="'+url+'">'+s[0]+'</a>';
                         return '<tr class="local" name="'+b+'"><th>'+b+'</th><td>'+c+'</td><td></td><td></td><td>'+anchor+'</td><td>'+s[1]+'</td></tr>'
                     }
                 });
                 setScope(data);
-                $('#scope_list a').click(function(){
-                    var href = $(this).attr('href');
-                    var m = href.match(/([^\/]+)\/([^\/]+)\.(gf(-tags)?)(:\d+)?/);
-                    if (m[3]=="gf") {
-                        // Load both tags and source
-                        var lineNo = m[5].slice(1);
-                        loadFile(m[1], m[2], lineNo);
-                    } else if (m[3]=="gf-tags") {
-                        // Try and determine the language from the contents
-                        checkSourceFile({
-                            lang: current_language,
-                            module: m[2],
-                            onsuccess: function(){
-                                loadFile(current_language, m[2]);
-                                scrollToTop();
-                            },
-                            onerror: function(){
-                                // Load just tags (we don't know source)
-                                setTitle(m[2]+" (scope only)");
-                                clearCode();
-                                loadTagsFile(m[2]);
-                                scrollToTop();
-                            }
-                        });
-                    }
-                    return false;
-                });
                 updateScopeCount();
                 runFilter();
-                loading(false);
+                hideLoading();
             },
             error: function(data){
                 clearScope("No scope available");
-                loading(false);
+                hideLoading();
             },
         });
     }
@@ -223,21 +204,21 @@ $(document).ready(function() {
     // Load a source module
     var loadSourceFile = function(lang, module, lineNo) {
         clearCode();
-        loading(true);
+        showLoading();
         $.ajax({
             url: urlPrefix + "/lib/src/"+lang+"/"+module+".gf",
             type: "GET",
             dataType: "text",
             success: function(data, status, xhr){
                 setCode(data);
-                loading(false);
+                hideLoading();
                 if (lineNo) {
                     scrollToCodeLine(lineNo);
                 }
             },
             error: function(data){
                 clearCode("No code available");
-                loading(false);
+                hideLoading();
             }
         });
     }
@@ -254,10 +235,10 @@ $(document).ready(function() {
         else
             return haystack.toLowerCase().indexOf(needle.toLowerCase())>=0;
     };
+
     var runFilter = function() {
-        // Hide anything which doesn't match
+        showLoading()
         var s = $("#search").val();
-        loading(true);
         try {
             if (s) {
                 $("#scope_list tr:match(\""+s+"\")").show();
@@ -272,11 +253,18 @@ $(document).ready(function() {
             alert(error.message);
         }
         updateScopeCount();
-        loading(false);
+        hideLoading();
     }
 
     // Instant results
-    $("#search").keyup(runFilter);
+    var prevSearch = $("#search").val();
+    $("#search").keyup(function(){
+        var s = $("#search").val();
+        if (s!=prevSearch) {
+            runFilter();
+            prevSearch = s;
+        }
+    });
     $("#submit").hide();
 
     // Filter & clear buttons
@@ -298,16 +286,48 @@ $(document).ready(function() {
     $("#show_all").change(runFilter);
     $("#show_local").change(runFilter);
 
+    // ===== URL history =====
+    $.History.bind(function(state){
+        var s = state.split("/");
+        if (s[0].match(/\.gf-tags$/)) {
+            var module = stripExt(s[0]);
+            checkSourceFile({
+                lang: current_language,
+                module: module,
+                onsuccess: function(){
+                    $.History.go(current_language+"/"+module);
+                },
+                onerror: function(){
+                    // Load just tags (we don't know source)
+                    setTitle(module+" (scope only)");
+                    clearCode();
+                    loadTagsFile(module);
+                    scrollToTop();
+                }
+            });
+        } else {
+            var lang = s[0];
+            var module = stripExt(s[1]);
+            var parseLineNo = s[1].match(/:(\d+)(-(\d+))?$/);
+            if (parseLineNo != undefined)
+                loadFile(lang, module, parseInt(parseLineNo[1]));
+            else
+                loadFile(lang, module);
+        }
+    });
+
+    var stripExt = function(s) {
+        return s.substr(0, s.lastIndexOf('.'));
+    };
+
+    // ===== Resizing stuff =====
 
-    // Window resize stuff
     // refer: http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
     (function($,sr){
-        
         // debouncing function from John Hann
         // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
         var debounce = function (func, threshold, execAsap) {
             var timeout;
-            
             return function debounced () {
                 var obj = this, args = arguments;
                 function delayed () {
@@ -326,7 +346,6 @@ $(document).ready(function() {
         }
 	// smartresize 
 	jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
-        
     })(jQuery,'smartresize');
     
     // usage:
@@ -335,8 +354,13 @@ $(document).ready(function() {
     });
 
     var recalculateHeights = function() {
-        $('body').height( $(window).height()-80 )
+        $('body').height( $(window).height()-85); //80 was just found empirically
+        $('.maxheight').each(function(){
+            var obj = $(this);
+            var parent = obj.parent();
+            obj.height(parent.height() - (obj.offset().top - parent.offset().top) - parseInt(parent.css('padding-bottom')));
+        });
     }
 
     recalculateHeights();
-});  
+});

lib/doc/browse/style.css

@@ -2,19 +2,10 @@
   GF RGL Browser
   John J. Camiller, 2012
 */
-.maxheight
-{ 
-  height:92%;
-  }
 .scroll-y
 { 
   overflow-y:auto;
   }
-
-body
-{ 
-  height:450px; /*adjusted in JS*/
- }
 header h1
 {
   text-align:left;
@@ -33,7 +24,7 @@ div[role='main']
  }
 .pane.left
 { 
-  width:150px;
+  width:170px;
   float:left;
  }
 .pane.right
@@ -42,7 +33,7 @@ div[role='main']
  }
 .panel
 {
-  padding:1em;
+  padding:15px;
   }
 .button
 {
@@ -62,10 +53,15 @@ div[role='main']
 { 
   margin:0.5em 0;
   }
-#modules span
+#modules a
 { 
   display:block;
   margin:0.1em;
+  text-decoration:none;
+  }
+#modules a:hover
+{ 
+  text-decoration:underline;
   }
 #tabbar *
 {