remove idArray after complete, add single image support on fetch search and download

background.js

@@ -38,6 +38,7 @@ chrome.extension.onMessage.addListener(function(request,sender,sendResponse){
 
     index = 0;
     noImages = "";
+    chrome.storage.local.remove('idArray');
   }
 });
 
@@ -55,5 +56,9 @@ chrome.downloads.onDeterminingFilename.addListener(function(item, suggest) {
   if(index >= skus.length) {
     console.log("Last file was downloaded");
     alert(noImages);
+
+    index = 0;
+    noImages = "";
+    chrome.storage.local.remove('idArray');
   }
 });

fetch/fetch.js

@@ -57,6 +57,7 @@
 
     function generateCookie(){
         let cookie = document.cookie;
+        // HTTPOnly cookie require manual input
         cookie += "; digitallibrary-session=" + document.getElementById("session-string").value;
         cookie += "; digitallibrary-session.sig=" + document.getElementById("session-sig-string").value;
         return cookie;
@@ -87,6 +88,8 @@
 
     /* Start of main function */
 
+    // Reading the textarea and fetch the SKUs one by one
+    // then create DOM and append it
     async function startFetching(){
         let SKUString = document.getElementById("sku-list").value;
         if(SKUString.length){
@@ -94,22 +97,26 @@
             let container = document.querySelector("#fetch-lightbox .debug-box");
             allowDebugMessage = false;
 
+            // remove container innerHTML
             while(container.hasChildNodes()){
                 container.removeChild(container.firstChild);
             }
-
+            
             for(let SKU of SKUlist){
                 let assetlist = await fetchSKU(SKU);
+                
+                // simple filtering
                 assetlist = assetlist.filter(asset => asset.file_extension === "jpg" || asset.file_extension === "gif");
                 assetlist = assetlist.filter(asset => !asset.filename.includes("_I0"));
 
+                // create DOM string (same as innerHTML) then join it and append it
                 let DOMString = assetlist.map(asset => {
                     return `
                         <div class="asset-item">
                             <div><img src="/api/asset/${asset.id}/thumbnail/medium?r=1" loading="lazy"/></div>
                             <p>
                                 ${SKU}<br />
-                                ${asset.filename}.${asset.file_extension}
+                                <span class="asset-name">${asset.filename}</span>.${asset.file_extension}
                             </p>
                             <span class="asset-id" hidden>${asset.id}</span>
                             <span class="asset-version" hidden>${asset.fileVersion}</span>
@@ -118,31 +125,43 @@
                     `;
                 }).join('');
                 container.insertAdjacentHTML('beforeend', DOMString);
+
+                // client side filteing
                 filterByDate();
             }
         }
     }
 
+    // this function base on startFetching, will be used after user selected all assets
     async function downloadFetching(){
+        // grab selected DOM, and turn from NodeList to Array
         let DOMArray = [...document.querySelectorAll("#fetch-lightbox .debug-box .asset-item.on")];
+        
+        // turn DOM into object array with id and file version
         let downloadlist = DOMArray.map(x => {
             return{
                 "id" : x.querySelector(".asset-id").innerHTML,
                 "fileVersion" :  x.querySelector(".asset-version").innerHTML
             };
         });
-        await downloadList(downloadlist, `asset_file`);
+
+        if(downloadlist.length >= 2)
+            await downloadList(downloadlist, `asset_file`);
+        else if(downloadlist.length === 1)
+            await downloadList(downloadlist, document.querySelector("#fetch-lightbox .debug-box .asset-item.on .asset-name").innerHTML);
 
         // remove the clicked state on asset item
         document.querySelectorAll("#fetch-lightbox .debug-box .asset-item.on").forEach(x => x.classList.remove("on"));
     }
 
+    // perform operation similar to old extension
     async function extensionDownloading(){
         let SKUString = document.getElementById("sku-list").value;
         if(SKUString.length){
             let SKUlist = SKUString.split("\n");
             let container = document.querySelector("#fetch-lightbox .debug-box");
             allowDebugMessage = true;
+
             while(container.hasChildNodes()){
                 container.removeChild(container.firstChild);
             }
@@ -158,6 +177,7 @@
         }
     }
 
+    //grabbing single SKU data
     async function fetchSKU(SKU = ""){
         if(SKU.length == 0){
             return;
@@ -292,8 +312,12 @@
             .catch(error => console.error(error));
         
         }else if(assetlist.length === 1){
+
+            // just use anchor tag to download single file
             let id = assetlist[0].id;
-            let filename = `${assetlist[0].filename}.${assetlist[0].file_extension}`
+            let filename = assetlist[0].filename;
+            if(filename === undefined)
+                filename = name;
             let downloadDOM = document.getElementById("download-trigger");
             downloadDOM.setAttribute('href', `/api/asset/${id}/download/`);
             downloadDOM.setAttribute('download', filename);