msyds/gf-core
1
0
Fork 0
forked from GitHub/gf-core
Code Pull Requests Activity

RGL Browser updates

Browse Source 
- Better layout
- Jump to defition
- Syntax highlighting, line numbers
This commit is contained in:
john.j.camilleri
2012-05-15 12:08:18 +00:00
parent d59f54ba41
commit 87e812455f
5 changed files with 129 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
lib/doc/browse/build-tags.sh
View File

@@ -9,7 +9,6 @@ dir=`pwd`
basedir=${dir}/../../src basedir=${dir}/../../src
tagsdir=${dir}/tags tagsdir=${dir}/tags
index=${dir}/index.json index=${dir}/index.json
removeprefix="/home/john/repositories/GF"
ignore="demo old-demo tmp" ignore="demo old-demo tmp"
# Function for testing array membership # Function for testing array membership
@@ -45,6 +44,6 @@ echo " \"\":{}\n}\n}" >> $index
# Replace all URLs # Replace all URLs
echo "Replacing URLs" echo "Replacing URLs"
cd $tagsdir cd $tagsdir
sed -i "s|${removeprefix}||g" *.gf-tags sed -ir "s|\S+?/lib/|/lib/|g" *.gf-tags
exit 0 exit 0

17
lib/doc/browse/index.html
View File

@@ -8,11 +8,12 @@
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<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-own.css">
</head> </head>
<body> <body>
<header> <header>
<h1>GF RGL Browser</h1> <h1>GF RGL Browser</h1>
<p style="font-style:italic;margin-top:-0.5em;">Updated 2012-05-14</p> <p style="font-style:italic;margin-top:-0.5em;">Updated 2012-05-15</p>
</header> </header>
<div role="main"> <div role="main">
<div class="pane left"> <div class="pane left">
@@ -28,14 +29,16 @@
</div> </div>
<div id="scope" class="panel scope"> <div id="scope" class="panel scope">
<input type="text" id="search" /> <input type="text" id="search" />
&nbsp;<span id="scope_count">0</span> items&nbsp;
<input type="submit" id="submit" value="Filter" /> <input type="submit" id="submit" value="Filter" />
<input type="reset" id="clear" value="Clear" /> <input type="reset" id="clear" value="Clear" />
<input type="checkbox" id="case_sensitive" checked="checked" /> <input type="checkbox" id="case_sensitive" checked="checked" />
<label for="case_sensitive">Case sensitive?</label> <label for="case_sensitive">Case sensitive?</label>
<div><span id="scope_count">0</span> items</div> <table id="scope_list"></table>
<dl id="scope_list"></dl> </div>
<div id="code" class="panel code">
<pre class="prettyprint lang-hs linenums"></pre>
</div> </div>
<div id="code" class="panel code"></div>
<div id="help" class="panel help"> <div id="help" class="panel help">
<h3>Understanding the scope information</h3> <h3>Understanding the scope information</h3>
@@ -72,9 +75,10 @@
<h3>Known issues and To-do</h3> <h3>Known issues and To-do</h3>
<ul> <ul>
<li>Some way of browsing just the API</li>
<li>Some visual cue for </li>
<li>The page sometimes stalls when handling large files (in particular the dictionary modules)</li> <li>The page sometimes stalls when handling large files (in particular the dictionary modules)</li>
<li>Jump directly to line in file</li> <li>Syntax highlighting is using a Haskell default, could cusomtise for GF</li>
<li>Line numbers and syntax highlighting for source code would be cool</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -84,6 +88,7 @@
<p><em>John J. Camilleri, 2012</em></p> <p><em>John J. Camilleri, 2012</em></p>
</footer> </footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="google-code-prettify/prettify.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

1
lib/doc/browse/index.json
View File

