implemented mv rpc

script.js

@@ -1,25 +1,34 @@
+/* eslint-env browser */
+/* global allA  */
+/* eslint-disable no-multi-str */
+
 function cancelDefault (e) {
   e.preventDefault()
   e.stopPropagation()
 }
 
-const checkDupes = test => allA.find(a => a.innerText.replace('/', '') === test)
-
+// RPC
 function rpcFs (call, args, cb) {
-  const decodedPath = decodeURI(window.location.pathname)
-  args = args.map(a => a.startsWith('/') ? a.slice(1) : a)
-  args = args.map(a => encodeURIComponent(decodedPath + a))
+  // Prefix path with pwd if not absolute
+  const decodedPath = decodeURI(location.pathname)
+  args = args.map(a => a.startsWith('/') ? a : decodedPath + a)
+  // args = args.map(a => encodeURIComponent(a))
 
+  console.log('RPC', call, args)
   const xhr = new window.XMLHttpRequest()
-  xhr.open('POST', window.location.origin + '/rpc')
+  xhr.open('POST', location.origin + '/rpc')
   xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
-  xhr.send(JSON.stringify({call, args}))
+  xhr.send(JSON.stringify({ call, args }))
   xhr.onload = cb
 }
 
+// RPC Handlers
 const mkdirCall = (path, cb) => rpcFs('mkdirp', [path], cb)
 
-function mkdir () {
+const mvCall = (path1, path2, cb) => rpcFs('mv', [path1, path2], cb)
+
+// Mkdir switch
+window.mkdirBtn = function () {
   const folder = window.prompt('New folder name', '')
 
   if (!folder) {
@@ -28,13 +37,14 @@ function mkdir () {
     return window.alert('Name already already exists')
   }
 
-  mkdirCall(folder, () => browseTo(location.href))
+  mkdirCall(folder, refresh)
 }
 
 function warning (e) {
   return 'Leaving will interrupt transfer\nAre you sure you want to leave?'
 }
 
+// File upload
 function newBar (name) {
   const id = Math.random().toString(36).substring(7)
 
@@ -61,10 +71,12 @@ function shouldRefresh () {
     totalDone = 0
     totalUploads = 0
     document.getElementById('progressBars').innerHTML = ''
-    browseTo(location.href)
+    refresh()
   }
 }
 
+const checkDupes = test => allA.find(a => a.innerText.replace('/', '') === test)
+
 function postFile (file, path) {
   totalUploads += 1
   window.onbeforeunload = warning
@@ -72,8 +84,8 @@ function postFile (file, path) {
   const xhr = new window.XMLHttpRequest()
   path = decodeURI(location.pathname).slice(0, -1) + path
 
-  xhr.open('POST', window.location.origin + '/post')
-  xhr.setRequestHeader("gossa-path", encodeURIComponent(path))
+  xhr.open('POST', location.origin + '/post')
+  xhr.setRequestHeader('gossa-path', encodeURIComponent(path))
   xhr.upload.id = newBar(path)
 
   const formData = new window.FormData()
@@ -100,7 +112,9 @@ function parseDomItem (domFile, shoudCheckDupes) {
   if (domFile.isFile) {
     domFile.file(f => postFile(f, domFile.fullPath))
   } else {
-    mkdirCall(domFile.fullPath, () => parseDomFolder(domFile))
+    // remove absolute path
+    const f = domFile.fullPath.startsWith('/') ? domFile.fullPath.slice(1) : domFile.fullPath
+    mkdirCall(f, () => parseDomFolder(domFile))
   }
 }
 
@@ -114,13 +128,35 @@ function pushEntry (entry) {
   parseDomItem(entry, true)
 }
 
+// Move files and folders
+const isTextEvent = e => e.dataTransfer.items[0].type === 'text/plain'
+
+const isFolder = e => e && e.href && e.innerText.endsWith('/')
+
+const resetBackgroundLinks = () => { allA.forEach(a => { a.parentElement.style.backgroundColor = 'unset' }) }
+
+const setBackgroundLinks = t => { t.style.backgroundColor = 'rgba(123, 123, 123, 0.2)' }
+
+const getLink = e => e.target.parentElement.querySelectorAll('a.list-links')[0]
+
 const upGrid = document.getElementById('drop-grid')
 
 document.ondragenter = (e) => {
   if (isPicMode()) { return }
   cancelDefault(e)
-  e.dataTransfer.dropEffect = 'copy'
-  upGrid.style.display = 'flex'
+
+  resetBackgroundLinks()
+
+  if (isTextEvent(e) && (isFolder(e.target) || isFolder(e.target.firstChild))) {
+    const t = getLink(e)
+    if (!t) return
+    setBackgroundLinks(t.parentElement)
+  }
+
+  if (!isTextEvent(e)) {
+    upGrid.style.display = 'flex'
+    e.dataTransfer.dropEffect = 'copy'
+  }
 }
 
 upGrid.ondragleave = (e) => {
@@ -133,11 +169,24 @@ document.ondragover = (e) => {
   return false
 }
 
+// Handle drop - upload or move
 document.ondrop = (e) => {
   cancelDefault(e)
   upGrid.style.display = 'none'
+  resetBackgroundLinks()
+
+  if (isTextEvent(e)) {
+    const t = e.target.classList.contains('fav') ? e.target : getLink(e)
+    if (!t || !t.innerText.endsWith('/')) return
+    e.dataTransfer.items[0].getAsString(s => {
+      const root = decodeURI(s.replace(location.href, ''))
+      const dest = t.innerText + root
+      mvCall(root, dest, refresh)
+    })
+  } else {
+    Array.from(e.dataTransfer.items).forEach(pushEntry)
+  }
 
-  Array.from(e.dataTransfer.items).forEach(pushEntry)
   return false
 }
 
@@ -164,7 +213,7 @@ function clearArrowSelected () {
 
 function restoreCursorPos () {
   clearArrowSelected()
-  const hrefSelected = window.localStorage.getItem('last-selected' + location.href)
+  const hrefSelected = localStorage.getItem('last-selected' + location.href)
   let a = allA.find(el => el.href === hrefSelected)
 
   if (!a) {
@@ -180,7 +229,7 @@ function restoreCursorPos () {
   scrollToArrow()
 }
 
-const storeLastArrowSrc = src => window.localStorage.setItem('last-selected' + location.href, src)
+const storeLastArrowSrc = src => localStorage.setItem('last-selected' + location.href, src)
 
 function moveArrow (down) {
   const all = Array.from(document.querySelectorAll('i.arrow-icon'))
@@ -210,12 +259,9 @@ function moveArrow (down) {
   }
 }
 
-function setCursorToClosest () {
-  const a = allA.find(el => el.innerText.toLocaleLowerCase().startsWith(path))
-  if (!a) { return }
-  storeLastArrowSrc(a.href)
-  restoreCursorPos()
-}
+const refresh = () => browseTo(location.href)
+
+const prevPage = () => browseTo(location.href + '../')
 
 window.onpopstate = prevPage
 
@@ -231,22 +277,12 @@ function browseTo (href) {
       document.head.querySelectorAll('title')[0].innerText = title
       document.body.querySelectorAll('h1')[0].innerText = '.' + title
       window.history.pushState({}, '', window.encodeURI(title))
-     }
+    }
 
     init()
   }))
 }
 
-function nextPage () {
-  const a = getASelected()
-  if (!a.href || !a.innerText.endsWith('/')) { return }
-  browseTo(a.href)
-}
-
-function prevPage () {
-  browseTo(window.location.href + "../")
-}
-
 function cpPath () {
   var t = document.createElement('textarea')
   t.value = getASelected().href
@@ -317,8 +353,16 @@ function picsNav (down) {
   return true
 }
 
-let path = ''
-let clearPathToken = null
+let allA
+let typedPath = ''
+let typedToken = null
+
+function setCursorToClosestTyped () {
+  const a = allA.find(el => el.innerText.toLocaleLowerCase().startsWith(typedPath))
+  if (!a) { return }
+  storeLastArrowSrc(a.href)
+  restoreCursorPos()
+}
 
 // Kb handler
 document.body.addEventListener('keydown', e => {
@@ -332,9 +376,11 @@ document.body.addEventListener('keydown', e => {
       e.preventDefault()
       return picsNav(false) || moveArrow(false)
 
+    case 'Enter':
+    case 'Space':
     case 'ArrowRight':
       e.preventDefault()
-      return picsOn(true) || picsNav(true) || nextPage()
+      return picsOn(true) || picsNav(true) || getASelected().click()
 
     case 'ArrowLeft':
       e.preventDefault()
@@ -345,10 +391,6 @@ document.body.addEventListener('keydown', e => {
         e.preventDefault()
         return picsToggle()
       }
-
-    case 'Enter':
-      e.preventDefault()
-      return picsOn(true) || picsNav(true) || getASelected().click()
   }
 
   // Ctrl keys
@@ -356,7 +398,7 @@ document.body.addEventListener('keydown', e => {
     switch (e.code) {
       case 'KeyD':
         e.preventDefault()
-        return isPicMode() || mkdir()
+        return isPicMode() || window.mkdirBtn()
 
       case 'KeyC':
         e.preventDefault()
@@ -366,31 +408,26 @@ document.body.addEventListener('keydown', e => {
 
   // Any other key, for text search
   if (e.code.includes('Key')) {
-    path += e.code.replace('Key', '').toLocaleLowerCase()
-    window.clearTimeout(clearPathToken)
-    clearPathToken = setTimeout(() => { path = '' }, 1000)
-    setCursorToClosest()
+    typedPath += e.code.replace('Key', '').toLocaleLowerCase()
+    window.clearTimeout(typedToken)
+    typedToken = setTimeout(() => { typedPath = '' }, 1000)
+    setCursorToClosestTyped()
   }
 }, false)
 
-function partialBrowseOnClickFolders () {
-  allA.forEach(a => {
-    if (!a.innerText.endsWith('/')) { return }
-    a.addEventListener('click', e => {
-      e.preventDefault()
-      storeLastArrowSrc(e.target.href)
-      browseTo(e.target.href)
-    })
-  }, false)
+window.onClickLink = e => {
+  if (!e.target.innerText.endsWith('/')) { return true }
+  storeLastArrowSrc(e.target.href)
+  browseTo(e.target.href)
+  return false
 }
 
 function init () {
-  allA = Array.from(document.querySelectorAll('a'))
+  allA = Array.from(document.querySelectorAll('a.list-links'))
   allImgs = allA.map(el => el.href).filter(isPic)
-  document.getElementById('picsToggle').style.display = allImgs.length > 0 ? 'flex' : 'none'
+  document.getElementsByClassName('icon-large-images')[0].style.display = allImgs.length > 0 ? 'inline-block' : 'none'
 
   imgsIndex = 0
-  partialBrowseOnClickFolders()
   restoreCursorPos()
   console.log('Browsed to ' + location.href)
 }
@@ -399,4 +436,3 @@ init()
 
 window.picsToggle = picsToggle
 window.picsNav = () => picsNav(true)
-window.mkdir = mkdir