Fix and simplify move.
parent
af369cdea1
commit
32e66bb9c6
|
@ -38,6 +38,10 @@ export default {
|
||||||
document.getElementById('save-button').removeEventListener('click', this.save)
|
document.getElementById('save-button').removeEventListener('click', this.save)
|
||||||
},
|
},
|
||||||
mounted: function () {
|
mounted: function () {
|
||||||
|
if (this.req.content === undefined || this.req.content === null) {
|
||||||
|
this.req.content = ''
|
||||||
|
}
|
||||||
|
|
||||||
// Set up the main content editor.
|
// Set up the main content editor.
|
||||||
this.content = CodeMirror(document.getElementById('editor'), {
|
this.content = CodeMirror(document.getElementById('editor'), {
|
||||||
value: this.req.content,
|
value: this.req.content,
|
||||||
|
|
|
@ -70,7 +70,6 @@ export default {
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
this.fetchData()
|
this.fetchData()
|
||||||
console.log('created')
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'$route': 'fetchData',
|
'$route': 'fetchData',
|
||||||
|
@ -96,16 +95,16 @@ export default {
|
||||||
if (url[0] !== '/') url = '/' + url
|
if (url[0] !== '/') url = '/' + url
|
||||||
|
|
||||||
api.fetch(url)
|
api.fetch(url)
|
||||||
.then((trueURL) => {
|
.then((req) => {
|
||||||
if (!url.endsWith('/') && trueURL.endsWith('/')) {
|
if (!url.endsWith('/') && req.url.endsWith('/')) {
|
||||||
console.log(trueURL)
|
|
||||||
window.history.replaceState(window.history.state, document.title, window.location.pathname + '/')
|
window.history.replaceState(window.history.state, document.title, window.location.pathname + '/')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.$store.commit('updateRequest', req)
|
||||||
|
document.title = req.name
|
||||||
this.setLoading(false)
|
this.setLoading(false)
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.log(error)
|
|
||||||
this.error = error
|
this.error = error
|
||||||
this.setLoading(false)
|
this.setLoading(false)
|
||||||
})
|
})
|
||||||
|
@ -130,9 +129,13 @@ export default {
|
||||||
|
|
||||||
// Del!
|
// Del!
|
||||||
if (event.keyCode === 46) {
|
if (event.keyCode === 46) {
|
||||||
if (this.showDeleteButton && this.req.kind !== 'editor') {
|
if (this.req.kind === 'editor' ||
|
||||||
this.$store.commit('showHover', 'delete')
|
this.$route.name !== 'Files' ||
|
||||||
}
|
this.loading ||
|
||||||
|
!this.user.allowEdit ||
|
||||||
|
(this.req.kind === 'listing' && this.selectedCount === 0)) return
|
||||||
|
|
||||||
|
this.$store.commit('showHover', 'delete')
|
||||||
}
|
}
|
||||||
|
|
||||||
// F1!
|
// F1!
|
||||||
|
@ -143,9 +146,14 @@ export default {
|
||||||
|
|
||||||
// F2!
|
// F2!
|
||||||
if (event.keyCode === 113) {
|
if (event.keyCode === 113) {
|
||||||
if (this.showRenameButton) {
|
if (this.req.kind === 'editor' ||
|
||||||
this.$store.commit('showHover', 'rename')
|
this.$route.name !== 'Files' ||
|
||||||
}
|
this.loading ||
|
||||||
|
!this.user.allowEdit ||
|
||||||
|
(this.req.kind === 'listing' && this.selectedCount === 0) ||
|
||||||
|
(this.req.kind === 'listing' && this.selectedCount > 1)) return
|
||||||
|
|
||||||
|
this.$store.commit('showHover', 'rename')
|
||||||
}
|
}
|
||||||
|
|
||||||
// CTRL + S
|
// CTRL + S
|
||||||
|
|
|
@ -69,7 +69,7 @@ export default {
|
||||||
return this.req.kind === 'listing' && !this.loading && this.$route.name === 'Files'
|
return this.req.kind === 'listing' && !this.loading && this.$route.name === 'Files'
|
||||||
},
|
},
|
||||||
showSaveButton () {
|
showSaveButton () {
|
||||||
return (this.req.kind === 'editor' && !this.loading) || this.$route.name === 'User'
|
return (this.req.kind === 'editor' && !this.loading)
|
||||||
},
|
},
|
||||||
showSwitchButton () {
|
showSwitchButton () {
|
||||||
return this.req.kind === 'listing' && this.$route.name === 'Files' && !this.loading
|
return this.req.kind === 'listing' && this.$route.name === 'Files' && !this.loading
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<p>Choose new house for your file(s)/folder(s):</p>
|
<p>Choose new house for your file(s)/folder(s):</p>
|
||||||
|
|
||||||
<ul class="file-list">
|
<ul class="file-list">
|
||||||
<li @click="select" @dblclick="next" :key="item.name" v-for="item in items" :data-url="item.url">{{ item.name }}</li>
|
<li @click="select" @dblclick="next" :aria-selected="moveTo == item.url" :key="item.name" v-for="item in items" :data-url="item.url">{{ item.name }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>Currently navigating on: <code>{{ current }}</code>.</p>
|
<p>Currently navigating on: <code>{{ current }}</code>.</p>
|
||||||
|
@ -27,45 +27,36 @@ export default {
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
items: [],
|
items: [],
|
||||||
current: window.location.pathname
|
current: window.location.pathname,
|
||||||
|
moveTo: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: mapState(['req', 'selected', 'baseURL']),
|
computed: mapState(['req', 'selected', 'baseURL']),
|
||||||
mounted: function () {
|
mounted () {
|
||||||
if (this.$route.path !== '/files/') {
|
// If we're showing this on a listing,
|
||||||
this.items.push({
|
// we can use the current request object
|
||||||
name: '..',
|
// to fill the move options.
|
||||||
url: url.removeLastDir(this.$route.path) + '/'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.req.kind === 'listing') {
|
if (this.req.kind === 'listing') {
|
||||||
for (let item of this.req.items) {
|
this.fillOptions(this.req)
|
||||||
if (!item.isDir) continue
|
|
||||||
|
|
||||||
this.items.push({
|
|
||||||
name: item.name,
|
|
||||||
url: item.url
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Otherwise, we must be on a preview or editor
|
||||||
|
// so we fetch the data from the previous directory.
|
||||||
|
api.fetch(url.removeLastDir(this.$rute.path))
|
||||||
|
.then(this.fillOptions)
|
||||||
|
.catch(this.showError)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
move: function (event) {
|
move: function (event) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
|
||||||
let el = event.currentTarget
|
// Set the destination and create the promises array.
|
||||||
let promises = []
|
let promises = []
|
||||||
let dest = this.current
|
let dest = (this.moveTo === null) ? this.current : this.moveTo
|
||||||
buttons.loading('move')
|
buttons.loading('move')
|
||||||
|
|
||||||
let selected = el.querySelector('li[aria-selected=true]')
|
// Create a new promise for each file.
|
||||||
if (selected !== null) {
|
|
||||||
dest = selected.dataset.url
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let item of this.selected) {
|
for (let item of this.selected) {
|
||||||
let from = this.req.items[item].url
|
let from = this.req.items[item].url
|
||||||
let to = dest + '/' + encodeURIComponent(this.req.items[item].name)
|
let to = dest + '/' + encodeURIComponent(this.req.items[item].name)
|
||||||
|
@ -74,75 +65,69 @@ export default {
|
||||||
promises.push(api.move(from, to))
|
promises.push(api.move(from, to))
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$store.commit('showMove', false)
|
// Execute the promises.
|
||||||
|
|
||||||
Promise.all(promises)
|
Promise.all(promises)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
buttons.done('move')
|
buttons.done('move')
|
||||||
this.$router.push({page: dest})
|
this.$router.push({ path: dest })
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
buttons.done('move')
|
buttons.done('move')
|
||||||
this.$store.commit('showError', error)
|
this.$store.commit('showError', error)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
next: function (event) {
|
fillOptions (req) {
|
||||||
let uri = event.currentTarget.dataset.url
|
// Sets the current path and resets
|
||||||
this.json(uri)
|
// the current items.
|
||||||
.then((data) => {
|
this.current = req.url
|
||||||
this.current = uri
|
this.items = []
|
||||||
this.items = []
|
|
||||||
|
|
||||||
if (uri !== this.baseURL + '/') {
|
// If the path isn't the root path,
|
||||||
this.items.push({
|
// show a button to navigate to the previous
|
||||||
name: '..',
|
// directory.
|
||||||
url: url.removeLastDir(uri) + '/'
|
if (req.url !== '/files/') {
|
||||||
})
|
this.items.push({
|
||||||
}
|
name: '..',
|
||||||
|
url: url.removeLastDir(req.url) + '/'
|
||||||
let req = JSON.parse(data)
|
|
||||||
for (let item of req.items) {
|
|
||||||
if (!item.isDir) continue
|
|
||||||
|
|
||||||
this.items.push({
|
|
||||||
name: item.name,
|
|
||||||
url: item.uri
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
.catch(e => console.log(e))
|
}
|
||||||
|
|
||||||
|
// If this folder is empty, finish here.
|
||||||
|
if (req.items === null) return
|
||||||
|
|
||||||
|
// Otherwise we add every directory to the
|
||||||
|
// move options.
|
||||||
|
for (let item of req.items) {
|
||||||
|
if (!item.isDir) continue
|
||||||
|
|
||||||
|
this.items.push({
|
||||||
|
name: item.name,
|
||||||
|
url: item.url
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
json: function (url) {
|
showError (error) {
|
||||||
return new Promise((resolve, reject) => {
|
this.$store.commit('showError', error)
|
||||||
let request = new XMLHttpRequest()
|
},
|
||||||
request.open('GET', url)
|
next: function (event) {
|
||||||
request.setRequestHeader('Accept', 'application/json')
|
// Retrieves the URL of the directory the user
|
||||||
request.onload = () => {
|
// just clicked in and fill the options with its
|
||||||
if (request.status === 200) {
|
// content.
|
||||||
resolve(request.responseText)
|
let uri = event.currentTarget.dataset.url
|
||||||
} else {
|
|
||||||
reject(request.statusText)
|
api.fetch(uri)
|
||||||
}
|
.then(this.fillOptions)
|
||||||
}
|
.catch(this.showError)
|
||||||
request.onerror = () => reject(request.statusText)
|
|
||||||
request.send()
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
select: function (event) {
|
select: function (event) {
|
||||||
let el = event.currentTarget
|
// If the element is already selected, unselect it.
|
||||||
|
if (this.moveTo === event.currentTarget.dataset.url) {
|
||||||
if (el.getAttribute('aria-selected') === 'true') {
|
this.moveTo = null
|
||||||
el.setAttribute('aria-selected', false)
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
let el2 = this.$el.querySelector('li[aria-selected=true]')
|
// Otherwise select the element.
|
||||||
if (el2) {
|
this.moveTo = event.currentTarget.dataset.url
|
||||||
el2.setAttribute('aria-selected', false)
|
|
||||||
}
|
|
||||||
|
|
||||||
el.setAttribute('aria-selected', true)
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,13 +21,10 @@ function fetch (url) {
|
||||||
request.onload = () => {
|
request.onload = () => {
|
||||||
switch (request.status) {
|
switch (request.status) {
|
||||||
case 200:
|
case 200:
|
||||||
let req = JSON.parse(request.responseText)
|
resolve(JSON.parse(request.responseText))
|
||||||
store.commit('updateRequest', req)
|
|
||||||
document.title = req.name
|
|
||||||
resolve(req.url)
|
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
reject(request.status)
|
reject(request.responseText)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue