quodatum/graphxq
1
0
Fork 0
mirror of https://github.com/Quodatum/graphxq.git synced 2025-11-04 14:31:56 +00:00
Code Issues Projects Releases Wiki Activity

more ace

Browse source
This commit is contained in:
Andy Bunce 2013-01-31 22:29:23 +00:00
parent 9034509ccb
commit eee1b7e434
13 changed files with 93 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/graphxq/app.css
View file

@ -22,7 +22,9 @@ body {
top: 7px; top: 7px;
left: 11px; left: 11px;
} }
.media {
margin-top:0px;
}
.navbar-search .search-query:focus, .navbar-search .search-query.focused { .navbar-search .search-query:focus, .navbar-search .search-query.focused {
padding-left: 30px; padding-left: 30px;
} }

38
src/graphxq/app.js
View file

@ -2,12 +2,6 @@
var resize; var resize;
$(document).ready(function(){ $(document).ready(function(){
if($("#editForm").length){
setupEdit()
};
$("#infotip").popover({"html":true,
template: '<div class="popover popwidth"><div class="arrow"></div><div class="popover-inner popwidth" ><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
});
resize=function(){ resize=function(){
var h=$(window).height(); var h=$(window).height();
$('.extend').not(':hidden').each(function(){ $('.extend').not(':hidden').each(function(){
@ -15,18 +9,27 @@ $(document).ready(function(){
var top=j.offset(); var top=j.offset();
j.height(h-top.top-10) j.height(h-top.top-10)
//console.log("resize",j) //console.log("resize",j)
}); j.find(".ace").each(function(){
var a=$(this).attr('id')
ace.edit(a).resize();
});
}; })};
$(window).resize(resize); $(window).resize(resize);
resize(); resize();
// init ace where ace class // init ace where ace class
$('.ace').each(function(){ $('.ace').each(function(){
acediv($(this).attr('id')) acediv($(this).attr('id'))
}) });
if($("#editForm").length){
setupEdit()
};
}); });
function setupEdit(){ function setupEdit(){
$("#infotip").popover({"html":true,
template: '<div class="popover popwidth"><div class="arrow"></div><div class="popover-inner popwidth" ><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
});
// toolbar buttons // toolbar buttons
$('a[data-action="lDom"]').click(function (){ $('a[data-action="lDom"]').click(function (){
$("#leftPane").css('display','inline').removeAttr('class').addClass("span12"); $("#leftPane").css('display','inline').removeAttr('class').addClass("span12");
@ -50,21 +53,24 @@ function setupEdit(){
$("#editForm").submit(); $("#editForm").submit();
}; };
$("#bnRefresh").on("click",getsvg); $("#bnRefresh").on("click",getsvg);
$("#bnOpts").on("click",function(){alert("not yet")}); // $("#bnOpts").on("click",function(){alert("not yet")});
$("#bnsvg").on("click",function(){submit(false)}); $("#bnsvg").on("click",function(){submit(false)});
$("#bndn").on("click",function(){submit(true)}); $("#bndn").on("click",function(){submit(true)});
$("#data").on("keyup",throttle(getsvg,250));
$("#bnxml").on("click",function(){ $("#bnxml").on("click",function(){
$("#svgdiv,#svgsrc").toggle() $("#svgdiv, #svgsrc").toggle(0,resize)
resize();
//resize();
}); });
$("#bnclear").on("click",function(){ $("#bnclear").on("click",function(){
$("#data").val($("#cleartext").val()) ace.edit("acedata").setValue($("#cleartext").val(),1)
}); });
getsvg() var editor= ace.edit("acedata");
editor.getSession().on('change',throttle(getsvg,250));
editor.setValue($("#data").val(),1);
}; };
function getsvg(){ function getsvg(){
$("#data").val(ace.edit("acedata").getValue());
var f=$("#editForm").serializeArray() var f=$("#editForm").serializeArray()
var d0=+new Date() var d0=+new Date()
$("#infotip").removeClass("btn-danger").addClass("btn-warning"); $("#infotip").removeClass("btn-danger").addClass("btn-warning");

4
src/graphxq/diag-xqdoc.xq
View file

@ -1,3 +1,7 @@
(:~
: generate dotml from xqdoc source
: apb Jan 2013
:)
declare namespace doc="http://www.xqdoc.org/1.0"; declare namespace doc="http://www.xqdoc.org/1.0";
declare namespace dotml="http://www.martin-loetzsch.de/DOTML"; declare namespace dotml="http://www.martin-loetzsch.de/DOTML";

6
src/graphxq/graphxq.xqm
View file

@ -66,7 +66,7 @@ declare
%output:method("html") %output:version("5.0") %output:method("html") %output:version("5.0")
%restxq:form-param("src","{$src}") %restxq:form-param("src","{$src}")
function dotform($src){ function dotform($src){
let $dot:= getdot("digraph {{a -> b}}",$src) let $dot:= getdot("digraph {a -> b}",$src)
let $svgwidget:=fn:doc("views/widget.svg") let $svgwidget:=fn:doc("views/widget.svg")
let $toolbar:=fn:doc("views/toolbar.xml") let $toolbar:=fn:doc("views/toolbar.xml")
let $map:=map{"list-shapes":=dotui:shapes(""), let $map:=map{"list-shapes":=dotui:shapes(""),
@ -169,6 +169,7 @@ declare %private function getdotml($dotml as node(),$url) as node(){
else else
$dotml $dotml
}; };
(:~ CORS header with download option :) (:~ CORS header with download option :)
declare function headers($attachment){ declare function headers($attachment){
<restxq:response> <restxq:response>
@ -179,7 +180,8 @@ declare function headers($attachment){
else ()} else ()}
</http:response> </http:response>
</restxq:response> </restxq:response>
}; };
(:~ Generate svg from dot :) (:~ Generate svg from dot :)
declare %private function dot2svg($dot as xs:string) as node(){ declare %private function dot2svg($dot as xs:string) as node(){
let $svgx:=gr:dot($dot,()) let $svgx:=gr:dot($dot,())

0
src/graphxq/jquery-svgpan.js → src/graphxq/viewbox/junk/jquery-svgpan.js vendored
View file

0
src/graphxq/jquery.wrap-svg.js → src/graphxq/viewbox/junk/jquery.wrap-svg.js
View file

21
src/graphxq/views/about.xml
View file

@ -6,17 +6,18 @@
<a href="http://www.graphviz.org/content/dot-language" target="_blank">Dot</a> <a href="http://www.graphviz.org/content/dot-language" target="_blank">Dot</a>
or <a href="http://www.martin-loetzsch.de/DOTML" target="_blank">DotML</a> languages and the corresponding or <a href="http://www.martin-loetzsch.de/DOTML" target="_blank">DotML</a> languages and the corresponding
SVG viewed or downloaded. SVG viewed or downloaded.
A <a href="api">REST interface</a> enables SVG generation to be used as a service.</p> A <a href="api">REST interface</a> enables the SVG generation to be used as a service.</p>
</div> </div>
<div class="container-fluid"> <div class="container-fluid">
<div class="fluid-row"> <div class="fluid-row">
<div class="span4"> <div class="span4">
<h2>Client</h2> <h2>Client</h2>
<p>The client side targets modern browsers. It was tested against Firefox 15 and Chrome 21. <p>The client side targets modern browsers with SVG support. It was tested against Firefox 15 and Chrome 21.
</p> </p>
<p>Twitter <a href="http://twitter.github.com/bootstrap/index.html" <p><a href="http://twitter.github.com/bootstrap/index.html"
target="_blank">Bootstrap</a> is used for the client side styling. target="_blank">Twitter Bootstrap</a> is used for the client side styling.
The <a href="http://ace.ajax.org/">Ace editor</a> is used to provide rich editing functionality.
</p> </p>
<p>Javascript libraries are loaded from CDN where possible. In particular <p>Javascript libraries are loaded from CDN where possible. In particular
<a href="http://cdnjs.com" target="_blank">cdnjs.com</a> is used.</p> <a href="http://cdnjs.com" target="_blank">cdnjs.com</a> is used.</p>
@ -42,15 +43,17 @@
<h2>Todo</h2> <h2>Todo</h2>
<p>The SVG pan and zoom has problems, especially in Firefox. In part this maybe due <p>The SVG pan and zoom has problems, especially in Firefox. In part this maybe due
to firefox bugs</p> to firefox bugs</p>
<p>For reference this shows how the SVG <a href="/graphxq/viewbox/viewBox.svg">viewbox</a> <p>For reference how the SVG <a href="/graphxq/viewbox/viewBox.svg">viewbox</a>
works. See also <a href="http://alzt.tau.ac.il/~dagan/tools/#zoom">here</a>. and works. See also <a href="http://www.dotuscomus.com/svg/lib/library.html#autozoom" target="_blank">here</a>
<a href="http://www.dotuscomus.com/svg/lib/library.html#autozoom">here</a>. for a better way?
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<hr/> <hr/>
<a href="https://github.com/apb2006/graphxq">
<img style="position: absolute; top: 50px; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"/>
</a>
<footer> <footer>
<p>&#169; Andy Bunce 2013</p> <p>&#169; Andy Bunce 2013</p>
<ul class="quick-links"> <ul class="quick-links">
@ -71,7 +74,7 @@ works. See also <a href="http://alzt.tau.ac.il/~dagan/tools/#zoom">here</a>. and
<li class="tweet-btn"><iframe title="Twitter Tweet Button" <li class="tweet-btn"><iframe title="Twitter Tweet Button"
style="width: 106px; height: 20px;" style="width: 106px; height: 20px;"
class="twitter-share-button twitter-count-horizontal" class="twitter-share-button twitter-count-horizontal"
src="http://platform.twitter.com/widgets/tweet_button.html?count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=https%3A%2F%2Fgithub.com%2Fapb2006%2Fgraphxq&amp;size=m&amp;text=graphxq #xquery&amp;url=https%3A%2F%2Fgithub.com%2Fapb2006%2Fxqwebdoc&amp;via=apb1704" src="http://platform.twitter.com/widgets/tweet_button.html?count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http://open1-apb.rhcloud.com/restxq/graphxq/&amp;size=m&amp;text=graphxq #xquery&amp;url=http://open1-apb.rhcloud.com/restxq/graphxq/&amp;via=apb1704"
allowtransparency="true" scrolling="no" frameborder="0"></iframe></li> allowtransparency="true" scrolling="no" frameborder="0"></iframe></li>
</ul> </ul>
</footer> </footer>

34
src/graphxq/views/ace.xml
View file

@ -1,7 +1,19 @@
<div class="row-fluid"> <div class="row-fluid">
<div class="span2">
<div class="span12 ace-container extend" id="leftPane" style="height:20em;"> Sidebar content outline etc..
<div id="editor" class="ace">module namespace txq = 'apb.txq'; </div>
<div class="span10">
<ul class="nav nav-tabs" id="myTab" style="margin-bottom:4px">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<div class="span12 ace-container extend" id="leftPane" >
<div id="editor" class="ace" data-mode="xquery" >module namespace txq = 'apb.txq';
declare default function namespace 'apb.txq'; declare default function namespace 'apb.txq';
import module namespace xquery = "http://basex.org/modules/xquery"; import module namespace xquery = "http://basex.org/modules/xquery";
@ -16,7 +28,15 @@ declare function render($template as xs:string,$map as map(*)){{
return xquery:invoke($template,$map) return xquery:invoke($template,$map)
}};</div> }};</div>
</div> </div>
<script> </div>
acediv("editor","xquery",false) <div class="tab-pane" id="profile">
</script> ...
</div>
<div class="tab-pane" id="messages">
...</div>
<div class="tab-pane" id="settings">
...</div>
</div>
</div>
</div> </div>

9
src/graphxq/views/dotform.xml
View file

@ -4,9 +4,12 @@
{$toolbar} {$toolbar}
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span6 " id="leftPane"> <div class="span6 " id="leftPane">
<form id="editForm" action="api/dot" method="post" target="_new" <div id="dsrc" class="extend ace-container" >
class="extend" > <div id="acedata" class="ace " data-mode="dot" ></div>
</div>
<form id="editForm" action="api/dot" method="post" target="_new" style="display:none"
>
<textarea id="data" name="data" rows="100" <textarea id="data" name="data" rows="100"
style="width:100%;overflow:scroll;height:98%">{$dot}</textarea> style="width:100%;overflow:scroll;height:98%">{$dot}</textarea>
<input name="dl" type="checkbox" style="display:none"/> <input name="dl" type="checkbox" style="display:none"/>

7
src/graphxq/views/dotmlform.xml
View file

@ -4,8 +4,11 @@
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span6" id="leftPane" style="position:relative;height:100%"> <div class="span6" id="leftPane" style="position:relative;height:100%">
<form id="editForm" method="post" action="api/dotml" target="_new" <div id="dsrc" class="extend ace-container" >
class="extend"> <div id="acedata" class="ace " data-mode="xml" ></div>
</div>
<form id="editForm" method="post" action="api/dotml" target="_new" style="display:none"
>
<textarea id="data" name="data" rows="20" <textarea id="data" name="data" rows="20"
style="width:100%;overflow:scroll;height:98%">{$dotml}</textarea> style="width:100%;overflow:scroll;height:98%">{$dotml}</textarea>
<input name="dl" type="checkbox" style="display:none" /> <input name="dl" type="checkbox" style="display:none" />

1
src/graphxq/views/layout.xml
View file

@ -76,6 +76,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

0
src/graphxq/views/options.xml → src/graphxq/views/options.htm
View file

13
src/graphxq/views/toolbar.xml
View file

@ -1,7 +1,8 @@
<div> <div>
<div class="btn-group"> <div class="btn-group">
<button id="bnRefresh" class="btn btn-mini"> <button id="bnRefresh" class="btn btn-mini"
title="Resend SVG request" >
<i class="icon-refresh"></i> <i class="icon-refresh"></i>
Redraw Redraw
</button> </button>
@ -9,13 +10,17 @@
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button id="bnOpts" class="btn btn-mini"> <a id="bnOpts" class="btn btn-mini"
href="/graphxq/views/options.htm" data-target="#myModal" data-toggle="modal"
title="Extra settings (not implemented yet)" >
<i class="icon-gift"></i> <i class="icon-gift"></i>
Options Options
</button> </a>
<div class="modal fade" id="myModal"></div>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button id="bnclear" class="btn btn-mini"> <button id="bnclear" class="btn btn-mini"
title="Set editor to default empty content" >
<i class="icon-remove"></i> <i class="icon-remove"></i>
Clear Clear
</button> </button>