diff --git a/src/vue-poc/components/core.js b/src/vue-poc/components/core.js index 91f3744..262c374 100644 --- a/src/vue-poc/components/core.js +++ b/src/vue-poc/components/core.js @@ -85,35 +85,44 @@ function debounce(func, wait, immediate) { }; // https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript -function fullscreen() { - var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) || +const Fullscreen={ + isInFullScreen(){ + return (document.fullscreenElement && document.fullscreenElement !== null) || (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || (document.mozFullScreenElement && document.mozFullScreenElement !== null) || (document.msFullscreenElement && document.msFullscreenElement !== null); - - var docElm = document.documentElement; - if (!isInFullScreen) { - if (docElm.requestFullscreen) { - docElm.requestFullscreen(); - } else if (docElm.mozRequestFullScreen) { - docElm.mozRequestFullScreen(); - } else if (docElm.webkitRequestFullScreen) { - docElm.webkitRequestFullScreen(); - } else if (docElm.msRequestFullscreen) { - docElm.msRequestFullscreen(); + }, + toggle(){ + var docElm = document.documentElement; + if (!this.isInFullScreen()) { + if (docElm.requestFullscreen) { + docElm.requestFullscreen(); + } else if (docElm.mozRequestFullScreen) { + docElm.mozRequestFullScreen(); + } else if (docElm.webkitRequestFullScreen) { + docElm.webkitRequestFullScreen(); + } else if (docElm.msRequestFullscreen) { + docElm.msRequestFullscreen(); + } + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } } - } else { - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - } + }, + install: function(Vue){ + Object.defineProperty(Vue.prototype, '$fullscreen', { + get () { return Fullscreen } + }) } }; +Vue.use(Fullscreen); + const router = new VueRouter({ base:"/vue-poc/ui/", @@ -133,7 +142,8 @@ const router = new VueRouter({ { path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} }, { path: '/login', component: Login,meta:{title:"login"} }, { path: '/edit', component: Edit,meta:{title:"Ace editor"} }, - + { path: '/server/users', component: Users,meta:{title:"Users"} }, + { path: '/server/repo', component: Repo,meta:{title:"Repository"} }, { path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} }, { path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"basexdb"} }, { path: '/ping', component: Ping,meta:{title:"Ping"} }, @@ -212,6 +222,8 @@ const app = new Vue({ children: [ {href: '/jobs',text: 'Running jobs',icon: 'dashboard'}, {href: '/logs',text: 'Server logs',icon: 'dns'}, + {href: '/server/users',text: 'Users',icon: 'supervisor_account'}, + {href: '/server/repo',text: 'Server code repository',icon: 'local_library'}, {href: '/ping',text: 'Ping',icon: 'update'} ]}, { @@ -257,47 +269,8 @@ const app = new Vue({ showAlert(msg){ this.alert.msg=moment().format()+" "+ msg this.alert.show=true - }, - fullscreenEnabled(){ - return document.fullscreenEnabled - }, - isInFullScreen(){ - return (document.fullscreenElement && document.fullscreenElement !== null) || - (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || - (document.mozFullScreenElement && document.mozFullScreenElement !== null) || - (document.msFullscreenElement && document.msFullscreenElement !== null) - }, - fullscreen(){ - // https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript - var isInFullScreen = this.isInFullScreen(); - alert(isInFullScreen); - var docElm = document.documentElement; - if (!isInFullScreen) { - if (docElm.requestFullscreen) { - docElm.requestFullscreen(); - } else if (docElm.mozRequestFullScreen) { - docElm.mozRequestFullScreen(); - } else if (docElm.webkitRequestFullScreen) { - docElm.webkitRequestFullScreen(); - } else if (docElm.msRequestFullscreen) { - docElm.msRequestFullscreen(); - } - } else { - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - } } }, - computed:{ - fullscreenIcon(){ return this.isInFullScreen()?'fullscreen_exit':'fullscreen'} - }, created(){ diff --git a/src/vue-poc/components/qd-fullscreen.vue b/src/vue-poc/components/qd-fullscreen.vue index ed6c4e8..44ab682 100644 --- a/src/vue-poc/components/qd-fullscreen.vue +++ b/src/vue-poc/components/qd-fullscreen.vue @@ -1,14 +1,26 @@ diff --git a/src/vue-poc/static/vue-ace.js b/src/vue-poc/components/vue-ace.vue similarity index 69% rename from src/vue-poc/static/vue-ace.js rename to src/vue-poc/components/vue-ace.vue index a3e5c1b..b9095aa 100644 --- a/src/vue-poc/static/vue-ace.js +++ b/src/vue-poc/components/vue-ace.vue @@ -1,22 +1,31 @@ -// ace editor for vue.js + + + + diff --git a/src/vue-poc/data/vue-poc/namespaces.xml b/src/vue-poc/data/vue-poc/namespaces.xml new file mode 100644 index 0000000..8b9248d --- /dev/null +++ b/src/vue-poc/data/vue-poc/namespaces.xml @@ -0,0 +1,45 @@ + + + + XML core features + + + + XML Linking Language (XLink) namespace + + + + XML Inclusions (XInclude) + + + + XSL Formatting Objects namespace + + + + XSL Transformations namespace from the XSLT 1.0 + Recommendation + + + + + XML Schema Part 1: Structures namespace. + + + + XML Schema Part 2: Datatypes namespace. + + + + Namespace for XML Schema attributes used in XML instances + (documents), such as xsi:type, xsi:schemaLocation, and xsi:nil. + + + + + Scalable Vector Graphics namespace + + + \ No newline at end of file diff --git a/src/vue-poc/features/edit/edit.vue b/src/vue-poc/features/edit/edit.vue index a927084..281f939 100644 --- a/src/vue-poc/features/edit/edit.vue +++ b/src/vue-poc/features/edit/edit.vue @@ -110,7 +110,8 @@ - @@ -151,7 +152,8 @@ v-on:annotation="annotation"> "text/turtle":"turtle", "text/css":"css", "image/svg+xml":"svg" - } + }, + aceSettings: { } } }, methods: { @@ -252,6 +254,10 @@ v-on:annotation="annotation"> var r=this.mimemap[mime] return r?r:"text" }, + onResize(){ + var h=window.innerHeight + console.log("height:",h) + }, leaving(event) { event.returnValue = "event seems to need to be set"; //debugger; @@ -271,6 +277,12 @@ v-on:annotation="annotation"> var url=this.$route.query.url if(url) this.fetch(url) }, + beforeRouteEnter (to, from, next) { + settings.getItem('settings/ace') + .then( v =>{ + next(vm => {vm.aceSettings = v;}) + }) + }, beforeRouteLeave (to, from, next) { // called when the route that renders this component is about to // be navigated away from. diff --git a/src/vue-poc/features/eval/eval.vue b/src/vue-poc/features/eval/eval.vue index 83fa8c9..16352b3 100644 --- a/src/vue-poc/features/eval/eval.vue +++ b/src/vue-poc/features/eval/eval.vue @@ -30,7 +30,7 @@ @@ -82,7 +82,8 @@ jobId: null, waiting: false, start: null, - jobState: {} + jobState: {}, + aceSettings:{} } }, methods:{ @@ -181,7 +182,14 @@ this.showResult=true } }, - + beforeRouteEnter (to, from, next) { + settings.getItem('settings/ace') + .then( v =>{ + next(vm => { + console.log('eval settings: ',v); + vm.aceSettings = v; + })}) + }, created:function(){ localforage.getItem('eval/xq').then((value) => { this.xq=value || this.xq}); } diff --git a/src/vue-poc/features/repository.vue b/src/vue-poc/features/repository.vue new file mode 100644 index 0000000..33d48ce --- /dev/null +++ b/src/vue-poc/features/repository.vue @@ -0,0 +1,18 @@ + + + + diff --git a/src/vue-poc/features/settings/acesettings.vue b/src/vue-poc/features/settings/acesettings.vue index 0d000ec..5c20563 100644 --- a/src/vue-poc/features/settings/acesettings.vue +++ b/src/vue-poc/features/settings/acesettings.vue @@ -1,9 +1,52 @@ diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js index 12010d5..f94a9bb 100644 --- a/src/vue-poc/static/app-gen.js +++ b/src/vue-poc/static/app-gen.js @@ -1,10 +1,22 @@ -// generated 2017-09-02T22:16:55.583+01:00 +// generated 2017-09-03T23:24:46.005+01:00 Vue.component('qd-fullscreen',{template:` -fS + + {{ fullscreenIcon }} + `, - created:function(){ - console.log("qd-fullscreen"); + data(){ + return {fullscreenIcon:"fullscreen"} + }, + methods:{ + toggle(){ + this.$fullscreen.toggle() + setTimeout(()=>{ + var state=this.$fullscreen.isInFullScreen() + //console.log("FS",state); + this.fullscreenIcon=state?"fullscreen_exit":"fullscreen" + }, 1000); + } } } @@ -125,6 +137,144 @@ }) } } +} + ); + Vue.component('vue-ace',{template:` +
+ `, + + props: [ 'content', + 'mode', + 'wrap', + 'readOnly', + 'events', + 'settings' + ], + data () { + return { + editor: Object, + beforeContent: '', + aceSettings:{ + theme: "github", + keybinding: "ace", + fontsize: 16, + enableSnippets:true, + enableBasicAutocompletion:true, + enableLiveAutocompletion:true + }, + annots:{ + error:0,warning:0,info:0 + } + } + }, + watch: { + 'content' (value) { + if (this.beforeContent !== value) { + this.editor.setValue(value, 1) + } + }, + 'mode' (value) { + var session=this.editor.getSession() + session.setMode(`ace/mode/${value}`) + }, + 'wrap' (value) { + var session=this.editor.getSession() + session.setUseWrapMode(value) + }, + 'settings' (value) { + //console.log("--settings--",value) + this.applySettings() + } + }, + methods:{ + + command(cmd){ + //alert("fold") + var cm = this.editor.commands + //console.log(cm.commands) + cm.exec(cmd, this.editor) + }, + + testAnnotations(){ + this.editor.getSession().setAnnotations([{ + row: 1, + column: 0, + text: "Strange error", + type: "error" // also warning and information + }]); + }, + + applySettings(){ + const aceSettings=this.settings + //console.log("font: ",aceSettings.fontsize) + this.editor.setTheme(`ace/theme/${aceSettings.theme}`) + //this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`) + this.editor.setFontSize(parseInt(aceSettings.fontsize,10)) + this.editor.setOptions({ + enableSnippets : aceSettings.enableSnippets, + enableBasicAutocompletion : aceSettings.enableBasicAutocompletion, + enableLiveAutocompletion : aceSettings.enableLiveAutocompletion, + tabSize: 2, + useSoftTabs: true + }); + } + }, + + mounted () { + const mode = this.mode || 'text' + const wrap = this.wrap || false + + const aceSettings=this.settings + console.log("QA: ",this.settings.theme) + const readOnly = this.readOnly || false + ace.config.set("workerPath", "/vue-poc/ui/ace-workers") + this.editor = window.ace.edit(this.$el) + + this.editor.$blockScrolling = Infinity + this.editor.setValue(this.content, 1) + this.editor.setOptions({ readOnly:this.readOnly }) + var session=this.editor.getSession() + session.setMode(`ace/mode/${mode}`) + session.setUseWrapMode(wrap) + this.editor.commands.addCommand({ + name: "showKeyboardShortcuts", + bindKey: {win: "Ctrl-Alt-h", mac: "Command-Alt-h"}, + exec: function(editor) { + ace.config.loadModule("ace/ext/keybinding_menu", function(module) { + module.init(editor); + editor.showKeyboardShortcuts() + }) + } + }) + this.editor.on('change', () => { + this.beforeContent = this.editor.getValue() + this.$emit('change-content', this.editor.getValue()) + }); + + this.editor.getSession().on("changeAnnotation", ()=>{ + var annot = this.editor.getSession().getAnnotations(); + this.annots={error:0,warning:0,info:0}; + for (var key in annot){ + if (annot.hasOwnProperty(key)){ + this.annots[annot[key].type]+=1; + //console.log("[" + annot[key].row + " , " + annot[key].column + "] - \t" + annot[key].type+ "# " +annot[key].text); + } + } + //console.log(this.annots) + this.$emit('annotation',this.annots) + }); + if(this.events){ + this.events.$on('eventFired', (cmd) => { + if(cmd=="outline"){ + var row = this.editor.selection.getCursor().row + var toks=this.editor.session.getTokens(row).filter(function(t) { + return true + }) + console.log(toks); + }else this.command(cmd); + }); + } + } } ); /** @@ -606,7 +756,7 @@ Vue.filter('round', function(value, decimals) { - + @@ -644,7 +794,8 @@ Vue.filter('round', function(value, decimals) { "text/turtle":"turtle", "text/css":"css", "image/svg+xml":"svg" - } + }, + aceSettings: { } } }, methods: { @@ -745,6 +896,10 @@ Vue.filter('round', function(value, decimals) { var r=this.mimemap[mime] return r?r:"text" }, + onResize(){ + var h=window.innerHeight + console.log("height:",h) + }, leaving(event) { event.returnValue = "event seems to need to be set"; //debugger; @@ -764,6 +919,12 @@ Vue.filter('round', function(value, decimals) { var url=this.$route.query.url if(url) this.fetch(url) }, + beforeRouteEnter (to, from, next) { + settings.getItem('settings/ace') + .then( v =>{ + next(vm => {vm.aceSettings = v;}) + }) + }, beforeRouteLeave (to, from, next) { // called when the route that renders this component is about to // be navigated away from. @@ -804,7 +965,7 @@ Vue.filter('round', function(value, decimals) { - + @@ -853,7 +1014,8 @@ Vue.filter('round', function(value, decimals) { jobId: null, waiting: false, start: null, - jobState: {} + jobState: {}, + aceSettings:{} } }, methods:{ @@ -952,7 +1114,14 @@ Vue.filter('round', function(value, decimals) { this.showResult=true } }, - + beforeRouteEnter (to, from, next) { + settings.getItem('settings/ace') + .then( v =>{ + next(vm => { + console.log('eval settings: ',v); + vm.aceSettings = v; + })}) + }, created:function(){ localforage.getItem('eval/xq').then((value) => { this.xq=value || this.xq}); } @@ -1885,6 +2054,23 @@ body } + ); + const Repo=Vue.extend({template:` + +repository todo + + `, + + data: function(){ + return { + message: 'bad route!' + } + }, + created:function(){ + console.log("notfound",this.$route.query.q) + } +} + ); const Search=Vue.extend({template:` @@ -2051,10 +2237,42 @@ body ); const Acesettings=Vue.extend({template:` + + - + Not fully implemented + + + + + Theme + + + + + + + + Key binding + + + + + + + + + Font size + + + + + + + + Ace editor settings @@ -2091,64 +2309,46 @@ body - - - - - Theme - - - - - - - - Key binding - - - - - - - - - Font size - - - - - - - + + `, data () { return { - ace: { + xace: { enableSnippets: true, enableBasicAutocompletion: true, enableLiveAutocompletion: true, theme: "github", - keybinding: "Ace", - fontsize: "14px" - + keybinding: "ace", + fontsize: "14" }, - keybindings:[ 'ace', 'vim', 'emacs', 'textarea', 'sublime' ] + ace: {}, + keybindings:[ 'ace', 'vim', 'emacs', 'textarea', 'sublime' ], + themes: [ "github", "chaos","tomorrow"] } }, - + methods:{ + extend(obj, src) { + Object.keys(src).forEach(function(key) { if(!obj[key]) obj[key] = src[key]; }); + return obj; + } + }, beforeRouteEnter (to, from, next) { settings.getItem('settings/ace') - .then((v)=>{ - next(vm => vm.ace=v) - }) - }, - created: function () { + .then( v =>{ + next(vm => { vm.ace = v; }) + }) + }, + mounted: function () { + // console.log(this.ace,this.xace) + // this.extend(this.storeace,this.storeace); + // console.log("$$$",this.ace) }, watch: {"ace":{ handler:function(v){ @@ -2163,14 +2363,17 @@ body ); const Settings=Vue.extend({template:` +

Settings are currently only stored locally in the browser, using localstorage

+ Available settings - Editor settings + Editor +
.
- System information - + System information + keys? Wipe @@ -2179,7 +2382,8 @@ body `, data:function(){return { - keys:[] + keys: [], + showDev: false } }, methods:{ @@ -2199,8 +2403,8 @@ body ); const Tabs=Vue.extend({template:` - - + + menu @@ -2215,20 +2419,26 @@ body - - + + - Item {{ i }} - - favorite - + + + favorite + + Item {{ i }} more + + - + + + - {{ text }} + {{i}} - {{ text }} - + + `, @@ -2607,6 +2817,23 @@ created(){ console.log("timeline") } } + ); + const Users=Vue.extend({template:` + +users todo + + `, + + data: function(){ + return { + message: 'bad route!' + } + }, + created:function(){ + console.log("notfound",this.$route.query.q) + } +} + ); const Vuepoc=Vue.extend({template:` @@ -2916,35 +3143,44 @@ function debounce(func, wait, immediate) { }; // https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript -function fullscreen() { - var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) || +const Fullscreen={ + isInFullScreen(){ + return (document.fullscreenElement && document.fullscreenElement !== null) || (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || (document.mozFullScreenElement && document.mozFullScreenElement !== null) || (document.msFullscreenElement && document.msFullscreenElement !== null); - - var docElm = document.documentElement; - if (!isInFullScreen) { - if (docElm.requestFullscreen) { - docElm.requestFullscreen(); - } else if (docElm.mozRequestFullScreen) { - docElm.mozRequestFullScreen(); - } else if (docElm.webkitRequestFullScreen) { - docElm.webkitRequestFullScreen(); - } else if (docElm.msRequestFullscreen) { - docElm.msRequestFullscreen(); + }, + toggle(){ + var docElm = document.documentElement; + if (!this.isInFullScreen()) { + if (docElm.requestFullscreen) { + docElm.requestFullscreen(); + } else if (docElm.mozRequestFullScreen) { + docElm.mozRequestFullScreen(); + } else if (docElm.webkitRequestFullScreen) { + docElm.webkitRequestFullScreen(); + } else if (docElm.msRequestFullscreen) { + docElm.msRequestFullscreen(); + } + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } } - } else { - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - } + }, + install: function(Vue){ + Object.defineProperty(Vue.prototype, '$fullscreen', { + get () { return Fullscreen } + }) } }; +Vue.use(Fullscreen); + const router = new VueRouter({ base:"/vue-poc/ui/", @@ -2964,7 +3200,8 @@ const router = new VueRouter({ { path: '/tabs', component: Tabs,meta:{title:"tab test",requiresAuth: true} }, { path: '/login', component: Login,meta:{title:"login"} }, { path: '/edit', component: Edit,meta:{title:"Ace editor"} }, - + { path: '/server/users', component: Users,meta:{title:"Users"} }, + { path: '/server/repo', component: Repo,meta:{title:"Repository"} }, { path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} }, { path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"basexdb"} }, { path: '/ping', component: Ping,meta:{title:"Ping"} }, @@ -3043,6 +3280,8 @@ const app = new Vue({ children: [ {href: '/jobs',text: 'Running jobs',icon: 'dashboard'}, {href: '/logs',text: 'Server logs',icon: 'dns'}, + {href: '/server/users',text: 'Users',icon: 'supervisor_account'}, + {href: '/server/repo',text: 'Server code repository',icon: 'local_library'}, {href: '/ping',text: 'Ping',icon: 'update'} ]}, { @@ -3088,47 +3327,8 @@ const app = new Vue({ showAlert(msg){ this.alert.msg=moment().format()+" "+ msg this.alert.show=true - }, - fullscreenEnabled(){ - return document.fullscreenEnabled - }, - isInFullScreen(){ - return (document.fullscreenElement && document.fullscreenElement !== null) || - (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || - (document.mozFullScreenElement && document.mozFullScreenElement !== null) || - (document.msFullscreenElement && document.msFullscreenElement !== null) - }, - fullscreen(){ - // https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript - var isInFullScreen = this.isInFullScreen(); - alert(isInFullScreen); - var docElm = document.documentElement; - if (!isInFullScreen) { - if (docElm.requestFullscreen) { - docElm.requestFullscreen(); - } else if (docElm.mozRequestFullScreen) { - docElm.mozRequestFullScreen(); - } else if (docElm.webkitRequestFullScreen) { - docElm.webkitRequestFullScreen(); - } else if (docElm.msRequestFullscreen) { - docElm.msRequestFullscreen(); - } - } else { - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.webkitExitFullscreen) { - document.webkitExitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else if (document.msExitFullscreen) { - document.msExitFullscreen(); - } - } } }, - computed:{ - fullscreenIcon(){ return this.isInFullScreen()?'fullscreen_exit':'fullscreen'} - }, created(){ diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html index 23a1f95..49e991d 100644 --- a/src/vue-poc/static/app.html +++ b/src/vue-poc/static/app.html @@ -9,7 +9,7 @@ Vue Router Test - + @@ -19,7 +19,7 @@ - + @@ -33,7 +33,6 @@ - @@ -83,9 +82,6 @@ - - {{ fullscreenIcon }} -