@@ -1,4 +1,5 @@
{ {
"urlprefix": "/GF",
"languages": { "languages": {
"abstract": [ "abstract": [
"Backward", "Backward",

104
lib/doc/browse/script.js
View File

@@ -4,9 +4,6 @@
*/ */
$(document).ready(function() { $(document).ready(function() {
// var urlPrefix = "/GF"; // local
var urlPrefix = ""; // live
var loading = function(b){ var loading = function(b){
if (b) if (b)
$("#loading").show(); $("#loading").show();
@@ -14,18 +11,47 @@ $(document).ready(function() {
$("#loading").hide(); $("#loading").hide();
} }
var scrollToTop = function(){ var scrollToY = function(y, callback){
$("html, body").animate({ scrollTop: 0 }, "slow"); $("html, body").animate({ scrollTop: y }, "slow", callback);
}
var scrollToTop = function() {
scrollToY(0);
}
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 = obj.offset().top - 20;
scrollToY(y, function(){
highlight(obj);
});
});
}
var highlight = function(obj) {
obj.css('background-color', "yellow");
setTimeout(function(){
obj.css('background-color', "");
}, 1500);
}
var clearCode = function(code) {
$('#code pre').empty();
}
var setCode = function(code) {
$('#code pre').html(code);
prettyPrint();
} }
var current_language = undefined; var current_language = undefined;
var urlPrefix = "";
var index; var index;
$.ajax({ $.ajax({
url: "index.json", url: "index.json",
dataType: "json", dataType: "json",
type: "GET", type: "GET",
success: function(data){ success: function(data) {
index = data; index = data;
urlPrefix = data['urlprefix'];
// Initialize the language list // Initialize the language list
var lang_select = $("<select>") var lang_select = $("<select>")
@@ -77,9 +103,10 @@ $(document).ready(function() {
}; };
// Initialize the panels & tabs // Initialize the panels & tabs
var showPanel = function(obj){ // obj can be just a plain selector or a jQuery object
var showPanel = function(obj, callback){
$(".panel").hide(); $(".panel").hide();
$(obj).show(); // obj can be just a plain selector or a jQuery object $(obj).show(0, callback);
} }
$(".panel").each(function(a,b){ $(".panel").each(function(a,b){
$("<a>") $("<a>")
@@ -92,7 +119,7 @@ $(document).ready(function() {
return false; return false;
}) })
.insertBefore("#loading"); .insertBefore("#loading");
}); });
showPanel(".panel:first"); showPanel(".panel:first");
var setTitle = function(s){ var setTitle = function(s){
@@ -100,14 +127,14 @@ $(document).ready(function() {
} }
var updateScopeCount = function(){ var updateScopeCount = function(){
$('#scope_count').text( $("#scope_list dt:visible").length ); $('#scope_count').text( $("#scope_list tr:visible").length );
} }
// Load both scope & source for a file // Load both scope & source for a file
var loadFile = function(lang, module){ var loadFile = function(lang, module, lineNo){
setTitle(lang+"/"+module); setTitle(lang+"/"+module);
loadTagsFile(module); loadTagsFile(module);
loadSourceFile(lang, module) loadSourceFile(lang, module, lineNo)
} }
// Load a tags file // Load a tags file
@@ -121,18 +148,25 @@ $(document).ready(function() {
type: "GET", type: "GET",
dataType: "text", dataType: "text",
success: function(data){ success: function(data){
data = data.replace(/^(\S+)\s+(.+)$/gm, '<dt name="$1">$1</dt><dd name="$1">$2</dd>'); data = data.replace(/^(\S+)\s(\S+)\s(.+)?$/gm, function(a,b,c,d){
// data = data.replace(/^(\S+)\s(\S+)\s(\S+)(.+)?$/gm, function(a,b,c,d,e){ var s = d.split("\t");
// return '<tr name="'+b+'"><th>'+b+'</th><td>'+c+'</td><td>'+d+'</td><td>'+e+'</td></tr>' if (c == "indir") {
// }); var name = s[2].slice(s[2].lastIndexOf('/')+1);
data = data.replace(/\s(\/lib\/\S+?\.gf(-tags)?)/gm, '<a href="$1">$1</a>'); var anchor = '<a href="'+s[2]+'">'+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>';
return '<tr class="local" name="'+b+'"><th>'+b+'</th><td>'+c+'</td><td></td><td></td><td>'+anchor+'</td><td>'+s[1]+'</td></tr>'
}
});
$('#scope_list').html(data); $('#scope_list').html(data);
$('#scope_list a').click(function(){ $('#scope_list a').click(function(){
var href = $(this).attr('href'); var href = $(this).attr('href');
var m = href.match(/([^\/]+)\/([^\/]+)\.(gf(-tags)?)$/); var m = href.match(/([^\/]+)\/([^\/]+)\.(gf(-tags)?)(:\d+)?/);
if (m[3]=="gf") { if (m[3]=="gf") {
// Load both tags and source // Load both tags and source
loadFile(m[1], m[2]); var lineNo = m[5].slice(1);
loadFile(m[1], m[2], lineNo);
} else if (m[3]=="gf-tags") { } else if (m[3]=="gf-tags") {
// Try and determine the language from the contents // Try and determine the language from the contents
checkSourceFile({ checkSourceFile({
@@ -140,16 +174,17 @@ $(document).ready(function() {
module: m[2], module: m[2],
onsuccess: function(){ onsuccess: function(){
loadFile(current_language, m[2]); loadFile(current_language, m[2]);
scrollToTop();
}, },
onerror: function(){ onerror: function(){
// Load just tags (we don't know source) // Load just tags (we don't know source)
setTitle(m[2]+" (scope only)"); setTitle(m[2]+" (scope only)");
$('#code').empty(); clearCode();
loadTagsFile(m[2]); loadTagsFile(m[2]);
scrollToTop();
} }
}); });
} }
scrollToTop();
return false; return false;
}); });
updateScopeCount(); updateScopeCount();
@@ -173,19 +208,22 @@ $(document).ready(function() {
} }
// Load a source module // Load a source module
var loadSourceFile = function(lang, module) { var loadSourceFile = function(lang, module, lineNo) {
$('#code').empty(); clearCode();
loading(true); loading(true);
$.ajax({ $.ajax({
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){
$('#code').html(data); setCode(data);
loading(false); loading(false);
if (lineNo) {
scrollToCodeLine(lineNo);
}
}, },
error: function(data){ error: function(data){
$('#code').html("<em>No code available</em>"); setCode("<em>No code available</em>");
loading(false); loading(false);
} }
}); });
@@ -208,11 +246,10 @@ $(document).ready(function() {
loading(true); loading(true);
try { try {
if (s) { if (s) {
$("#scope_list").children( ":match(\""+s+"\")").show(); $("#scope_list tr:match(\""+s+"\")").show();
$("#scope_list").children(":not(:match(\""+s+"\"))").hide(); $("#scope_list tr:not(:match(\""+s+"\"))").hide();
//$("#scope_list tr:not(:match(\""+s+"\"))").hide();
} else { } else {
$("#scope_list").children().show(); $("#scope_list tr").show();
} }
} catch (error) { } catch (error) {
alert(error.message); alert(error.message);
@@ -221,14 +258,19 @@ $(document).ready(function() {
loading(false); loading(false);
} }
// $("#search").keyup(runfilter); // Instant results
$("#search").keyup(runfilter);
$("#submit").hide();
// Filter & clear buttons
// $("#submit").click(runfilter);
$("#search").keypress(function(e){ $("#search").keypress(function(e){
var code = (e.keyCode ? e.keyCode : e.which); var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { // Enter if(code == 13) { // Enter
runfilter(); runfilter();
} }
}); });
$("#submit").click(runfilter);
$("#clear").click(function(){ $("#clear").click(function(){
$("#search").val(''); $("#search").val('');
runfilter(); runfilter();

51
lib/doc/browse/style.css
View File

@@ -24,6 +24,10 @@ div[role='main']
{ {
margin-left:170px; margin-left:170px;
} }
.panel
{
padding:1em;
}
.button .button
{ {
cursor:pointer; cursor:pointer;
@@ -63,8 +67,15 @@ div[role='main']
} }
#loading #loading
{ {
display:inline-block; position: fixed;
color:#666; top: 1em;
right: 1em;
white-space: nowrap;
padding: 0.5em 1em;
border: 1px solid #F0C36D;
background: #F9EDBE;
color: black;
vertical-align: middle;
} }
.scope .scope
{ {
@@ -91,16 +102,40 @@ input#search
#scope_list #scope_list
{ {
font-family:monospace; font-family:monospace;
width:100%;
margin-top:1em;
} }
#scope_list dt #scope_list tr:hover
{ {
float:left; background:#eee;
} }
#code #scope_list tr.indir
{ {
font-family:monospace; font-style:italic;
white-space:pre; }
padding: 1em; #scope_list tr.local td:nth-child(2)
{
font-weight:bold;
}
#scope_list th
{
text-align:left;
}
#scope_list th, #scope_list td
{
padding:0.4em;
border: 1px solid #aaa;
background:none;
white-space:nowrap;
}
#scope_list td:nth-child(6)
{
white-space:normal;
}
#code pre
{
margin:0;
color:#000;
} }
dt dt
{ {