forked from GitHub/gf-core
RGL Browser: some interface and behavioural improvements
This commit is contained in:
@@ -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" />
|
||||
<span id="scope_count">0</span> items
|
||||
<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>
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user