Downloader JS File

need library js-file-downloader
此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/485684/1317487/Downloader%20JS%20File.js
提问、发表评价，或者举报这个脚本。
Wrap lines
class Downloader {
      
      MAX_DOWNLOAD = 5;
      PAUSE_TIME = 1000;
      progress = 0;
      status = false
 
      constructor({ pause } = {}) {
        if(jsFileDownloader === undefined) {
          throw new Error("Can't make instance");
        }
        
        if(pause) this.PAUSE_TIME = pause;
 
        let css = document.createElement("style");
        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}`;
        document.head.append(css);
 
        this.urls = []
        this.__makeContainer();
        this.__makeHeader();
        this.__makeBody();
      }
 
      __makeContainer() {
        this._container = document.createElement("div");
        this._container.classList.add("downloader-container")
      }
 
      __makeHeader() {
        this._header = document.createElement("div");
        this._header.classList.add("header");
        let title = document.createElement("h4");
        title.innerText = "Downloader";
 
        this._count_files = document.createElement("p");
        this._count_files.addEventListener("update", (e) => {
          const { current, total } = e.detail;
          this._count_files.innerText = `${current}/${total}`;
        })
        this.updateProgress(0);
        this._header.append(title, this._count_files);
 
        this._container.append(this._header);
      }
 
      __makeBody() {
        let body = document.createElement("div");
        body.classList.add("body");
 
        this.__containerItem = document.createElement("ul");
        this.__containerItem.classList.add("files-containter")
 
        body.append(this.__containerItem);
 
        this._container.append(body);
      }
 
      __makeItem(title) {
        const item = document.createElement("li");
        item.classList.add("file-item");
 
        const titleContainer = document.createElement("p");
        titleContainer.innerText = title;
 
        const progress = document.createElement("span");
        progress.innerText = "0%"
 
        item.append(titleContainer, progress);
 
        function updateProgress(percent) {
          progress.innerText = `${percent} %`
        }
 
        return {
          item,
          updateProgress,
        }
      }
 
      add_url(url, { title } = {}) {
        if(title === undefined) {
          title = `File - ${this.urls.length}`;
        }
        this.urls.push({ url, title })
        this.updateProgress(0)
      }
 
      add_urls(urls) {
        for(const item of urls) {
          add_url(item.url)
        }
      }
 
      async __download(url, title) {
        const downloadContainer = document.createElement("li")
        const progressFile = this.__makeItem(title || "File");
        this.__containerItem.append(progressFile.item);
        
        const process = (event) => {
          if (!event.lengthComputable) return; // guard
 
          var downloadingPercentage = Math.floor(event.loaded / event.total * 100);
          console.log(downloadingPercentage)
          progressFile.updateProgress(downloadingPercentage)
        };
 
        new jsFileDownloader({ url, process })
        .then(async () => {
          progressFile.updateProgress(100);
          await new Promise(res => setTimeout(() => res(), 500));
          progressFile.item.remove();
          Promise.resolve(true)
        })
        .catch(err => Promise.reject(err))
      }
 
 
      async start() {
        if(this.status) return;
 
        this.progress = 0
        this.updateProgress(this.progress);
        document.body.append(this._container);
        this.status = true;
 
        let countProgress = 0;
        for(const [key, item] of Object.entries(this.urls)) {
          this.__download(item.url)
          .then(async () => {
            this.progress += 1;
            this.updateProgress(this.progress);
            countProgress -= 1
          })
          .catch(e => {
            countProgress -= 1
            console.error(e)
          })
          
          countProgress += 1;
 
          while(true) {
            if(countProgress <= 5) break
 
            await new Promise(res => setTimeout(() => res(), this.PAUSE_TIME))
          }
 
          console.log("Progress " + key)
        }
      }
 
      updateProgress(current) {
        const event = new CustomEvent("update", { detail: { current, total: this.urls.length }});
        this._count_files.dispatchEvent(event);
      }
    }
欢迎访问Greasy Fork镜像
