new file and dir (no buttons tho)
parent
98a92a3da0
commit
6626398cdf
|
@ -17,20 +17,6 @@ listing.redefineDownloadURLs = function () {
|
|||
})
|
||||
}
|
||||
|
||||
listing.newFileButton = function (event) {
|
||||
event.preventDefault()
|
||||
|
||||
let clone = document.importNode(templates.question.content, true)
|
||||
clone.querySelector('h3').innerHTML = 'New file'
|
||||
clone.querySelector('p').innerHTML = 'End with a trailing slash to create a dir.'
|
||||
clone.querySelector('.ok').innerHTML = 'Create'
|
||||
clone.querySelector('form').addEventListener('submit', listing.newFilePrompt)
|
||||
|
||||
document.querySelector('body').appendChild(clone)
|
||||
document.querySelector('.overlay').classList.add('active')
|
||||
document.querySelector('.prompt').classList.add('active')
|
||||
}
|
||||
|
||||
listing.newFilePrompt = function (event) {
|
||||
event.preventDefault()
|
||||
buttons.setLoading('new')
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
|
@ -35,41 +35,12 @@
|
|||
height: 100%;
|
||||
background: #fff;
|
||||
z-index: 9999;
|
||||
transition: .1s ease opacity;
|
||||
-webkit-transition: .5s ease opacity;
|
||||
}
|
||||
|
||||
#loading.done {
|
||||
-webkit-animation: 1s out forwards;
|
||||
animation: 1s out forwards;
|
||||
}
|
||||
|
||||
@-webkit-keyframes out {
|
||||
0% {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
99% {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes out {
|
||||
0% {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
99% {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
|
@ -121,34 +92,36 @@
|
|||
{{- if ne .User.StyleSheet "" -}}
|
||||
<style>{{ CSS .User.StyleSheet }}</style>
|
||||
{{- end -}}
|
||||
</head>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
var info = {
|
||||
user: JSON.parse('{{ Marshal .User }}'),
|
||||
req: JSON.parse('{{ Marshal . }}'),
|
||||
webdavURL: "{{ .WebDavURL }}",
|
||||
baseURL: "{{.BaseURL}}",
|
||||
ssl: (window.location.protocol === 'https:'),
|
||||
showInfo: false,
|
||||
showHelp: false,
|
||||
showDelete: false,
|
||||
showRename: false,
|
||||
showMove: false,
|
||||
selected: [],
|
||||
multiple: false
|
||||
}
|
||||
</script>
|
||||
<div id="app"></div>
|
||||
<div id="loading">
|
||||
<script>
|
||||
var info = {
|
||||
user: JSON.parse('{{ Marshal .User }}'),
|
||||
req: JSON.parse('{{ Marshal . }}'),
|
||||
webdavURL: "{{ .WebDavURL }}",
|
||||
baseURL: "{{.BaseURL}}",
|
||||
ssl: (window.location.protocol === 'https:'),
|
||||
showInfo: false,
|
||||
showHelp: false,
|
||||
showDelete: false,
|
||||
showRename: false,
|
||||
showMove: false,
|
||||
showNewFile: false,
|
||||
showNewDir: false,
|
||||
selected: [],
|
||||
multiple: false
|
||||
}
|
||||
</script>
|
||||
<div id="app"></div>
|
||||
|
||||
<div class="spinner">
|
||||
<div class="bounce1"></div>
|
||||
<div class="bounce2"></div>
|
||||
<div class="bounce3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loading">
|
||||
<div class="spinner">
|
||||
<div class="bounce1"></div>
|
||||
<div class="bounce2"></div>
|
||||
<div class="bounce3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= htmlWebpackPlugin.options.serviceWorkerLoader %>
|
||||
<%= htmlWebpackPlugin.options.serviceWorkerLoader %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -28,10 +28,11 @@
|
|||
</nav>
|
||||
<main>
|
||||
<listing v-if="req.kind === 'listing'"></listing>
|
||||
<preview v-if="req.kind === 'preview'"></preview>
|
||||
</main>
|
||||
|
||||
<preview v-if="req.kind === 'preview'"></preview>
|
||||
|
||||
<new-file-prompt v-if="showNewFile" :class="{ active: showNewFile }"></new-file-prompt>
|
||||
<new-dir-prompt v-if="showNewDir" :class="{ active: showNewDir }"></new-dir-prompt>
|
||||
<rename-prompt v-if="showRename" :class="{ active: showRename }"></rename-prompt>
|
||||
<delete-prompt v-if="showDelete" :class="{ active: showDelete }"></delete-prompt>
|
||||
<info-prompt v-if="showInfo" :class="{ active: showInfo }"></info-prompt>
|
||||
|
@ -60,6 +61,8 @@ import DownloadButton from './components/DownloadButton'
|
|||
import SwitchButton from './components/SwitchViewButton'
|
||||
import MoveButton from './components/MoveButton'
|
||||
import MovePrompt from './components/MovePrompt'
|
||||
import NewFilePrompt from './components/NewFilePrompt'
|
||||
import NewDirPrompt from './components/NewDirPrompt'
|
||||
import css from './css.js'
|
||||
|
||||
var $ = window.info
|
||||
|
@ -68,6 +71,8 @@ function updateColumnSizes () {
|
|||
let columns = Math.floor(document.querySelector('main').offsetWidth / 300)
|
||||
let items = css(['#listing.mosaic .item', '.mosaic#listing .item'])
|
||||
|
||||
if (columns === 0) columns = 1
|
||||
|
||||
items.style.width = `calc(${100 / columns}% - 1em)`
|
||||
}
|
||||
|
||||
|
@ -77,9 +82,35 @@ function resetPrompts () {
|
|||
$.showDelete = false
|
||||
$.showRename = false
|
||||
$.showMove = false
|
||||
$.showNewFile = false
|
||||
$.showNewDir = false
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', (event) => {
|
||||
function showRenameButton () {
|
||||
if ($.req.kind === 'listing') {
|
||||
if ($.selected.length === 1) {
|
||||
return $.user.allowEdit
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
return $.user.allowEdit
|
||||
}
|
||||
|
||||
function showDeleteButton () {
|
||||
if ($.req.kind === 'listing') {
|
||||
if ($.selected.length === 0) {
|
||||
return false
|
||||
}
|
||||
|
||||
return $.user.allowEdit
|
||||
}
|
||||
|
||||
return $.user.allowEdit
|
||||
}
|
||||
|
||||
function keydown (event) {
|
||||
// Esc!
|
||||
if (event.keyCode === 27) {
|
||||
resetPrompts()
|
||||
|
@ -99,8 +130,10 @@ window.addEventListener('keydown', (event) => {
|
|||
|
||||
// Del!
|
||||
if (event.keyCode === 46) {
|
||||
if (showDeleteButton()) {
|
||||
$.showDelete = true
|
||||
}
|
||||
}
|
||||
|
||||
// F1!
|
||||
if (event.keyCode === 112) {
|
||||
|
@ -110,8 +143,10 @@ window.addEventListener('keydown', (event) => {
|
|||
|
||||
// F2!
|
||||
if (event.keyCode === 113) {
|
||||
if (showRenameButton()) {
|
||||
$.showRename = true
|
||||
}
|
||||
}
|
||||
|
||||
// CTRL + S
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
|
@ -127,7 +162,25 @@ window.addEventListener('keydown', (event) => {
|
|||
// TODO: save file on editor!
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function startup () {
|
||||
updateColumnSizes()
|
||||
window.addEventListener('resize', updateColumnSizes)
|
||||
window.history.replaceState({
|
||||
url: window.location.pathname,
|
||||
name: document.title
|
||||
}, document.title, window.location.pathname)
|
||||
|
||||
window.addEventListener('keydown', keydown)
|
||||
|
||||
let loading = document.getElementById('loading')
|
||||
loading.classList.add('done')
|
||||
|
||||
setTimeout(function () {
|
||||
loading.parentNode.removeChild(loading)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
@ -146,51 +199,32 @@ export default {
|
|||
UploadButton,
|
||||
SwitchButton,
|
||||
MoveButton,
|
||||
MovePrompt
|
||||
MovePrompt,
|
||||
NewFilePrompt,
|
||||
NewDirPrompt
|
||||
},
|
||||
mounted: function () {
|
||||
updateColumnSizes()
|
||||
window.addEventListener('resize', updateColumnSizes)
|
||||
window.history.replaceState({
|
||||
url: window.location.pathname,
|
||||
name: document.title
|
||||
}, document.title, window.location.pathname)
|
||||
|
||||
document.getElementById('loading').classList.add('done')
|
||||
startup()
|
||||
},
|
||||
data: function () {
|
||||
return window.info
|
||||
},
|
||||
methods: {
|
||||
showOverlay: function () {
|
||||
return this.showInfo || this.showHelp || this.showDelete || this.showRename || this.showMove
|
||||
return $.showInfo ||
|
||||
$.showHelp ||
|
||||
$.showDelete ||
|
||||
$.showRename ||
|
||||
$.showMove ||
|
||||
$.showNewFile ||
|
||||
$.showNewDir
|
||||
},
|
||||
showUpload: function () {
|
||||
if (this.req.kind === 'editor') return false
|
||||
return $.user.allowNew
|
||||
},
|
||||
showDeleteButton: function () {
|
||||
if (this.req.kind === 'listing') {
|
||||
if (this.selected.length === 0) {
|
||||
return false
|
||||
}
|
||||
|
||||
return $.user.allowEdit
|
||||
}
|
||||
|
||||
return $.user.allowEdit
|
||||
},
|
||||
showRenameButton: function () {
|
||||
if (this.req.kind === 'listing') {
|
||||
if (this.selected.length === 1) {
|
||||
return $.user.allowEdit
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
return $.user.allowEdit
|
||||
},
|
||||
showDeleteButton: showDeleteButton,
|
||||
showRenameButton: showRenameButton,
|
||||
showMoveButton: function () {
|
||||
if (this.req.kind !== 'listing') {
|
||||
return false
|
||||
|
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div class="prompt">
|
||||
<h3>New directory</h3>
|
||||
<p>Write the name of the new directory.</p>
|
||||
<input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
|
||||
<div>
|
||||
<button class="ok" @click="submit">Create</button>
|
||||
<button class="cancel" @click="cancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import page from '../page'
|
||||
import webdav from '../webdav'
|
||||
|
||||
var $ = window.info
|
||||
|
||||
export default {
|
||||
name: 'new-dir-prompt',
|
||||
data: function () {
|
||||
return {
|
||||
name: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel: function () {
|
||||
$.showNewDir = false
|
||||
},
|
||||
submit: function (event) {
|
||||
event.preventDefault()
|
||||
if (this.new === '') return
|
||||
|
||||
let url = window.location.pathname + this.name + '/'
|
||||
url = url.replace('//', '/')
|
||||
|
||||
// buttons.setLoading('newDir')
|
||||
webdav.create(url)
|
||||
.then(() => {
|
||||
// buttons.setDone('newDir')
|
||||
page.open(url)
|
||||
})
|
||||
.catch(e => {
|
||||
// buttons.setDone('newDir', false)
|
||||
console.log(e)
|
||||
})
|
||||
|
||||
$.showNewDir = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div class="prompt">
|
||||
<h3>New file</h3>
|
||||
<p>Write the name of the new file.</p>
|
||||
<input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
|
||||
<div>
|
||||
<button class="ok" @click="submit">Create</button>
|
||||
<button class="cancel" @click="cancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import page from '../page'
|
||||
import webdav from '../webdav'
|
||||
|
||||
var $ = window.info
|
||||
|
||||
export default {
|
||||
name: 'new-file-prompt',
|
||||
data: function () {
|
||||
return {
|
||||
name: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel: function () {
|
||||
$.showNewFile = false
|
||||
},
|
||||
submit: function (event) {
|
||||
event.preventDefault()
|
||||
if (this.new === '') return
|
||||
|
||||
// buttons.setLoading('newFile')
|
||||
webdav.create(window.location.pathname + this.name)
|
||||
.then(() => {
|
||||
// buttons.setDone('newFile')
|
||||
page.open(window.location.pathname + this.name)
|
||||
})
|
||||
.catch(e => {
|
||||
// buttons.setDone('newFile', false)
|
||||
console.log(e)
|
||||
})
|
||||
|
||||
$.showNewFile = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -123,7 +123,6 @@ export default {
|
|||
|
||||
conn.onclose = () => {
|
||||
this.$el.classList.remove('ongoing')
|
||||
page.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -379,11 +379,10 @@ fieldset h3,
|
|||
main {
|
||||
width: 78%;
|
||||
margin-left: 20%;
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
* DROPDOWN *
|
||||
* * * * * * * * * * * * * * * */
|
||||
|
|
Binary file not shown.
|
@ -106,8 +106,8 @@ func New(scope string) *FileManager {
|
|||
Users: map[string]*User{},
|
||||
BeforeSave: func(r *http.Request, m *FileManager, u *User) error { return nil },
|
||||
AfterSave: func(r *http.Request, m *FileManager, u *User) error { return nil },
|
||||
static: http.FileServer(rice.MustFindBox("./_assets/dist_build/_").HTTPBox()),
|
||||
templates: rice.MustFindBox("./_assets/dist_build/templates"),
|
||||
static: http.FileServer(rice.MustFindBox("./_assets/dist_dev/_").HTTPBox()),
|
||||
templates: rice.MustFindBox("./_assets/dist_dev/templates"),
|
||||
}
|
||||
|
||||
m.SetScope(scope, "")
|
||||
|
|
Loading…
Reference in New Issue