Merge pull request #5 from tzoug/add-url-support

Added manual url pasting support
tzoug · Sep 4, 2023 · 51cdd41 · 51cdd41
2 parents 6d5ca3e + e5c1f14
commit 51cdd41
Show file tree

Hide file tree

Showing 10 changed files with 263 additions and 153 deletions.
diff --git a/thingizip/manifest.json b/thingizip/manifest.json
@@ -1,13 +1,15 @@
 {
   "name": "ThingiZIP",
   "description": "A browser extension to easily download files from Thingiverse™",
-  "version": "3.2",
+  "version": "3.3",
   "manifest_version": 3,
   "action": {
     "default_popup": "src/popup/index.html"
   },
   "permissions": [
-    "storage",
+    "storage"
+  ],
+  "optional_permissions": [
     "activeTab"
   ],
   "icons": {

diff --git a/thingizip/src/components/body.svelte b/thingizip/src/components/body.svelte
@@ -5,12 +5,10 @@
   import { valueStore } from '../utils/valueStore';
 </script>
 
-<div class="p-4 mb-6">
-  {#if $valueStore == 'Home'}
-    <Home />
-  {:else if $valueStore == 'Recents'}
-    <RecentsPage />
-  {:else if $valueStore == 'Info'}
-    <Info />
-  {/if}
-</div>
+{#if $valueStore == 'Home'}
+  <Home />
+{:else if $valueStore == 'Recents'}
+  <RecentsPage />
+{:else if $valueStore == 'Info'}
+  <Info />
+{/if}
diff --git a/thingizip/src/components/home.svelte b/thingizip/src/components/home.svelte
@@ -6,11 +6,12 @@
   import Badge from './badge.svelte';
   import Welcome from './welcome.svelte';
   import Download from './download.svelte';
+  import { BASE_URL } from '../utils/constants';
 
   let isFirstLaunch = undefined;
+  let manualInputVal = undefined;
 
   let name = undefined;
-  let fileCount = undefined;
   let creatorName = undefined;
   let creatorCover = undefined;
   let addedDate = undefined;
@@ -22,46 +23,69 @@
   let commentCount = undefined;
   let viewCount = undefined;
 
-  displayValues();
+  getCurrentDetails();
 
-  function displayValues() {
-    const promise = fetchDetails();
+  function getCurrentDetails() {
+    let promise;
+    
+    if(manualInputVal != undefined && manualInputVal.startsWith(BASE_URL)){
+      promise = fetchDetails(manualInputVal);
+    }
+    else{
+      promise = fetchDetails(undefined);
+    }
 
     promise
       .then((details) => {
-        if (details != null && details != undefined) {
-          isFirstLaunch = false;
-
-          name = details['name'];
-          fileCount = details['file_count'];
-          likeCount = details['like_count'] == undefined ? '-' : details['like_count'];
-          collectCount = details['collect_count'] == undefined ? '-' : details['collect_count'];
-          commentCount = details['comment_count'] == undefined ? '-' : details['comment_count'];
-          viewCount = details['view_count'] == undefined ? '-' : details['view_count'];
-          creatorName = details['creator']['name'];
-          creatorUrl = details['creator']['public_url'];
-          creatorCover = details['creator']['thumbnail'];
-          thumbnail = details['thumbnail'];
-          publicUrl = details['public_url'];
-
-          let added = details['added'];
-          let dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
-          addedDate = new Date(added).toLocaleDateString();
-        } else {
-          isFirstLaunch = true;
-        }
+        displayDetails(details)
       })
       .catch((error) => {
         console.error('Error:', error);
       });
   }
+
+  function displayDetails(details){
+    if (details != null && details != undefined) {
+      isFirstLaunch = false;
+
+      name = details['name'];
+      likeCount = details['like_count'] == undefined ? '-' : details['like_count'];
+      collectCount = details['collect_count'] == undefined ? '-' : details['collect_count'];
+      commentCount = details['comment_count'] == undefined ? '-' : details['comment_count'];
+      viewCount = details['view_count'] == undefined ? '-' : details['view_count'];
+      creatorName = details['creator']['name'];
+      creatorUrl = details['creator']['public_url'];
+      creatorCover = details['creator']['thumbnail'];
+      thumbnail = details['thumbnail'];
+      publicUrl = details['public_url'];
+
+      let added = details['added'];
+      addedDate = new Date(added).toLocaleDateString();
+    } else {
+      isFirstLaunch = true;
+    }
+  }
 </script>
 
 {#if isFirstLaunch}
   <Welcome />
 {:else}
-  <div class="flex items-center justify-center">
-    <div class="w-full rounded-xl p-4 shadow-2xl shadow-blue-200/25">
+  <div class="flex flex-col items-center justify-center">
+    <div class="w-full">
+      <form on:submit|preventDefault={getCurrentDetails}>
+        <div class="flex">
+          <div class="relative w-full">
+            <input type="search" bind:value={manualInputVal} class="caret-current z-20 block w-full rounded-lg border border-l-2 border-gray-600 bg-gray-700 p-1.5 text-xs text-white placeholder:italic placeholder-gray-400 placeholder:text-xs" placeholder="https://www.thingiverse.com/thing:6145551" required />
+            <button type="submit" class="absolute right-0 top-0 h-full rounded-r-lg bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 px-3 py-2 text-center shadow-lg shadow-blue-800/80 hover:bg-gradient-to-br text-sm font-medium text-white">
+              <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div class="w-full rounded-xl mt-2 p-4 shadow-2xl shadow-blue-200/25">
       <div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
         <!-- Inner Header -->
         <div class="inline-flex items-center">

diff --git a/thingizip/src/components/info.svelte b/thingizip/src/components/info.svelte
@@ -1,6 +1,41 @@
-<div class="mb-2">
-  <h5 class="text-lg font-medium text-white">Quick Access</h5>
-</div>
+<script lang="ts">
+  import { removeActiveTabPermission, requestActiveTabPermission, getActiveTabPermission } from "../utils/helpers";
+
+  let isAccessGranted: boolean;
+
+  getPermission();
+  
+  function getPermission(){
+    getActiveTabPermission().then((result) => {
+      isAccessGranted = result;
+    })
+  }
+
+  function toggleActiveTabPermission(){
+    getPermission();
+
+    if(isAccessGranted){
+      removeActiveTabPermission();
+    }
+    else{
+      requestActiveTabPermission();
+    }
+
+    getPermission();
+  }
+
+</script>
+
+<h5 class="text-lg font-medium text-white">Permissions</h5>
+<h5 class="text-xs text-gray-300">Automatically detect when on a Thingiverse page.</h5>
+
+{#if isAccessGranted}
+  <button type="button" on:click={toggleActiveTabPermission} class="mt-2 rounded-lg bg-gradient-to-r from-red-500 via-red-600 to-red-700 px-4 py-1.5 text-center text-sm font-medium text-white shadow-lg shadow-red-800/80 hover:bg-gradient-to-br">Revoke Access</button>
+{:else}
+  <button type="button" on:click={toggleActiveTabPermission} class="mt-2 rounded-lg bg-gradient-to-r from-green-500 via-green-600 to-green-700 px-4 py-1.5 text-center text-sm font-medium text-white shadow-lg shadow-green-800/80 hover:bg-gradient-to-br">Grant Access</button>
+{/if}
+
+<h5 class="text-lg font-medium text-white my-2.5">Quick Access</h5>
 <div class="w-full rounded-lg border border-gray-600 bg-gray-700 text-white">
   <a
     href="https://www.thingiverse.com/"
@@ -352,37 +387,3 @@
     Firefox Addon Store
   </button>
 </div>
-<!-- Ressources -->
-<div class="mb-2 mt-5">
-  <h5 class="text-lg font-medium text-white">Ressources</h5>
-</div>
-<div class="w-full rounded-lg border broder-b border-gray-600 bg-gray-700 text-white">
-  <a
-    href="https://tailwindcss.com/"
-    target="_blank"
-    type="button"
-    class="relative inline-flex w-full items-center rounded-t-lg px-4 py-2 text-sm border-b font-medium border-gray-600 hover:bg-gray-600"
-    >Tailwind CSS
-  </a>
-  <a
-    href="https://svelte.dev/"
-    target="_blank"
-    type="button"
-    class="relative inline-flex w-full items-center px-4 py-2 text-sm font-medium border-b border-gray-600 hover:bg-gray-600"
-    >Svelte
-  </a>
-  <a
-    href="https://github.com/Stuk/jszip"
-    target="_blank"
-    type="button"
-    class="relative inline-flex w-full items-center px-4 py-2 text-sm font-medium border-b border-gray-600 hover:bg-gray-600"
-    >JSZip
-  </a>
-  <a
-    href="https://github.com/eligrey/FileSaver.js"
-    target="_blank"
-    type="button"
-    class="relative inline-flex w-full items-center rounded-b-lg px-4 py-2 text-sm font-medium border-gray-600 hover:bg-gray-600"
-    >FileSaver.js
-  </a>
-</div>
diff --git a/thingizip/src/components/main.svelte b/thingizip/src/components/main.svelte
@@ -4,8 +4,10 @@
   import Navbar from './navbar.svelte';
 </script>
 
-<div class="w-[22rem] h-[33rem] max-w-lg border shadow bg-gray-800 border-gray-700">
+<div class="w-[22rem] h-[36rem] max-w-lg border shadow caret-transparent bg-gray-800 border-gray-700">
   <Heading />
-  <Body />
-  <Navbar />
+  <div class="p-4 mb-6">
+    <Body />
+    <Navbar />
+  </div>
 </div>
diff --git a/thingizip/src/components/navbar.svelte b/thingizip/src/components/navbar.svelte
@@ -4,7 +4,6 @@
   let strokeWidth = 2.5;
 
   function handleClick(value) {
-    console.log(value);
     valueStore.set(value);
   }
 </script>

diff --git a/thingizip/src/components/recentsPage.svelte b/thingizip/src/components/recentsPage.svelte
@@ -4,7 +4,6 @@
 
   let recents: Object[];
   getRecentsFromStorage().then((res) => {
-    console.log(res);
     recents = res;
   });
 </script>