1
0
forked from GitHub/gf-core

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>
<meta charset="utf-8">
<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="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="style.css">
<link rel="stylesheet" href="google-code-prettify/prettify-gf.css">
</head>
<body>
<header>
<h1>GF RGL Browser</h1>
<h1>RGL Source Browser</h1>
</header>
<div id="loading">
<img src="ajax-loader.gif" /> loading...
</div>
<div role="main">
<div class="pane left">
<div id="languages"></div>
<div id="modules"></div>
<div id="modules" class="maxheight scroll-y"></div>
</div>
<div class="pane right">
<div id="tabbar">
<h2></h2>
<div id="loading">
<img src="ajax-loader.gif" /> loading...
</div>
<h2>...</h2>
<a href="http://www.grammaticalframework.org/lib/doc/synopsis.html" title="RGL Synopsis">Synopsis...</a>
</div>
<div id="scope" class="panel scope">
<div id="scope" class="panel scope maxheight">
<input type="text" id="search" />
&nbsp;<span id="scope_count">0</span> items&nbsp;
<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="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>
<table id="scope_list"></table>
<div class="maxheight scroll-y">
<table id="scope_list"></table>
</div>
</div>
<div id="code" class="panel code">
<pre class="prettyprint lang-gf linenums"></pre>
<div id="code" class="panel code maxheight">
<pre class="prettyprint lang-gf linenums maxheight scroll-y"></pre>
</div>
<div id="help" class="panel help">
<div id="help" class="panel help 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>

View File

@@ -21,7 +21,7 @@ $(document).ready(function() {
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 = obj.offset().top - 20;
var y = Math.max(obj.offset().top - 75, 0);
scrollToY(y, function(){
highlight(obj);
});
@@ -131,7 +131,8 @@ $(document).ready(function() {
showPanel(b);
return false;
})
.appendTo("#tabbar");
// .appendTo("#tabbar")
.insertBefore("#tabbar *:last-child")
});
showPanel(".panel:first");
@@ -227,7 +228,7 @@ $(document).ready(function() {
url: urlPrefix + "/lib/src/"+lang+"/"+module+".gf",
type: "GET",
dataType: "text",
success: function(data){
success: function(data, status, xhr){
setCode(data);
loading(false);
if (lineNo) {
@@ -288,10 +289,54 @@ $(document).ready(function() {
}
});
$("#clear").click(function(){
$("#search").val('');
$("#search")
.val('')
.focus()
runFilter();
});
$("#case_sensitive").change(runFilter);
$("#show_all").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
John J. Camiller, 2012
*/
.maxheight
{
height:92%;
}
.scroll-y
{
overflow-y:auto;
}
body
{
height:450px; /*adjusted in JS*/
}
header h1
{
text-align:left;
@@ -11,10 +24,12 @@ div[role='main']
{
overflow:hidden;
width:100%;
height:100%;
}
.pane
{
display:block;
height:100%;
}
.pane.left
{
@@ -39,6 +54,10 @@ div[role='main']
{
text-decoration:underline;
}
#language_select
{
font-size:1.1em;
}
#languages
{
margin:0.5em 0;
@@ -61,13 +80,14 @@ div[role='main']
.tab
{
cursor:pointer;
padding:0.3em 0.5em;
padding:0.5em 0.5em;
margin-right:0.5em;
display:inline-block;
text-transform:capitalize;
text-decoration:none;
font-family:sans-serif;
font-weight:bold;
font-size:0.9em;
}
#loading
{
@@ -91,6 +111,11 @@ div[role='main']
background:#444;
color:#eee;
}
.help
{
background:#ccc;
color:#000;
}
input#search
{
font-size:1em;
@@ -111,7 +136,7 @@ input#search
}
#scope_list tr:hover
{
background:#eee;
background:#f9f9f9;
}
#scope_list tr.indir
{
@@ -142,6 +167,7 @@ input#search
{
margin:0;
color:#000;
overflow:auto;
}
dt
{
@@ -149,7 +175,9 @@ dt
}
footer
{
padding-left: 0.5em;
padding: 0.4em;
color:#333;
text-align:right;
border-top:1px solid #ccc;
font-size:0.9em;
}