RGL Browser: Improved UI, history support

This commit is contained in:
john.j.camilleri
2012-05-25 09:49:12 +00:00
parent 2d52a34091
commit 62bcfe933b
4 changed files with 117 additions and 80 deletions

View File

@@ -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>

15
lib/doc/browse/jquery.history.min.js vendored Normal file
View File

@@ -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);

View File

@@ -4,25 +4,26 @@
*/
$(document).ready(function() {
var loading = function(b){
if (b)
$("#loading").show();
else
var loadCount = 0;
var showLoading = function(){
loadCount++;
$("#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);
scrollToY(y, function(){
var y = Math.max(obj.offset().top - obj.parent().offset().top - 75, 0);
$("#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){
return function() {
loadFile(lang, module);
}
})(lang, module))
.attr('href', "#"+lang+"/"+module+".gf")
.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();
$(obj).show(0, callback);
showLoading();
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();
});
});

View File

@@ -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 *
{