Added Dropzone and removed import button, removed timestamp from json…

… format
Cankar001 · Feb 25, 2022 · 144e6b5 · 144e6b5
1 parent 375eccb
commit 144e6b5
Show file tree

Hide file tree

Showing 5 changed files with 290 additions and 140 deletions.
diff --git a/src/dropzone.css b/src/dropzone.css
@@ -0,0 +1,43 @@
+.dropzone
+{
+    width: 100%;
+    min-height: 100px;
+    height: auto;
+    color: #ccc;
+    line-height: 100px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+}
+
+.dropzone .dropzone-items
+{
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    position: relative;
+}
+
+.dropzone .aero-dropzone-text
+{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    transform: translateY(0px);
+    transition: all .3s ease 0s;
+}
+
+.dropzone.dragover
+{
+    border-color: #000;
+    color: #000;
+}
+
+.dropzone.wrongFile
+{
+    border-color: #f00;
+    color: #f00;
+}
+
diff --git a/src/dropzone.js b/src/dropzone.js
@@ -0,0 +1,117 @@
+var dropzone = document.querySelector('.dropzone');
+var filesForUpload = [];
+
+function uploadFiles()
+    {
+    for (let i = 0; i < filesForUpload.length; i++)
+        {
+        let file = filesForUpload[i];
+        let fileReader = new FileReader();
+
+        fileReader.addEventListener('load', function(e)
+            {
+            let fileContent = e.target.result;
+            importTabs(fileContent);
+            });
+
+        fileReader.readAsText(file);
+        }
+    }
+
+function insertIntoFileList(file)
+    {
+    for (let i = 0; i < filesForUpload.length; i++)
+        {
+        if (file.name === filesForUpload[i].name || file.type !== 'application/json')
+            {
+            // File already exists or is wrong file type
+            return;
+            }
+        }
+
+    filesForUpload.push(file);
+    }
+
+function traverseFileTree(item, path)
+    {
+    path = path || "";
+    if (item.isFile)
+        {
+        // Get file
+        item.file(function(file)
+            {
+            insertIntoFileList(file);
+            });
+        }
+    else if (item.isDirectory)
+        {
+        // Get folder contents
+        let dirReader = item.createReader();
+        dirReader.readEntries(function(entries)
+            {
+            for (var i=0; i<entries.length; i++)
+                {
+                traverseFileTree(entries[i], path + item.name + "/");
+                }
+            });
+        }
+    }
+
+dropzone.ondragover = function()
+    {
+    this.className = "dropzone dragover";
+    return false;
+    };
+
+dropzone.ondragleave = function()
+    {
+    this.className = "dropzone";
+    return false;
+    };
+
+dropzone.ondrop = function(e)
+    {
+    // prevent dropped files from opening in browser
+    e.preventDefault();
+
+    this.className = "dropzone";
+    let items = e.dataTransfer.items;
+    for (let i = 0; i < items.length; i++)
+        {
+        let item = items[i].webkitGetAsEntry();
+        if (item)
+            {
+            traverseFileTree(item);
+            }
+        }
+
+    let files = e.dataTransfer.files;
+    for (let i = 0; i < files.length; i++)
+        {
+        insertIntoFileList(files[i]);
+        }
+
+    uploadFiles();
+    };
+
+dropzone.addEventListener('click', function()
+    {
+    let element = document.createElement('input');
+    element.setAttribute('type', 'file');
+    element.click();
+
+    element.addEventListener('change', function(e)
+        {
+        let file = this.files[0];
+        let fileReader = new FileReader();
+
+        fileReader.addEventListener('load', function(e)
+            {
+            let fileContent = e.target.result;
+            importTabs(fileContent);
+            });
+
+        fileReader.readAsText(file);
+        });
+    });
+
diff --git a/src/popup.html b/src/popup.html
@@ -7,6 +7,7 @@
         <title>Tab Porter</title>
 
         <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" href="dropzone.css">
         <script src="popup.js"></script>
     </head>
     <body>
@@ -24,6 +25,12 @@ <h1 class="logo">
             </p>
         </div>
 
+        <div class="modal-dropzone-container">
+            <div class="dropzone">
+                <b>Drag- and drop</b> json files or <b>click</b> here to import new tabs
+            </div>
+        </div>
+
         <div class="modal-icons">
             <div class="flex-container">
                 <div class="flex">
@@ -33,10 +40,6 @@ <h1 class="logo">
                 <div class="flex">
                     <button type="button" class="exportTabs exportSelected">Export selected Tabs</button>
                 </div>
-
-                <div class="flex">
-                    <button type="button" class="importTabs">Import Tabs</button>
-                </div>
 
                 <div class="flex">
                     <button type="button" class="aboutTabPorter">About</button>
@@ -48,5 +51,6 @@ <h1 class="logo">
             </div>
         </div>
 
+        <script src="dropzone.js"></script>
     </body>
 </html>
diff --git a/src/popup.js b/src/popup.js
@@ -76,30 +76,9 @@ document.addEventListener("DOMContentLoaded", function()
         exportSelectedTabs();
         });
 
-    document.querySelector('.importTabs').addEventListener('click', function()
-        {
-        let element = document.createElement('input');
-        element.setAttribute('type', 'file');
-        element.click();
-
-        element.addEventListener('change', function(e)
-            {
-            let file = this.files[0];
-            let fileReader = new FileReader();
-
-            fileReader.addEventListener('load', function(e)
-                {
-                let fileContent = e.target.result;
-                importTabs(fileContent);
-                });
-
-            fileReader.readAsText(file);
-            });
-        });
-
     document.querySelector('.aboutTabPorter').addEventListener('click', function()
         {
-        alert("Showing about");
+        chrome.tabs.create({ url: "https://www.cankarka.com" });
         });
     });