☰

Downloader JS File

need library js-file-downloader

此脚本不应直接安装，它是供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.greatest.deepsurf.us/scripts/485684/1317487/Downloader%20JS%20File.js 

  1. class Downloader {
  2.       
  3.       MAX_DOWNLOAD = 5;
  4.       PAUSE_TIME = 1000;
  5.       progress = 0;
  6.       status = false
  7.  
  8.       constructor({ pause } = {}) {
  9.         if(jsFileDownloader === undefined) {
  10.           throw new Error("Can't make instance");
  11.         }
  12.         
  13.         if(pause) this.PAUSE_TIME = pause;
  14.  
  15.         let css = document.createElement("style");
  16.         css.innerText = `.downloader-container{background-color:#2f4f4f;width:calc(100% - 12px);max-width:520px;min-height:64px;position:fixed;bottom:10px;left:50%;transform:translateX(-50%);border-radius:8px;padding:.5em .75em;box-shadow:3px 4px 11px 0 #0000003b}.downloader-container .header{display:flex;justify-content:space-between;align-items:center;padding-bottom:.5em;border-bottom:1px solid #e2e2e259}.downloader-container .header h4{font-size:1.25em}.downloader-container .body{padding:.75em 0}.downloader-container .body ul{list-style-type:none;display:flex;flex-direction:column;gap:.25em}.downloader-container .body .file-item{display:flex;justify-content:space-between;gap:4px;background-color:#fff;padding:.25em;border-radius:4px}.downloader-container .body .file-item p{font-size:1em}`;
  17.         document.head.append(css);
  18.  
  19.         this.urls = []
  20.         this.__makeContainer();
  21.         this.__makeHeader();
  22.         this.__makeBody();
  23.       }
  24.  
  25.       __makeContainer() {
  26.         this._container = document.createElement("div");
  27.         this._container.classList.add("downloader-container")
  28.       }
  29.  
  30.       __makeHeader() {
  31.         this._header = document.createElement("div");
  32.         this._header.classList.add("header");
  33.         let title = document.createElement("h4");
  34.         title.innerText = "Downloader";
  35.  
  36.         this._count_files = document.createElement("p");
  37.         this._count_files.addEventListener("update", (e) => {
  38.           const { current, total } = e.detail;
  39.           this._count_files.innerText = `${current}/${total}`;
  40.         })
  41.         this.updateProgress(0);
  42.         this._header.append(title, this._count_files);
  43.  
  44.         this._container.append(this._header);
  45.       }
  46.  
  47.       __makeBody() {
  48.         let body = document.createElement("div");
  49.         body.classList.add("body");
  50.  
  51.         this.__containerItem = document.createElement("ul");
  52.         this.__containerItem.classList.add("files-containter")
  53.  
  54.         body.append(this.__containerItem);
  55.  
  56.         this._container.append(body);
  57.       }
  58.  
  59.       __makeItem(title) {
  60.         const item = document.createElement("li");
  61.         item.classList.add("file-item");
  62.  
  63.         const titleContainer = document.createElement("p");
  64.         titleContainer.innerText = title;
  65.  
  66.         const progress = document.createElement("span");
  67.         progress.innerText = "0%"
  68.  
  69.         item.append(titleContainer, progress);
  70.  
  71.         function updateProgress(percent) {
  72.           progress.innerText = `${percent} %`
  73.         }
  74.  
  75.         return {
  76.           item,
  77.           updateProgress,
  78.         }
  79.       }
  80.  
  81.       add_url(url, { title } = {}) {
  82.         if(title === undefined) {
  83.           title = `File - ${this.urls.length}`;
  84.         }
  85.         this.urls.push({ url, title })
  86.         this.updateProgress(0)
  87.       }
  88.  
  89.       add_urls(urls) {
  90.         for(const item of urls) {
  91.           add_url(item.url)
  92.         }
  93.       }
  94.  
  95.       async __download(url, title) {
  96.         const downloadContainer = document.createElement("li")
  97.         const progressFile = this.__makeItem(title || "File");
  98.         this.__containerItem.append(progressFile.item);
  99.         
  100.         const process = (event) => {
  101.           if (!event.lengthComputable) return; // guard
  102.  
  103.           var downloadingPercentage = Math.floor(event.loaded / event.total * 100);
  104.           console.log(downloadingPercentage)
  105.           progressFile.updateProgress(downloadingPercentage)
  106.         };
  107.  
  108.         new jsFileDownloader({ url, process })
  109.         .then(async () => {
  110.           progressFile.updateProgress(100);
  111.           await new Promise(res => setTimeout(() => res(), 500));
  112.           progressFile.item.remove();
  113.           Promise.resolve(true)
  114.         })
  115.         .catch(err => Promise.reject(err))
  116.       }
  117.  
  118.  
  119.       async start() {
  120.         if(this.status) return;
  121.  
  122.         this.progress = 0
  123.         this.updateProgress(this.progress);
  124.         document.body.append(this._container);
  125.         this.status = true;
  126.  
  127.         let countProgress = 0;
  128.         for(const [key, item] of Object.entries(this.urls)) {
  129.           this.__download(item.url)
  130.           .then(async () => {
  131.             this.progress += 1;
  132.             this.updateProgress(this.progress);
  133.             countProgress -= 1
  134.           })
  135.           .catch(e => {
  136.             countProgress -= 1
  137.             console.error(e)
  138.           })
  139.           
  140.           countProgress += 1;
  141.  
  142.           while(true) {
  143.             if(countProgress <= 5) break
  144.  
  145.             await new Promise(res => setTimeout(() => res(), this.PAUSE_TIME))
  146.           }
  147.  
  148.           console.log("Progress " + key)
  149.         }
  150.       }
  151.  
  152.       updateProgress(current) {
  153.         const event = new CustomEvent("update", { detail: { current, total: this.urls.length }});
  154.         this._count_files.dispatchEvent(event);
  155.       }
  156.     }