mirror of
https://github.com/Quodatum/graphxq.git
synced 2025-07-03 22:32:45 +01:00
css woes
This commit is contained in:
parent
1ceb15b446
commit
51738f4631
11 changed files with 211 additions and 176 deletions
|
|
@ -7,6 +7,9 @@ body {
|
|||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.h100{
|
||||
height:100%;
|
||||
}
|
||||
/* search bar icon */
|
||||
.navbar-search .search-query {
|
||||
padding-left: 29px;
|
||||
|
|
@ -26,26 +29,6 @@ body {
|
|||
.navbar-fixed-top {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.quick-links {
|
||||
list-style: none outside none;
|
||||
margin: 0;
|
||||
min-height: 30px;
|
||||
overflow: hidden;
|
||||
padding: 5px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.quick-links:first-child {
|
||||
min-height: 0;
|
||||
}
|
||||
.quick-links li {
|
||||
color: #999999;
|
||||
display: inline;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.quick-links .github-btn, .quick-links .tweet-btn, .quick-links .follow-btn {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
|
||||
#editor {
|
||||
|
|
|
|||
|
|
@ -63,9 +63,11 @@ $('a[data-action="rDom"]').click(function (){
|
|||
|
||||
$(document).ready(function(){
|
||||
$("#bnup").on("click",getsvg);
|
||||
$("#bnsvg").on("click",function(){ $("#dotForm").submit()});
|
||||
$("#bnsvg").on("click",function(){ $("#editForm").submit()});
|
||||
$("#bndn").on("click",function(){getsvg(true)});
|
||||
$("#dot").on("keyup",getsvg);
|
||||
$("#bnxml").on("click",function(){$("#svgdiv,#svgsrc").toggle()});
|
||||
|
||||
var resize=function(){
|
||||
var h=$(window).height();
|
||||
$('.extend').each(function(){
|
||||
|
|
@ -79,13 +81,13 @@ $(document).ready(function(){
|
|||
});
|
||||
|
||||
function getsvg(dl){
|
||||
var f=$("#dotForm").serializeArray()
|
||||
var f=$("#editForm").serializeArray()
|
||||
//var d=$("#frm-defaults").serializeArray()
|
||||
//console.log("#frm-default",d)
|
||||
// if(dl)f.push({"name":"dl","value":1})
|
||||
$.ajax({
|
||||
type:"POST",
|
||||
url:"svg",
|
||||
url:$("#editForm").attr("action"),
|
||||
data:f,
|
||||
dataType: "text",
|
||||
success: function(str){
|
||||
|
|
|
|||
23
src/graphxq/data/library.xml
Normal file
23
src/graphxq/data/library.xml
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<items>
|
||||
<item>
|
||||
<title>Process</title>
|
||||
<url type="dot">samples/dot/process.gv</url>
|
||||
(dot)
|
||||
</item>
|
||||
<item>
|
||||
<title>Unix</title>
|
||||
<url type="dot">samples/dot/unix.gv</url>
|
||||
</item>
|
||||
<item>
|
||||
<title>Root</title>
|
||||
<url type="dot">samples/dot/root.gv</url>
|
||||
</item>
|
||||
<item>
|
||||
<title>Sample</title>
|
||||
<url type="dotml">samples/dotml/sample1.xml</url>
|
||||
</item>
|
||||
<item>
|
||||
<title>Cluster</title>
|
||||
<url type="dotml">samples/dotml/cluster.xml</url>
|
||||
</item>
|
||||
</items>
|
||||
BIN
src/graphxq/dotml.png
Normal file
BIN
src/graphxq/dotml.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
|
|
@ -87,6 +87,7 @@ function dotmlform($src){
|
|||
let $v:=map{ "svgwidget":=$svgwidget,
|
||||
"toolbar":=$toolbar,
|
||||
"title":="DOTML editor",
|
||||
"bodyclass":="h100",
|
||||
"dotml":=$dotml}
|
||||
return render("views/dotmlform.xml",$v)
|
||||
};
|
||||
|
|
@ -105,7 +106,9 @@ declare
|
|||
%rest:GET %rest:path("graphxq/library")
|
||||
%output:method("html") %output:version("5.0")
|
||||
function library(){
|
||||
let $map:=map{"title":="Samples"}
|
||||
let $lib:=fn:doc("data/library.xml")
|
||||
let $map:=map{"title":="Samples",
|
||||
"count":=fn:count($lib//item)}
|
||||
return render("views/library.xml",$map)
|
||||
};
|
||||
|
||||
|
|
@ -115,8 +118,7 @@ function library( ) {
|
|||
declare
|
||||
%rest:POST %rest:path("graphxq/api/dotml")
|
||||
%rest:form-param("dotml","{$dotml}")
|
||||
function api-dotml($dotml ) as node()
|
||||
{
|
||||
function api-dotml($dotml ) as node(){
|
||||
let $dotml:=fn:parse-xml($dotml)
|
||||
let $y:=fn:trace($dotml,"ff")
|
||||
let $x:=dotml:generate($dotml)
|
||||
|
|
@ -134,8 +136,7 @@ declare %private function getdot($dot as xs:string,$url) as xs:string{
|
|||
};
|
||||
|
||||
(:~ if url is defined then treat as url and fetch else use dotml :)
|
||||
declare %private function getdotml($dotml as node(),$url) as node()
|
||||
{
|
||||
declare %private function getdotml($dotml as node(),$url) as node(){
|
||||
if($url) then
|
||||
try{
|
||||
fn:doc(fn:resolve-uri($url))
|
||||
|
|
@ -153,16 +154,22 @@ declare %private function dot2svg($dot as xs:string) as node(){
|
|||
return gr:autosize($svgx)
|
||||
};
|
||||
|
||||
(:~ css class to hightlight current page :)
|
||||
declare function active-link($path as xs:string,$page as xs:string) as xs:string{
|
||||
if(fn:ends-with($path,$page)) then "active" else ""
|
||||
};
|
||||
|
||||
(:~
|
||||
: Render html page
|
||||
: @param template path to page template
|
||||
: @params locals map of page variables
|
||||
:)
|
||||
declare function render($template as xs:string,$locals){
|
||||
|
||||
let $path:=request:path()
|
||||
let $default:=map{"usermenu":=<div>users</div>,
|
||||
"title":=request:path(),
|
||||
"messages":=()}
|
||||
"active-link":=active-link($path,?), (: *** FAILS IF request:path() :)
|
||||
"bodyclass":=""}
|
||||
let $locals:=map:new(($default,$locals))
|
||||
return txq:render(fn:resolve-uri($template),$locals,$grxq:layout)
|
||||
};
|
||||
|
|
@ -9,19 +9,6 @@
|
|||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h2>Server</h2>
|
||||
<p>The server side is written entirely in XQuery. It uses the
|
||||
<a href="http://basex.org" target="_blank">BaseX</a> implementation. <a
|
||||
href="http://docs.basex.org/wiki/RESTXQ" target="_blank">RestXQ</a>
|
||||
is used to map XQuery annotations to web server behavior.
|
||||
</p>
|
||||
<p> The graphviz <code>dot</code> executable is used to generate SVG from the DOT source.
|
||||
The resultant SVG is viewed in an interface that provides pan and zoom functionality.
|
||||
The SVG may also be viewed standalone or downloaded.</p>
|
||||
<p>This application includes DOTML developed by Martin Loetzsch.
|
||||
DOTML is a XML based syntax for the input language of the 'Dot'.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h2>Client</h2>
|
||||
<p>The client side targets modern browsers. It was tested against Firefox 15 and Chrome 21.
|
||||
|
|
@ -36,11 +23,27 @@
|
|||
The SVG may also be viewed standalone or downloaded.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h2>Bugs</h2>
|
||||
<h2>Server</h2>
|
||||
<p>The server side is written entirely in XQuery. It uses the
|
||||
<a href="http://basex.org" target="_blank">BaseX</a> implementation. <a
|
||||
href="http://docs.basex.org/wiki/RESTXQ" target="_blank">RestXQ</a>
|
||||
is used to map XQuery annotations to web server behavior.
|
||||
</p>
|
||||
<p> The graphviz <code>dot</code> executable is used to generate SVG from the DOT source.
|
||||
The resultant SVG is viewed in an interface that provides pan and zoom functionality.
|
||||
The SVG may also be viewed standalone or downloaded.</p>
|
||||
<p>This application includes an XSLT transform to convert <code>DOTML</code> to
|
||||
<code>dot</code> developed by Martin Loetzsch.
|
||||
<a href="http://www.martin-loetzsch.de/DOTML" target="_blank">DOTML</a>
|
||||
is a XML based syntax for the input language of the 'Dot'.</p>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<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.</p>
|
||||
works. See also <a href="http://alzt.tau.ac.il/~dagan/tools/#zoom">here</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,43 +1,6 @@
|
|||
<div>
|
||||
<div class="row-fluid" style="height:24px">
|
||||
{$toolbar}
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span6 extend" id="leftPane">
|
||||
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active">
|
||||
<a href="#tab-dot" data-toggle="tab">Dot</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab-defaults" data-toggle="tab">Defaults</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab-xml" data-toggle="tab">Raw XML</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" style="overflow:hidden;">
|
||||
<div class="tab-pane active " id="tab-dot">
|
||||
|
||||
<form id="dotForm" action="svg" method="post" target="_new"
|
||||
class="well ">
|
||||
<label>
|
||||
digraph "
|
||||
<input type="text" name="title" placeholder="title" class="input-small" />
|
||||
"
|
||||
</label>
|
||||
<span style="margin-right:-5px;padding-right:2px;">{{</span>
|
||||
<textarea id="dot" name="dot" rows="100"
|
||||
style="width:90%;overflow:scroll">{$dot}</textarea>
|
||||
<span style="margin-right:-5px;">}}</span>
|
||||
<label class="checkbox">
|
||||
<input name="dl" type="checkbox" />
|
||||
Download
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane well" id="tab-defaults">
|
||||
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
|
||||
aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<form id="frm-defaults" class="form-table">
|
||||
<label>
|
||||
Title:
|
||||
|
|
@ -79,18 +42,28 @@
|
|||
</select>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
<div class="row-fluid" style="height:24px">
|
||||
{$toolbar}
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span6 extend" id="leftPane">
|
||||
<form id="editForm" action="svg" method="post" target="_new"
|
||||
class="well ">
|
||||
<textarea id="dot" name="dot" rows="100"
|
||||
style="width:90%;overflow:scroll">{$dot}</textarea>
|
||||
|
||||
<label class="checkbox">
|
||||
<input name="dl" type="checkbox" />
|
||||
Download
|
||||
</label>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="tab-pane well" id="tab-xml">
|
||||
<pre id="svgsrc">source</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span6" id="rightPane">
|
||||
<div id="svgdiv" class="extend"
|
||||
style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:20em;">{$svgwidget}</div>
|
||||
|
||||
<pre style="display: none" id="svgsrc">(no svg loaded)</pre>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
|
|
|||
|
|
@ -2,16 +2,15 @@
|
|||
<div class="row-fluid" style="height:24px">
|
||||
{$toolbar}
|
||||
</div>
|
||||
<div class="row-fluid" style="height:20em" >
|
||||
<div class="span6" id="leftPane">
|
||||
<form method="post" action="api/dotml" style="background-color:#EEEEEE;">
|
||||
<div> <button type="submit">Redraw</button></div>
|
||||
<textarea name="dotml" rows="100" style="width:90%;overflow:scroll">{$dotml}</textarea>
|
||||
<div class="row-fluid" >
|
||||
<div class="span6" id="leftPane" style="position:relative;height:100%">
|
||||
<form id="editForm" method="post" action="api/dotml" style="background-color:#EEEEEE;" class="extend">
|
||||
<textarea name="dotml" rows="20" style="width:100%;overflow:scroll;height:100%">{$dotml}</textarea>
|
||||
</form >
|
||||
</div>
|
||||
<div class="span6" id="rightPane">
|
||||
<div id="svgdiv" class="extend" style="width:100%;height:30em;border: 1px solid #E3E3E3;min-height:20em;">{$svgwidget}</div>
|
||||
|
||||
<div id="svgdiv" class="extend" style="width:100%;border: 1px solid #E3E3E3;">{$svgwidget}</div>
|
||||
<pre style="display: none" id="svgsrc">(no svg loaded)</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
})();
|
||||
]]></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="{$bodyclass}">
|
||||
<div class="navbar navbar-fixed-top " data-dropdown="dropdown">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
|
|
@ -43,23 +43,23 @@
|
|||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a href="." class="brand" title="Version 0.1.0">
|
||||
<a href="." class="brand" title="Version 0.3.0">
|
||||
<img src="/graphxq/graphxq2.png" />
|
||||
graphXQ
|
||||
</a>
|
||||
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li>
|
||||
<a href="dot"><i class="icon-edit"></i> Dot</a>
|
||||
<li class="{$active-link('dot')}">
|
||||
<a href="dot" rel="tooltip" title="Define a graph in Dot notation" ><i class="icon-edit"></i> Dot</a>
|
||||
</li>
|
||||
<li>
|
||||
<li class="{$active-link('dotml')}">
|
||||
<a href="dotml"><i class="icon-align-center"></i> DotML</a>
|
||||
</li>
|
||||
<li >
|
||||
<li class="{$active-link('library')}">
|
||||
<a href="library"><i class="icon-book"></i> Library</a>
|
||||
</li>
|
||||
<li>
|
||||
<li class="{$active-link('api')}">
|
||||
<a href="api"><i class="icon-wrench"></i> API</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div>
|
||||
<!-- q,collection, hits -->
|
||||
<h2>Samples</h2>
|
||||
<h2>Samples {$count}</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="dot?src=samples/dot/process.gv">process</a>
|
||||
|
|
@ -23,4 +23,23 @@
|
|||
(dotml)
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Samples</h2>
|
||||
<div class="media well">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="/graphxq/graphxq.png"/>
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Title</h4>
|
||||
Description....
|
||||
</div>
|
||||
</div>
|
||||
<div class="media well">
|
||||
<a class="pull-left" href="#">
|
||||
<img class="media-object" src="/graphxq/dotml.png"/>
|
||||
</a>
|
||||
<div class="media-body">
|
||||
<h4 class="media-heading">Title2</h4>
|
||||
Description....
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,15 +1,41 @@
|
|||
<div>
|
||||
<div class="btn-group">
|
||||
<button id="bnup" class="btn btn-mini" ><i class="icon-refresh"></i>Redraw</button>
|
||||
<button id="bnsvg" class="btn btn-mini" ><i class="icon-fullscreen"></i>SVG</button>
|
||||
<button id="bndn" class="btn btn-mini"><i class="icon-download-alt"></i>download</button>
|
||||
<button id="bnup" class="btn btn-mini">
|
||||
<i class="icon-refresh"></i>
|
||||
Redraw
|
||||
</button>
|
||||
<button id="bnsvg" class="btn btn-mini">
|
||||
<i class="icon-fullscreen"></i>
|
||||
SVG
|
||||
</button>
|
||||
<button id="bndn" class="btn btn-mini">
|
||||
<i class="icon-download-alt"></i>
|
||||
download
|
||||
</button>
|
||||
<button id="bnxml" class="btn btn-mini" data-toggle="button">
|
||||
<i class="icon-text-width"></i>
|
||||
SVG text
|
||||
</button>
|
||||
</div>
|
||||
<!--
|
||||
http://stackoverflow.com/questions/12101781/splitter-for-twitter-bootstrap
|
||||
-->
|
||||
<div class="btn-group pull-right">
|
||||
<a rel="tooltip" title="Make the left side dominant" class="btn btn-mini" data-action="lDom" data-placement="left"><i class="icon icon-indent-left"></i></a>
|
||||
<a rel="tooltip" title="Make both sides equal" class="btn btn-mini" data-placement="left" data-action="equality"><i class="icon icon-resize-horizontal"></i></a>
|
||||
<a rel="tooltip" title="Make the right side dominant" class="btn btn-mini" data-placement="left" data-action="rDom"><i class="icon icon-indent-right"></i></a>
|
||||
<div class="btn-group">
|
||||
<button id="bnxx" class="btn btn-mini">
|
||||
<i class="icon-gift"></i>
|
||||
Options
|
||||
</button>
|
||||
</div>
|
||||
<!-- http://stackoverflow.com/questions/12101781/splitter-for-twitter-bootstrap -->
|
||||
<div class="btn-group " data-toggle="buttons-radio">
|
||||
<a rel="tooltip" title="Make the left side dominant" class="btn btn-mini"
|
||||
data-action="lDom" data-placement="left">
|
||||
<i class="icon icon-indent-left"></i>
|
||||
</a>
|
||||
<a rel="tooltip" title="Make both sides equal" class="btn btn-mini"
|
||||
data-placement="left" data-action="equality">
|
||||
<i class="icon icon-resize-horizontal"></i>
|
||||
</a>
|
||||
<a rel="tooltip" title="Make the right side dominant" class="btn btn-mini"
|
||||
data-placement="left" data-action="rDom">
|
||||
<i class="icon icon-indent-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue