Commit 438f880a authored by Matthieu Le Corre's avatar Matthieu Le Corre

switch to Vue.js

Signed-off-by: Matthieu Le Corre's avatarMatthieu Le Corre <matthieu.lecorre@univ-nantes.fr>
parent dcf45b0f
......@@ -19,52 +19,6 @@
background-size: 16px;
}
/*button*/
#whiteboard-sharebtn {
position: absolute;
top:0 ;
right: 60px ;
width: 30px ;
height: 30Px ;
z-index: inherit;
}
#whiteboard-sharebtn:hover {
border: 1px solid silver ;
border-radius: 2px ;
}
#whiteboard-savebtn {
position: absolute;
top:0 ;
right: 30px ;
width: 30px ;
height: 30Px ;
z-index: inherit;
}
#whiteboard-savebtn:hover {
border: 1px solid silver ;
border-radius: 2px ;
}
#whiteboard-closebtn {
position: absolute;
top:0 ;
right: 0 ;
width: 30px ;
height: 30Px ;
z-index: inherit;
}
#whiteboard-closebtn:hover {
border: 1px solid silver ;
border-radius: 2px ;
}
/*Editor stuff*/
.literally {
background-color: white !important;
......@@ -74,6 +28,7 @@
.lc-options.horz-toolbar {
background-color: white !important;
border-bottom: 1px solid silver !important;
height: 36px !important;
}
.lc-picker {
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -72,7 +72,7 @@ class CollaborationController extends Controller {
*
**/
public function getUserList($id) {
return $this->engine->getUserList() ;
return $this->engine->getUserList($id) ;
}
/**
......
......@@ -3832,6 +3832,61 @@
}
}
},
"eslint-plugin-html": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-6.0.2.tgz",
"integrity": "sha512-Ik/z32UteKLo8GEfwNqVKcJ/WOz/be4h8N5mbMmxxnZ+9aL9XczOXQFz/bGu+nAGVoRg8CflldxJhONFpqlrxw==",
"dev": true,
"requires": {
"htmlparser2": "^4.1.0"
},
"dependencies": {
"domelementtype": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
"integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==",
"dev": true
},
"domhandler": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.0.0.tgz",
"integrity": "sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==",
"dev": true,
"requires": {
"domelementtype": "^2.0.1"
}
},
"domutils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.0.0.tgz",
"integrity": "sha512-n5SelJ1axbO636c2yUtOGia/IcJtVtlhQbFiVDBZHKV5ReJO1ViX7sFEemtuyoAnBxk5meNSYgA8V4s0271efg==",
"dev": true,
"requires": {
"dom-serializer": "^0.2.1",
"domelementtype": "^2.0.1",
"domhandler": "^3.0.0"
}
},
"entities": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
"integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==",
"dev": true
},
"htmlparser2": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.1.0.tgz",
"integrity": "sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==",
"dev": true,
"requires": {
"domelementtype": "^2.0.1",
"domhandler": "^3.0.0",
"domutils": "^2.0.0",
"entities": "^2.0.0"
}
}
}
},
"eslint-plugin-import": {
"version": "2.20.2",
"resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.20.2.tgz",
......
<--
<!--
- @author Matthieu Le Corre <matthieu.lecorre@univ-nantes.fr>
-
- @license GNU AGPL version 3 or any later version
......@@ -19,18 +19,92 @@
-->
<template>
<div id="{{ app }}-editor">
This is {{ app }}
</div>
<Content :id="app" :app-name="appName">
<button class="icon-close" @click="close" />
<button class="icon-save" @click="save" />
<button class="icon-menu-sidebar" @click="sidebar" />
<ul v-if="userList.length > 1" class="AvatarList">
<li v-for="user in userList" :key="userList.indexOf(user)">
<Avatar :user="user" />
</li>
</ul>
<AppContent :id="apped">
Loading {{ appName }} ...
</AppContent>
</Content>
</template>
<script>
import Content from '@nextcloud/vue/dist/Components/Content'
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
import Avatar from '@nextcloud/vue/dist/Components/Avatar'
import { emit } from '@nextcloud/event-bus'
export default {
name: 'prototypeView',
data: function() {
return {
app: 'whiteboard'
}
}
name: 'PrototypeView',
components: {
Content,
AppContent,
Avatar,
},
props: {
appName: String,
filename: String,
context: Object,
app: String,
apped: String,
},
data: function() {
return {
userList: this.$parent.userList,
}
},
methods: {
save() {
emit(this.appName + '::saveClick')
},
close() {
emit(this.appName + '::closeClick')
},
sidebar() {
if (!document.getElementById('app-sidebar')) {
OCA.Files.Sidebar.open(this.context.dir + '/' + this.filename)
} else {
OCA.Files.Sidebar.close()
}
},
},
}
</script>
<style scoped>
button {
position: relative;
float:right ;
top: 0;
width: 30px;
height: 30px;
opacity: .5;
z-index: inherit;
border-width: 0px ;
}
button:hover {
opacity: 1;
}
.AvatarList {
position: relative;
float: right;
z-index: inherit;
padding-right: 10px;
z-index: inherit;
margin-top: 2px ;
display: flex ;
direction: rtl ;
}
.AvatarList li {
margin-left: 2px ;
}
</style>
......@@ -40,9 +40,6 @@ export default {
this.filename = filename
this.context = context
this.SSE_URL = generateUrl('apps/' + this.appName + '/collaboration/event')
this.SSE_OPT = { withCredentials: true }
this.init().then(function(data) {
// console.log('CE : Collaboration started for ' + self.appName)
self.addUser()
......@@ -53,6 +50,11 @@ export default {
steps.data.forEach(step => emit(self.appName + '::externalAddStep', step))
})
// get user connected to the file
self.getUserList().then(function(users) {
emit(self.appName + '::usersListChanged', users)
})
// start pulling for change
self.communicationStarted = true
// console.log('CE : starting communication ')
......@@ -119,7 +121,6 @@ export default {
getSteps: function() {
const url = generateUrl('apps/' + this.appName + '/collaboration/getsteps')
// console.log('CE : Getting initial steps')
const ajx = axios.get(url, {
params: {
id: this.id,
......@@ -129,6 +130,16 @@ export default {
return ajx
},
getUserList: function() {
const url = generateUrl('apps/' + this.appName + '/collaboration/getuserlist')
const ajx = axios.get(url, {
params: {
id: this.id,
},
})
return ajx
},
startCommunication: function() {
const self = this
......@@ -140,7 +151,14 @@ export default {
}
})
if (self.communicationStarted === true) {
// reload long polling
self.startCommunication()
// and for check users
self.getUserList().then(function(users) {
emit(self.appName + '::usersListChanged', users)
})
}
})
},
......@@ -161,7 +179,6 @@ export default {
stopCommunication: function() {
this.communicationStarted = false
// this.source.close() ;
},
}
/* eslint-env jquery */
/**
* @author Matthieu Le Corre <matthieu.lecorre@univ-nantes.fr>
*
......@@ -25,8 +23,8 @@ import collaborationEngine from './collaboration.js'
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
import { imagePath } from '@nextcloud/router'
// import Vue from 'vue'
// import prototypeView from './prototypeView'
import Vue from 'vue'
import PrototypeView from './PrototypeView'
/**
* @namespace ApplicationPrototype
......@@ -45,7 +43,7 @@ export default {
this.NewFileMenu.APP_EXT = APP_EXT
this.NewFileMenu.APP_MIME = APP_MIME
// this.container = '<div id=app-content-' + this.APP_NAME + '><div id=' + this.APP_NAME + '-editor></div></div>'
this.userList = []
OC.Plugins.register('OCA.Files.NewFileMenu', this.NewFileMenu)
this.registerFileActions()
......@@ -60,58 +58,38 @@ export default {
const container = document.createElement('div')
container.id = 'app-content-' + this.APP_NAME
const editor = document.createElement('div')
editor.id = this.APP_NAME + '-editor'
container.append(editor)
document.getElementById('app-content').appendChild(container)
document.getElementById('app-navigation').classList.add('hidden')
/*
Vue.prototype.t = window.t
Vue.prototype.n = window.n
Vue.prototype.OCA = window.OCA
const vm = new Vue({
el: '#whiteboard-container',
render: h => h(prototypeView),
})
vm.$mount(container)
*/
document.getElementById('app-content').appendChild(container)
document.getElementById('app-navigation').classList.add('hidden')
// close button
const closebtn = document.createElement('div')
closebtn.id = this.APP_NAME + '-closebtn'
closebtn.classList.add('icon-close')
container.append(closebtn)
closebtn.addEventListener('click', function() {
self.stopEdit()
this.vm = new Vue({
data: {
userList: this.userList,
},
render: h => h(
PrototypeView,
{
props: {
appName: this.APP_NAME,
filename: filename,
context: context,
app: 'app-content-whiteboard',
apped: 'whiteboard-editor',
},
}
),
})
// save button
const savebtn = document.createElement('div')
savebtn.id = this.APP_NAME + '-savebtn'
savebtn.classList.add('icon-save')
this.vm.$mount(container)
container.append(savebtn)
savebtn.addEventListener('click', function() {
subscribe(this.APP_NAME + '::saveClick', function() {
self.saveEdit()
})
// share button
const sharebtn = document.createElement('div')
sharebtn.id = this.APP_NAME + '-sharebtn'
sharebtn.classList.add('icon-menu-sidebar')
container.append(sharebtn)
sharebtn.addEventListener('click', function() {
if (!document.getElementById('app-sidebar')) {
OCA.Files.Sidebar.open(context.dir + '/' + filename)
} else {
OCA.Files.Sidebar.close()
}
subscribe(this.APP_NAME + '::closeClick', function() {
self.stopEdit()
})
},
......@@ -192,8 +170,12 @@ export default {
self.ED.applyChange(data)
})
// engine tells us hat someone arrived into the session
// subscribe(this.APP_NAME+"::newUser",this.addUser) ;
// engine tells us that users list changed
subscribe(this.APP_NAME + '::usersListChanged', this.ECU = (users) => {
this.userList.length = 0
users.data.forEach(user => this.userList.push(user.userId))
// console.log(this.userList)
})
},
......
......@@ -13,14 +13,14 @@ module.exports = {
},
module: {
rules: [
/*{
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
},*/
},
{
test: /\.(js|vue)$/,
use: 'eslint-loader',
......@@ -47,7 +47,7 @@ module.exports = {
},
plugins: [
new VueLoaderPlugin(),
//new StyleLintPlugin(),
new StyleLintPlugin(),
],
resolve: {
extensions: ['*', '.js', '.vue'],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment