Skip to content

G
gu imageworks extension
Commit 84fc6d17 authored by edwin's avatar edwin
Browse files
Options

update cliend side filtering rule

parent 2a47a865
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 27 deletions
fetch/fetch.js
View file @ 84fc6d17
......@@ -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
View file @ 84fc6d17
......@@ -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
View file @ 84fc6d17
......@@ -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
View file @ 84fc6d17
......@@ -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"],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment