save tabs
This commit is contained in:
parent
371755ec59
commit
b9d2a81b98
22 changed files with 5221 additions and 134 deletions
|
|
@ -190,6 +190,7 @@
|
|||
{href: '/select',text: 'Select',icon: 'extension'},
|
||||
{href: '/puzzle',text: 'Puzzle',icon: 'extension'},
|
||||
{href: '/svg',text: 'SVG',icon: 'extension'},
|
||||
{href: '/svg2',text: 'SVG2',icon: 'extension'},
|
||||
{href: '/tree',text: 'Tree',icon: 'nature'},
|
||||
{href: '/tree2',text: 'Tree 2',icon: 'nature'}
|
||||
]},
|
||||
|
|
@ -228,9 +229,15 @@
|
|||
},
|
||||
|
||||
created(){
|
||||
console.log("create-----------")
|
||||
console.log("create-----------");
|
||||
|
||||
var that=this
|
||||
this.$on("theme",this.onDark)
|
||||
this.$on("theme",this.onDark);
|
||||
window.addEventListener('error', function (err) {
|
||||
var msg=JSON.stringify(err)
|
||||
that.showAlert("vue error:\n"+msg);
|
||||
//alert('window.onerrora-\n' + err.message);
|
||||
});
|
||||
Vue.config.errorHandler = function (err, vm, info) {
|
||||
// handle error
|
||||
// `info` is a Vue-specific error info, e.g. which lifecycle hook
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
/**
|
||||
* vue filters
|
||||
* some vue filters, requires moment
|
||||
* formatDate
|
||||
* fromNow
|
||||
* readablizeBytes
|
||||
* round
|
||||
*/
|
||||
|
||||
//Define the date time format filter
|
||||
|
|
|
|||
|
|
@ -101,14 +101,33 @@ localforage.config({
|
|||
var settings = {
|
||||
debug: false,
|
||||
defaults:{
|
||||
|
||||
"settings/ace": {
|
||||
theme: "github",
|
||||
keybinding: "ace",
|
||||
fontsize: 16,
|
||||
enableSnippets:true,
|
||||
enableBasicAutocompletion:true,
|
||||
enableLiveAutocompletion:true
|
||||
},
|
||||
theme: "github",
|
||||
keybinding: "ace",
|
||||
fontsize: 16,
|
||||
enableSnippets:true,
|
||||
enableBasicAutocompletion:true,
|
||||
enableLiveAutocompletion:true
|
||||
},
|
||||
|
||||
"features/serviceworker": true,
|
||||
"edit/items":[
|
||||
{name:"web.txt", id:"1", mode:"text", dirty: false,
|
||||
text:`Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
|
||||
ut aliquip ex ea commodo consequat.`},
|
||||
|
||||
{name:"Shopping.xq", id:"2", mode: "xquery" ,dirty: false,
|
||||
text:`let $a:=1 to 5
|
||||
return $a `},
|
||||
|
||||
{name:"videos.xml", id:"3", mode:"xml",dirty: false, location: "/aaa/bca/",
|
||||
text:`<foo version="1.0">
|
||||
<node>hello</node>
|
||||
</foo>`}
|
||||
]
|
||||
},
|
||||
getItem (key) {
|
||||
if (this.debug) console.log('getItem',key);
|
||||
|
|
@ -215,7 +234,9 @@ const Fullscreen={
|
|||
}) }
|
||||
};
|
||||
Vue.use(Fullscreen);
|
||||
Vue.use(VueTreeselect);
|
||||
|
||||
Vue.component('treeselect', VueTreeselect.Treeselect);
|
||||
|
||||
//Vue.use( VueFormJsonSchema);
|
||||
function install (Vue) {
|
||||
Vue.component('vue-form-json-schema', VueFormJsonSchema);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<history next-id="13" xmlns="urn:quodatum:vue-poc.history">
|
||||
<event id="1" user="admin" when="">
|
||||
<file mode="webfile" url="/vue-poc/vue-poc.xqm" />
|
||||
<file mode="webfile" url="/vue-poc/app.xqm" />
|
||||
</event>
|
||||
<event id="2">
|
||||
<file mode="webfile" url="/vue-poc/data/vue-poc/samples/ch4d1.xml" />
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
<package xmlns="http://expath.org/ns/pkg" name="http://expkg-zone58.github.io/ex-dotml"
|
||||
abbrev="vue-poc" version="0.0.4" spec="1.0">
|
||||
<title>vue-poc test of vue.js.</title>
|
||||
<dependency name="ace" version="1.2.7" />
|
||||
<dependency name="ace" version="1.3.3" />
|
||||
<dependency name="vuetify" version="0.15.2" />
|
||||
<dependency name="vue" version="2.4.1" />
|
||||
<dependency name="vue-router" version="2.5.3" />
|
||||
<dependency name="vue-treeselect" version="0.0.25" />
|
||||
<dependency name="google-material" version="0.0.0" />
|
||||
<dependency name="js-beautify" version="1.6.12" />
|
||||
<dependency name="axios" version="0.16.1" />
|
||||
<dependency name="axios" version="0.17.1" />
|
||||
<dependency name="qs" version="6.4.0" />
|
||||
<dependency name="localforage" version="1.5.0" />
|
||||
<dependency name="localforage" version="1.7.1" />
|
||||
<dependency name="moment.js" version="2.18.1" />
|
||||
<dependency name="file-walker" version="0.5.2" />
|
||||
<dependency name="ex-thumbnailator" version="5.0.11" />
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
|
||||
|
||||
<v-toolbar-title>
|
||||
<v-breadcrumbs>
|
||||
<v-breadcrumbs >
|
||||
<span slot="divider" style="padding:0;"></span>
|
||||
<v-breadcrumbs-item v-for="item in crumbs" :key="item.path"
|
||||
:to="{ query: { url: item.path }}" :exact="true">
|
||||
{{ item.name }}
|
||||
|
|
@ -252,11 +253,11 @@
|
|||
},
|
||||
// array of {name:"that", path:"/this/that/"} for url
|
||||
crumbs(){
|
||||
var parts=this.url.split("/").filter((a)=>a.length>0)
|
||||
var a=parts.map(
|
||||
function(v,i,a){return {name:v, path:"/"+a.slice(0,i+1).join("/")+"/"}}
|
||||
)
|
||||
return a
|
||||
var url=this.url
|
||||
return url.split("/").slice(0,-1).map(
|
||||
function(v,i,a){return {name:v +"/",
|
||||
path:a.slice(0,i+1).join("/")+"/"}}
|
||||
)
|
||||
},
|
||||
selection(){
|
||||
return this.items.filter(item=>{return item.selected} )
|
||||
|
|
|
|||
|
|
@ -109,23 +109,7 @@
|
|||
a1:"",
|
||||
currentItem: null, //href of current
|
||||
active: null,
|
||||
items: [
|
||||
{name:"web.txt", id:"1", mode:"text", dirty: false,
|
||||
text:`Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
|
||||
ut aliquip ex ea commodo consequat.`},
|
||||
|
||||
{name:"Shopping.xq", id:"2", mode: "xquery" ,dirty: false,
|
||||
text:`let $a:=1 to 5
|
||||
return $a `},
|
||||
|
||||
{name:"videos.xml", id:"3", mode:"xml",dirty: false, location: "/aaa/bca/",
|
||||
text:`<foo version="1.0">
|
||||
<node>hello</node>
|
||||
</foo>`},
|
||||
|
||||
],
|
||||
items: [],
|
||||
wrap: true,
|
||||
aceSettings: {},
|
||||
mimeTypes:MimeTypes
|
||||
|
|
@ -181,11 +165,13 @@ return $a `},
|
|||
}
|
||||
},
|
||||
},
|
||||
|
||||
watch:{
|
||||
currentItem: function (val) {
|
||||
this.active = this.items.find(e=> val=="T"+e.id)
|
||||
}
|
||||
},
|
||||
|
||||
computed:{
|
||||
sorted(){
|
||||
return this.items.slice(0).sort((a,b) => a.name.localeCompare(b.name)) ;
|
||||
|
|
@ -200,5 +186,18 @@ return $a `},
|
|||
.then( v =>{
|
||||
next(vm => {vm.aceSettings = v;})
|
||||
})
|
||||
},
|
||||
settings.getItem('edit/items')
|
||||
.then( v =>{
|
||||
next(vm => {vm.items = v;})
|
||||
})
|
||||
},
|
||||
|
||||
beforeRouteLeave (to, from, next) {
|
||||
// called when the route that renders this component is about to
|
||||
// be navigated away from.
|
||||
// has access to `this` component instance.
|
||||
settings.setItem('edit/items',this.items);
|
||||
next(true);
|
||||
}
|
||||
|
||||
}</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<template id="formsschema">
|
||||
<v-container fluid>
|
||||
<v-card>
|
||||
<v-card-title><qd-link href="https://jarvelov.gitbooks.io/vue-form-json-schema/">vue-form-json-schema@1.13.4</qd-link> </v-card-title>
|
||||
<v-card-title><qd-link href="https://github.com/jarvelov/vue-form-json-schema">vue-form-json-schema@1.15.3</qd-link> </v-card-title>
|
||||
|
||||
<vue-form-json-schema
|
||||
:model="model"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import module namespace fw="quodatum:file.walker";
|
|||
declare namespace c="http://www.w3.org/ns/xproc-step";
|
||||
|
||||
(: declare variable $DEST:="c:\tmp\pics2.xml"; :)
|
||||
declare variable $DEST:="/pics.xml";
|
||||
declare variable $DEST:=format-date(current-date(),"/[Y0001][M01][D01]-pics.xml");
|
||||
|
||||
declare %updating function local:put($data,$path){
|
||||
db:replace($cfg:DB-IMAGE,$path,$data)
|
||||
|
|
|
|||
|
|
@ -1,10 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="svg2">
|
||||
<v-container fluid>
|
||||
<h5 class="title">Svg.</h5>
|
||||
<div ref="svgcanvas" class="canvas"></div>
|
||||
<v-btn @click="view.reset()">Reset</v-btn>
|
||||
</v-container>
|
||||
<template id="svg2" >
|
||||
<div ref="panel" v-resize="onResize" >
|
||||
<v-toolbar dense>
|
||||
<v-btn @click="view.reset()">Reset</v-btn>
|
||||
<v-btn @click="size()">Size</v-btn>
|
||||
<v-select
|
||||
v-model="url"
|
||||
combobox clearable open-on-clear
|
||||
:items="svgs"
|
||||
></v-select>
|
||||
|
||||
<v-btn @click="load()">set</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<div ref="svgcanvas" style="width:100%;height:100%;background-color:yellow;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
|
|
@ -12,29 +22,70 @@
|
|||
return {
|
||||
canvasd3:null,
|
||||
view:null,
|
||||
url:"https://gist.githubusercontent.com/billdwhite/496a140e7ab26cef02635449b3563e54/raw/50a49bfbcafbe1005cba39a118e8b609c4d4ca29/butterfly.svg"
|
||||
url:"/vue-poc/ui/resources/svg/butterfly.svg",
|
||||
svgs:["/vue-poc/ui/resources/svg/butterfly.svg",
|
||||
"/vue-poc/ui/resources/svg/tiger.svg"]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
size(){
|
||||
this.view.width(200).height(200).render();
|
||||
},
|
||||
|
||||
load(){
|
||||
var that=this;
|
||||
d3.xml(this.url,
|
||||
function(error, xml) {
|
||||
if (error) {
|
||||
//alert("load err");
|
||||
throw error;
|
||||
}
|
||||
var d=d3.select(xml.documentElement)
|
||||
that.view.setItem(d);
|
||||
});
|
||||
},
|
||||
|
||||
onResize(){
|
||||
var el=this.$refs["panel"];
|
||||
|
||||
//console.log("top",e.offsetTop)
|
||||
var h=Math.max(1,window.innerHeight - el.offsetTop -10);
|
||||
var w=Math.max(1,window.innerWidth- el.offsetLeft )
|
||||
console.log("resize:",w,h)
|
||||
el.style.height=h +"px";
|
||||
if(this.view ){
|
||||
this.view.height(h-20);
|
||||
this.view.render();
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
watch:{
|
||||
url(v){
|
||||
this.$router.push({ query: { url: this.url }})
|
||||
},
|
||||
$route(vnew,vold){
|
||||
//console.log("ROUTE",vnew,vold)
|
||||
var url=this.$route.query.url
|
||||
this.url=url?url:"/vue-poc/ui/resources/svg/butterfly.svg";
|
||||
if(vnew.query.url != vold.query.url) this.load()
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
var url=this.$route.query.url
|
||||
this.url=url?url:"/vue-poc/ui/resources/svg/butterfly.svg";
|
||||
this.canvasd3 = d3.select(this.$refs.svgcanvas);
|
||||
/** RUN SCRIPT **/
|
||||
var canvasWidth = 800;
|
||||
|
||||
var canvas = d3.demo.canvas().width(435).height(400);
|
||||
var canvas = d3.demo.canvas().width(canvasWidth).height(400);
|
||||
this.view=canvas;
|
||||
this.canvasd3.call(canvas);
|
||||
function addItem(item) {
|
||||
canvas.addItem(d3.select(item));
|
||||
};
|
||||
|
||||
d3.xml(this.url,
|
||||
function(error, xml) {
|
||||
if (error) throw error;
|
||||
addItem(xml.documentElement);
|
||||
});
|
||||
|
||||
this.load();
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,23 +3,28 @@
|
|||
<v-container fluid>
|
||||
<v-card>
|
||||
<v-toolbar class="lime darken-1">
|
||||
<v-card-title ><qd-link href="https://github.com/riophae/vue-treeselect">vue-treeselect@0.0.19</qd-link> </v-card-title>
|
||||
<v-card-title ><qd-link href="https://github.com/riophae/vue-treeselect">vue-treeselect@0.0.25</qd-link> </v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn>todo</v-btn>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs6 offset-xs6>
|
||||
<treeselect
|
||||
v-model="value"
|
||||
:multiple="true"
|
||||
:options="source"
|
||||
/>
|
||||
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>{
|
||||
//components: { Treeselect },
|
||||
|
||||
data:function(){
|
||||
return {
|
||||
value: null,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// generated 2018-04-27T23:10:49.032+01:00
|
||||
// generated 2018-05-07T22:46:00.067+01:00
|
||||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue
|
||||
Vue.component('qd-confirm',{template:`
|
||||
|
|
@ -684,7 +684,11 @@ Vue.component('vue-ace',{template:`
|
|||
|
||||
// src: C:\Users\andy\git\vue-poc\src\vue-poc\components\filters.js
|
||||
/**
|
||||
* vue filters
|
||||
* some vue filters, requires moment
|
||||
* formatDate
|
||||
* fromNow
|
||||
* readablizeBytes
|
||||
* round
|
||||
*/
|
||||
|
||||
//Define the date time format filter
|
||||
|
|
@ -864,6 +868,7 @@ const Files=Vue.extend({template:`
|
|||
|
||||
<v-toolbar-title>
|
||||
<v-breadcrumbs>
|
||||
<span slot="divider" style="padding:0;"></span>
|
||||
<v-breadcrumbs-item v-for="item in crumbs" :key="item.path" :to="{ query: { url: item.path }}" :exact="true">
|
||||
{{ item.name }}
|
||||
</v-breadcrumbs-item>
|
||||
|
|
@ -1098,11 +1103,11 @@ const Files=Vue.extend({template:`
|
|||
},
|
||||
// array of {name:"that", path:"/this/that/"} for url
|
||||
crumbs(){
|
||||
var parts=this.url.split("/").filter((a)=>a.length>0)
|
||||
var a=parts.map(
|
||||
function(v,i,a){return {name:v, path:"/"+a.slice(0,i+1).join("/")+"/"}}
|
||||
)
|
||||
return a
|
||||
var url=this.url
|
||||
return url.split("/").slice(0,-1).map(
|
||||
function(v,i,a){return {name:v +"/",
|
||||
path:a.slice(0,i+1).join("/")+"/"}}
|
||||
)
|
||||
},
|
||||
selection(){
|
||||
return this.items.filter(item=>{return item.selected} )
|
||||
|
|
@ -1572,23 +1577,7 @@ const Tabs=Vue.extend({template:`
|
|||
a1:"",
|
||||
currentItem: null, //href of current
|
||||
active: null,
|
||||
items: [
|
||||
{name:"web.txt", id:"1", mode:"text", dirty: false,
|
||||
text:`Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
|
||||
ut aliquip ex ea commodo consequat.`},
|
||||
|
||||
{name:"Shopping.xq", id:"2", mode: "xquery" ,dirty: false,
|
||||
text:`let $a:=1 to 5
|
||||
return $a `},
|
||||
|
||||
{name:"videos.xml", id:"3", mode:"xml",dirty: false, location: "/aaa/bca/",
|
||||
text:`<foo version="1.0">
|
||||
<node>hello</node>
|
||||
</foo>`},
|
||||
|
||||
],
|
||||
items: [],
|
||||
wrap: true,
|
||||
aceSettings: {},
|
||||
mimeTypes:MimeTypes
|
||||
|
|
@ -1644,11 +1633,13 @@ return $a `},
|
|||
}
|
||||
},
|
||||
},
|
||||
|
||||
watch:{
|
||||
currentItem: function (val) {
|
||||
this.active = this.items.find(e=> val=="T"+e.id)
|
||||
}
|
||||
},
|
||||
|
||||
computed:{
|
||||
sorted(){
|
||||
return this.items.slice(0).sort((a,b) => a.name.localeCompare(b.name)) ;
|
||||
|
|
@ -1663,7 +1654,20 @@ return $a `},
|
|||
.then( v =>{
|
||||
next(vm => {vm.aceSettings = v;})
|
||||
})
|
||||
},
|
||||
settings.getItem('edit/items')
|
||||
.then( v =>{
|
||||
next(vm => {vm.items = v;})
|
||||
})
|
||||
},
|
||||
|
||||
beforeRouteLeave (to, from, next) {
|
||||
// called when the route that renders this component is about to
|
||||
// be navigated away from.
|
||||
// has access to `this` component instance.
|
||||
settings.setItem('edit/items',this.items);
|
||||
next(true);
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -2069,7 +2073,7 @@ const Brutusin=Vue.extend({template:`
|
|||
const Formsschema=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<v-card>
|
||||
<v-card-title><qd-link href="https://jarvelov.gitbooks.io/vue-form-json-schema/">vue-form-json-schema@1.13.4</qd-link> </v-card-title>
|
||||
<v-card-title><qd-link href="https://github.com/jarvelov/vue-form-json-schema">vue-form-json-schema@1.15.3</qd-link> </v-card-title>
|
||||
|
||||
<vue-form-json-schema :model="model" :schema="schema" :ui-schema="uiSchema" :on-change="onChange">
|
||||
</vue-form-json-schema>
|
||||
|
|
@ -4085,40 +4089,87 @@ const Svg=Vue.extend({template:`
|
|||
|
||||
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/svg2.vue
|
||||
const Svg2=Vue.extend({template:`
|
||||
<v-container fluid="">
|
||||
<h5 class="title">Svg.</h5>
|
||||
<div ref="svgcanvas" class="canvas"></div>
|
||||
<v-btn @click="view.reset()">Reset</v-btn>
|
||||
</v-container>
|
||||
<div ref="panel" v-resize="onResize">
|
||||
<v-toolbar dense="">
|
||||
<v-btn @click="view.reset()">Reset</v-btn>
|
||||
<v-btn @click="size()">Size</v-btn>
|
||||
<v-select v-model="url" combobox="" clearable="" open-on-clear="" :items="svgs"></v-select>
|
||||
|
||||
<v-btn @click="load()">set</v-btn>
|
||||
</v-toolbar>
|
||||
|
||||
<div ref="svgcanvas" style="width:100%;height:100%;background-color:yellow;"></div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
canvasd3:null,
|
||||
view:null,
|
||||
url:"https://gist.githubusercontent.com/billdwhite/496a140e7ab26cef02635449b3563e54/raw/50a49bfbcafbe1005cba39a118e8b609c4d4ca29/butterfly.svg"
|
||||
url:"/vue-poc/ui/resources/svg/butterfly.svg",
|
||||
svgs:["/vue-poc/ui/resources/svg/butterfly.svg",
|
||||
"/vue-poc/ui/resources/svg/tiger.svg"]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
size(){
|
||||
this.view.width(200).height(200).render();
|
||||
},
|
||||
|
||||
load(){
|
||||
var that=this;
|
||||
d3.xml(this.url,
|
||||
function(error, xml) {
|
||||
if (error) {
|
||||
//alert("load err");
|
||||
throw error;
|
||||
}
|
||||
var d=d3.select(xml.documentElement)
|
||||
that.view.setItem(d);
|
||||
});
|
||||
},
|
||||
|
||||
onResize(){
|
||||
var el=this.$refs["panel"];
|
||||
|
||||
//console.log("top",e.offsetTop)
|
||||
var h=Math.max(1,window.innerHeight - el.offsetTop -10);
|
||||
var w=Math.max(1,window.innerWidth- el.offsetLeft )
|
||||
console.log("resize:",w,h)
|
||||
el.style.height=h +"px";
|
||||
if(this.view ){
|
||||
this.view.height(h-20);
|
||||
this.view.render();
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
watch:{
|
||||
url(v){
|
||||
this.$router.push({ query: { url: this.url }})
|
||||
},
|
||||
$route(vnew,vold){
|
||||
//console.log("ROUTE",vnew,vold)
|
||||
var url=this.$route.query.url
|
||||
this.url=url?url:"/vue-poc/ui/resources/svg/butterfly.svg";
|
||||
if(vnew.query.url != vold.query.url) this.load()
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
var url=this.$route.query.url
|
||||
this.url=url?url:"/vue-poc/ui/resources/svg/butterfly.svg";
|
||||
this.canvasd3 = d3.select(this.$refs.svgcanvas);
|
||||
/** RUN SCRIPT **/
|
||||
var canvasWidth = 800;
|
||||
|
||||
var canvas = d3.demo.canvas().width(435).height(400);
|
||||
var canvas = d3.demo.canvas().width(canvasWidth).height(400);
|
||||
this.view=canvas;
|
||||
this.canvasd3.call(canvas);
|
||||
function addItem(item) {
|
||||
canvas.addItem(d3.select(item));
|
||||
};
|
||||
|
||||
d3.xml(this.url,
|
||||
function(error, xml) {
|
||||
if (error) throw error;
|
||||
addItem(xml.documentElement);
|
||||
});
|
||||
|
||||
this.load();
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -4709,18 +4760,23 @@ const Tree2=Vue.extend({template:`
|
|||
<v-container fluid="">
|
||||
<v-card>
|
||||
<v-toolbar class="lime darken-1">
|
||||
<v-card-title><qd-link href="https://github.com/riophae/vue-treeselect">vue-treeselect@0.0.19</qd-link> </v-card-title>
|
||||
<v-card-title><qd-link href="https://github.com/riophae/vue-treeselect">vue-treeselect@0.0.25</qd-link> </v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn>todo</v-btn>
|
||||
</v-toolbar>
|
||||
<v-card-text>
|
||||
<v-layout row="" wrap="">
|
||||
<v-flex xs6="" offset-xs6="">
|
||||
<treeselect v-model="value" :multiple="true" :options="source">
|
||||
|
||||
</treeselect></v-card-text>
|
||||
</treeselect></v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
`,
|
||||
|
||||
//components: { Treeselect },
|
||||
|
||||
data:function(){
|
||||
return {
|
||||
value: null,
|
||||
|
|
@ -5341,6 +5397,7 @@ const Vuepoc=Vue.extend({template:`
|
|||
{href: '/select',text: 'Select',icon: 'extension'},
|
||||
{href: '/puzzle',text: 'Puzzle',icon: 'extension'},
|
||||
{href: '/svg',text: 'SVG',icon: 'extension'},
|
||||
{href: '/svg2',text: 'SVG2',icon: 'extension'},
|
||||
{href: '/tree',text: 'Tree',icon: 'nature'},
|
||||
{href: '/tree2',text: 'Tree 2',icon: 'nature'}
|
||||
]},
|
||||
|
|
@ -5379,9 +5436,15 @@ const Vuepoc=Vue.extend({template:`
|
|||
},
|
||||
|
||||
created(){
|
||||
console.log("create-----------")
|
||||
console.log("create-----------");
|
||||
|
||||
var that=this
|
||||
this.$on("theme",this.onDark)
|
||||
this.$on("theme",this.onDark);
|
||||
window.addEventListener('error', function (err) {
|
||||
var msg=JSON.stringify(err)
|
||||
that.showAlert("vue error:\n"+msg);
|
||||
//alert('window.onerrora-\n' + err.message);
|
||||
});
|
||||
Vue.config.errorHandler = function (err, vm, info) {
|
||||
// handle error
|
||||
// `info` is a Vue-specific error info, e.g. which lifecycle hook
|
||||
|
|
@ -5524,14 +5587,33 @@ localforage.config({
|
|||
var settings = {
|
||||
debug: false,
|
||||
defaults:{
|
||||
|
||||
"settings/ace": {
|
||||
theme: "github",
|
||||
keybinding: "ace",
|
||||
fontsize: 16,
|
||||
enableSnippets:true,
|
||||
enableBasicAutocompletion:true,
|
||||
enableLiveAutocompletion:true
|
||||
},
|
||||
theme: "github",
|
||||
keybinding: "ace",
|
||||
fontsize: 16,
|
||||
enableSnippets:true,
|
||||
enableBasicAutocompletion:true,
|
||||
enableLiveAutocompletion:true
|
||||
},
|
||||
|
||||
"features/serviceworker": true,
|
||||
"edit/items":[
|
||||
{name:"web.txt", id:"1", mode:"text", dirty: false,
|
||||
text:`Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
|
||||
ut aliquip ex ea commodo consequat.`},
|
||||
|
||||
{name:"Shopping.xq", id:"2", mode: "xquery" ,dirty: false,
|
||||
text:`let $a:=1 to 5
|
||||
return $a `},
|
||||
|
||||
{name:"videos.xml", id:"3", mode:"xml",dirty: false, location: "/aaa/bca/",
|
||||
text:`<foo version="1.0">
|
||||
<node>hello</node>
|
||||
</foo>`}
|
||||
]
|
||||
},
|
||||
getItem (key) {
|
||||
if (this.debug) console.log('getItem',key);
|
||||
|
|
@ -5638,7 +5720,9 @@ const Fullscreen={
|
|||
}) }
|
||||
};
|
||||
Vue.use(Fullscreen);
|
||||
Vue.use(VueTreeselect);
|
||||
|
||||
Vue.component('treeselect', VueTreeselect.Treeselect);
|
||||
|
||||
//Vue.use( VueFormJsonSchema);
|
||||
function install (Vue) {
|
||||
Vue.component('vue-form-json-schema', VueFormJsonSchema);
|
||||
|
|
|
|||
|
|
@ -9,16 +9,16 @@ pre {
|
|||
/* http://tobiasahlin.com/spinkit/ */
|
||||
.spinner {
|
||||
margin: 100px auto;
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.spinner > div {
|
||||
background-color: #0000a0;
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
width: 16px;
|
||||
display: inline-block;
|
||||
|
||||
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
<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="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="//unpkg.com/vuetify@1.0.16/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
|
||||
<link rel="stylesheet" href="//unpkg.com/@riophae/vue-treeselect@0.0.22/dist/vue-treeselect.min.js">
|
||||
<link rel="stylesheet" href="//unpkg.com/vue-form-generator@2.2.1/dist/vfg-core.css"/>
|
||||
<link href="//unpkg.com/vuetify@1.0.17/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
|
||||
<link rel="stylesheet" href="//unpkg.com/@riophae/vue-treeselect@0.0.25/dist/vue-treeselect.min.css">
|
||||
<link rel="stylesheet" href="//unpkg.com/vue-form-generator@2.2.2/dist/vfg-core.css"/>
|
||||
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="/vue-poc/ui/svg/d3-svg.css" rel="stylesheet" type="text/css"/>
|
||||
<link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
<span>loading...</span>
|
||||
<span>Loading, please wait...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -38,28 +38,30 @@
|
|||
<script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
|
||||
<script src="//unpkg.com/vuetify@1.0.16/dist/vuetify.min.js"></script>
|
||||
<script src="//unpkg.com/vuetify@1.0.17/dist/vuetify.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-language_tools.js"></script>
|
||||
<script src="//d3js.org/d3.v4.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-css.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-html.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/localforage/1.5.1/localforage.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/localforage/1.7.1/localforage.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js"></script>
|
||||
|
||||
<script src="//unpkg.com/vue-jstree@1.0.11/dist/vue-jstree.js"></script>
|
||||
<script src="//unpkg.com/@riophae/vue-treeselect@0.0.22/dist/vue-treeselect.min.js"></script>
|
||||
<script src="//unpkg.com/@riophae/vue-treeselect@0.0.25/dist/vue-treeselect.min.js"></script>
|
||||
|
||||
<script src="//unpkg.com/vue-form-generator@2.2.1/dist/vfg-core.js"></script>
|
||||
<script src="//unpkg.com/vue-form-generator@2.2.2/dist/vfg-core.js"></script>
|
||||
<script src="//unpkg.com/vue-json-schema@1.1.0/dist/vue-json-schema.js"></script>
|
||||
<script src="//unpkg.com/vue-form-json-schema@1.13.1/dist/vue-form-json-schema.umd.js"></script>
|
||||
<script src="//unpkg.com/vue-form-json-schema@1.15.3/dist/vue-form-json-schema.umd.js"></script>
|
||||
|
||||
<script src="/vue-poc/ui/svg/d3-svg.js"></script>
|
||||
<script src="/vue-poc/ui/perf-stat.js"></script>
|
||||
<script src="/vue-poc/ui/app-gen.js"></script>
|
||||
<script>if('serviceWorker' in navigator) {
|
||||
<script>
|
||||
|
||||
if('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker
|
||||
.register('/vue-poc/ui/serviceworker.js')
|
||||
.then(function() { console.log("Service Worker Registered"); });
|
||||
|
|
|
|||
3576
src/vue-poc/static/resources/hierarchy.json
Normal file
3576
src/vue-poc/static/resources/hierarchy.json
Normal file
File diff suppressed because it is too large
Load diff
601
src/vue-poc/static/resources/svg/PhoneticsGuide.svg
Normal file
601
src/vue-poc/static/resources/svg/PhoneticsGuide.svg
Normal file
|
|
@ -0,0 +1,601 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="Init(evt)">
|
||||
<title>Phonetics Guide</title>
|
||||
|
||||
<desc>
|
||||
An animated multimedia guide to the formation of
|
||||
sounds in natural human languages, version 1.5.
|
||||
Based on data from Clark and Yallop (2nd ed.).
|
||||
|
||||
This application was created by Douglas Alan Schepers
|
||||
(doug@schepers.cc) for use in SVG-based linguistics
|
||||
applications. For non-commerical purposes, you may
|
||||
use or distribute this application free of charge,
|
||||
provided you include this notice; for commercial
|
||||
usage, please obtain a license.
|
||||
|
||||
All code copyright (c) D.A. Schepers, 2002-3.
|
||||
</desc>
|
||||
|
||||
<script language="JavaScript"><![CDATA[
|
||||
|
||||
var SVGDocument = null;
|
||||
var SVGRoot = null;
|
||||
var Tongue = null;
|
||||
var Palette = null;
|
||||
var Jaw = null;
|
||||
var VocalFolds = null;
|
||||
var Cartilage = null;
|
||||
//var Sound = null;
|
||||
|
||||
function Init(evt)
|
||||
{
|
||||
SVGDocument = evt.target.ownerDocument;
|
||||
SVGRoot = SVGDocument.documentElement;
|
||||
|
||||
Tongue = SVGDocument.getElementById('tongue');
|
||||
Palette = SVGDocument.getElementById('palette');
|
||||
Jaw = SVGDocument.getElementById('jaw');
|
||||
VocalFolds = SVGDocument.getElementById('vocalFolds');
|
||||
Cartilage = SVGDocument.getElementById('CuneiformCorniculateCartilage');
|
||||
|
||||
//Sound = SVGDocument.getElementById('sound');
|
||||
//PlaySound();
|
||||
};
|
||||
|
||||
/*
|
||||
next, I'm gonna animate the vocal chords and (top-down) and lips (front on) as well, and show air flow and air pressure gradients, all synced with the sound. if I can, anyway...
|
||||
|
||||
function PlaySound()
|
||||
{
|
||||
Sound.beginElement();
|
||||
setTimeout('PlaySound()', 5000);
|
||||
};
|
||||
*/
|
||||
|
||||
|
||||
function ShowPosition(evt, isShow)
|
||||
{
|
||||
try
|
||||
{
|
||||
var button = evt.target;
|
||||
var buttonId = button.getAttribute('id');
|
||||
var place = buttonId.split('-')[0];
|
||||
|
||||
var labelText = place;
|
||||
var labelColor = 'gold';
|
||||
if (!isShow)
|
||||
{
|
||||
labelColor = 'white';
|
||||
place = 'rest';
|
||||
}
|
||||
|
||||
var label = SVGDocument.getElementById(labelText + '-Label');
|
||||
label.setAttributeNS(null, 'fill', labelColor);
|
||||
|
||||
if ('voiced' == place || 'voiceless' == place)
|
||||
{
|
||||
var vocalFoldsPosition = place;
|
||||
if (!vocalFoldsArray[place])
|
||||
{
|
||||
vocalFoldsPosition = 'voiceless';
|
||||
cartilagePosition = 'voiceless';
|
||||
}
|
||||
var vocalFoldsDesc = vocalFoldsArray[vocalFoldsPosition];
|
||||
newVocalFolds = vocalFoldsDesc;
|
||||
|
||||
var cartilagePosition = place;
|
||||
if (!cartilageArray[place])
|
||||
{
|
||||
cartilagePosition = 'voiceless';
|
||||
}
|
||||
var cartilageDesc = cartilageArray[cartilagePosition];
|
||||
newCartilage = cartilageDesc;
|
||||
|
||||
AnimateVocalFolds();
|
||||
AnimateCartilage();
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
var jawPosition = place;
|
||||
if (!jawArray[place])
|
||||
{
|
||||
jawPosition = 'rest';
|
||||
}
|
||||
var jawDesc = jawArray[jawPosition];
|
||||
|
||||
var palettePosition = place;
|
||||
if (!paletteArray[place])
|
||||
{
|
||||
palettePosition = 'pharyngeal';
|
||||
}
|
||||
var paletteDesc = paletteArray[palettePosition];
|
||||
|
||||
var tonguePosition = place;
|
||||
if (!tongueArray[place])
|
||||
{
|
||||
tonguePosition = 'rest';
|
||||
}
|
||||
var tongueDesc = tongueArray[tonguePosition];
|
||||
|
||||
newTongue = tongueDesc;
|
||||
AnimateTongue();
|
||||
|
||||
newJaw = jawDesc;
|
||||
AnimateJaw();
|
||||
newPalette = paletteDesc;
|
||||
AnimatePalette();
|
||||
}
|
||||
|
||||
}
|
||||
catch(er)
|
||||
{
|
||||
alert('Error in function ShowPosition:\n' + er.message)
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
function AnimateMouth(mouthPart, currentPos, newPos)
|
||||
{
|
||||
try
|
||||
{
|
||||
var currentPos = mouthPart.getAttributeNS(null, 'd');
|
||||
newPos = newPos.replace(/,/g, ' ');
|
||||
currentPos = currentPos.replace(/,/g, ' ');
|
||||
|
||||
if (newPos != currentPos)
|
||||
{
|
||||
var changed = false;
|
||||
|
||||
|
||||
var currentArray = currentPos.split(/\W+/);
|
||||
var newArray = newPos.split(/\W+/);
|
||||
for (var n = 0; currentArray.length > n; n++)
|
||||
{
|
||||
if (currentArray[n])
|
||||
{
|
||||
header = currentArray[n].match(/\D/);
|
||||
eachCurrentNum = Number(currentArray[n].match(/\d+/));
|
||||
eachNewNum = Number(newArray[n].match(/\d+/));
|
||||
|
||||
if (eachNewNum > eachCurrentNum)
|
||||
{
|
||||
eachCurrentNum++;
|
||||
changed = true;
|
||||
//alert(eachNewNum +' : ' + eachCurrentNum)
|
||||
}
|
||||
else if (eachNewNum < eachCurrentNum)
|
||||
{
|
||||
eachCurrentNum--;
|
||||
changed = true;
|
||||
}
|
||||
currentArray[n] = header + eachCurrentNum;
|
||||
}
|
||||
}
|
||||
|
||||
var currentPos = currentArray.join(' ');
|
||||
mouthPart.setAttributeNS(null, 'd', currentPos);
|
||||
|
||||
if (changed)
|
||||
{
|
||||
//alert(0)
|
||||
//window.status = newPos +' :: ' + currentPos;
|
||||
window.setTimeout(AnimateMouth(mouthPart, currentPos, newPos), 1000000);
|
||||
}
|
||||
}
|
||||
}
|
||||
catch(er)
|
||||
{
|
||||
alert('Error in function AnimateMouth:\n' + er.message)
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var newTongue = null;
|
||||
function AnimateTongue()
|
||||
{
|
||||
try
|
||||
{
|
||||
var currentTongue = Tongue.getAttributeNS(null, 'd');
|
||||
newTongue = newTongue.replace(/,/g, ' ');
|
||||
currentTongue = currentTongue.replace(/,/g, ' ');
|
||||
|
||||
if (newTongue != currentTongue)
|
||||
{
|
||||
var changed = false;
|
||||
|
||||
var descArray = currentTongue.split(/\W+/);
|
||||
var newArray = newTongue.split(/\W+/);
|
||||
for (var n = 0; descArray.length > n; n++)
|
||||
{
|
||||
if (descArray[n])
|
||||
{
|
||||
header = descArray[n].match(/\D/);
|
||||
eachDescNum = Number(descArray[n].match(/\d+/));
|
||||
eachNewNum = Number(newArray[n].match(/\d+/));
|
||||
|
||||
if (eachNewNum > eachDescNum)
|
||||
{
|
||||
eachDescNum++;
|
||||
changed = true;
|
||||
}
|
||||
else if (eachNewNum < eachDescNum)
|
||||
{
|
||||
eachDescNum--;
|
||||
changed = true;
|
||||
}
|
||||
descArray[n] = header + eachDescNum;
|
||||
}
|
||||
}
|
||||
|
||||
var tempDesc = descArray.join(' ');
|
||||
Tongue.setAttributeNS(null, 'd', tempDesc);
|
||||
|
||||
if (changed)
|
||||
{
|
||||
window.setTimeout('AnimateTongue()', 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
catch(er)
|
||||
{
|
||||
alert('Error in function AnimateTongue:\n' + er.message)
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
var newJaw = null;
|
||||
function AnimateJaw()
|
||||
{
|
||||
try
|
||||
{
|
||||
var currentJaw = Jaw.getAttributeNS(null, 'd');
|
||||
newJaw = newJaw.replace(/,/g, ' ');
|
||||
currentJaw = currentJaw.replace(/,/g, ' ');
|
||||
|
||||
if (newJaw != currentJaw)
|
||||
{
|
||||
var changed = false;
|
||||
|
||||
var descArray = currentJaw.split(/\W+/);
|
||||
var newArray = newJaw.split(/\W+/);
|
||||
for (var n = 0; descArray.length > n; n++)
|
||||
{
|
||||
if (descArray[n])
|
||||
{
|
||||
header = descArray[n].match(/\D/);
|
||||
eachDescNum = Number(descArray[n].match(/\d+/));
|
||||
eachNewNum = Number(newArray[n].match(/\d+/));
|
||||
|
||||
if (eachNewNum > eachDescNum)
|
||||
{
|
||||
eachDescNum++;
|
||||
changed = true;
|
||||
}
|
||||
else if (eachNewNum < eachDescNum)
|
||||
{
|
||||
eachDescNum--;
|
||||
changed = true;
|
||||
}
|
||||
descArray[n] = header + eachDescNum;
|
||||
}
|
||||
}
|
||||
|
||||
var tempDesc = descArray.join(' ');
|
||||
Jaw.setAttributeNS(null, 'd', tempDesc);
|
||||
|
||||
if (changed)
|
||||
{
|
||||
window.setTimeout('AnimateJaw()', 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
catch(er)
|
||||
{
|
||||
alert('Error in function AnimateJaw:\n' + er.message)
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var newPalette = null;
|
||||
function AnimatePalette()
|
||||
{
|
||||
try
|
||||
{
|
||||
var currentPalette = Palette.getAttributeNS(null, 'd');
|
||||
newPalette = newPalette.replace(/,/g, ' ');
|
||||
currentPalette = currentPalette.replace(/,/g, ' ');
|
||||
|
||||
if (newPalette != currentPalette)
|
||||
{
|
||||
var changed = false;
|
||||
|
||||
var descArray = currentPalette.split(/\W+/);
|
||||
var newArray = newPalette.split(/\W+/);
|
||||
for (var n = 0; descArray.length > n; n++)
|
||||
{
|
||||
if (descArray[n])
|
||||
{
|
||||
header = descArray[n].match(/\D/);
|
||||
eachDescNum = Number(descArray[n].match(/\d+/));
|
||||
eachNewNum = Number(newArray[n].match(/\d+/));
|
||||
|
||||
if (eachNewNum > eachDescNum)
|
||||
{
|
||||
eachDescNum++;
|
||||
changed = true;
|
||||
}
|
||||
else if (eachNewNum < eachDescNum)
|
||||
{
|
||||
eachDescNum--;
|
||||
changed = true;
|
||||
}
|
||||
descArray[n] = header + eachDescNum;
|
||||
}
|
||||
}
|
||||
|
||||
var tempDesc = descArray.join(' ');
|
||||
Palette.setAttributeNS(null, 'd', tempDesc);
|
||||
|
||||
if (changed)
|
||||
{
|
||||
window.setTimeout('AnimatePalette()', 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
catch(er)
|
||||
{
|
||||
alert('Error in function AnimatePalette:\n' + er.message)
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var newVocalFolds = null;
|
||||
function AnimateVocalFolds()
|
||||
{
|
||||
try
|
||||
{
|
||||
var currentVocalFolds = VocalFolds.getAttributeNS(null, 'd');
|
||||
newVocalFolds = newVocalFolds.replace(/,/g, ' ');
|
||||
currentVocalFolds = currentVocalFolds.replace(/,/g, ' ');
|
||||
|
||||
if (newVocalFolds != currentVocalFolds)
|
||||
{
|
||||
var changed = false;
|
||||
|
||||
var descArray = currentVocalFolds.split(/\W+/);
|
||||
var newArray = newVocalFolds.split(/\W+/);
|
||||
for (var n = 0; descArray.length > n; n++)
|
||||
{
|
||||
if (descArray[n])
|
||||
{
|
||||
header = descArray[n].match(/\D/);
|
||||
eachDescNum = Number(descArray[n].match(/\d+/));
|
||||
eachNewNum = Number(newArray[n].match(/\d+/));
|
||||
|
||||
if (eachNewNum > eachDescNum)
|
||||
{
|
||||
eachDescNum++;
|
||||
changed = true;
|
||||
}
|
||||
else if (eachNewNum < eachDescNum)
|
||||
{
|
||||
eachDescNum--;
|
||||
changed = true;
|
||||
}
|
||||
descArray[n] = header + eachDescNum;
|
||||
}
|
||||
}
|
||||
|
||||
var tempDesc = descArray.join(' ');
|
||||
VocalFolds.setAttributeNS(null, 'd', tempDesc);
|
||||
|
||||
if (changed)
|
||||
{
|
||||
window.setTimeout('AnimateVocalFolds()', 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
catch(er)
|
||||
{
|
||||
alert('Error in function AnimateVocalFolds:\n' + er.message)
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var newCartilage = null;
|
||||
function AnimateCartilage()
|
||||
{
|
||||
try
|
||||
{
|
||||
var currentCartilage = Cartilage.getAttributeNS(null, 'd');
|
||||
newCartilage = newCartilage.replace(/,/g, ' ');
|
||||
currentCartilage = currentCartilage.replace(/,/g, ' ');
|
||||
|
||||
if (newCartilage != currentCartilage)
|
||||
{
|
||||
var changed = false;
|
||||
|
||||
var descArray = currentCartilage.split(/\W+/);
|
||||
var newArray = newCartilage.split(/\W+/);
|
||||
for (var n = 0; descArray.length > n; n++)
|
||||
{
|
||||
if (descArray[n])
|
||||
{
|
||||
//alert(descArray[n])
|
||||
header = descArray[n].match(/\D/);
|
||||
eachDescNum = Number(descArray[n].match(/\d+/));
|
||||
eachNewNum = Number(newArray[n].match(/\d+/));
|
||||
|
||||
if ('Z' == header)
|
||||
{
|
||||
eachDescNum = '';
|
||||
}
|
||||
else if (eachNewNum > eachDescNum)
|
||||
{
|
||||
eachDescNum++;
|
||||
changed = true;
|
||||
}
|
||||
else if (eachNewNum < eachDescNum)
|
||||
{
|
||||
eachDescNum--;
|
||||
changed = true;
|
||||
}
|
||||
descArray[n] = header + eachDescNum;
|
||||
}
|
||||
}
|
||||
|
||||
var tempDesc = descArray.join(' ');
|
||||
Cartilage.setAttributeNS(null, 'd', tempDesc);
|
||||
|
||||
if (changed)
|
||||
{
|
||||
window.setTimeout('AnimateCartilage()', 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
catch(er)
|
||||
{
|
||||
alert('Error in function AnimateCartilage:\n' + er.message)
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
var tongueArray = new Array();
|
||||
tongueArray['rest'] = 'M159,283 C179,254 128,235 91,243 S59,264 86,280 ';
|
||||
tongueArray['dental'] = 'M159,283 C173,248 129,246 85,241 S58,259 86,280';
|
||||
tongueArray['interdental'] = 'M159,283 C174,244 130,236 79,250 S67,259 86,280';
|
||||
tongueArray['alveolar'] = 'M159,283 C174,244 131,254 87,242 S68,254 86,280';
|
||||
tongueArray['alveopalatal'] = 'M159,283 C145,247 91,206 74,246 S103,224 86,280';
|
||||
tongueArray['palatal'] = 'M159,283 C177,213 113,214 87,248 S107,247 86,280';
|
||||
tongueArray['velar'] = 'M159,283 C158,162 126,236 88,249 S93,261 86,280';
|
||||
tongueArray['uvular'] = 'M159,283 C183,177 147,230 94,249 S93,261 86,280';
|
||||
tongueArray['pharyngeal'] = 'M159,283 C204,257 196,219 120,246 S109,261 86,280';
|
||||
|
||||
var jawArray = new Array();
|
||||
jawArray['rest'] = 'M175,418 C152,370 155,346 177,305 S172,299 163,298 C183,273 161,277 159,282 Q117,264 86,280 Q69,283 64,270 T61,283 C49,279 54,259 38,267 S44,285 39,301 C27,352 55,341 101,340 S131,364 136,375 Q143,399 140,420';
|
||||
jawArray['bilabial'] = 'M175,418 C152,370 155,346 177,305 S172,299 163,298 C183,273 161,277 159,282 Q117,264 86,280 Q69,278 64,262 T60,274 C47,273 53,251 37,256 S41,268 37,291 C26,342 55,332 101,340 S131,364 136,375 Q143,399 140,420';
|
||||
jawArray['labiodental'] = 'M175,418 C152,370 155,346 177,305 S172,299 163,298 C183,273 161,277 159,282 Q117,264 86,280 Q69,278 64,262 T60,274 C47,273 70,262 49,254 S47,267 37,291 C26,342 55,332 101,340 S131,364 136,375 Q143,399 140,420';
|
||||
jawArray['pharyngeal'] = 'M175,418 C152,370 155,346 177,305 S172,299 163,298 C183,273 161,277 159,282 Q117,264 88,278 Q70,298 63,280 T60,290 C48,288 54,268 38,276 S44,294 39,310 C27,361 55,350 99,349 S131,364 136,375 Q143,399 140,420';
|
||||
|
||||
var paletteArray = new Array();
|
||||
paletteArray['rest'] = 'M30,221 C119,224 140,201 166,207 C177,223 173,245 163,228 S144,220 90,228 Q76,238 63,240 C55,243 58,261 55,256 S51,247 48,236 C44,243 48,258 34,254 S37,238 29,221';
|
||||
paletteArray['glottal'] = 'M30,221 C119,224 140,201 166,207 C177,223 173,245 163,228 S144,220 90,228 Q76,238 63,240 C55,243 58,261 55,256 S51,247 48,236 C44,243 48,258 34,254 S37,238 29,221';
|
||||
paletteArray['bilabial'] = 'M30,221 C118,220 140,199 175,211 C182,232 182,254 170,230 S126,225 90,228 Q76,238 63,240 C55,243 58,261 55,256 S51,247 48,236 C43,241 48,258 34,255 S36,241 29,221';
|
||||
paletteArray['labiodental'] = 'M30,221 C118,220 138,193 170,203 C179,221 178,245 165,222 S126,225 90,228 Q76,238 63,240 C55,243 58,261 55,256 S51,247 48,236 C43,229 48,258 33,250 S37,238 29,221';
|
||||
paletteArray['pharyngeal'] = 'M30,221 C118,220 138,193 170,203 C179,221 178,245 165,222 S126,225 90,228 Q76,238 63,240 C55,243 58,261 55,256 S51,247 48,236 C44,243 48,258 34,254 S37,238 29,221';
|
||||
|
||||
var vocalFoldsArray = new Array();
|
||||
vocalFoldsArray['voiceless'] = 'M270,309 Q281,334 284,364 L295,360 Q291,324 275,301 H265 Q249,324 245,360 L256,364 Q259,334 270,309';
|
||||
vocalFoldsArray['voiced'] = 'M270,309 Q271,334 271,371 L283,364 Q285,324 275,301 H265 Q254,324 257,364 L269,371 Q269,334 270,309';
|
||||
|
||||
var cartilageArray = new Array();
|
||||
cartilageArray['voiceless'] = 'M225,322 L230,339 Q243,347 250,359 262,364 270,371 279,364 290,359 298,347 310,339 L314,322 320,326 315,339 Q310,354 298,364 288,378 270,374 252,378 242,364 230,354 225,339 L219,326 Z';
|
||||
cartilageArray['voiced'] = 'M225,322 L230,339 Q246,351 250,359 263,359 270,371 278,359 290,359 295,351 310,339 L314,322 320,326 315,339 Q309,360 298,364 288,379 270,374 252,379 242,364 231,360 225,339 L219,326 Z';
|
||||
|
||||
]]></script>
|
||||
|
||||
|
||||
<g stroke="brown" stroke-width="2" fill="pink">
|
||||
|
||||
<path id="head" d="M226,411 C190,338 201,286 182,231 C164,174 173,213 132,178 C125,172 126,153 94,160 S68,143 17,206 Q14,212 16,219 C-10,212 17,188 40,166 S36,132 46,105 C63,23 205,-9 264,13 S419,95 340,212 Q313,254 346,367 "/>
|
||||
|
||||
<path id="palette" d="M30 221 C119 224 140 201 166 207 C177 223 173 245 163 228 S144 220 90 228 Q76 238 63 240 C55 243 58 261 55 256 S51 247 48 236 C44 243 48 258 34 254 S37 238 29 221 "/>
|
||||
|
||||
<path id="jaw" d="M175 418 C152 370 155 346 177 305 S172 299 163 298 C183 273 161 277 159 282 Q117 264 86 280 Q69 283 64 270 T61 283 C49 279 54 259 38 267 S44 285 39 301 C27 352 55 341 101 340 S131 364 136 375 Q143 399 140 420 "/>
|
||||
|
||||
<path id="esophagus" d="M207,416 C205,404 198,368 193,353 C184,348 159,355 160,350 C172,344 187,346 188,345 C190,343 187,331 194,334 C197,334 208,394 212,415"/>
|
||||
|
||||
<!--
|
||||
<path id='esophagus'
|
||||
d='M207,416 C205,404 198,368 193,353 C184,348 182,353 179,350 C172,344 187,346 188,345 C190,343 187,331 194,334 C197,334 208,394 212,415'
|
||||
/>
|
||||
<path id='vocalChords'
|
||||
d='M184,350 L160,356 M160,352 L179,345'
|
||||
fill-rule='evenodd'
|
||||
/>
|
||||
-->
|
||||
|
||||
|
||||
<path id="tongue" d="M159 283 C179 254 128 235 91 243 S59 264 86 280 "/>
|
||||
</g>
|
||||
|
||||
|
||||
<!--
|
||||
<text id='TongueText' x='-126' y='-91'>
|
||||
<textPath id='tonguePath' xlink:href='#tongue' startOffset='50%'>text on path
|
||||
</textPath>
|
||||
</text>
|
||||
<animate id='firsttpath' attributeName='startOffset' values='0%;77.5%' keyTimes='0;1' dur='20s' repeatCount='indefinite' fill='freeze'/>
|
||||
|
||||
-->
|
||||
|
||||
<circle cx="175" cy="350" r="22" stroke="gray" fill="white" opacity="0.5"/>
|
||||
<circle cx="270" cy="330" r="50" stroke="gray" fill="white" opacity="0.7"/>
|
||||
<line x1="166" y1="330" x2="248" y2="285" stroke="gray" fill="none" opacity="0.5" stroke-linecap="round"/>
|
||||
<line x1="175" y1="372" x2="267" y2="380" stroke="gray" fill="none" opacity="0.5" stroke-linecap="round"/>
|
||||
|
||||
<defs>
|
||||
<radialGradient id="fade">
|
||||
<stop offset="90%" stop-color="white" stop-opacity="1.0"/>
|
||||
<stop offset="95%" stop-color="white" stop-opacity="0.5"/>
|
||||
<stop offset="100%" stop-color="white" stop-opacity="0.0"/>
|
||||
</radialGradient>
|
||||
<mask id="fademask">
|
||||
<circle cx="270" cy="330" r="50" fill="url(#fade)"/>
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<g id="phraynx" mask="url(#fademask)">
|
||||
<ellipse id="vocalBack" cx="270" cy="330" rx="44" ry="40" fill="pink"/>
|
||||
<path id="gap" d="M270,309 Q285,334 284,361 Q279,364 270,371 262,364 256,361 Q256,334 270,309" fill="#87cefa" fill-opacity="0.5"/>
|
||||
<g fill="pink" fill-rule="evenodd" stroke="brown" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path id="vocalFolds" d="M270,309 Q281,334 284,364 L295,360 Q291,324 275,301 H265 Q249,324 245,360 L256,364 Q259,334 270,309" fill="white" stroke="#ff6347"/>
|
||||
|
||||
<path id="CuneiformCorniculateCartilage" d="M225,322 L230,339 Q243,347 250,359 262,364 270,371 279,364 290,359 298,347 310,339 L314,322 320,326 315,339 Q310,354 298,364 288,378 270,374 252,378 242,364 230,354 225,339 L219,326 Z" fill="#eee8aa" stroke="#daa520"/>
|
||||
<path id="oddThing" d="M250,299 Q270,319 290,299"/>
|
||||
<path id="epiglottis" d="M215,327 C238,324 243,302 270,300 297,302 302,324 325,327 V324 C301,321 310,278 270,289 230,278 241,321 215,324 Z"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
||||
<g stroke="blue" fill="cornflowerblue" onmouseover="ShowPosition(evt, true)" onmouseout="ShowPosition(evt, false)">
|
||||
<rect id="bilabial-Button" x="400" y="10" width="100" height="20" rx="5" ry="5"/>
|
||||
<rect id="labiodental-Button" x="400" y="40" width="100" height="20" rx="5" ry="5"/>
|
||||
<rect id="dental-Button" x="400" y="70" width="100" height="20" rx="5" ry="5"/>
|
||||
<rect id="interdental-Button" x="400" y="100" width="100" height="20" rx="5" ry="5"/>
|
||||
<rect id="alveolar-Button" x="400" y="130" width="100" height="20" rx="5" ry="5"/>
|
||||
<rect id="alveopalatal-Button" x="400" y="160" width="100" height="20" rx="5" ry="5"/>
|
||||
<rect id="palatal-Button" x="400" y="190" width="100" height="20" rx="5" ry="5"/>
|
||||
<rect id="velar-Button" x="400" y="220" width="100" height="20" rx="5" ry="5"/>
|
||||
<rect id="uvular-Button" x="400" y="250" width="100" height="20" rx="5" ry="5"/>
|
||||
<rect id="pharyngeal-Button" x="400" y="280" width="100" height="20" rx="5" ry="5"/>
|
||||
<rect id="glottal-Button" x="400" y="310" width="100" height="20" rx="5" ry="5"/>
|
||||
|
||||
<rect id="voiced-Button" x="400" y="370" width="100" height="20" rx="5" ry="5"/>
|
||||
<rect id="voiceless-Button" x="400" y="400" width="100" height="20" rx="5" ry="5"/>
|
||||
</g>
|
||||
|
||||
<g fill="white" pointer-events="none" text-anchor="middle" font-size="14px">
|
||||
<text id="bilabial-Label" x="450" y="25" fill="white">Bilabial</text>
|
||||
<text id="labiodental-Label" x="450" y="55" fill="white">Labiodental</text>
|
||||
<text id="dental-Label" x="450" y="85" fill="white">Dental</text>
|
||||
<text id="interdental-Label" x="450" y="115">Interdental</text>
|
||||
<text id="alveolar-Label" x="450" y="145">Alveolar</text>
|
||||
<text id="alveopalatal-Label" x="450" y="175" fill="white">Alveopalatal</text>
|
||||
<text id="palatal-Label" x="450" y="205">Palatal</text>
|
||||
<text id="velar-Label" x="450" y="235">Velar</text>
|
||||
<text id="uvular-Label" x="450" y="265">Uvular</text>
|
||||
<text id="pharyngeal-Label" x="450" y="295" fill="white">Pharyngeal</text>
|
||||
<text id="glottal-Label" x="450" y="325" fill="white">Glottal</text>
|
||||
|
||||
<text id="voiced-Label" x="450" y="385">Voiced</text>
|
||||
<text id="voiceless-Label" x="450" y="415">Voiceless</text>
|
||||
</g>
|
||||
|
||||
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
726
src/vue-poc/static/resources/svg/tiger.svg
Normal file
726
src/vue-poc/static/resources/svg/tiger.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 94 KiB |
|
|
@ -5,16 +5,15 @@ console.log('WORKER: executing.');
|
|||
/* A version number is useful when updating the worker logic,
|
||||
allowing you to remove outdated cache entries during the update.
|
||||
*/
|
||||
var version = 'v1:3:';
|
||||
var version = 'v0:4:';
|
||||
|
||||
/* These resources will be downloaded and cached by the service worker
|
||||
during the installation process. If any resource fails to be downloaded,
|
||||
then the service worker won't be installed either.
|
||||
*/
|
||||
var offlineFundamentals = [
|
||||
'',
|
||||
'prof-stat.js',
|
||||
'//cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js'
|
||||
'//cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js'
|
||||
];
|
||||
|
||||
/* The install event fires when the service worker is first installed.
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ html, body {
|
|||
}
|
||||
.canvas {
|
||||
overflow: hidden;
|
||||
background-color:green;
|
||||
}
|
||||
.canvas .wrapper.outer > .background {
|
||||
fill: #000000;
|
||||
|
|
|
|||
13
src/vue-poc/static/svg/d3-svg.js
vendored
13
src/vue-poc/static/svg/d3-svg.js
vendored
|
|
@ -160,7 +160,18 @@ d3.demo.canvas = function() {
|
|||
panCanvas.node().appendChild(item.node());
|
||||
minimap.render();
|
||||
};
|
||||
|
||||
|
||||
/** SET SHAPE **/
|
||||
canvas.setItem=function(item){
|
||||
var tn=panCanvas.node();
|
||||
while (tn.hasChildNodes()) {
|
||||
tn.removeChild(tn.lastChild);
|
||||
};
|
||||
panCanvas.node().appendChild(item.node());
|
||||
canvas.reset();
|
||||
minimap.render();
|
||||
};
|
||||
|
||||
/** RENDER **/
|
||||
canvas.render = function() {
|
||||
svgDefs
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue