open files using a new tab bar && add visited style

.gitignore

@@ -1,3 +1,6 @@
 .vercel
 .env
-node_modules
+node_modules
+.idea
+.well-known
+package.json

public/app.js

@@ -52,6 +52,7 @@ function handler(e) {
 }
 
 function preview(name, size) {
+  document.title = name
   progress.start()
   breadcrumb(PATH)
   document.getElementById('readme').style.display = 'none'
@@ -191,7 +192,7 @@ function preview(name, size) {
       // https://mozilla.github.io/pdf.js/web/viewer.html
       // https://mozilla.github.io/pdf.js/legacy/web/viewer.html
       pushHtml(`
-        <code>File Name: ${name}</code><br>
+         <code>File Name: ${name}</code><br>
         <code>File Size: ${formatSize(size)}</code><br>
         <code>File Path: ${PATH}</code><br>
         <code>File Link: ${new URL(downloadUrl, location.href).toString()}</code><br>
@@ -220,7 +221,7 @@ function preview(name, size) {
         <code>File Path: ${PATH}</code><br>
         <code>File Link: ${new URL(downloadUrl, location.href).toString()}</code><br>
         <p>Sorry, we don't support previewing <code>${/\./.test(name) ? '.' + extension : name}</code> files as of today. You can <a data-dl="true" href="${downloadUrl}">download</a> the file directly.</p></div>`
-        , true)
+          , true)
       progress.finish()
   }
   document.getElementById('app').classList.remove('unclickable')
