vuetify 0.16.6
This commit is contained in:
parent
91db93633d
commit
7f8695969e
19 changed files with 944 additions and 140 deletions
|
|
@ -72,7 +72,6 @@ ace editor for vue.js
|
|||
},
|
||||
|
||||
applySettings(aceSettings){
|
||||
console.log("apply: ",aceSettings.theme)
|
||||
this.editor.setTheme(`ace/theme/${aceSettings.theme}`)
|
||||
//this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`)
|
||||
this.editor.setFontSize(parseInt(aceSettings.fontsize,10))
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ var settings = {
|
|||
if (this.debug) console.log('getItem',key);
|
||||
return localforage.getItem(key)
|
||||
.then(value => {
|
||||
console.log('GET setting', key,value);
|
||||
//console.log('GET setting', key,value);
|
||||
return value;
|
||||
|
||||
}).catch(err => {
|
||||
|
|
@ -64,7 +64,7 @@ var settings = {
|
|||
if (this.debug) console.log('setItem',key,value);
|
||||
return localforage.setItem(key, value)
|
||||
.then(value => {
|
||||
console.log('SET ',key, value);
|
||||
//console.log('SET ',key, value);
|
||||
return value
|
||||
|
||||
}).catch(err => {
|
||||
|
|
|
|||
|
|
@ -40,16 +40,17 @@
|
|||
<v-card class="grey lighten-2 pt-1">
|
||||
<v-card-media :src="src(image)" @dblclick="go(image)"
|
||||
height="80px" contain>
|
||||
<v-layout :justify-end="true">
|
||||
<v-flex>
|
||||
<v-layout align-baseline align-end fill-height>
|
||||
<v-flex >
|
||||
<v-icon class="green--text">check_circle</v-icon>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-media>
|
||||
|
||||
<v-card-actions >
|
||||
<span>#</span>
|
||||
<v-btn icon small>
|
||||
|
||||
<span v-if="image.keywords >0 ">#{{image.keywords}}</span>
|
||||
<v-btn icon small v-if="image.geo">
|
||||
<v-icon>place</v-icon>
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
|
|
|
|||
|
|
@ -142,11 +142,15 @@ as element(*)*
|
|||
let $id:=$vue-api:entity?access?id($image)
|
||||
let $path:=$vue-api:entity?access?path($image)
|
||||
let $name:=$vue-api:entity?access?name($image)
|
||||
let $geo:=$vue-api:entity?access?geo($image)
|
||||
let $keywords:=$vue-api:entity?access?keywords($image)
|
||||
let $thumb:= $cfg:THUMBDIR || $path
|
||||
let $thumb:=if(file:exists($thumb)) then $thumb else $cfg:THUMBDIR || "missing.jpg"
|
||||
return ( <id>{$id}</id>
|
||||
,<name>{$name}</name>
|
||||
,<path>{$path}</path>
|
||||
,<geo>{$geo}</geo>
|
||||
,<keywords>{$keywords}</keywords>
|
||||
,<data>{fetch:binary($thumb)}</data>
|
||||
,<mime>{fetch:content-type($thumb)}</mime>)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<td>Get</td>
|
||||
<td>
|
||||
<v-btn @click="get()" icon >
|
||||
<v-icon>cached</v-icon>
|
||||
<v-icon>radio_button_checked</v-icon>
|
||||
</v-btn>
|
||||
|
||||
</td>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
<td>Update</td>
|
||||
<td>
|
||||
<v-btn @click="update()" icon >
|
||||
<v-icon>cached</v-icon>
|
||||
<v-icon>radio_button_checked</v-icon>
|
||||
</v-btn>
|
||||
</td>
|
||||
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@
|
|||
fontsize: "14"
|
||||
},
|
||||
keybindings:[ 'ace', 'vim', 'emacs', 'textarea', 'sublime' ],
|
||||
themes: [ "github", "chaos","tomorrow"]
|
||||
themes: [ "github","chrome" ,"tomorrow","-dark-","chaos","twilight"]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
|
|
|||
|
|
@ -23,10 +23,10 @@
|
|||
:key="i"
|
||||
:href="'#mobile-tabs-6-' + i"
|
||||
>
|
||||
<v-chip close>
|
||||
<v-avatar class="pink">
|
||||
<v-chip label close>
|
||||
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-avatar>
|
||||
|
||||
Item {{ i }} more
|
||||
</v-chip>
|
||||
</v-tabs-item>
|
||||
|
|
|
|||
|
|
@ -5,35 +5,32 @@
|
|||
:)
|
||||
|
||||
module namespace tx = 'quodatum:vue.api.transform';
|
||||
import module namespace qv = 'quodatum.validate' at "validate.xqm";
|
||||
|
||||
(:~
|
||||
: xslt
|
||||
:)
|
||||
declare namespace cnt="http://cambridge.org/core/content";
|
||||
(:~ location of schema to use :)
|
||||
declare variable $tx:nvdl:=resolve-uri("../static/consignment/nvdl/consignment.nvdl",static-base-uri());
|
||||
|
||||
(:~ location of schema to use :)
|
||||
declare variable $tx:schematron:=resolve-uri("../static/consignment/nvdl/core-consignment.sch",static-base-uri());
|
||||
|
||||
declare variable $tx:validators:=(qv:schematron(?,$tx:schematron)
|
||||
,qv:nvdl(?,$tx:nvdl)
|
||||
);
|
||||
|
||||
(:~ run validation doc in db :)
|
||||
declare
|
||||
%rest:POST %rest:path("/vue-poc/api/xslt")
|
||||
%rest:query-param("xml", "{$xml}")
|
||||
%rest:query-param("xslt", "{$xslt}")
|
||||
%output:method("json")
|
||||
%updating
|
||||
function tx:xslt($xml,$xslt) {
|
||||
|
||||
let $result:=try{
|
||||
let $x:=fn:parse-xml($xml)
|
||||
let $s:=fn:parse-xml($xslt)
|
||||
let $t:=fn:trace($xml,"xml")
|
||||
let $t:=fn:trace($xslt,"xml")
|
||||
let $r:=xslt:transform($x,$s)
|
||||
return
|
||||
<json objects="json">
|
||||
<rc>0</rc>
|
||||
<result>{fn:serialize($r)}</result>
|
||||
</json>
|
||||
}
|
||||
catch *{
|
||||
<json objects="json">
|
||||
<rc>1</rc>
|
||||
<info>{$err:description}</info>
|
||||
</json>
|
||||
}
|
||||
return db:output($result)
|
||||
%rest:GET %rest:path("/vue-poc/api/validate")
|
||||
%rest:query-param("doc", "{$doc}")
|
||||
%rest:query-param("schema", "{$schema}")
|
||||
%rest:produces("text/xml")
|
||||
%output:method("xml")
|
||||
function tx:validate-path($doc,$schema){
|
||||
tx:validate(doc($doc))
|
||||
};
|
||||
|
||||
(:~ run validations add custom details - content-type:)
|
||||
declare function tx:validate($doc){
|
||||
let $type:=$doc//cnt:*=>head()=>local-name()=>substring-after("content-")
|
||||
return qv:validation($doc,$tx:validators,attribute type {$type})
|
||||
};
|
||||
|
|
@ -1,16 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="validate">
|
||||
<v-container fluid>
|
||||
validate
|
||||
<v-container fluid v-resize="onResize">
|
||||
<v-card>
|
||||
<v-toolbar class="orange">
|
||||
<v-btn @click="validate" :loading="loading"
|
||||
:disabled="loading"
|
||||
><v-icon>play_circle_outline</v-icon>Validate</v-btn>
|
||||
<span v-text="elapsed"></span>ms. Height:
|
||||
<span v-text="height"></span>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-menu offset-y left>
|
||||
<v-btn icon dark slot="activator"><v-icon>settings</v-icon></v-btn>
|
||||
<v-card >
|
||||
<v-toolbar class="green">
|
||||
<v-card-title >Settings................</v-card-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
stuff
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</v-toolbar>
|
||||
<v-card-text >
|
||||
here
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
data: function(){
|
||||
return {
|
||||
message: 'bad route!'
|
||||
loading: false,
|
||||
elapsed: null,
|
||||
height: null,
|
||||
result: null,
|
||||
doc: "c:/test.xml",
|
||||
schema: "c:/schema.xsd"
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onResize(){
|
||||
this.height = window.innerHeight
|
||||
},
|
||||
validate(){
|
||||
|
||||
this.loading=true
|
||||
this.start = performance.now();
|
||||
HTTPNE.get("validate",Qs.stringify({doc: this.doc, schema: this.schema}))
|
||||
.then(r=>{
|
||||
console.log(r)
|
||||
this.elapsed=Math.floor(performance.now() - this.start);
|
||||
this.loading=false
|
||||
if(r.data.rc==0){
|
||||
this.result=r.data.result
|
||||
}else{
|
||||
this.result=r.data.info
|
||||
}
|
||||
})
|
||||
.catch(r=> {
|
||||
console.log("error",r)
|
||||
this.result=r.message + ": "+ r.config.url + "\n"+ r.response.data
|
||||
this.loading=false
|
||||
});
|
||||
},
|
||||
},
|
||||
created:function(){
|
||||
console.log("notfound",this.$route.query.q)
|
||||
}
|
||||
|
|
|
|||
104
src/vue-poc/features/validate/validate.xqm
Normal file
104
src/vue-poc/features/validate/validate.xqm
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
(:~
|
||||
: general validation tools, apply sequence of validators
|
||||
: schematron and nvdl msg handling
|
||||
: format as json friendly
|
||||
: @author andy bunce ,quodatum ltd
|
||||
: @licence apache 2
|
||||
:)
|
||||
|
||||
module namespace qv = 'quodatum.validate';
|
||||
import module namespace sch="expkg-zone58.validation.schematron";
|
||||
declare namespace svrl = "http://purl.oclc.org/dsdl/svrl";
|
||||
|
||||
|
||||
(:~ generate validation report for $doc
|
||||
: @param $validators sequence of functions to apply
|
||||
: @param $extras custom attributes and elements to include in response
|
||||
:)
|
||||
declare function qv:validation($doc ,$validators as function(*)*,$extras)
|
||||
as element(validation){
|
||||
let $uri:=base-uri($doc)
|
||||
let $results:=for-each($validators,function($f){$f($doc)})
|
||||
return <validation location="{$uri}" nodes="{count($doc//*)}">{ $extras,$results}</validation>
|
||||
};
|
||||
|
||||
(:~ report as json
|
||||
: @param $options can limit size eg {"limit":200}
|
||||
:)
|
||||
declare function qv:json($d as element(validation),$options as item())
|
||||
as element(_){
|
||||
let $limit:= if($options?limit) then $options?limit else 5000
|
||||
let $type:=$d/@type/string()
|
||||
let $uri:=$d/@location/string()
|
||||
let $name:=tokenize($uri,"/")[last()]
|
||||
let $nodes:=$d/@nodes/string()
|
||||
let $fix:=function($r){element {name($r)}{attribute type {"array"},qv:msg-limit($r/_,$limit)}}
|
||||
return <_ type="object">
|
||||
<uri>{$uri}</uri>
|
||||
<name>{$name}</name>
|
||||
<type>{$type}</type>
|
||||
<nodes type="number">{$nodes}</nodes>
|
||||
|
||||
<msgcounts type="object">{
|
||||
for $v in $d/* return element {name($v)}{attribute type {"number"},count($v/_)}
|
||||
}</msgcounts>
|
||||
|
||||
<reports type="object">{
|
||||
$d/*!$fix(.)
|
||||
}</reports>
|
||||
|
||||
</_>
|
||||
};
|
||||
|
||||
(:~ restrict number of messages o/p :)
|
||||
declare function qv:msg-limit($msgs as element(_)* ,$limit as xs:integer)
|
||||
as element(_)*{
|
||||
let $count:=count($msgs)
|
||||
return if($count>$limit)
|
||||
then (subsequence($msgs,1,$limit -1),<_ type="object"><text>Messages truncated, {1+ $count - $limit} not shown.</text></_>)
|
||||
else $msgs
|
||||
};
|
||||
|
||||
(:~
|
||||
: run schematron on doc, returns two reports
|
||||
:)
|
||||
declare function qv:schematron($d,$sch as xs:anyURI)
|
||||
as element()*{
|
||||
let $report:= sch:validate-document($d,doc($sch))
|
||||
return (
|
||||
qv:msgs("failed-assert",$report/svrl:schematron-output/svrl:failed-assert!qv:msg-from-svrl(.)),
|
||||
qv:msgs("successful-report", $report/svrl:schematron-output/svrl:successful-report!qv:msg-from-svrl(.))
|
||||
)
|
||||
};
|
||||
|
||||
(:~ convert svrl node to standard msg :)
|
||||
declare function qv:msg-from-svrl($svrl as element())
|
||||
as element(_){
|
||||
<_ type="object">
|
||||
<text>{$svrl/svrl:text/string()}</text>
|
||||
<role>{$svrl/@role/string()}</role>
|
||||
<location>{$svrl/@location/string()}</location>
|
||||
</_>
|
||||
};
|
||||
|
||||
(:~ create nvdl report :)
|
||||
declare function qv:nvdl($d,$nvdl as xs:anyURI){
|
||||
let $report:= validate:rng-report($d, $nvdl)
|
||||
return qv:msgs("nvdl",$report/message!qv:msg-from-nvdl(.))
|
||||
};
|
||||
|
||||
(:~ convert nvdl message to standard msg format :)
|
||||
declare function qv:msg-from-nvdl($message as element())
|
||||
as element(_){
|
||||
<_ type="object">
|
||||
<text>{$message/string()}</text>
|
||||
<role>{$message/@level/lower-case(.)}</role>
|
||||
<line type="number">{$message/@line/string()}</line>
|
||||
</_>
|
||||
};
|
||||
|
||||
declare %private function qv:msgs($type as xs:string,$msgs as element(_)*)
|
||||
as element(){
|
||||
element {$type} {attribute type {"array"},$msgs}
|
||||
|
||||
};
|
||||
|
|
@ -1,22 +1,21 @@
|
|||
(:~
|
||||
: validation handler
|
||||
: basex web system info
|
||||
: @author andy bunce
|
||||
: @since oct 2017
|
||||
: @since oct 2012
|
||||
:)
|
||||
|
||||
module namespace tx = 'quodatum:vue.api.validate';
|
||||
module namespace tx = 'quodatum:vue.api.transform';
|
||||
|
||||
(:~
|
||||
: validate
|
||||
: xslt
|
||||
:)
|
||||
declare
|
||||
%rest:POST %rest:path("/vue-poc/api/validate")
|
||||
%rest:POST %rest:path("/vue-poc/api/xslt")
|
||||
%rest:query-param("xml", "{$xml}")
|
||||
%rest:query-param("schema", "{$schema}")
|
||||
%rest:query-param("xslt", "{$xslt}")
|
||||
%output:method("json")
|
||||
%updating
|
||||
function tx:validate($xml,$schema) {
|
||||
let $xslt:="fixme"
|
||||
function tx:xslt($xml,$xslt) {
|
||||
|
||||
let $result:=try{
|
||||
let $x:=fn:parse-xml($xml)
|
||||
let $s:=fn:parse-xml($xslt)
|
||||
|
|
@ -35,5 +34,5 @@ function tx:validate($xml,$schema) {
|
|||
<info>{$err:description}</info>
|
||||
</json>
|
||||
}
|
||||
return db:output($result)
|
||||
return $result
|
||||
};
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="transform">
|
||||
<v-container fluid>
|
||||
<v-container fluid >
|
||||
<v-card>
|
||||
<v-toolbar >
|
||||
<v-toolbar class="orange">
|
||||
<v-btn @click="transform" :loading="loading"
|
||||
:disabled="loading"
|
||||
><v-icon>play_circle_outline</v-icon>Run</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<span v-text="elapsed"></span>ms. Height:
|
||||
<span v-text="height"></span>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn-toggle v-model="showOptions" multiple>
|
||||
<v-icon>visibility</v-icon>
|
||||
<v-btn flat value="result" >
|
||||
|
|
@ -19,18 +21,28 @@
|
|||
<span :class="xslValid?'':'red'">XSLT</span>
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<v-btn icon><v-icon>settings</v-icon></v-btn>
|
||||
<v-menu offset-y left>
|
||||
<v-btn icon dark slot="activator"><v-icon>settings</v-icon></v-btn>
|
||||
<v-card >
|
||||
<v-toolbar class="green">
|
||||
<v-card-title >Settings................</v-card-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
stuff
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</v-toolbar>
|
||||
<v-card-text >
|
||||
<v-card-text v-if="showOptions.includes('result')">
|
||||
<v-layout style="height:200px" fill-height >
|
||||
<v-flex >
|
||||
<vue-ace :content="result" mode="xml" wrap="true" :settings="aceSettings"></vue-ace>
|
||||
</v-flex>
|
||||
<v-card-text v-resize="onResize" style="height:400px; " class="amber" ref="page">
|
||||
|
||||
<v-layout v-if="showOptions.includes('result')" style="height:100%" fill-height >
|
||||
<v-flex >
|
||||
<vue-ace :content="result" mode="xml" wrap="true" :settings="aceSettings"></vue-ace>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
<v-layout style="height:200px" fill-height >
|
||||
<v-flex v-if="showOptions.includes('xml')" class="pa-1">
|
||||
|
||||
<v-layout style="height:100%" fill-height>
|
||||
<v-flex v-if="showOptions.includes('xml')" class="pa-1" >
|
||||
<vue-ace :content="xml" mode="xml" wrap="true"
|
||||
v-on:change-content="v => this.xml=v" v-on:annotation="a => this.xmlValid=a.error===0 && a.warning===0"
|
||||
:settings="aceSettings"></vue-ace>
|
||||
|
|
@ -40,8 +52,8 @@
|
|||
v-on:change-content="v => this.xslt=v" v-on:annotation="a => this.xslValid=a.error===0 && a.warning===0"
|
||||
:settings="aceSettings"></vue-ace>
|
||||
</v-flex>
|
||||
|
||||
</v-layout>
|
||||
|
||||
</v-card-text>
|
||||
|
||||
|
||||
|
|
@ -60,7 +72,10 @@
|
|||
result: "(result here)",
|
||||
resultValid: true,
|
||||
showOptions: ["xml","xslt"],
|
||||
loading: false
|
||||
loading: false,
|
||||
start: null,
|
||||
elapsed: "?",
|
||||
height: "?"
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
|
@ -71,9 +86,11 @@
|
|||
if(!this.showOptions.includes("result"))this.showOptions.push("result")
|
||||
this.loading=true
|
||||
this.resultValid=true
|
||||
this.start = performance.now();
|
||||
HTTPNE.post("xslt",Qs.stringify({xml:this.xml,xslt:this.xslt}))
|
||||
.then(r=>{
|
||||
console.log(r)
|
||||
this.elapsed=Math.floor(performance.now() - this.start);
|
||||
this.loading=false
|
||||
if(r.data.rc==0){
|
||||
this.result=r.data.result
|
||||
|
|
@ -84,9 +101,17 @@
|
|||
})
|
||||
.catch(r=> {
|
||||
console.log("error",r)
|
||||
this.result=r.response.data.info
|
||||
this.result=r.message + ": "+ r.config.url + "\n"+ r.response.data
|
||||
this.loading=false
|
||||
});
|
||||
},
|
||||
onResize(){
|
||||
var el=this.$refs["page"]
|
||||
console.log("top",el.offsetTop)
|
||||
var h=Math.max(1,window.innerHeight - el.offsetTop) -100
|
||||
console.log("h",h)
|
||||
this.height = h
|
||||
el.style.height=h +"px"
|
||||
}
|
||||
},
|
||||
beforeRouteEnter (to, from, next) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
(: entity access maps
|
||||
: auto generated from xml files in entities folder at: 2017-10-06T15:21:02.917+01:00
|
||||
: auto generated from xml files in entities folder at: 2017-10-15T22:56:50.395+01:00
|
||||
:)
|
||||
|
||||
module namespace entity = 'quodatum.models.generated';
|
||||
|
|
@ -185,10 +185,10 @@ declare variable $entity:list:=map {
|
|||
"name": "thumbnail",
|
||||
"description": "an image.",
|
||||
"access": map{
|
||||
"geo": function($_ as element()) as xs:boolean {$_/geo },
|
||||
"geo": function($_ as element()) as xs:boolean {$_/boolean(geo) },
|
||||
"height": function($_ as element()) as xs:integer {$_/height },
|
||||
"id": function($_ as element()) as xs:integer {$_/db:node-id(.) },
|
||||
"keywords": function($_ as element()) as xs:integer {$_/0 },
|
||||
"keywords": function($_ as element()) as xs:integer {$_/count(keywords/keyword) },
|
||||
"name": function($_ as element()) as xs:string {$_/file/@name },
|
||||
"path": function($_ as element()) as xs:string {$_/file/@path },
|
||||
"size": function($_ as element()) as xs:integer {$_/0 },
|
||||
|
|
@ -201,7 +201,7 @@ declare variable $entity:list:=map {
|
|||
"json": map{
|
||||
"geo": function($_ as element()) as element(geo)? {
|
||||
(: xs:boolean :)
|
||||
fn:data($_/geo)!element geo { attribute type {'boolean'}, .}
|
||||
fn:data($_/boolean(geo))!element geo { attribute type {'boolean'}, .}
|
||||
},
|
||||
"height": function($_ as element()) as element(height)? {
|
||||
(: xs:integer :)
|
||||
|
|
@ -213,7 +213,7 @@ declare variable $entity:list:=map {
|
|||
},
|
||||
"keywords": function($_ as element()) as element(keywords)? {
|
||||
(: xs:integer :)
|
||||
fn:data($_/0)!element keywords { attribute type {'number'}, .}
|
||||
fn:data($_/count(keywords/keyword))!element keywords { attribute type {'number'}, .}
|
||||
},
|
||||
"name": function($_ as element()) as element(name)? {
|
||||
(: xs:string :)
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</field>
|
||||
<field name="keywords" type="xs:integer">
|
||||
<description>Number of keywords</description>
|
||||
<xpath>0</xpath>
|
||||
<xpath>count(keywords/keyword)</xpath>
|
||||
</field>
|
||||
<field name="width" type="xs:integer">
|
||||
<description>width in pixels</description>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
</field>
|
||||
<field name="geo" type="xs:boolean">
|
||||
<description>has geo</description>
|
||||
<xpath>geo</xpath>
|
||||
<xpath>boolean(geo)</xpath>
|
||||
</field>
|
||||
</fields>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// generated 2017-10-11T22:21:45.072+01:00
|
||||
// generated 2017-10-15T22:47:08.186+01:00
|
||||
Vue.component('qd-confirm',{template:`
|
||||
<v-dialog v-model="value">
|
||||
<v-card>
|
||||
|
|
@ -230,7 +230,6 @@
|
|||
},
|
||||
|
||||
applySettings(aceSettings){
|
||||
console.log("apply: ",aceSettings.theme)
|
||||
this.editor.setTheme(`ace/theme/${aceSettings.theme}`)
|
||||
//this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`)
|
||||
this.editor.setFontSize(parseInt(aceSettings.fontsize,10))
|
||||
|
|
@ -1452,7 +1451,7 @@ Vue.filter('round', function(value, decimals) {
|
|||
<v-flex height="80px" xs2="" v-for="image in images" :key="image.name">
|
||||
<v-card class="grey lighten-2 pt-1">
|
||||
<v-card-media :src="src(image)" @dblclick="go(image)" height="80px" contain="">
|
||||
<v-layout :justify-end="true">
|
||||
<v-layout align-baseline="" align-end="" fill-height="">
|
||||
<v-flex>
|
||||
<v-icon class="green--text">check_circle</v-icon>
|
||||
</v-flex>
|
||||
|
|
@ -1460,8 +1459,9 @@ Vue.filter('round', function(value, decimals) {
|
|||
</v-card-media>
|
||||
|
||||
<v-card-actions>
|
||||
<span>#</span>
|
||||
<v-btn icon="" small="">
|
||||
|
||||
<span v-if="image.keywords >0 ">#{{image.keywords}}</span>
|
||||
<v-btn icon="" small="" v-if="image.geo">
|
||||
<v-icon>place</v-icon>
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
|
|
@ -2057,7 +2057,7 @@ people
|
|||
<td>Get</td>
|
||||
<td>
|
||||
<v-btn @click="get()" icon="">
|
||||
<v-icon>cached</v-icon>
|
||||
<v-icon>radio_button_checked</v-icon>
|
||||
</v-btn>
|
||||
|
||||
</td>
|
||||
|
|
@ -2091,7 +2091,7 @@ people
|
|||
<td>Update</td>
|
||||
<td>
|
||||
<v-btn @click="update()" icon="">
|
||||
<v-icon>cached</v-icon>
|
||||
<v-icon>radio_button_checked</v-icon>
|
||||
</v-btn>
|
||||
</td>
|
||||
|
||||
|
|
@ -2621,7 +2621,7 @@ people
|
|||
fontsize: "14"
|
||||
},
|
||||
keybindings:[ 'ace', 'vim', 'emacs', 'textarea', 'sublime' ],
|
||||
themes: [ "github", "chaos","tomorrow"]
|
||||
themes: [ "github","chrome" ,"tomorrow","-dark-","chaos","twilight"]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
|
@ -2743,10 +2743,10 @@ svg
|
|||
|
||||
<v-tabs-bar class="grey lighten-3">
|
||||
<v-tabs-item v-for="i in 13" :key="i" :href="'#mobile-tabs-6-' + i">
|
||||
<v-chip close="">
|
||||
<v-avatar class="pink">
|
||||
<v-chip label="" close="">
|
||||
|
||||
<v-icon>favorite</v-icon>
|
||||
</v-avatar>
|
||||
|
||||
Item {{ i }} more
|
||||
</v-chip>
|
||||
</v-tabs-item>
|
||||
|
|
@ -3210,16 +3210,69 @@ created(){
|
|||
|
||||
);
|
||||
const Validate=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
validate
|
||||
<v-container fluid="" v-resize="onResize">
|
||||
<v-card>
|
||||
<v-toolbar class="orange">
|
||||
<v-btn @click="validate" :loading="loading" :disabled="loading"><v-icon>play_circle_outline</v-icon>Validate</v-btn>
|
||||
<span v-text="elapsed"></span>ms. Height:
|
||||
<span v-text="height"></span>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-menu offset-y="" left="">
|
||||
<v-btn icon="" dark="" slot="activator"><v-icon>settings</v-icon></v-btn>
|
||||
<v-card>
|
||||
<v-toolbar class="green">
|
||||
<v-card-title>Settings................</v-card-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
stuff
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
here
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
`,
|
||||
|
||||
data: function(){
|
||||
return {
|
||||
message: 'bad route!'
|
||||
loading: false,
|
||||
elapsed: null,
|
||||
height: null,
|
||||
result: null,
|
||||
doc: "c:/test.xml",
|
||||
schema: "c:/schema.xsd"
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onResize(){
|
||||
this.height = window.innerHeight
|
||||
},
|
||||
validate(){
|
||||
|
||||
this.loading=true
|
||||
this.start = performance.now();
|
||||
HTTPNE.get("validate",Qs.stringify({doc: this.doc, schema: this.schema}))
|
||||
.then(r=>{
|
||||
console.log(r)
|
||||
this.elapsed=Math.floor(performance.now() - this.start);
|
||||
this.loading=false
|
||||
if(r.data.rc==0){
|
||||
this.result=r.data.result
|
||||
}else{
|
||||
this.result=r.data.info
|
||||
}
|
||||
})
|
||||
.catch(r=> {
|
||||
console.log("error",r)
|
||||
this.result=r.message + ": "+ r.config.url + "\n"+ r.response.data
|
||||
this.loading=false
|
||||
});
|
||||
},
|
||||
},
|
||||
created:function(){
|
||||
console.log("notfound",this.$route.query.q)
|
||||
}
|
||||
|
|
@ -3229,9 +3282,11 @@ validate
|
|||
const Transform=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<v-card>
|
||||
<v-toolbar>
|
||||
<v-toolbar class="orange">
|
||||
<v-btn @click="transform" :loading="loading" :disabled="loading"><v-icon>play_circle_outline</v-icon>Run</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<span v-text="elapsed"></span>ms. Height:
|
||||
<span v-text="height"></span>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn-toggle v-model="showOptions" multiple="">
|
||||
<v-icon>visibility</v-icon>
|
||||
<v-btn flat="" value="result">
|
||||
|
|
@ -3244,25 +3299,35 @@ validate
|
|||
<span :class="xslValid?'':'red'">XSLT</span>
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<v-btn icon=""><v-icon>settings</v-icon></v-btn>
|
||||
<v-menu offset-y="" left="">
|
||||
<v-btn icon="" dark="" slot="activator"><v-icon>settings</v-icon></v-btn>
|
||||
<v-card>
|
||||
<v-toolbar class="green">
|
||||
<v-card-title>Settings................</v-card-title>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
stuff
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-card-text v-if="showOptions.includes('result')">
|
||||
<v-layout style="height:200px" fill-height="">
|
||||
<v-flex>
|
||||
<vue-ace :content="result" mode="xml" wrap="true" :settings="aceSettings"></vue-ace>
|
||||
</v-flex>
|
||||
<v-card-text v-resize="onResize" style="height:400px; " class="amber" ref="page">
|
||||
|
||||
<v-layout v-if="showOptions.includes('result')" style="height:100%" fill-height="">
|
||||
<v-flex>
|
||||
<vue-ace :content="result" mode="xml" wrap="true" :settings="aceSettings"></vue-ace>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
<v-layout style="height:200px" fill-height="">
|
||||
|
||||
<v-layout style="height:100%" fill-height="">
|
||||
<v-flex v-if="showOptions.includes('xml')" class="pa-1">
|
||||
<vue-ace :content="xml" mode="xml" wrap="true" v-on:change-content="v => this.xml=v" v-on:annotation="a => this.xmlValid=a.error===0 && a.warning===0" :settings="aceSettings"></vue-ace>
|
||||
</v-flex>
|
||||
<v-flex v-if="showOptions.includes('xslt')" class="pa-1">
|
||||
<vue-ace :content="xslt" mode="xml" wrap="true" v-on:change-content="v => this.xslt=v" v-on:annotation="a => this.xslValid=a.error===0 && a.warning===0" :settings="aceSettings"></vue-ace>
|
||||
</v-flex>
|
||||
|
||||
</v-layout>
|
||||
|
||||
</v-card-text>
|
||||
|
||||
|
||||
|
|
@ -3280,7 +3345,10 @@ validate
|
|||
result: "(result here)",
|
||||
resultValid: true,
|
||||
showOptions: ["xml","xslt"],
|
||||
loading: false
|
||||
loading: false,
|
||||
start: null,
|
||||
elapsed: "?",
|
||||
height: "?"
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
|
@ -3291,9 +3359,11 @@ validate
|
|||
if(!this.showOptions.includes("result"))this.showOptions.push("result")
|
||||
this.loading=true
|
||||
this.resultValid=true
|
||||
this.start = performance.now();
|
||||
HTTPNE.post("xslt",Qs.stringify({xml:this.xml,xslt:this.xslt}))
|
||||
.then(r=>{
|
||||
console.log(r)
|
||||
this.elapsed=Math.floor(performance.now() - this.start);
|
||||
this.loading=false
|
||||
if(r.data.rc==0){
|
||||
this.result=r.data.result
|
||||
|
|
@ -3304,9 +3374,17 @@ validate
|
|||
})
|
||||
.catch(r=> {
|
||||
console.log("error",r)
|
||||
this.result=r.response.data.info
|
||||
this.result=r.message + ": "+ r.config.url + "\n"+ r.response.data
|
||||
this.loading=false
|
||||
});
|
||||
},
|
||||
onResize(){
|
||||
var el=this.$refs["page"]
|
||||
console.log("top",el.offsetTop)
|
||||
var h=Math.max(1,window.innerHeight - el.offsetTop) -100
|
||||
console.log("h",h)
|
||||
this.height = h
|
||||
el.style.height=h +"px"
|
||||
}
|
||||
},
|
||||
beforeRouteEnter (to, from, next) {
|
||||
|
|
@ -3432,10 +3510,26 @@ router.beforeEach((to, from, next) => {
|
|||
<v-toolbar class="indigo" app="" dark="">
|
||||
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
|
||||
<v-toolbar-title class="hidden-sm-and-down">{{$route.meta.title}}</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="favorite" icon="" flat="" title="Save location">
|
||||
<v-icon>favorite</v-icon>
|
||||
<v-btn @click="frmFav = !frmFav" icon="" flat="" title="Bookmark this page">
|
||||
<v-icon>star_border</v-icon>
|
||||
</v-btn>
|
||||
<v-dialog v-model="frmFav">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
Bookmark
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<h6>{{$route.meta.title}}</h6>
|
||||
<v-select v-model="tags" label="tags" chips="" tags="" :items="taglist"></v-select>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="primary" flat="" @click.stop="frmFav=false">Save</v-btn>
|
||||
<v-btn color="primary" flat="" @click.stop="frmFav=false">Cancel</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field prepend-icon="search" label="Search..." v-model="q" hide-details="" single-line="" dark="" @keyup.enter="search"></v-text-field>
|
||||
|
|
@ -3482,17 +3576,17 @@ router.beforeEach((to, from, next) => {
|
|||
mini: false,
|
||||
dark: false,
|
||||
alert: {show:false,msg:"Hello"},
|
||||
frmFav: false,
|
||||
tags: [],
|
||||
taglist: [
|
||||
'todo',
|
||||
'find',
|
||||
'some',
|
||||
'good',
|
||||
'tags'
|
||||
],
|
||||
items: [
|
||||
{href: '/',text: 'Home', icon: 'home' },
|
||||
{
|
||||
icon: 'folder_open',
|
||||
text: 'Collections' ,
|
||||
model: false,
|
||||
children: [
|
||||
{href: '/database', text: 'Databases',icon: 'developer_mode' },
|
||||
{href: '/files', text: 'File system',icon: 'folder' },
|
||||
{href: '/history',text: 'history',icon: 'history'}
|
||||
]},
|
||||
{
|
||||
icon: 'directions_run',
|
||||
text: 'Actions' ,
|
||||
|
|
@ -3504,6 +3598,21 @@ router.beforeEach((to, from, next) => {
|
|||
{href: '/transform',text: 'XSLT Transform',icon: 'input'},
|
||||
{href: '/tasks',text: 'Tasks',icon: 'history'}
|
||||
]},
|
||||
{
|
||||
icon: 'folder_open',
|
||||
text: 'Collections' ,
|
||||
model: false,
|
||||
children: [
|
||||
{href: '/database', text: 'Databases',icon: 'developer_mode' },
|
||||
{href: '/files', text: 'File system',icon: 'folder' },
|
||||
{href: '/history',text: 'history',icon: 'history'}
|
||||
]},
|
||||
{
|
||||
icon: 'memory',
|
||||
text: 'Models' ,
|
||||
model: false,
|
||||
children: [
|
||||
]},
|
||||
{
|
||||
icon: 'cast_connected',
|
||||
text: 'Server' ,
|
||||
|
|
@ -3668,7 +3777,7 @@ var settings = {
|
|||
if (this.debug) console.log('getItem',key);
|
||||
return localforage.getItem(key)
|
||||
.then(value => {
|
||||
console.log('GET setting', key,value);
|
||||
//console.log('GET setting', key,value);
|
||||
return value;
|
||||
|
||||
}).catch(err => {
|
||||
|
|
@ -3680,7 +3789,7 @@ var settings = {
|
|||
if (this.debug) console.log('setItem',key,value);
|
||||
return localforage.setItem(key, value)
|
||||
.then(value => {
|
||||
console.log('SET ',key, value);
|
||||
//console.log('SET ',key, value);
|
||||
return value
|
||||
|
||||
}).catch(err => {
|
||||
|
|
|
|||
|
|
@ -9,12 +9,13 @@
|
|||
<title>Vue Router Test</title>
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link href="https://unpkg.com/vuetify@0.16.5/dist/vuetify.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="https://unpkg.com/vuetify@0.16.6/dist/vuetify.min.css" rel="stylesheet" type="text/css">
|
||||
<link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css" rel="stylesheet" type="text/css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
|
||||
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
|
||||
crossorigin=""/>
|
||||
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css">
|
||||
<link href="/vue-poc/ui/svg-pan-zoom.css" rel="stylesheet" type="text/css">
|
||||
<link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
|
||||
|
||||
|
||||
|
|
@ -40,11 +41,11 @@
|
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
|
||||
<script src="https://unpkg.com/vuetify@0.16.5/dist/vuetify.min.js"></script>
|
||||
<script src="https://unpkg.com/vuetify@0.16.6/dist/vuetify.min.js"></script>
|
||||
<script src="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ace.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ext-language_tools.js"></script>
|
||||
|
||||
<script src="https://d3js.org/d3.v3.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-css.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-html.js"></script>
|
||||
|
|
@ -55,6 +56,7 @@
|
|||
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
|
||||
crossorigin=""></script>
|
||||
<script src="https://unpkg.com/vue2-leaflet@0.0.55/dist/vue2-leaflet.js"></script>
|
||||
<script src="/vue-poc/ui/svg=pan-zoom.js"></script>
|
||||
<script src="/vue-poc/ui/perf-stat.js"></script>
|
||||
<script src="/vue-poc/ui/app-gen.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
36
src/vue-poc/static/svg-pan-zoom.css
Normal file
36
src/vue-poc/static/svg-pan-zoom.css
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
html, body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 12px;
|
||||
}
|
||||
.canvas {
|
||||
overflow: hidden;
|
||||
fill: #808040;
|
||||
}
|
||||
.canvas .wrapper.outer > .background {
|
||||
fill: #000000;
|
||||
}
|
||||
.canvas .wrapper.inner > .background {
|
||||
fill: #CCCCCC;
|
||||
cursor: move;
|
||||
}
|
||||
.canvas .background {
|
||||
fill: #F6F6F6;
|
||||
stroke: #333333;
|
||||
cursor: move;
|
||||
}
|
||||
.canvas .panCanvas {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.canvas .minimap .frame .background {
|
||||
stroke: #111111;
|
||||
stroke-width: 4px;
|
||||
fill-opacity: 0.4;
|
||||
fill: #000000;
|
||||
fill: url(#minimapGradient_qwpyza);
|
||||
xfilter: url(#minimapDropShadow_qwpyza);
|
||||
cursor: move;
|
||||
}
|
||||
436
src/vue-poc/static/svg-pan-zoom.js
Normal file
436
src/vue-poc/static/svg-pan-zoom.js
Normal file
|
|
@ -0,0 +1,436 @@
|
|||
// http://www.billdwhite.com/wordpress/2013/11/26/d3-minimap-pan-and-zoom-demo/
|
||||
d3.demo = {};
|
||||
|
||||
/** CANVAS **/
|
||||
d3.demo.canvas = function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
var width = 500,
|
||||
height = 500,
|
||||
zoomEnabled = true,
|
||||
dragEnabled = true,
|
||||
scale = 1,
|
||||
translation = [0,0],
|
||||
base = null,
|
||||
wrapperBorder = 2,
|
||||
minimap = null,
|
||||
minimapPadding = 20,
|
||||
minimapScale = 0.25;
|
||||
|
||||
function canvas(selection) {
|
||||
|
||||
base = selection;
|
||||
|
||||
var xScale = d3.scale.linear()
|
||||
.domain([-width / 2, width / 2])
|
||||
.range([0, width]);
|
||||
|
||||
var yScale = d3.scale.linear()
|
||||
.domain([-height / 2, height / 2])
|
||||
.range([height, 0]);
|
||||
|
||||
var zoomHandler = function(newScale) {
|
||||
if (!zoomEnabled) { return; }
|
||||
if (d3.event) {
|
||||
scale = d3.event.scale;
|
||||
} else {
|
||||
scale = newScale;
|
||||
}
|
||||
if (dragEnabled) {
|
||||
var tbound = -height * scale,
|
||||
bbound = height * scale,
|
||||
lbound = -width * scale,
|
||||
rbound = width * scale;
|
||||
// limit translation to thresholds
|
||||
translation = d3.event ? d3.event.translate : [0, 0];
|
||||
translation = [
|
||||
Math.max(Math.min(translation[0], rbound), lbound),
|
||||
Math.max(Math.min(translation[1], bbound), tbound)
|
||||
];
|
||||
}
|
||||
|
||||
d3.select(".panCanvas, .panCanvas .bg")
|
||||
.attr("transform", "translate(" + translation + ")" + " scale(" + scale + ")");
|
||||
|
||||
minimap.scale(scale).render();
|
||||
}; // startoff zoomed in a bit to show pan/zoom rectangle
|
||||
|
||||
var zoom = d3.behavior.zoom()
|
||||
.x(xScale)
|
||||
.y(yScale)
|
||||
.scaleExtent([0.1, 10])
|
||||
.on("zoom.canvas", zoomHandler);
|
||||
var w=width + (wrapperBorder*2) + minimapPadding*2 + (width*minimapScale);
|
||||
var h=height + (wrapperBorder*2);
|
||||
var svg = selection.append("svg")
|
||||
.attr("class", "svg canvas")
|
||||
.attr("width", "100%")
|
||||
.attr("height", "100%")
|
||||
.attr("viewBox", "0 0 "+w + " "+h)
|
||||
.attr("shape-rendering", "auto");
|
||||
|
||||
var svgDefs = svg.append("defs");
|
||||
|
||||
svgDefs.append("clipPath")
|
||||
.attr("id", "wrapperClipPath_qwpyza")
|
||||
.attr("class", "wrapper clipPath")
|
||||
.append("rect")
|
||||
.attr("class", "background")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
svgDefs.append("clipPath")
|
||||
.attr("id", "minimapClipPath_qwpyza")
|
||||
.attr("class", "minimap clipPath")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
//.attr("transform", "translate(" + (width + minimapPadding) + "," + (minimapPadding/2) + ")")
|
||||
.append("rect")
|
||||
.attr("class", "background")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
var filter = svgDefs.append("svg:filter")
|
||||
.attr("id", "minimapDropShadow_qwpyza")
|
||||
.attr("x", "-20%")
|
||||
.attr("y", "-20%")
|
||||
.attr("width", "150%")
|
||||
.attr("height", "150%");
|
||||
|
||||
filter.append("svg:feOffset")
|
||||
.attr("result", "offOut")
|
||||
.attr("in", "SourceGraphic")
|
||||
.attr("dx", "1")
|
||||
.attr("dy", "1");
|
||||
|
||||
filter.append("svg:feColorMatrix")
|
||||
.attr("result", "matrixOut")
|
||||
.attr("in", "offOut")
|
||||
.attr("type", "matrix")
|
||||
.attr("values", "0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.5 0");
|
||||
|
||||
filter.append("svg:feGaussianBlur")
|
||||
.attr("result", "blurOut")
|
||||
.attr("in", "matrixOut")
|
||||
.attr("stdDeviation", "10");
|
||||
|
||||
filter.append("svg:feBlend")
|
||||
.attr("in", "SourceGraphic")
|
||||
.attr("in2", "blurOut")
|
||||
.attr("mode", "normal");
|
||||
|
||||
var minimapRadialFill = svgDefs.append("radialGradient")
|
||||
.attr({
|
||||
id:"minimapGradient_qwpyza",
|
||||
gradientUnits:"userSpaceOnUse",
|
||||
cx:"500",
|
||||
cy:"500",
|
||||
r:"400",
|
||||
fx:"500",
|
||||
fy:"500"
|
||||
});
|
||||
minimapRadialFill.append("stop")
|
||||
.attr("offset", "0%")
|
||||
.attr("stop-color", "#FFFFFF");
|
||||
minimapRadialFill.append("stop")
|
||||
.attr("offset", "40%")
|
||||
.attr("stop-color", "#EEEEEE");
|
||||
minimapRadialFill.append("stop")
|
||||
.attr("offset", "100%")
|
||||
.attr("stop-color", "#E0E0E0");
|
||||
|
||||
var outerWrapper = svg.append("g")
|
||||
.attr("class", "wrapper outer")
|
||||
.attr("transform", "translate(0, " + minimapPadding + ")");
|
||||
|
||||
outerWrapper.append("rect")
|
||||
.attr("class", "background")
|
||||
.attr("width", width + wrapperBorder*2)
|
||||
.attr("height", height + wrapperBorder*2);
|
||||
|
||||
var innerWrapper = outerWrapper.append("g")
|
||||
.attr("class", "wrapper inner")
|
||||
.attr("clip-path", "url(#wrapperClipPath_qwpyza)")
|
||||
.attr("transform", "translate(" + (wrapperBorder) + "," + (wrapperBorder) + ")")
|
||||
.call(zoom);
|
||||
|
||||
innerWrapper.append("rect")
|
||||
.attr("class", "background")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
var panCanvas = innerWrapper.append("g")
|
||||
.attr("class", "panCanvas")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.attr("transform", "translate(0,0)");
|
||||
|
||||
panCanvas.append("rect")
|
||||
.attr("class", "background")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
minimap = d3.demo.minimap()
|
||||
.zoom(zoom)
|
||||
.target(panCanvas)
|
||||
.minimapScale(minimapScale)
|
||||
.x(width + minimapPadding)
|
||||
.y(minimapPadding);
|
||||
|
||||
svg.call(minimap);
|
||||
|
||||
// startoff zoomed in a bit to show pan/zoom rectangle
|
||||
zoom.scale(1.75);
|
||||
zoomHandler(1.75);
|
||||
|
||||
/** ADD SHAPE **/
|
||||
canvas.addItem = function(item) {
|
||||
panCanvas.node().appendChild(item.node());
|
||||
minimap.render();
|
||||
};
|
||||
canvas.clear = function() {
|
||||
var node=panCanvas.node();
|
||||
while (node.hasChildNodes()) {
|
||||
node.removeChild(node.lastChild);
|
||||
};
|
||||
};
|
||||
/** RENDER **/
|
||||
canvas.render = function() {
|
||||
svgDefs
|
||||
.select(".clipPath .background")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
var w=width + (wrapperBorder*2) + minimapPadding*2 + (width*minimapScale);
|
||||
var h=height + (wrapperBorder*2);
|
||||
svg
|
||||
.attr("width", "100%")
|
||||
.attr("height", "100%")
|
||||
.attr("viewBox", "0 0 "+w + " "+h);
|
||||
outerWrapper
|
||||
.select(".background")
|
||||
.attr("width", width + wrapperBorder*2)
|
||||
.attr("height", height + wrapperBorder*2);
|
||||
|
||||
innerWrapper
|
||||
.attr("transform", "translate(" + (wrapperBorder) + "," + (wrapperBorder) + ")")
|
||||
.select(".background")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
panCanvas
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.select(".background")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
minimap
|
||||
.x(width + minimapPadding)
|
||||
.y(minimapPadding)
|
||||
.render();
|
||||
};
|
||||
|
||||
canvas.zoomEnabled = function(isEnabled) {
|
||||
if (!arguments.length) { return zoomEnabled }
|
||||
zoomEnabled = isEnabled;
|
||||
};
|
||||
|
||||
canvas.dragEnabled = function(isEnabled) {
|
||||
if (!arguments.length) { return dragEnabled }
|
||||
dragEnabled = isEnabled;
|
||||
};
|
||||
|
||||
canvas.reset = function() {
|
||||
svg.call(zoom.event);
|
||||
zoom.scale(1);
|
||||
zoom.translate([0,0]);
|
||||
svg.transition().duration(750).call(zoom.event);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
//============================================================
|
||||
// Accessors
|
||||
//============================================================
|
||||
|
||||
canvas.width = function(value) {
|
||||
if (!arguments.length) return width;
|
||||
width = parseInt(value, 10);
|
||||
return this;
|
||||
};
|
||||
|
||||
canvas.height = function(value) {
|
||||
if (!arguments.length) return height;
|
||||
height = parseInt(value, 10);
|
||||
return this;
|
||||
};
|
||||
|
||||
canvas.scale = function(value) {
|
||||
if (!arguments.length) { return scale; }
|
||||
scale = value;
|
||||
return this;
|
||||
};
|
||||
|
||||
return canvas;
|
||||
};
|
||||
|
||||
|
||||
|
||||
/** MINIMAP **/
|
||||
d3.demo.minimap = function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
var minimapScale = 0.15,
|
||||
scale = 1,
|
||||
zoom = null,
|
||||
base = null,
|
||||
target = null,
|
||||
width = 0,
|
||||
height = 0,
|
||||
x = 0,
|
||||
y = 0,
|
||||
frameX = 0,
|
||||
frameY = 0;
|
||||
|
||||
function minimap(selection) {
|
||||
|
||||
base = selection;
|
||||
|
||||
var container = selection.append("g")
|
||||
.attr("class", "minimap")
|
||||
.call(zoom);
|
||||
|
||||
zoom.on("zoom.minimap", function() {
|
||||
scale = d3.event.scale;
|
||||
});
|
||||
|
||||
|
||||
minimap.node = container.node();
|
||||
|
||||
var frame = container.append("g")
|
||||
.attr("class", "frame")
|
||||
|
||||
frame.append("rect")
|
||||
.attr("class", "background")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.attr("filter", "url(#minimapDropShadow_qwpyza)");
|
||||
|
||||
var drag = d3.behavior.drag()
|
||||
.on("dragstart.minimap", function() {
|
||||
var frameTranslate = d3.demo.util.getXYFromTranslate(frame.attr("transform"));
|
||||
frameX = frameTranslate[0];
|
||||
frameY = frameTranslate[1];
|
||||
})
|
||||
.on("drag.minimap", function() {
|
||||
d3.event.sourceEvent.stopImmediatePropagation();
|
||||
frameX += d3.event.dx;
|
||||
frameY += d3.event.dy;
|
||||
frame.attr("transform", "translate(" + frameX + "," + frameY + ")");
|
||||
var translate = [(-frameX*scale),(-frameY*scale)];
|
||||
target.attr("transform", "translate(" + translate + ")scale(" + scale + ")");
|
||||
zoom.translate(translate);
|
||||
});
|
||||
|
||||
frame.call(drag);
|
||||
|
||||
/** RENDER **/
|
||||
minimap.render = function() {
|
||||
scale = zoom.scale();
|
||||
container.attr("transform", "translate(" + x + "," + y + ")scale(" + minimapScale + ")");
|
||||
var node = target.node().cloneNode(true);
|
||||
node.removeAttribute("id");
|
||||
base.selectAll(".minimap .panCanvas").remove();
|
||||
minimap.node.appendChild(node);
|
||||
var targetTransform = d3.demo.util.getXYFromTranslate(target.attr("transform"));
|
||||
frame.attr("transform", "translate(" + (-targetTransform[0]/scale) + "," + (-targetTransform[1]/scale) + ")")
|
||||
.select(".background")
|
||||
.attr("width", width/scale)
|
||||
.attr("height", height/scale);
|
||||
frame.node().parentNode.appendChild(frame.node());
|
||||
d3.select(node).attr("transform", "translate(1,1)");
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
//============================================================
|
||||
// Accessors
|
||||
//============================================================
|
||||
|
||||
|
||||
minimap.width = function(value) {
|
||||
if (!arguments.length) return width;
|
||||
width = parseInt(value, 10);
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
minimap.height = function(value) {
|
||||
if (!arguments.length) return height;
|
||||
height = parseInt(value, 10);
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
minimap.x = function(value) {
|
||||
if (!arguments.length) return x;
|
||||
x = parseInt(value, 10);
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
minimap.y = function(value) {
|
||||
if (!arguments.length) return y;
|
||||
y = parseInt(value, 10);
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
minimap.scale = function(value) {
|
||||
if (!arguments.length) { return scale; }
|
||||
scale = value;
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
minimap.minimapScale = function(value) {
|
||||
if (!arguments.length) { return minimapScale; }
|
||||
minimapScale = value;
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
minimap.zoom = function(value) {
|
||||
if (!arguments.length) return zoom;
|
||||
zoom = value;
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
minimap.target = function(value) {
|
||||
if (!arguments.length) { return target; }
|
||||
target = value;
|
||||
width = parseInt(target.attr("width"), 10);
|
||||
height = parseInt(target.attr("height"), 10);
|
||||
return this;
|
||||
};
|
||||
|
||||
return minimap;
|
||||
};
|
||||
|
||||
|
||||
/** UTILS **/
|
||||
d3.demo.util = {};
|
||||
d3.demo.util.getXYFromTranslate = function(translateString) {
|
||||
var currentTransform = d3.transform(translateString);
|
||||
currentX = currentTransform.translate[0];
|
||||
currentY = currentTransform.translate[1];
|
||||
return [currentX, currentY];
|
||||
};
|
||||
|
||||
|
||||
/** RUN SCRIPT **/
|
||||
|
||||
|
||||
|
|
@ -47,10 +47,32 @@
|
|||
<v-toolbar class="indigo" app dark >
|
||||
<v-toolbar-side-icon @click.stop="drawer = !drawer" ></v-toolbar-side-icon>
|
||||
<v-toolbar-title class="hidden-sm-and-down" >{{$route.meta.title}}</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn @click="favorite" icon flat title="Save location">
|
||||
<v-icon>favorite</v-icon>
|
||||
<v-btn @click="frmFav = !frmFav" icon flat title="Bookmark this page">
|
||||
<v-icon>star_border</v-icon>
|
||||
</v-btn>
|
||||
<v-dialog v-model="frmFav">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
Bookmark
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<h6>{{$route.meta.title}}</h6>
|
||||
<v-select
|
||||
v-model="tags"
|
||||
label="tags"
|
||||
chips
|
||||
tags
|
||||
:items="taglist"
|
||||
></v-select>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="primary" flat @click.stop="frmFav=false">Save</v-btn>
|
||||
<v-btn color="primary" flat @click.stop="frmFav=false">Cancel</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field prepend-icon="search" label="Search..." v-model="q"
|
||||
|
|
@ -99,17 +121,17 @@
|
|||
mini: false,
|
||||
dark: false,
|
||||
alert: {show:false,msg:"Hello"},
|
||||
frmFav: false,
|
||||
tags: [],
|
||||
taglist: [
|
||||
'todo',
|
||||
'find',
|
||||
'some',
|
||||
'good',
|
||||
'tags'
|
||||
],
|
||||
items: [
|
||||
{href: '/',text: 'Home', icon: 'home' },
|
||||
{
|
||||
icon: 'folder_open',
|
||||
text: 'Collections' ,
|
||||
model: false,
|
||||
children: [
|
||||
{href: '/database', text: 'Databases',icon: 'developer_mode' },
|
||||
{href: '/files', text: 'File system',icon: 'folder' },
|
||||
{href: '/history',text: 'history',icon: 'history'}
|
||||
]},
|
||||
{
|
||||
icon: 'directions_run',
|
||||
text: 'Actions' ,
|
||||
|
|
@ -121,6 +143,21 @@
|
|||
{href: '/transform',text: 'XSLT Transform',icon: 'input'},
|
||||
{href: '/tasks',text: 'Tasks',icon: 'history'}
|
||||
]},
|
||||
{
|
||||
icon: 'folder_open',
|
||||
text: 'Collections' ,
|
||||
model: false,
|
||||
children: [
|
||||
{href: '/database', text: 'Databases',icon: 'developer_mode' },
|
||||
{href: '/files', text: 'File system',icon: 'folder' },
|
||||
{href: '/history',text: 'history',icon: 'history'}
|
||||
]},
|
||||
{
|
||||
icon: 'memory',
|
||||
text: 'Models' ,
|
||||
model: false,
|
||||
children: [
|
||||
]},
|
||||
{
|
||||
icon: 'cast_connected',
|
||||
text: 'Server' ,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue