apb/vue-poc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

remove global Event

Browse source
This commit is contained in:
Andy Bunce 2017-08-27 21:26:45 +01:00
parent dff6a79747
commit 38ead82e9c
9 changed files with 172 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/vue-poc/components/core.js
View file

@ -77,9 +77,6 @@ function debounce(func, wait, immediate) {
}; };
}; };
// used by vue-ace
var Events = new Vue({});
const router = new VueRouter({ const router = new VueRouter({
base:"/vue-poc/ui/", base:"/vue-poc/ui/",
@ -91,6 +88,8 @@ const router = new VueRouter({
{ path: '/images/report', name:"image-reports",component: Report, props: true, meta:{title: "Image report"}}, { path: '/images/report', name:"image-reports",component: Report, props: true, meta:{title: "Image report"}},
{ path: '/images/item/:id', name:"image",component: Image, props: true, meta:{title: "Image details"}}, { path: '/images/item/:id', name:"image",component: Image, props: true, meta:{title: "Image details"}},
{ path: '/images/thumbnail', component: Thumbnail, meta:{title:"Thumbnail generator"} }, { path: '/images/thumbnail', component: Thumbnail, meta:{title:"Thumbnail generator"} },
{ path: '/images/keywords', component: Keywords, meta:{title:"Thumbnail keywords"} },
{ path: '/images/dates', component: Dates, meta:{title:"Thumbnail dates"} },
{ path: '/select', component: Select, meta:{title:"Select"} }, { path: '/select', component: Select, meta:{title:"Select"} },
{ path: '/search', component: Search, meta:{title:"Search"} }, { path: '/search', component: Search, meta:{title:"Search"} },
{ path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} }, { path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
@ -181,8 +180,10 @@ const app = new Vue({
model: false, model: false,
children: [ children: [
{href: '/images/item',text: 'Collection',icon: 'photo_camera'}, {href: '/images/item',text: 'Collection',icon: 'photo_camera'},
{href: '/thumbnail',text: 'Thumbnail',icon: 'touch_app'}, {href: '/images/keywords',text: 'Keywords',icon: 'label'},
{href: '/images/report',text: 'Image reports',icon: 'report'} {href: '/images/dates',text: 'Date taken',icon: 'date_range'},
{href: '/images/thumbnail',text: 'Thumbnail',icon: 'touch_app'},
{href: '/images/report',text: 'Reports',icon: 'report'}
]}, ]},
{ {
icon: 'more_horiz', icon: 'more_horiz',

38
src/vue-poc/features/edit/edit.vue
View file

@ -38,12 +38,12 @@
<v-icon black >navigate_next</v-icon> <v-icon black >navigate_next</v-icon>
</v-avatar> </v-avatar>
</v-chip> </v-chip>
<v-btn icon @click="acecmd('outline')"> <v-btn icon @click="acecmd('outline')" title="outline -todo">
<v-icon>star</v-icon> <v-icon>star</v-icon>
</v-btn> </v-btn>
<v-btn icon @click="acecmd('foldall')"> <v-btn icon @click="acecmd('foldall')" title="fold all">
<v-icon>vertical_align_center</v-icon> <v-icon>vertical_align_center</v-icon>
</v-btn> </v-btn>
@ -110,7 +110,7 @@
<v-card-text v-if="!busy"> <v-card-text v-if="!busy">
<v-flex xs12 style="height:70vh" fill-height> <v-flex xs12 style="height:70vh" fill-height>
<vue-ace :content="contentA" :mode="mode" :wrap="wrap" <vue-ace :content="contentA" :mode="mode" :wrap="wrap" :events="events"
v-on:change-content="changeContentA" v-on:change-content="changeContentA"
v-on:annotation="annotation"></vue-ace> v-on:annotation="annotation"></vue-ace>
</v-flex> </v-flex>
@ -126,19 +126,20 @@ v-on:annotation="annotation"></vue-ace>
contentA: `declare function local:query($q as xs:string) contentA: `declare function local:query($q as xs:string)
{ <json type="object"/> { <json type="object"/>
};`, };`,
mode:'xquery', mode: 'xquery',
url:'', url: '',
protocol:'webfile', protocol: 'webfile',
name:'', name: '',
path:[], path: [],
mimetype:"", mimetype: "",
wrap:false, wrap: false,
busy:false, busy: false,
clearDialog:false, clearDialog: false,
annotations:null, annotations: null,
dirty:false, dirty: false,
snackbar:false, snackbar: false,
message:"Cant do that", message: "Cant do that",
events: new Vue({}),
mimemap:{ mimemap:{
"text/xml":"xml", "text/xml":"xml",
"application/xml":"xml", "application/xml":"xml",
@ -192,10 +193,11 @@ v-on:annotation="annotation"></vue-ace>
}, },
acecmd(cmd){ acecmd(cmd){
Events.$emit('eventFired',cmd); //alert("acecmd: "+cmd)
this.events.$emit('eventFired',cmd);
}, },
fold(){ fold(){
Events.$emit('eventFired',"foldall"); this.events.$emit('eventFired',"foldall");
}, },
save(){ save(){
alert("TODO save: "+this.url); alert("TODO save: "+this.url);

28
src/vue-poc/features/images/dates.vue Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<!--
image dates
-->
<template id="dates">
<v-container fluid>
<v-card >
<v-toolbar class="orange darken-1">
<v-btn icon to="./"><v-icon>arrow_back</v-icon></v-btn>
<v-card-title >
<v-chip >todo</v-chip>
</v-card-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
dates todo
</v-card-text>
</v-card>
</v-container>
</template>
<script>{
}
</script>

28
src/vue-poc/features/images/keywords.vue Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<!--
image keywords
-->
<template id="keywords">
<v-container fluid>
<v-card >
<v-toolbar class="orange darken-1">
<v-btn icon to="./"><v-icon>arrow_back</v-icon></v-btn>
<v-card-title >
<v-chip >todo</v-chip>
</v-card-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
keywords todo
</v-card-text>
</v-card>
</v-container>
</template>
<script>{
}
</script>

5
src/vue-poc/features/ping/ping.vue
View file

@ -31,7 +31,8 @@
<v-btn @click="get()" >Get count</v-btn> <v-btn @click="get()" >Get count</v-btn>
</td> </td>
<td> <td>
<v-checkbox v-model="repeat.get" ></v-checkbox> <v-switch v-model="repeat.get"></v-switch>
</td> </td>
<td> <td>
<span >{{getValues.last}}</span> <span >{{getValues.last}}</span>
@ -61,7 +62,7 @@
</td> </td>
<td> <td>
<v-checkbox v-model="repeat.post" ></v-checkbox> <v-switch v-model="repeat.post"></v-switch>
</td> </td>
<td class="col-md-1"> <td class="col-md-1">
<span >{{postValues.last}}</span> <span >{{postValues.last}}</span>

3
src/vue-poc/features/settings.vue
View file

@ -13,7 +13,8 @@
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title>enableSnippets</v-list-tile-title> <v-list-tile-title>enableSnippets</v-list-tile-title>
<v-list-tile-sub-title>Allow snippets</v-list-tile-sub-title> <v-list-tile-sub-title>Allow
<a href="https://cloud9-sdk.readme.io/docs/snippets" target="docs">snippets</a></v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>

2
src/vue-poc/features/timeline.vue
View file

@ -29,7 +29,7 @@
{ id: 1, content: 'item 1', start: '2013-04-20 23:06:15.304' }, { id: 1, content: 'item 1', start: '2013-04-20 23:06:15.304' },
{ id: 2, content: 'iso date time', start: '2013-04-14T11:11:15.304' }, { id: 2, content: 'iso date time', start: '2013-04-14T11:11:15.304' },
{ id: 3, content: '[GET] http://localhost:8984/vue-poc/ui/icon.png', start: '2013-04-18', end: '2013-04-19' }, { id: 3, content: '[GET] http://localhost:8984/vue-poc/ui/icon.png', start: '2013-04-18', end: '2013-04-19' },
{ id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19' }, { id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19', className: 'green' },
{ id: 5, content: '[GET] http://localhost:8984/vue-poc/ui/app.css', start: '2013-04-25' }, { id: 5, content: '[GET] http://localhost:8984/vue-poc/ui/app.css', start: '2013-04-25' },
{ id: 6, content: 'item 6', start: '2013-04-27' }] { id: 6, content: 'item 6', start: '2013-04-27' }]
}, },

107
src/vue-poc/static/app-gen.js
View file

@ -1,4 +1,4 @@
// generated 2017-08-27T11:38:03.302+01:00 // generated 2017-08-27T21:21:39.471+01:00
Vue.component('qd-link',{template:` Vue.component('qd-link',{template:`
<a :href="href" :target="href"> {{href}}<v-icon>link</v-icon></a> <a :href="href" :target="href"> {{href}}<v-icon>link</v-icon></a>
`, `,
@ -515,12 +515,12 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-icon black="">navigate_next</v-icon> <v-icon black="">navigate_next</v-icon>
</v-avatar> </v-avatar>
</v-chip> </v-chip>
<v-btn icon="" @click="acecmd('outline')"> <v-btn icon="" @click="acecmd('outline')" title="outline -todo">
<v-icon>star</v-icon> <v-icon>star</v-icon>
</v-btn> </v-btn>
<v-btn icon="" @click="acecmd('foldall')"> <v-btn icon="" @click="acecmd('foldall')" title="fold all">
<v-icon>vertical_align_center</v-icon> <v-icon>vertical_align_center</v-icon>
</v-btn> </v-btn>
@ -587,7 +587,7 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
<v-card-text v-if="!busy"> <v-card-text v-if="!busy">
<v-flex xs12="" style="height:70vh" fill-height=""> <v-flex xs12="" style="height:70vh" fill-height="">
<vue-ace :content="contentA" :mode="mode" :wrap="wrap" v-on:change-content="changeContentA" v-on:annotation="annotation"></vue-ace> <vue-ace :content="contentA" :mode="mode" :wrap="wrap" :events="events" v-on:change-content="changeContentA" v-on:annotation="annotation"></vue-ace>
</v-flex> </v-flex>
</v-card-text> </v-card-text>
</v-card> </v-card>
@ -600,19 +600,20 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
contentA: `declare function local:query($q as xs:string) contentA: `declare function local:query($q as xs:string)
{ <json type="object"/> { <json type="object"/>
};`, };`,
mode:'xquery', mode: 'xquery',
url:'', url: '',
protocol:'webfile', protocol: 'webfile',
name:'', name: '',
path:[], path: [],
mimetype:"", mimetype: "",
wrap:false, wrap: false,
busy:false, busy: false,
clearDialog:false, clearDialog: false,
annotations:null, annotations: null,
dirty:false, dirty: false,
snackbar:false, snackbar: false,
message:"Cant do that", message: "Cant do that",
events: new Vue({}),
mimemap:{ mimemap:{
"text/xml":"xml", "text/xml":"xml",
"application/xml":"xml", "application/xml":"xml",
@ -666,10 +667,11 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
}, },
acecmd(cmd){ acecmd(cmd){
Events.$emit('eventFired',cmd); //alert("acecmd: "+cmd)
this.events.$emit('eventFired',cmd);
}, },
fold(){ fold(){
Events.$emit('eventFired',"foldall"); this.events.$emit('eventFired',"foldall");
}, },
save(){ save(){
alert("TODO save: "+this.url); alert("TODO save: "+this.url);
@ -984,6 +986,29 @@ v0.0.3 </v-card-title> </v-card> </v-flex> <v-flex xs4="">
} }
} }
);
const Dates=Vue.extend({template:`
<v-container fluid="">
<v-card>
<v-toolbar class="orange darken-1">
<v-btn icon="" to="./"><v-icon>arrow_back</v-icon></v-btn>
<v-card-title>
<v-chip>todo</v-chip>
</v-card-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
dates todo
</v-card-text>
</v-card>
</v-container>
`,
}
); );
const Image=Vue.extend({template:` const Image=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
@ -1271,6 +1296,29 @@ body
`, `,
}
);
const Keywords=Vue.extend({template:`
<v-container fluid="">
<v-card>
<v-toolbar class="orange darken-1">
<v-btn icon="" to="./"><v-icon>arrow_back</v-icon></v-btn>
<v-card-title>
<v-chip>todo</v-chip>
</v-card-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
keywords todo
</v-card-text>
</v-card>
</v-container>
`,
} }
); );
@ -1532,7 +1580,8 @@ body
<v-btn @click="get()">Get count</v-btn> <v-btn @click="get()">Get count</v-btn>
</td> </td>
<td> <td>
<v-checkbox v-model="repeat.get"></v-checkbox> <v-switch v-model="repeat.get"></v-switch>
</td> </td>
<td> <td>
<span>{{getValues.last}}</span> <span>{{getValues.last}}</span>
@ -1562,7 +1611,7 @@ body
</td> </td>
<td> <td>
<v-checkbox v-model="repeat.post"></v-checkbox> <v-switch v-model="repeat.post"></v-switch>
</td> </td>
<td class="col-md-1"> <td class="col-md-1">
<span>{{postValues.last}}</span> <span>{{postValues.last}}</span>
@ -1898,7 +1947,8 @@ body
</v-list-tile-action> </v-list-tile-action>
<v-list-tile-content> <v-list-tile-content>
<v-list-tile-title>enableSnippets</v-list-tile-title> <v-list-tile-title>enableSnippets</v-list-tile-title>
<v-list-tile-sub-title>Allow snippets</v-list-tile-sub-title> <v-list-tile-sub-title>Allow
<a href="https://cloud9-sdk.readme.io/docs/snippets" target="docs">snippets</a></v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
@ -2381,7 +2431,7 @@ body
{ id: 1, content: 'item 1', start: '2013-04-20 23:06:15.304' }, { id: 1, content: 'item 1', start: '2013-04-20 23:06:15.304' },
{ id: 2, content: 'iso date time', start: '2013-04-14T11:11:15.304' }, { id: 2, content: 'iso date time', start: '2013-04-14T11:11:15.304' },
{ id: 3, content: '[GET] http://localhost:8984/vue-poc/ui/icon.png', start: '2013-04-18', end: '2013-04-19' }, { id: 3, content: '[GET] http://localhost:8984/vue-poc/ui/icon.png', start: '2013-04-18', end: '2013-04-19' },
{ id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19' }, { id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19', className: 'green' },
{ id: 5, content: '[GET] http://localhost:8984/vue-poc/ui/app.css', start: '2013-04-25' }, { id: 5, content: '[GET] http://localhost:8984/vue-poc/ui/app.css', start: '2013-04-25' },
{ id: 6, content: 'item 6', start: '2013-04-27' }] { id: 6, content: 'item 6', start: '2013-04-27' }]
}, },
@ -2481,9 +2531,6 @@ function debounce(func, wait, immediate) {
}; };
}; };
// used by vue-ace
var Events = new Vue({});
const router = new VueRouter({ const router = new VueRouter({
base:"/vue-poc/ui/", base:"/vue-poc/ui/",
@ -2495,6 +2542,8 @@ const router = new VueRouter({
{ path: '/images/report', name:"image-reports",component: Report, props: true, meta:{title: "Image report"}}, { path: '/images/report', name:"image-reports",component: Report, props: true, meta:{title: "Image report"}},
{ path: '/images/item/:id', name:"image",component: Image, props: true, meta:{title: "Image details"}}, { path: '/images/item/:id', name:"image",component: Image, props: true, meta:{title: "Image details"}},
{ path: '/images/thumbnail', component: Thumbnail, meta:{title:"Thumbnail generator"} }, { path: '/images/thumbnail', component: Thumbnail, meta:{title:"Thumbnail generator"} },
{ path: '/images/keywords', component: Keywords, meta:{title:"Thumbnail keywords"} },
{ path: '/images/dates', component: Dates, meta:{title:"Thumbnail dates"} },
{ path: '/select', component: Select, meta:{title:"Select"} }, { path: '/select', component: Select, meta:{title:"Select"} },
{ path: '/search', component: Search, meta:{title:"Search"} }, { path: '/search', component: Search, meta:{title:"Search"} },
{ path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} }, { path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} },
@ -2585,8 +2634,10 @@ const app = new Vue({
model: false, model: false,
children: [ children: [
{href: '/images/item',text: 'Collection',icon: 'photo_camera'}, {href: '/images/item',text: 'Collection',icon: 'photo_camera'},
{href: '/thumbnail',text: 'Thumbnail',icon: 'touch_app'}, {href: '/images/keywords',text: 'Keywords',icon: 'label'},
{href: '/images/report',text: 'Image reports',icon: 'report'} {href: '/images/dates',text: 'Date taken',icon: 'date_range'},
{href: '/images/thumbnail',text: 'Thumbnail',icon: 'touch_app'},
{href: '/images/report',text: 'Reports',icon: 'report'}
]}, ]},
{ {
icon: 'more_horiz', icon: 'more_horiz',

8
src/vue-poc/static/vue-ace.js
View file

@ -6,7 +6,8 @@ Vue.component('vue-ace', {
'mode', 'mode',
'theme', 'theme',
'wrap', 'wrap',
'readOnly' 'readOnly',
'events'
], ],
data () { data () {
return { return {
@ -108,8 +109,8 @@ Vue.component('vue-ace', {
//console.log(this.annots) //console.log(this.annots)
this.$emit('annotation',this.annots) this.$emit('annotation',this.annots)
}); });
if(this.events){
Events.$on('eventFired', (cmd) => { this.events.$on('eventFired', (cmd) => {
if(cmd=="outline"){ if(cmd=="outline"){
var row = this.editor.selection.getCursor().row var row = this.editor.selection.getCursor().row
var toks=this.editor.session.getTokens(row).filter(function(t) { var toks=this.editor.session.getTokens(row).filter(function(t) {
@ -118,5 +119,6 @@ Vue.component('vue-ace', {
console.log(toks); console.log(toks);
}else this.command(cmd); }else this.command(cmd);
}); });
}
} }
}) })