@@ -249,51 +250,51 @@ function onPopState(delay = 0) {
     method: 'GET',
     cache: CONFIG.fetch_cache,
   }).then(r => {
-      if (r.ok) {
-        return r.json()
-      } else {
-        throw `API: ${r.status}, ${r.statusText}`
-      }
-    })
-    .then(d => setTimeout(() => {
-      breadcrumb(PATH)
+    if (r.ok) {
+      return r.json()
+    } else {
+      throw `API: ${r.status}, ${r.statusText}`
+    }
+  })
+      .then(d => setTimeout(() => {
+        breadcrumb(PATH)
 
-      // console.log(d)
-      if ('value' in d) {
-        folderView(d)
-      } else if ('file' in d) {
-        preview(d.name, d.size)
-      } else if ('error' in d) {
-        const error = d.error
-        switch (error.code) {
-          case 'itemNotFound':
-            folderView({ value: [] })
-          default:
-            alert(error.code)
+        // console.log(d)
+        if ('value' in d) {
+          folderView(d)
+        } else if ('file' in d) {
+          preview(d.name, d.size)
+        } else if ('error' in d) {
+          const error = d.error
+          switch (error.code) {
+            case 'itemNotFound':
+              folderView({ value: [] })
+            default:
+              alert(error.code)
+          }
         }
-      }
-      window.isLoading = false
-      console.timeEnd('Loading')
-      document.getElementById('readme').style.display = 'none'
-      document.getElementById('app').classList.remove('unclickable')
-      progress.finish()
-      document.getElementById('list').classList.remove('hide')
-    }, delay))
-    .catch(e => setTimeout(() => {
-      window.isLoading = false
-      console.timeEnd('Loading')
-      document.getElementById('app').classList.remove('unclickable')
-      console.error(e)
-      progress.finish()
-      alert(e)
-    }, delay))
+        window.isLoading = false
+        console.timeEnd('Loading')
+        document.getElementById('readme').style.display = 'none'
+        document.getElementById('app').classList.remove('unclickable')
+        progress.finish()
+        document.getElementById('list').classList.remove('hide')
+      }, delay))
+      .catch(e => setTimeout(() => {
+        window.isLoading = false
+        console.timeEnd('Loading')
+        document.getElementById('app').classList.remove('unclickable')
+        console.error(e)
+        progress.finish()
+        alert(e)
+      }, delay))
 }
 function folderView(data) {
   const isIndex = PATH == '/'
   const parentPath = isIndex ? '/' : `${PATH.replace(/\/$/, '').split('/').slice(0, -1).join('/')}/`
   const parentUrl = path2Url(parentPath)
 
-  let list = `<div class="item" ${isIndex ? 'style="display: none;"' : ''}><i class="far fa-folder"></i>..<a href="${parentUrl}">...</a></div>`
+  let list = `<div class="item" ${isIndex ? 'style="display: none;"' : ''}><a href="${parentUrl}"><i class="far fa-folder"></i>...</a></div>`
 
   console.log('folder size:', data.value.length)
   const urlList = []
@@ -302,9 +303,9 @@ function folderView(data) {
     const { name, size, lastModifiedDateTime } = item
     const url = path2Url(`${PATH}${name}${isFile ? '' : '/'}`)
     list += `<div class="item">
-      <i class="${getIconClass(name, isFile)}"></i>${name}<div style="flex-grow: 1"></div>
-      <span class="size">${formatSize(size)}</span>
-      <a href="${url}" data-name="${name}" data-size="${size}" data-type="${isFile ? 'file' : 'folder'}" title="${new Date(lastModifiedDateTime).toLocaleString()}">${name}</a>
+      <a href="${new URL(url, location.href).toString()}" class="file" target="${isFile ?'_blank' : '_self'}" data-name="${name}" data-size="${size}"data-type="${isFile ? 'file' : 'folder'}" title="${new Date(lastModifiedDateTime).toLocaleString()}">
+      <i class="${getIconClass(name, isFile)}"></i>${name}<span class="size">${formatSize(size)}</span>
+      </a>
     </div>`
     !isFile && urlList.push(url)
 
@@ -382,16 +383,16 @@ function preload(p) {
 }
 function formatSize(s = 0) {
   return s < 1024
-    ? s + ' B'
-    : s < Math.pow(1024, 2)
-      ? parseFloat(s / Math.pow(1024, 1)).toFixed(1) + ' KiB'
-      : s < Math.pow(1024, 3)
-        ? parseFloat(s / Math.pow(1024, 2)).toFixed(1) + ' MiB'
-        : s < Math.pow(1024, 4)
-          ? parseFloat(s / Math.pow(1024, 3)).toFixed(1) + ' GiB'
-          : s < Math.pow(1024, 5)
-            ? parseFloat(s / Math.pow(1024, 4)).toFixed(1) + ' TiB'
-            : '> 1PiB'
+      ? s + ' B'
+      : s < Math.pow(1024, 2)
+          ? parseFloat(s / Math.pow(1024, 1)).toFixed(1) + ' KiB'
+          : s < Math.pow(1024, 3)
+              ? parseFloat(s / Math.pow(1024, 2)).toFixed(1) + ' MiB'
+              : s < Math.pow(1024, 4)
+                  ? parseFloat(s / Math.pow(1024, 3)).toFixed(1) + ' GiB'
+                  : s < Math.pow(1024, 5)
+                      ? parseFloat(s / Math.pow(1024, 4)).toFixed(1) + ' TiB'
+                      : '> 1PiB'
 }
 function breadcrumb(p = '/') {
   p = p.replace(/\/$/, '')
@@ -515,4 +516,4 @@ function getIconClass(name, isFile) {
   } else {
     return 'far fa-folder'
   }
-}
+}

public/index.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
-    name="viewport">
+        name="viewport">
   <meta content="ie=edge" http-equiv="X-UA-Compatible">
   <meta content="#fff" name="theme-color">
   <meta content="telephone=no" name="format-detection">
@@ -20,9 +20,9 @@
 
     :root {
       --base-font-family: Lato, -apple-system, BlinkMacSystemFont, Segoe UI,
-        Helvetica, Arial, pingfang sc, source han sans sc, noto sans cjk sc,
-        sarasa gothic sc, microsoft yahei, sans-serif, Apple Color Emoji,
-        Segoe UI Emoji;
+      Helvetica, Arial, pingfang sc, source han sans sc, noto sans cjk sc,
+      sarasa gothic sc, microsoft yahei, sans-serif, Apple Color Emoji,
+      Segoe UI Emoji;
       --code-font-family: Fira Code, SF Mono, Consolas, Monaco, Ubuntu Mono, monospace;
 
       --selection-color: currentColor;
@@ -112,7 +112,6 @@
       max-width: 1024px;
       margin: 0 auto;
     }
-
     .size {
       white-space: nowrap;
     }
@@ -145,7 +144,6 @@
       display: flex;
       align-items: center;
       text-decoration: none;
-      padding: .8rem 1rem;
       transition: .2s all ease-in-out;
     }
 
