How to use @pluginjs/classes - 10 common examples

openPanel() {
    const colorArr = Object.entries(this.info)
    this.oldColor = {
      collection: colorArr[0][1],
      solid: colorArr[1][1],
      gradient: colorArr[2][1]
    }
    addClass(this.classes.OPENPANEL, this.$panel)
    addClass(this.classes.OPENACTIVE, this.element)
    showElement(this.$mask)
    // update scollable height
    if (this.scrollable) {
      this.scrollable.update()
    }

    this.POPPER.scheduleUpdate()
    // this.element.openPanel = true
    this.enter('openPanel')
    this.trigger(EVENTS.OPENPANEL)
  }

openPanel() {
    addClass(this.classes.OPENPANEL, this.$panelWrap)
    addClass(this.classes.OPENACTIVE, this.element)
    showElement(this.$mask)
    // update scollable height
    if (this.scrollable) {
      this.scrollable.update()
    }

    this.POPPER.scheduleUpdate()
    // this.element.openPanel = true
    this.enter('openPanel')
    this.trigger(EVENTS.OPENPANEL)

    this.oldColor = this.color
  }

openPanel() {
    addClass(this.classes.OPENPANEL, this.$panelWrap)
    addClass(this.classes.OPENACTIVE, this.element)
    showElement(this.$mask)
    // update scollable height
    if (this.scrollable) {
      this.scrollable.update()
    }

    this.POPPER.scheduleUpdate()
    // this.element.openPanel = true
    this.enter('openPanel')
    this.trigger(EVENTS.OPENPANEL)

    this.oldColor = this.color
  }

children(this.$trigger).forEach(($this, i) => {
      const $content = children(this.$container)[i]

      removeClass(this.classes.SELECTED, $this)
      hideElement($content)
      this.leave(`${getData('type', $this)}Module`)
      if (getData('type', $this) === typeName) {
        addClass(this.classes.SELECTED, $this)
        $content.style.display = 'block'
        // showElement($content)
      }
    })

updateStatus(status) {
    if (status === 'error') {
      removeClass(this.classes.LOADED, this.content)
      this.loader.innerHTML = 'load ImageError click open video'
      removeClass(this.classes.HIDE, this.loader)
      // todo   show  error tip
    } else if (status === 'loading') {
      removeClass(this.classes.LOADED, this.content)
      this.loader.innerHTML = 'loading'
      removeClass(this.classes.HIDE, this.loader)
      // todo    show loadind  tip
    } else if (status === 'loaded') {
      addClass(this.classes.LOADED, this.content)
      addClass(this.classes.HIDE, this.loader)
    }
  }
}

bindEvent(this.eventName('click'), `.${this.classes.ITEMRESELECT}`, e => {
        e.stopPropagation()
        if (this.is('disabled')) {
          return false
        }
        this.options.change.call(this, this.changeImage.bind(this))
        const getElementIndex = el => {
          const parentElement = parent(el)
          return children(parentElement).indexOf(el)
        }
        const index = getElementIndex(
          parentWith(hasClass(this.classes.ITEM), e.target)
        )
        this.change(index, this.url)
        return null
      }),
      // save

init(el, _package = false) {
    this.instance.enter('keyboard')

    this._package = _package
    this.$list = el
    this.$wrap = this._package
      ? parentWith(hasClass(this.classes.PACKAGE), this.$list[0])
      : parent(this.$list[0])
    this.$input = query('input', this.instance.$search)

    this.$fontList = null
    this.$selected = null

    this.downCount = 1
    this.upCount = 1
    this.bind()
  }

createBar(direction) {
    const options = Object.assign(this.options.scrollbar, {
      direction,
      useCssTransitions: false,
      keyboard: false,
      clickMoveStep: 1
    })
    const $bar = document.createElement('div')

    const api = new SCROLLBAR($bar, options)

    if (this.options.showOnHover) {
      addClass(this.classes.BARHIDE, $bar)
    }

    append($bar, this.$wrap)

    this[`$${direction}`] = $bar
    this[`$${direction}`].api = api

    this.$bar.push($bar)
    this.updateBarHandle(direction)
  }

build() {
    text('', this.element)

    this.content = document.createElement('span')
    addClass(this.instance.classes.WORD, this.content)
    text(this.text, this.content)
    append(this.content, this.element)

    this.cursor = document.createElement('span')
    addClass(this.instance.classes.CURSOR, this.cursor)
    text('|', this.cursor)
    append(this.cursor, this.element)
  }

selectIcon() {
    if (this.selected && this.selected.hasClass(this.classes.ICONHOVER)) {
      removeClass(this.classes.ICONHOVER, this.selected)
    }
    this.selected = addClass(
      this.classes.ICONHOVER,
      this.$icons[this.x][this.y]
    )
  }