update cliend side filtering rule

fetch/fetch.js

@@ -2,9 +2,11 @@
 
     const baseurl = "https://digitallibrary-external.fastretailing.com/";
     const fetchNumber = 30;
-    const sleepTime = 2000;
+    const sleepTime = 2500;
     let allowDebugMessage = true;
 
+    // adding the lightbox (control panel) to the body
+    // by grabbing the lightbox.html
     function addLightBox(){
         if(document.URL === baseurl){
             fetch(chrome.extension.getURL("fetch/lightbox.html"))
@@ -19,14 +21,14 @@
                     document.getElementById("fetch-lightbox").classList.remove("on");
                 });
 
-                // operation
-                // document.querySelector("#saveSession").addEventListener("click",saveSession);
-                // document.querySelector("#loadSession").addEventListener("click",loadSession);
-
                 document.querySelector("#searchSKUs").addEventListener("click", startFetching);
                 document.querySelector("#downloadSelectedSKUs").addEventListener("click",downloadFetching);
                 document.querySelector("#downloadAllSKUs").addEventListener("click",extensionDownloading);
-                document.querySelector("#filter-date").addEventListener("change",filterByDate);
+
+                document.querySelector("#filter-date").addEventListener("change",clientSideFilter);
+                document.querySelector("#show-product-box").addEventListener("change",clientSideFilter);
+                document.querySelector("#show-model-box").addEventListener("change",clientSideFilter);
+                document.querySelector("#filter-unrelated").addEventListener("change",clientSideFilter);
  
                 document.querySelector("#fetch-lightbox .debug-box").addEventListener("click",function(event){
                     if(!event.target.classList.contains("debug-box")){
@@ -86,18 +88,35 @@
             
             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"));
+
+                // determine whether it is product file
 
                 // create DOM string (same as innerHTML) then join it and append it
                 let DOMString = assetlist.map(asset => {
+
+                    // determine whether it is product file
+                    let classes = "";
+                    if( !(asset.file_extension === "jpg" || asset.file_extension === "gif") ||
+                        asset.filename.includes(`${SKU}_I0`) || 
+                        (asset.filename.includes("goods_") && !asset.filename.includes(SKU))){
+                        
+                        classes = "is-unrelated";
+                    
+                    }else if(asset.filename.includes(`goods_${SKU}_sub`) || 
+                        asset.filename.includes(`_${SKU}_chip`) || 
+                        (asset.filename.match(new RegExp(`^goods_[0-9]{2}_${SKU}$`)) && asset.models.length === 0) ){
+                        
+                        classes = "is-product";
+                    
+                    }else {
+                        classes = "is-model";
+                    }
+
                     return `
-                        <div class="asset-item">
+                        <div class="asset-item ${classes}">
                             <div><img src="/api/asset/${asset.id}/thumbnail/medium?r=1" loading="lazy"/></div>
                             <p>
-                                ${SKU}<br />
+                                <span class="asset-SKU">${SKU}</span><br />
                                 <span class="asset-name">${asset.filename}</span>.${asset.file_extension}
                             </p>
                             <span class="asset-id" hidden>${asset.id}</span>
@@ -108,8 +127,7 @@
                 }).join('');
                 container.insertAdjacentHTML('beforeend', DOMString);
 
-                // client side filteing
-                filterByDate();
+                clientSideFilter();
             }
 
             addDebugMessage(`SKU search completed.`);
@@ -219,17 +237,25 @@
 
     // filter asset by Date
     // only used on Search and Download
-    function filterByDate(){
+    function clientSideFilter(){
         let datefilter = 0;
+        let checkProduct = !document.getElementById("show-product-box").checked;
+        let checkModel = !document.getElementById("show-model-box").checked;
+        let checkRelated = document.getElementById("filter-unrelated").checked;
+
         if(document.getElementById("filter-date").value){
             datefilter = new Date().setHours(0,0,0,0) / 1000 - document.getElementById("filter-date").value * 86400;
         }
         document.querySelectorAll("#fetch-lightbox .debug-box .asset-item").forEach(asset => {
             asset.classList.remove("on");
-            if(asset.querySelector(".asset-date").innerHTML > datefilter){
+            asset.style.display = "none";
+
+            if(asset.querySelector(".asset-date").innerHTML > datefilter &&
+                (!checkProduct || (checkProduct && !asset.classList.contains("is-product"))) &&
+                (!checkModel   || (checkModel   && !asset.classList.contains("is-model"))) &&
+                (!checkRelated || (checkRelated && !asset.classList.contains("is-unrelated")))
+            ){
                 asset.style.display = "";
-            }else{
-                asset.style.display = "none";
             }
         });
     }
@@ -246,10 +272,13 @@
 
             if( item.filename.includes(`goods_${SKU}_sub`) || 
                 item.filename.includes(`_${SKU}_chip`) || 
-                (item.filename.includes(SKU) && item.models.length === 0 && item.file.filesize <= 1048576) ){  // file name include SKU, no model and size <= 1MB
+                (item.filename.match(new RegExp(`^goods_[0-9]{2}_${SKU}$`)) && item.models.length === 0)){  // file name include SKU and no model
                 arrlist["product"].push(item);
 
-            }else if( (item.filename.includes(SKU) && item.models.length > 0) || (item.filename.includes("_M0"))){
+            }else if( item.filename.includes(`${SKU}_I0`) ||
+                (item.filename.includes("goods") && !item.filename.includes(SKU))){
+                // not adding to model
+            }else{
                 arrlist["model"].push(item);
             }
             return arrlist;

fetch/lightbox.css

@@ -58,18 +58,17 @@
 }
 
 #fetch-lightbox .input-box{
+    margin-bottom: 15px;
     display: flex;
     align-items: center;
 }
 
-#fetch-lightbox input{
+#fetch-lightbox input[type="text"]{
     width: 100%;
     height: 30px;
-    margin-bottom: 15px;
 }
 
 #fetch-lightbox label{
-    margin-bottom: 15px;
     margin-right: 5px;
 }
 
@@ -132,7 +131,7 @@
 }
 
 #fetch-lightbox .spacing{
-    padding-top: 50px;
+    padding-top: 30px;
 }
 
 /* asset item*/ 
@@ -143,6 +142,8 @@
     
     display: inline-block;
     text-align: center;
+
+    word-wrap: break-word;
 }
 
 #fetch-lightbox .asset-item.on{

fetch/lightbox.html

@@ -19,12 +19,28 @@
         <div class="operation-box">
 
             <h6>Search and Download</h6>
+            <button id="searchSKUs">Search</button>
+            <button id="downloadSelectedSKUs">Download</button>
+
+            <div class="spacing"></div>
+
+            <h6>Filtering</h6>
             <div class="input-box">
                 <label>Date: </label>
                 <input type="text" id="filter-date" name="filter-date" value="">
             </div>
-            <button id="searchSKUs">Search</button>
-            <button id="downloadSelectedSKUs">Download</button>
+            <div class="input-box">
+                <label>Show Product Image</label>
+                <input type="checkbox" id="show-product-box" name="show-product-box" checked />
+            </div>
+            <div class="input-box">
+                <label>Show Model Image</label>
+                <input type="checkbox" id="show-model-box" name="show-model-box" checked />
+            </div>
+            <div class="input-box">
+                <label>Filter Unrelated</label>
+                <input type="checkbox" id="filter-unrelated" name="filter-unrelated" checked />
+            </div>
 
             <div class="spacing"></div>
 

manifest.json

@@ -3,7 +3,7 @@
 
     "version" : "2.0",
 
-    "description" : "The extension for downloading images - NEW",
+    "description" : "Extension for downloading digital library images.",
 
     "background" : {
         "scripts" : ["background.js"],