Skip to content

G
gu imageworks extension
Commit 5361f943 authored by edwin's avatar edwin
Browse files
Options

indent

parent 410d6b44
Hide whitespace changes
Inline Side-by-side
Showing with 140 additions and 140 deletions
fetch/fetch.js
View file @ 5361f943
(function(){
(function () {
const baseurl = "https://digitallibrary-external.fastretailing.com/";
const fetchNumber = 30;
......@@ -7,37 +7,37 @@
// adding the lightbox (control panel) to the body
// by grabbing the lightbox.html
function addLightBox(){
if(document.URL === baseurl){
function addLightBox() {
if (document.URL === baseurl) {
fetch(chrome.extension.getURL("fetch/lightbox.html"))
.then(response => response.text())
.then(result => document.body.insertAdjacentHTML('beforeend', result))
.then(()=>{
// turn on/ off lightbox
document.querySelector("#lightbox-switch").addEventListener("click",function(){
document.getElementById("fetch-lightbox").classList.add("on");
});
document.querySelector("#fetch-lightbox .close-btn").addEventListener("click",function(){
document.getElementById("fetch-lightbox").classList.remove("on");
});
document.querySelector("#searchSKUs").addEventListener("click", startFetching);
document.querySelector("#downloadSelectedSKUs").addEventListener("click",downloadFetching);
document.querySelector("#downloadAllSKUs").addEventListener("click",extensionDownloading);
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")){
event.target.closest('.asset-item').classList.toggle("on");
}
});
})
.catch(error => console.error("Unable to fetch lightbox.html" + error));
.then(response => response.text())
.then(result => document.body.insertAdjacentHTML('beforeend', result))
.then(() => {
// turn on/ off lightbox
document.querySelector("#lightbox-switch").addEventListener("click", function () {
document.getElementById("fetch-lightbox").classList.add("on");
});
document.querySelector("#fetch-lightbox .close-btn").addEventListener("click", function () {
document.getElementById("fetch-lightbox").classList.remove("on");
});
document.querySelector("#searchSKUs").addEventListener("click", startFetching);
document.querySelector("#downloadSelectedSKUs").addEventListener("click", downloadFetching);
document.querySelector("#downloadAllSKUs").addEventListener("click", extensionDownloading);
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")) {
event.target.closest('.asset-item').classList.toggle("on");
}
});
})
.catch(error => console.error("Unable to fetch lightbox.html" + error));
}
}
......@@ -47,19 +47,19 @@
return new Promise(resolve => setTimeout(resolve, ms));
}
function addDebugMessage(str){
if(allowDebugMessage){
function addDebugMessage(str) {
if (allowDebugMessage) {
let div = document.createElement("div");
let content = document.createTextNode(str);
div.appendChild(content);
document.querySelector("#fetch-lightbox .debug-box").appendChild(div);
}else{
} else {
document.querySelector("#fetch-lightbox .info-message").innerHTML = str;
}
}
function getConfig(){
function getConfig() {
return {
"method": "GET",
"mode": "cors",
......@@ -73,20 +73,20 @@
// Reading the textarea and fetch the SKUs one by one
// then create DOM and append it
async function startFetching(){
async function startFetching() {
let SKUString = document.getElementById("sku-list").value;
if(SKUString.length){
if (SKUString.length) {
let SKUlist = SKUString.split("\n");
let container = document.querySelector("#fetch-lightbox .debug-box");
allowDebugMessage = false;
// remove container innerHTML
while(container.hasChildNodes()){
while (container.hasChildNodes()) {
container.removeChild(container.firstChild);
}
document.querySelector("#fetch-lightbox .info-message").innerHTML = "";
for(let SKU of SKUlist){
for (let SKU of SKUlist) {
let assetlist = await fetchSKU(SKU);
// determine whether it is product file
......@@ -96,19 +96,19 @@
// 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))){
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 && asset.products.length === 1) ){
} 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 && asset.products.length === 1)) {
classes = "is-product";
}else {
} else {
classes = "is-model";
}
......@@ -132,27 +132,27 @@
addDebugMessage(`SKU search completed.`);
}else{
} else {
alert("It is empty on SKU list.");
}
}
// this function base on startFetching, will be used after user selected all assets
async function downloadFetching(){
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
"id": x.querySelector(".asset-id").innerHTML,
"fileVersion": x.querySelector(".asset-version").innerHTML
};
});
if(downloadlist.length >= 2)
if (downloadlist.length >= 2)
await downloadList(downloadlist, `asset_file`);
else if(downloadlist.length === 1)
else if (downloadlist.length === 1)
await downloadList(downloadlist, document.querySelector("#fetch-lightbox .debug-box .asset-item.on .asset-name").innerHTML);
else
alert("There is no selected asset.");
......@@ -162,19 +162,19 @@
}
// perform operation similar to old extension
async function extensionDownloading(){
async function extensionDownloading() {
let SKUString = document.getElementById("sku-list").value;
if(SKUString.length){
if (SKUString.length) {
let SKUlist = SKUString.split("\n");
let container = document.querySelector("#fetch-lightbox .debug-box");
allowDebugMessage = true;
while(container.hasChildNodes()){
while (container.hasChildNodes()) {
container.removeChild(container.firstChild);
}
document.querySelector("#fetch-lightbox .info-message").innerHTML = "";
for(let SKU of SKUlist){
for (let SKU of SKUlist) {
let assetlist = await fetchSKU(SKU);
let downloadlist = filtering(assetlist, SKU);
await downloadList(downloadlist["product"], `${SKU}_product`);
......@@ -182,14 +182,14 @@
await downloadList(downloadlist["model"], `${SKU}_model`);
await sleep(sleepTime);
}
}else{
} else {
alert("It is empty on SKU list.");
}
}
//grabbing single SKU data
async function fetchSKU(SKU = ""){
if(SKU.length == 0){
async function fetchSKU(SKU = "") {
if (SKU.length == 0) {
return;
}
......@@ -199,62 +199,62 @@
addDebugMessage(`Start fetching SKU=${SKU}`);
return await fetch(url,config)
.then(response => response.json())
.then(async function(result){
return await fetch(url, config)
.then(response => response.json())
.then(async function (result) {
await sleep(sleepTime);
await sleep(sleepTime);
//get json data
let assetlist = result.assets;
let scrollId = result.scrollId;
let total = result.total;
//get json data
let assetlist = result.assets;
let scrollId = result.scrollId;
let total = result.total;
// fetch the remaining item by simluating scroll operation
for(let i = total - fetchNumber ; i > 0 ; i -= fetchNumber){
addDebugMessage(`fetching SKU=${SKU} Process: ${i} remains`);
// fetch the remaining item by simluating scroll operation
for (let i = total - fetchNumber; i > 0; i -= fetchNumber) {
addDebugMessage(`fetching SKU=${SKU} Process: ${i} remains`);
let response = await fetch(`${baseurl}api/asset/more?scrollId=${scrollId}`, config)
.then(response => response.json())
.catch(error => {
addDebugMessage("Fetch error on fetchSKU - Scroll : " + error);
throw new Error("Fetch error on fetchSKU - Scroll : " + error);
});
let response = await fetch(`${baseurl}api/asset/more?scrollId=${scrollId}`, config)
.then(response => response.json())
.catch(error => {
addDebugMessage("Fetch error on fetchSKU - Scroll : " + error);
throw new Error("Fetch error on fetchSKU - Scroll : " + error);
});
assetlist = assetlist.concat(response.assets);
assetlist = assetlist.concat(response.assets);
await sleep(sleepTime / 2);
}
addDebugMessage(`fetching SKU=${SKU} completed, total item: ${total}`);
await sleep(sleepTime / 2);
}
addDebugMessage(`fetching SKU=${SKU} completed, total item: ${total}`);
return assetlist;
})
.catch(error => {
addDebugMessage("Fetch error on fetchSKU : " + error);
throw new Error("Fetch error on fetchSKU : " + error);
});
return assetlist;
})
.catch(error => {
addDebugMessage("Fetch error on fetchSKU : " + error);
throw new Error("Fetch error on fetchSKU : " + error);
});
}
// filter asset by Date
// only used on Search and Download
function clientSideFilter(){
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;
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");
asset.style.display = "none";
if(asset.querySelector(".asset-date").innerHTML > datefilter &&
if (asset.querySelector(".asset-date").innerHTML > datefilter &&
(!checkProduct || (checkProduct && !asset.classList.contains("is-product"))) &&
(!checkModel || (checkModel && !asset.classList.contains("is-model"))) &&
(!checkModel || (checkModel && !asset.classList.contains("is-model"))) &&
(!checkRelated || (checkRelated && !asset.classList.contains("is-unrelated")))
){
) {
asset.style.display = "";
}
});
......@@ -265,25 +265,25 @@
// usage:
// let downloadlist = filtering(assetlist, SKU);
function filtering(assetlist, SKU){
function filtering(assetlist, SKU) {
assetlist = assetlist.filter(asset => asset.file_extension === "jpg" || asset.file_extension === "gif");
let multilist = assetlist.reduce(function(arrlist, item){
let multilist = assetlist.reduce(function (arrlist, item) {
if( item.filename.includes(`goods_${SKU}_sub`) ||
item.filename.includes(`_${SKU}_chip`) ||
(item.filename.match(new RegExp(`^goods_[0-9]{2}_${SKU}$`)) && item.models.length === 0 && item.products.length === 1)){ // file name include SKU and no model
if (item.filename.includes(`goods_${SKU}_sub`) ||
item.filename.includes(`_${SKU}_chip`) ||
(item.filename.match(new RegExp(`^goods_[0-9]{2}_${SKU}$`)) && item.models.length === 0 && item.products.length === 1)) { // file name include SKU and no model
arrlist["product"].push(item);
}else if( item.filename.includes(`${SKU}_I0`) ||
(item.filename.includes("goods") && !item.filename.includes(SKU))){
} else if (item.filename.includes(`${SKU}_I0`) ||
(item.filename.includes("goods") && !item.filename.includes(SKU))) {
// not adding to model
}else{
} else {
arrlist["model"].push(item);
}
return arrlist;
}, {"product" : [], "model" : []}); // initial value
}, { "product": [], "model": [] }); // initial value
return multilist;
}
......@@ -292,14 +292,14 @@
// downloadList usage:
// await downloadList(downloadlist["product"], "123456_product");
// await downloadList(downloadlist["model"], "123456_model");
async function downloadList(assetlist, name){
if(assetlist.length >= 2){
async function downloadList(assetlist, name) {
if (assetlist.length >= 2) {
let id = assetlist.map(asset => asset.id);
let revision = assetlist.map(asset => asset.fileVersion);
let json = JSON.stringify({id : id, revision: revision});
let json = JSON.stringify({ id: id, revision: revision });
console.log(json);
// prepare header for POST request
......@@ -309,46 +309,46 @@
postheader.append("origin", "https://digitallibrary-external.fastretailing.com");
// send POST request for getting download token
let response = await fetch(`${baseurl}api/asset/downloadtoken`,{
let response = await fetch(`${baseurl}api/asset/downloadtoken`, {
"method": "POST",
"headers": postheader,
"mode": "cors",
"redirect": "follow",
"body": json
})
.then(response => response.json())
.catch(error => {
addDebugMessage("Fetch error on DownloadList - POST request: " + error);
throw new Error("Fetch error on DownloadList - POST request: " + error);
});
.then(response => response.json())
.catch(error => {
addDebugMessage("Fetch error on DownloadList - POST request: " + error);
throw new Error("Fetch error on DownloadList - POST request: " + error);
});
// send GET request for downloading the zip file
fetch(`/api/asset/download/${response.token}`, getConfig())
.then(response => response.blob())
.then(blob => {
// https://stackoverflow.com/questions/32545632/how-can-i-download-a-file-using-window-fetch
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = `${name}.zip`;
document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
a.click();
a.remove(); //afterwards we remove the element again
addDebugMessage(`download ${name}.zip completed`);
})
.catch(error => {
addDebugMessage("Fetch error on DownloadList - GET request: " + error);
throw new Error("Fetch error on DownloadList - GET request: " + error);
});
}else if(assetlist.length === 1){
.then(response => response.blob())
.then(blob => {
// https://stackoverflow.com/questions/32545632/how-can-i-download-a-file-using-window-fetch
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = `${name}.zip`;
document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
a.click();
a.remove(); //afterwards we remove the element again
addDebugMessage(`download ${name}.zip completed`);
})
.catch(error => {
addDebugMessage("Fetch error on DownloadList - GET request: " + error);
throw new Error("Fetch error on DownloadList - GET request: " + error);
});
} else if (assetlist.length === 1) {
// just use anchor tag to download single file
let id = assetlist[0].id;
let filename = assetlist[0].filename;
if(filename === undefined)
if (filename === undefined)
filename = name;
let downloadDOM = document.getElementById("download-trigger");
downloadDOM.setAttribute('href', `/api/asset/${id}/download/`);
......@@ -356,7 +356,7 @@
downloadDOM.click();
addDebugMessage(`download file ${filename} completed`);
}else{
} else {
addDebugMessage(`asset list is empty.`);
}
}
......
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