mirror of
https://github.com/Quodatum/graphxq.git
synced 2025-04-11 19:52:24 +01:00
more ace
This commit is contained in:
parent
9034509ccb
commit
eee1b7e434
13 changed files with 93 additions and 44 deletions
|
|
@ -22,7 +22,9 @@ body {
|
|||
top: 7px;
|
||||
left: 11px;
|
||||
}
|
||||
|
||||
.media {
|
||||
margin-top:0px;
|
||||
}
|
||||
.navbar-search .search-query:focus, .navbar-search .search-query.focused {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,6 @@
|
|||
var resize;
|
||||
|
||||
$(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(){
|
||||
var h=$(window).height();
|
||||
$('.extend').not(':hidden').each(function(){
|
||||
|
|
@ -15,18 +9,27 @@ $(document).ready(function(){
|
|||
var top=j.offset();
|
||||
j.height(h-top.top-10)
|
||||
//console.log("resize",j)
|
||||
});
|
||||
j.find(".ace").each(function(){
|
||||
var a=$(this).attr('id')
|
||||
ace.edit(a).resize();
|
||||
});
|
||||
|
||||
};
|
||||
})};
|
||||
$(window).resize(resize);
|
||||
resize();
|
||||
// init ace where ace class
|
||||
$('.ace').each(function(){
|
||||
acediv($(this).attr('id'))
|
||||
})
|
||||
});
|
||||
if($("#editForm").length){
|
||||
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
|
||||
$('a[data-action="lDom"]').click(function (){
|
||||
$("#leftPane").css('display','inline').removeAttr('class').addClass("span12");
|
||||
|
|
@ -50,21 +53,24 @@ function setupEdit(){
|
|||
$("#editForm").submit();
|
||||
};
|
||||
$("#bnRefresh").on("click",getsvg);
|
||||
$("#bnOpts").on("click",function(){alert("not yet")});
|
||||
// $("#bnOpts").on("click",function(){alert("not yet")});
|
||||
$("#bnsvg").on("click",function(){submit(false)});
|
||||
$("#bndn").on("click",function(){submit(true)});
|
||||
$("#data").on("keyup",throttle(getsvg,250));
|
||||
$("#bnxml").on("click",function(){
|
||||
$("#svgdiv,#svgsrc").toggle()
|
||||
resize();
|
||||
$("#svgdiv, #svgsrc").toggle(0,resize)
|
||||
|
||||
//resize();
|
||||
});
|
||||
$("#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(){
|
||||
$("#data").val(ace.edit("acedata").getValue());
|
||||
var f=$("#editForm").serializeArray()
|
||||
var d0=+new Date()
|
||||
$("#infotip").removeClass("btn-danger").addClass("btn-warning");
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
(:~
|
||||
: generate dotml from xqdoc source
|
||||
: apb Jan 2013
|
||||
:)
|
||||
declare namespace doc="http://www.xqdoc.org/1.0";
|
||||
declare namespace dotml="http://www.martin-loetzsch.de/DOTML";
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ declare
|
|||
%output:method("html") %output:version("5.0")
|
||||
%restxq:form-param("src","{$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 $toolbar:=fn:doc("views/toolbar.xml")
|
||||
let $map:=map{"list-shapes":=dotui:shapes(""),
|
||||
|
|
@ -169,6 +169,7 @@ declare %private function getdotml($dotml as node(),$url) as node(){
|
|||
else
|
||||
$dotml
|
||||
};
|
||||
|
||||
(:~ CORS header with download option :)
|
||||
declare function headers($attachment){
|
||||
<restxq:response>
|
||||
|
|
@ -179,7 +180,8 @@ declare function headers($attachment){
|
|||
else ()}
|
||||
</http:response>
|
||||
</restxq:response>
|
||||
};
|
||||
};
|
||||
|
||||
(:~ Generate svg from dot :)
|
||||
declare %private function dot2svg($dot as xs:string) as node(){
|
||||
let $svgx:=gr:dot($dot,())
|
||||
|
|
|
|||
|
|
@ -6,17 +6,18 @@
|
|||
<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
|
||||
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 class="container-fluid">
|
||||
<div class="fluid-row">
|
||||
<div class="span4">
|
||||
<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>Twitter <a href="http://twitter.github.com/bootstrap/index.html"
|
||||
target="_blank">Bootstrap</a> is used for the client side styling.
|
||||
<p><a href="http://twitter.github.com/bootstrap/index.html"
|
||||
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>Javascript libraries are loaded from CDN where possible. In particular
|
||||
<a href="http://cdnjs.com" target="_blank">cdnjs.com</a> is used.</p>
|
||||
|
|
@ -42,15 +43,17 @@
|
|||
<h2>Todo</h2>
|
||||
<p>The SVG pan and zoom has problems, especially in Firefox. In part this maybe due
|
||||
to firefox bugs</p>
|
||||
<p>For reference this shows 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
|
||||
<a href="http://www.dotuscomus.com/svg/lib/library.html#autozoom">here</a>.
|
||||
<p>For reference how the SVG <a href="/graphxq/viewbox/viewBox.svg">viewbox</a>
|
||||
works. See also <a href="http://www.dotuscomus.com/svg/lib/library.html#autozoom" target="_blank">here</a>
|
||||
for a better way?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<p>© Andy Bunce 2013</p>
|
||||
<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"
|
||||
style="width: 106px; height: 20px;"
|
||||
class="twitter-share-button twitter-count-horizontal"
|
||||
src="http://platform.twitter.com/widgets/tweet_button.html?count=horizontal&id=twitter-widget-0&lang=en&original_referer=https%3A%2F%2Fgithub.com%2Fapb2006%2Fgraphxq&size=m&text=graphxq #xquery&url=https%3A%2F%2Fgithub.com%2Fapb2006%2Fxqwebdoc&via=apb1704"
|
||||
src="http://platform.twitter.com/widgets/tweet_button.html?count=horizontal&id=twitter-widget-0&lang=en&original_referer=http://open1-apb.rhcloud.com/restxq/graphxq/&size=m&text=graphxq #xquery&url=http://open1-apb.rhcloud.com/restxq/graphxq/&via=apb1704"
|
||||
allowtransparency="true" scrolling="no" frameborder="0"></iframe></li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,19 @@
|
|||
<div class="row-fluid">
|
||||
|
||||
<div class="span12 ace-container extend" id="leftPane" style="height:20em;">
|
||||
<div id="editor" class="ace">module namespace txq = 'apb.txq';
|
||||
<div class="row-fluid">
|
||||
<div class="span2">
|
||||
Sidebar content outline etc..
|
||||
</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';
|
||||
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)
|
||||
}};</div>
|
||||
</div>
|
||||
<script>
|
||||
acediv("editor","xquery",false)
|
||||
</script>
|
||||
</div>
|
||||
<div class="tab-pane" id="profile">
|
||||
...
|
||||
</div>
|
||||
<div class="tab-pane" id="messages">
|
||||
...</div>
|
||||
<div class="tab-pane" id="settings">
|
||||
...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,12 @@
|
|||
{$toolbar}
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span6 " id="leftPane">
|
||||
<form id="editForm" action="api/dot" method="post" target="_new"
|
||||
class="extend" >
|
||||
<div class="span6 " id="leftPane">
|
||||
<div id="dsrc" class="extend ace-container" >
|
||||
<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"
|
||||
style="width:100%;overflow:scroll;height:98%">{$dot}</textarea>
|
||||
<input name="dl" type="checkbox" style="display:none"/>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,11 @@
|
|||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span6" id="leftPane" style="position:relative;height:100%">
|
||||
<form id="editForm" method="post" action="api/dotml" target="_new"
|
||||
class="extend">
|
||||
<div id="dsrc" class="extend ace-container" >
|
||||
<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"
|
||||
style="width:100%;overflow:scroll;height:98%">{$dotml}</textarea>
|
||||
<input name="dl" type="checkbox" style="display:none" />
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<div>
|
||||
|
||||
<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>
|
||||
Redraw
|
||||
</button>
|
||||
|
|
@ -9,13 +10,17 @@
|
|||
|
||||
</div>
|
||||
<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>
|
||||
Options
|
||||
</button>
|
||||
</a>
|
||||
<div class="modal fade" id="myModal"></div>
|
||||
</div>
|
||||
<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>
|
||||
Clear
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue