import { store } from './Store' ; import { DOM } from './DOM' ; import { lang } from './Lang' ; interface ProgressBarEl { name : HTMLSpanElement ; progress : HTMLDivElement ; } interface ProgressData { name : string ; loaded : number ; total : number ; } class ProgressBar { constructor ( ) { this . wrap = DOM . useSlot ( 'progressBar' , this . wrapHTML ) as HTMLDivElement ; this . downloadedEl = this . wrap . querySelector ( '.downloaded' ) as HTMLSpanElement ; this . progressColorEl = this . wrap . querySelector ( '.progress1' ) as HTMLDivElement ; this . listWrap = this . wrap . querySelector ( '.progressBarList' ) as HTMLUListElement ; this . totalNumberEl = this . wrap . querySelector ( '.totalNumber' ) as HTMLSpanElement ; } private readonly wrapHTML = `
  <div class="progressBarWrap">
  <div class="total">
  <span class="text">${ lang . transl ( '_下载进度' ) }</span>
  <div class="right1">
  <div class="progressBar progressBar1">
  <div class="progress progress1"></div>
  </div>
  <div class="progressTip progressTip1">
  <span class="downloaded">0</span>
  /
  <span class="imgNum totalNumber">0</span>
  </div>
  </div>
  </div>

  <ul class="progressBarList"></ul>
  </div>
  ` ; private readonly barHTML = `<li class="downloadBar">
  <div class="progressBar progressBar2">
  <div class="progress progress2"></div>
  </div>
  <div class="progressTip progressTip2">
  <span class="fileName"></span>
  </div>
  </li>` ; private wrap : HTMLDivElement ; private downloadedEl : HTMLSpanElement ; private progressColorEl : HTMLDivElement ; private listWrap : HTMLUListElement ; private totalNumberEl : HTMLSpanElement ; private allProgressBar : ProgressBarEl [ ] = [ ] ; public reset ( num , downloaded = 0 ) { this . setTotalProgress ( downloaded ) ; this . totalNumberEl . textContent = store . result . length . toString ( ) ; this . listWrap . innerHTML = this . barHTML . repeat ( num ) ; this . wrap . style . display = 'block' ; const allProgressBar = this . listWrap . querySelectorAll ( '.downloadBar' ) ; this . allProgressBar = [ ] ; for ( const bar of allProgressBar ) { const data = { name : bar . querySelector ( '.fileName' ) ! as HTMLSpanElement , progress : bar . querySelector ( '.progress' ) ! as HTMLDivElement , } ; this . allProgressBar . push ( data ) ; } } public setTotalProgress ( downloaded ) { this . downloadedEl . textContent = downloaded . toString ( ) ; const progress = ( downloaded / store . result . length ) * 100 ; this . progressColorEl . style . width = progress + '%' ; } public setProgress ( index , data ) { const bar = this . allProgressBar [ index ] ; bar . name . textContent = data . name ; const progress = data . loaded / data . total || 0 ; bar . progress . style . width = progress * 100 + '%' ; } public showErrorColor ( index , show ) { const bar = this . allProgressBar [ index ] ; bar . name . classList [ show ? 'add' : 'remove' ] ( 'downloadError' ) ; } } const progressBar = new ProgressBar ( ) ; export { progressBar } ;