RGL Browser: some interface and behavioural improvements

This commit is contained in:
john.j.camilleri
2012-05-23 07:11:59 +00:00
parent 2a6ab3543e
commit 470a531931
3 changed files with 96 additions and 19 deletions

View File

@@ -3,30 +3,32 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GF RGL Browser</title> <title>RGL Source Browser</title>
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="http://cdn.dustball.com/book_next.png" type="image/png">
<link rel="stylesheet" href="http://www.grammaticalframework.org/css/style.css"> <link rel="stylesheet" href="http://www.grammaticalframework.org/css/style.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="google-code-prettify/prettify-gf.css"> <link rel="stylesheet" href="google-code-prettify/prettify-gf.css">
</head> </head>
<body> <body>
<header> <header>
<h1>GF RGL Browser</h1> <h1>RGL Source Browser</h1>
</header> </header>
<div id="loading">
<img src="ajax-loader.gif" /> loading...
</div>
<div role="main"> <div role="main">
<div class="pane left"> <div class="pane left">
<div id="languages"></div> <div id="languages"></div>
<div id="modules"></div> <div id="modules" class="maxheight scroll-y"></div>
</div> </div>
<div class="pane right"> <div class="pane right">
<div id="tabbar"> <div id="tabbar">
<h2></h2> <h2>...</h2>
<div id="loading"> <a href="http://www.grammaticalframework.org/lib/doc/synopsis.html" title="RGL Synopsis">Synopsis...</a>
<img src="ajax-loader.gif" /> loading...
</div>
</div> </div>
<div id="scope" class="panel scope"> <div id="scope" class="panel scope maxheight">
<input type="text" id="search" /> <input type="text" id="search" />
&nbsp;<span id="scope_count">0</span> items&nbsp; &nbsp;<span id="scope_count">0</span> items&nbsp;
<input type="submit" id="submit" value="Filter" /> <input type="submit" id="submit" value="Filter" />
@@ -34,12 +36,14 @@
<input type="checkbox" id="case_sensitive" checked="checked" /><label for="case_sensitive">Case sensitive?</label> <input type="checkbox" id="case_sensitive" checked="checked" /><label for="case_sensitive">Case sensitive?</label>
<input type="radio" name="show" id="show_all" checked="checked" /><label for="show_all">Show all</label> <input type="radio" name="show" id="show_all" checked="checked" /><label for="show_all">Show all</label>
<input type="radio" name="show" id="show_local" /><label for="show_local">Local only</label> <input type="radio" name="show" id="show_local" /><label for="show_local">Local only</label>
<table id="scope_list"></table> <div class="maxheight scroll-y">
<table id="scope_list"></table>
</div>
</div> </div>
<div id="code" class="panel code"> <div id="code" class="panel code maxheight">
<pre class="prettyprint lang-gf linenums"></pre> <pre class="prettyprint lang-gf linenums maxheight scroll-y"></pre>
</div> </div>
<div id="help" class="panel help"> <div id="help" class="panel help maxheight scroll-y">
<h3>Understanding the scope information</h3> <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> <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>

View File

@@ -21,7 +21,7 @@ $(document).ready(function() {
showPanel("#code", function() { showPanel("#code", function() {
// Find exact line, using the classes generated by google prettify // 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 obj = $("#code pre li.L"+(lineNo%10)+":eq("+Math.floor(lineNo/10)+")").prev();
var y = obj.offset().top - 20; var y = Math.max(obj.offset().top - 75, 0);
scrollToY(y, function(){ scrollToY(y, function(){
highlight(obj); highlight(obj);
}); });
@@ -131,7 +131,8 @@ $(document).ready(function() {
showPanel(b); showPanel(b);
return false; return false;
}) })
.appendTo("#tabbar"); // .appendTo("#tabbar")
.insertBefore("#tabbar *:last-child")
}); });
showPanel(".panel:first"); showPanel(".panel:first");
@@ -227,7 +228,7 @@ $(document).ready(function() {
url: urlPrefix + "/lib/src/"+lang+"/"+module+".gf", url: urlPrefix + "/lib/src/"+lang+"/"+module+".gf",
type: "GET", type: "GET",
dataType: "text", dataType: "text",
success: function(data){ success: function(data, status, xhr){
setCode(data); setCode(data);
loading(false); loading(false);
if (lineNo) { if (lineNo) {
@@ -288,10 +289,54 @@ $(document).ready(function() {
} }
}); });
$("#clear").click(function(){ $("#clear").click(function(){
$("#search").val(''); $("#search")
.val('')
.focus()
runFilter(); runFilter();
}); });
$("#case_sensitive").change(runFilter); $("#case_sensitive").change(runFilter);
$("#show_all").change(runFilter); $("#show_all").change(runFilter);
$("#show_local").change(runFilter); $("#show_local").change(runFilter);
// 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 () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
// usage:
$(window).smartresize(function() {
recalculateHeights();
});
var recalculateHeights = function() {
$('body').height( $(window).height()-80 )
}
recalculateHeights();
}); });

View File

@@ -2,6 +2,19 @@
GF RGL Browser GF RGL Browser
John J. Camiller, 2012 John J. Camiller, 2012
*/ */
.maxheight
{
height:92%;
}
.scroll-y
{
overflow-y:auto;
}
body
{
height:450px; /*adjusted in JS*/
}
header h1 header h1
{ {
text-align:left; text-align:left;
@@ -11,10 +24,12 @@ div[role='main']
{ {
overflow:hidden; overflow:hidden;
width:100%; width:100%;
height:100%;
} }
.pane .pane
{ {
display:block; display:block;
height:100%;
} }
.pane.left .pane.left
{ {
@@ -39,6 +54,10 @@ div[role='main']
{ {
text-decoration:underline; text-decoration:underline;
} }
#language_select
{
font-size:1.1em;
}
#languages #languages
{ {
margin:0.5em 0; margin:0.5em 0;
@@ -61,13 +80,14 @@ div[role='main']
.tab .tab
{ {
cursor:pointer; cursor:pointer;
padding:0.3em 0.5em; padding:0.5em 0.5em;
margin-right:0.5em; margin-right:0.5em;
display:inline-block; display:inline-block;
text-transform:capitalize; text-transform:capitalize;
text-decoration:none; text-decoration:none;
font-family:sans-serif; font-family:sans-serif;
font-weight:bold; font-weight:bold;
font-size:0.9em;
} }
#loading #loading
{ {
@@ -91,6 +111,11 @@ div[role='main']
background:#444; background:#444;
color:#eee; color:#eee;
} }
.help
{
background:#ccc;
color:#000;
}
input#search input#search
{ {
font-size:1em; font-size:1em;
@@ -111,7 +136,7 @@ input#search
} }
#scope_list tr:hover #scope_list tr:hover
{ {
background:#eee; background:#f9f9f9;
} }
#scope_list tr.indir #scope_list tr.indir
{ {
@@ -142,6 +167,7 @@ input#search
{ {
margin:0; margin:0;
color:#000; color:#000;
overflow:auto;
} }
dt dt
{ {
@@ -149,7 +175,9 @@ dt
} }
footer footer
{ {
padding-left: 0.5em; padding: 0.4em;
color:#333; color:#333;
text-align:right; text-align:right;
border-top:1px solid #ccc;
font-size:0.9em;
} }