cleanup makefile

src/script.js

@@ -0,0 +1,456 @@
+/* eslint-env browser */
+/* eslint-disable no-multi-str */
+
+function cancelDefault (e) {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+// RPC
+function rpcFs (call, args, cb) {
+  console.log('RPC', call, args)
+  const xhr = new window.XMLHttpRequest()
+  xhr.open('POST', location.origin + '/rpc')
+  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
+  xhr.send(JSON.stringify({ call, args }))
+  xhr.onload = cb
+}
+
+const prependPath = (a) => a.startsWith('/') ? a : decodeURI(location.pathname) + a
+
+// RPC Handlers
+const mkdirCall = (path, cb) => rpcFs('mkdirp', [prependPath(path)], cb)
+
+const mvCall = (path1, path2, cb) => rpcFs('mv', [path1, path2], cb)
+
+// Mkdir switch
+window.mkdirBtn = function () {
+  const folder = window.prompt('New folder name', '')
+
+  if (!folder) {
+    return
+  } else if (checkDupes(folder)) {
+    return window.alert('Name already already exists')
+  }
+
+  mkdirCall(folder, refresh)
+}
+
+function warning (e) {
+  return 'Leaving will interrupt transfer\nAre you sure you want to leave?'
+}
+
+function shouldRefresh () {
+  totalDone += 1
+  if (totalUploads === totalDone) {
+    window.onbeforeunload = null
+    console.log('Done uploading ' + totalDone + ' files')
+    totalDone = 0
+    totalUploads = 0
+    totalUploadsSize = 0
+    totalUploadedSize = []
+    barDiv.style.display = 'none'
+    refresh()
+  }
+}
+
+const checkDupes = test => allA.find(a => a.innerText.replace('/', '') === test)
+
+const barName = document.getElementById('dlBarName')
+
+const barPc = document.getElementById('dlBarPc')
+
+const barDiv = document.getElementById('progress')
+
+let totalDone = 0
+let totalUploads = 0
+let totalUploadsSize = 0
+let totalUploadedSize = []
+
+function updatePercent (ev) {
+  totalUploadedSize[ev.target.id] = ev.loaded
+  const ttlDone = totalUploadedSize.reduce((s, x) => s + x)
+  const pc = Math.floor(100 * ttlDone / totalUploadsSize) + '%'
+  barPc.innerText = pc
+  barPc.style.width = pc
+}
+
+function postFile (file, path) {
+  path = decodeURI(location.pathname).slice(0, -1) + path
+  window.onbeforeunload = warning
+
+  barDiv.style.display = 'block'
+  totalUploads += 1
+  totalUploadsSize += file.size
+  barName.innerText = totalUploads > 1 ? totalUploads + ' files' : file.name
+
+  const formData = new window.FormData()
+  formData.append(file.name, file)
+
+  const xhr = new window.XMLHttpRequest()
+  xhr.open('POST', location.origin + '/post')
+  xhr.setRequestHeader('gossa-path', encodeURIComponent(path))
+  xhr.upload.addEventListener('load', shouldRefresh)
+  xhr.upload.addEventListener('progress', updatePercent)
+  xhr.upload.id = totalUploads
+  xhr.send(formData)
+}
+
+const parseDomFolder = f => {
+  f.createReader().readEntries(e => e.forEach(i => parseDomItem(i)))
+}
+
+function parseDomItem (domFile, shoudCheckDupes) {
+  if (shoudCheckDupes && checkDupes(domFile.name)) {
+    return window.alert(domFile.name + ' already exists !')
+  }
+
+  if (domFile.isFile) {
+    domFile.file(f => postFile(f, domFile.fullPath))
+  } else {
+    // remove absolute path
+    const f = domFile.fullPath.startsWith('/') ? domFile.fullPath.slice(1) : domFile.fullPath
+    mkdirCall(f, () => parseDomFolder(domFile))
+  }
+}
+
+function pushEntry (entry) {
+  if (!entry.webkitGetAsEntry && !entry.getAsEntry) {
+    return window.alert('Unsupported browser ! Please update to chrome/firefox.')
+  } else {
+    entry = entry.webkitGetAsEntry() || entry.getAsEntry()
+  }
+
+  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)
+
+  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) => {
+  cancelDefault(e)
+  upGrid.style.display = 'none'
+}
+
+document.ondragover = (e) => {
+  cancelDefault(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 = decodeURIComponent(s.replace(location.href, ''))
+      const dest = t.innerText + root
+      mvCall(prependPath(root), prependPath(dest), refresh)
+    })
+  } else {
+    Array.from(e.dataTransfer.items).forEach(pushEntry)
+  }
+
+  return false
+}
+
+const getArrowSelected = () => document.querySelectorAll('i.arrow-selected')[0]
+
+function getASelected () {
+  const dest = getArrowSelected()
+  return !dest ? false : dest.parentElement.parentElement.querySelectorAll('a')[0]
+}
+
+function scrollToArrow () {
+  const pos = getArrowSelected().getBoundingClientRect()
+  window.scrollTo(0, pos.y)
+}
+
+function clearArrowSelected () {
+  const arr = getArrowSelected()
+  if (!arr) { return }
+  arr.classList.remove('arrow-selected')
+}
+
+function restoreCursorPos () {
+  clearArrowSelected()
+  const hrefSelected = localStorage.getItem('last-selected' + location.href)
+  let a = allA.find(el => el.href === hrefSelected)
+
+  if (!a) {
+    if (allA[0].innerText === '../') {
+      a = allA[1] || allA[0]
+    } else {
+      a = allA[0]
+    }
+  }
+
+  const icon = a.parentElement.parentElement.querySelectorAll('.arrow-icon')[0]
+  icon.classList.add('arrow-selected')
+  scrollToArrow()
+}
+
+const storeLastArrowSrc = src => localStorage.setItem('last-selected' + location.href, src)
+
+function moveArrow (down) {
+  const all = Array.from(document.querySelectorAll('i.arrow-icon'))
+  let i = all.findIndex(el => el.classList.contains('arrow-selected'))
+
+  clearArrowSelected()
+
+  if (down) {
+    i = all[i + 1] ? i + 1 : 0
+  } else {
+    i = all[i - 1] ? i - 1 : all.length - 1
+  }
+
+  all[i].classList.add('arrow-selected')
+  storeLastArrowSrc(getASelected().href)
+
+  const itemPos = all[i].getBoundingClientRect()
+
+  if (i === 0) {
+    window.scrollTo(0, 0)
+  } else if (i === all.length - 1) {
+    window.scrollTo(0, document.documentElement.scrollHeight)
+  } else if (itemPos.top < 0) {
+    window.scrollBy(0, -200)
+  } else if (itemPos.bottom > window.innerHeight) {
+    window.scrollBy(0, 200)
+  }
+}
+
+const refresh = () => browseTo(location.href)
+
+const prevPage = () => browseTo(location.href + '../')
+
+window.onpopstate = prevPage
+
+function browseTo (href) {
+  window.fetch(href).then(r => r.text().then(t => {
+    const parsed = new window.DOMParser().parseFromString(t, 'text/html')
+    const table = parsed.querySelectorAll('table')[0].innerHTML
+    document.body.querySelectorAll('table')[0].innerHTML = table
+
+    const title = parsed.head.querySelectorAll('title')[0].innerText
+    // check if is current path - if so skip following
+    if (document.head.querySelectorAll('title')[0].innerText !== title) {
+      document.head.querySelectorAll('title')[0].innerText = title
+      document.body.querySelectorAll('h1')[0].innerText = '.' + title
+      window.history.pushState({}, '', window.encodeURI(title))
+    }
+
+    init()
+  }))
+}
+
+function cpPath () {
+  var t = document.createElement('textarea')
+  t.value = getASelected().href
+  document.body.appendChild(t)
+  t.select()
+  document.execCommand('copy')
+  document.body.removeChild(t)
+}
+
+const pics = document.getElementById('pics')
+const picsHolder = document.getElementById('picsHolder')
+const picsLabel = document.getElementById('picsLabel')
+
+const picTypes = ['.jpg', '.jpeg', '.png', '.gif']
+const isPic = src => src && picTypes.find(type => src.toLocaleLowerCase().includes(type))
+
+const isPicMode = () => pics.style.display === 'flex'
+
+let imgsIndex
+let allImgs
+
+function setImage (src) {
+  src = src || allImgs[imgsIndex]
+  picsLabel.innerText = src.split('/').pop()
+  picsHolder.src = src
+  storeLastArrowSrc(src)
+}
+
+function picsOn (ifImgSelected, href) {
+  href = href || getASelected().href
+
+  if (isPicMode()) {
+    return false
+  } else if (ifImgSelected && !isPic(href)) {
+    return false
+  }
+
+  if (isPic(href)) {
+    imgsIndex = allImgs.findIndex(el => el.includes(href))
+    setImage()
+  } else {
+    setImage(picsHolder.src)
+  }
+
+  pics.style.display = 'flex'
+  return true
+}
+
+function picsToggle () {
+  if (!isPicMode()) {
+    picsOn()
+  } else {
+    pics.style.display = 'none'
+    restoreCursorPos()
+  }
+}
+
+function picsNav (down) {
+  if (!isPicMode()) { return false }
+
+  if (down) {
+    imgsIndex = allImgs[imgsIndex + 1] ? imgsIndex + 1 : 0
+  } else {
+    imgsIndex = allImgs[imgsIndex - 1] ? imgsIndex - 1 : allImgs.length - 1
+  }
+
+  setImage()
+  return true
+}
+
+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()
+}
+
+let cuts = []
+
+function onPaste () {
+  if (!cuts.length) { return refresh() }
+  const root = cuts.pop()
+  const pwd = decodeURIComponent(location.pathname)
+  const isFolderDest = getASelected().innerText.endsWith('/')
+  const filename = root.split('/').pop()
+  const dest = isFolderDest ? pwd + getASelected().innerText : pwd
+  mvCall(root, dest + filename, onPaste)
+}
+
+// Kb handler
+document.body.addEventListener('keydown', e => {
+  switch (e.code) {
+    case 'Tab':
+    case 'ArrowDown':
+      e.preventDefault()
+      return picsNav(true) || moveArrow(true)
+
+    case 'ArrowUp':
+      e.preventDefault()
+      return picsNav(false) || moveArrow(false)
+
+    case 'Enter':
+    case 'ArrowRight':
+      e.preventDefault()
+      return picsOn(true) || picsNav(true) || getASelected().click()
+
+    case 'ArrowLeft':
+      e.preventDefault()
+      return picsNav(false) || prevPage()
+
+    case 'Escape':
+      if (isPicMode()) {
+        e.preventDefault()
+        return picsToggle()
+      }
+  }
+
+  // Ctrl keys
+  if (e.ctrlKey || e.metaKey) {
+    switch (e.code) {
+      case 'KeyD':
+        e.preventDefault()
+        return isPicMode() || window.mkdirBtn()
+
+      case 'KeyC':
+        e.preventDefault()
+        return isPicMode() || cpPath()
+
+      case 'KeyX':
+        e.preventDefault()
+        const x = decodeURIComponent(getASelected().href).replace(location.origin, '')
+        cuts.push(prependPath(x))
+        return false
+
+      case 'KeyV':
+        e.preventDefault()
+        return onPaste()
+    }
+  }
+
+  // Any other key, for text search
+  if (e.code.includes('Key')) {
+    typedPath += e.code.replace('Key', '').toLocaleLowerCase()
+    window.clearTimeout(typedToken)
+    typedToken = setTimeout(() => { typedPath = '' }, 1000)
+    setCursorToClosestTyped()
+  }
+}, false)
+
+window.onClickLink = e => {
+  if (e.target.innerText.endsWith('/')) {
+    storeLastArrowSrc(e.target.href)
+    browseTo(e.target.href)
+    return false
+  } else if (picsOn(true, e.target.href)) {
+    return false
+  }
+  return true
+}
+
+function init () {
+  allA = Array.from(document.querySelectorAll('a.list-links'))
+  allImgs = allA.map(el => el.href).filter(isPic)
+  document.getElementsByClassName('icon-large-images')[0].style.display = allImgs.length > 0 ? 'inline-block' : 'none'
+
+  imgsIndex = 0
+  restoreCursorPos()
+  console.log('Browsed to ' + location.href)
+}
+
+init()
+
+window.picsToggle = picsToggle
+window.picsNav = () => picsNav(true)