github.com/resonatecoop/id@v1.1.0-43/frontend/src/components/progress-bar/index.js (about)

     1  const html = require('choo/html')
     2  const Nanocomponent = require('choo/component')
     3  const assert = require('nanoassert')
     4  const rangeSlider = require('@resonate/rangeslider')
     5  
     6  class ProgressBar extends Nanocomponent {
     7    constructor (id, state, emit) {
     8      super(id)
     9  
    10      this.state = state
    11      this.emit = emit
    12      this.local = state.components[id] = {}
    13  
    14      this.local.progress = 0
    15      this.local.progressState = 'idle'
    16  
    17      this.createSeeker = this.createSeeker.bind(this)
    18    }
    19  
    20    createSeeker (el) {
    21      rangeSlider.create(el, {
    22        min: 0,
    23        max: 100,
    24        value: this.local.progress,
    25        step: 0.0001,
    26        rangeClass: 'progressBar',
    27        disabledClass: 'progressBar--disabled',
    28        fillClass: 'progressBar__fill',
    29        bufferClass: 'progressBar__buffer',
    30        backgroundClass: 'progressBar__background',
    31        handleClass: 'progressBar__handle'
    32      })
    33  
    34      return el.rangeSlider
    35    }
    36  
    37    createElement (props) {
    38      assert(typeof props.progress, 'number', 'ProgressBar: progress must be a number')
    39  
    40      this.local.progress = props.progress
    41      this.local.progressState = props.progressState
    42  
    43      if (!this.local.slider) {
    44        this._element = html`
    45          <div class="relative">
    46            <input id="progressBar" disabled="disabled" type="range" />
    47          </div>
    48        `
    49      }
    50  
    51      return this._element
    52    }
    53  
    54    load (el) {
    55      el.removeAttribute('unresolved')
    56      this.local.slider = this.createSeeker(el.querySelector('#progressBar'))
    57    }
    58  
    59    update (props) {
    60      if (props.progressState !== this.local.progressState) {
    61        this.element.classList.add(`progressBar__${this.local.progressState}`)
    62        this.element.classList.add(`progressBar__${props.progressState}`)
    63        this.local.progressState = props.progressState
    64      }
    65      return props.progress !== this.local.progress
    66    }
    67  }
    68  
    69  module.exports = ProgressBar