@@ -155,28 +153,41 @@
     }
 
     .item i {
-      margin-right: .5rem;
+      margin-right: .8rem;
       min-width: 20px;
       text-align: center;
     }
 
     .item .size {
       opacity: .6;
+      float: right;
     }
 
     .item a {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 0;
-      overflow: hidden;
+      padding: .8rem 1rem;
+      font-family: var(--base-font-family);
       width: 100%;
       height: 100%;
-      text-indent: -9999px;
-      opacity: 0;
-      background-color: var(--bg-item-a-color);
+      opacity: 1;
+      color: var(--text-color);
+    }
+    .item a.file:visited {
+      padding: .8rem 1rem;
+      font-family: var(--base-font-family);
+      width: 100%;
+      height: 100%;
+      opacity: 1;
+      color: #808080;
+    }
+    .item a:hover,
+    .item a:active {
+      padding: .8rem 1rem;
+      font-family: var(--base-font-family);
+      width: 100%;
+      height: 100%;
+      opacity: 1;
+      background-color: var(--bg-body-color );
     }
-
     a {
       color: #0070f3;
       text-decoration: none;
@@ -188,7 +199,6 @@
       opacity: .6;
       transition: opacity 0s;
     }
-
     .button-container {
       width: 100%;
       display: flex;
@@ -217,19 +227,16 @@
     }
 
     @media not all and (any-hover: hover) {
+
       .item a {
-        background-color: rgba(0, 0, 0, .1);
         transition: opacity 0s;
         -webkit-tap-highlight-color: transparent;
       }
-
-      .item a:hover {
-        opacity: 0;
-      }
-
+      .item a:hover,
       .item a:active {
         opacity: .6;
       }
+
     }
 
     footer {
@@ -256,7 +263,6 @@
       user-select: none !important;
     }
 
-    .unclickable,
     .unclickable a {
       -webkit-tap-highlight-color: transparent !important;
       -webkit-user-select: none !important;
@@ -323,29 +329,29 @@
 </head>
 
 <body>
-  <nav id="navbar">
-    <div class="brand">Mizore's OneDrive</div>
-  </nav>
-  <div class="container " id="app">
-    <div class="breadcrumb hide" id="breadcrumb"></div>
-    <div class="items hide" id="list"></div>
-    <div class="readme" id="readme"></div>
-    <div class="button-container" id="btn"></div>
-  </div>
-  <div id="flex-container" style="flex-grow: 1;"></div>
-  <footer id="footer">
-    <p>Powered&nbsp;by&nbsp;<a href="https://github.com/0wQ/onedrive-list" target="_blank">onedrive-list</a>,
-      hosted&nbsp;on&nbsp;<a href="https://vercel.com" target="_blank">Vercel</a>.</p>
-  </footer>
-  <script>
-    function appHeight() {
-      const doc = document.documentElement
-      doc.style.setProperty('--vh', (window.innerHeight * .01) + 'px')
-    }
-    window.addEventListener('resize', appHeight)
-    appHeight()
-  </script>
-  <script src="/app.js" async></script>
+<nav id="navbar">
+  <div class="brand">Mizore's OneDrive</div>
+</nav>
+<div class="container " id="app">
+  <div class="breadcrumb hide" id="breadcrumb"></div>
+  <div class="items hide" id="list"></div>
+  <div class="readme" id="readme"></div>
+  <div class="button-container" id="btn"></div>
+</div>
+<div id="flex-container" style="flex-grow: 1;"></div>
+<footer id="footer">
+  <p>Powered&nbsp;by&nbsp;<a href="https://github.com/0wQ/onedrive-list" target="_blank">onedrive-list</a>,
+    hosted&nbsp;on&nbsp;<a href="https://vercel.com" target="_blank">Vercel</a>.</p>
+</footer>
+<script>
+  function appHeight() {
+    const doc = document.documentElement
+    doc.style.setProperty('--vh', (window.innerHeight * .01) + 'px')
+  }
+  window.addEventListener('resize', appHeight)
+  appHeight()
+</script>
+<script src="/app.js" async></script>
 </body>
 
 </html>