How to use @pluginjs/styled - 10 common examples

onChange(value) {  /* eslint-disable-line */
          if (that.instance.is('disabled')) {
            return
          }
          that.instance.value.attachment = value
          setStyle(
            'background-attachment',
            that.instance.value.attachment,
            that.instance.$image
          )
          setStyle(
            'background-attachment',
            that.instance.value.attachment,
            that.instance.TRIGGER.$fillImage
          )
        }
      }),

e => {
        if (e.which === 2 || e.which === 3) {
          return false
        }
        if (!hasClass(this.instance.classes.POINTER, e.target)) {
          this.move(e.offsetY)
        }

        this.offset = e.pageY - this.size
        const pointerY = parseInt(getStyle('top', this.$pointer), 10)

        bindEvent(
          this.instance.eventNameWithId('mousemove'),
          // identity: this.$pointer,
          e => {
            const size = e.pageY - this.offset + pointerY
            this.move(size)
          },
          window.document
        )

        bindEvent(
          this.instance.eventNameWithId('mouseup'),
          () => {
            removeEvent(
              this.instance.eventNameWithId('mousemove'),

append(child, this.chunkInner)
    })

    this.index = this.options.index

    // aspectRatio => [width, height]
    const aspectRatio = this.compileAspectRatio(this.options.aspectRatio)

    // element Attribute First
    // this.width = aspectRatio[0] || this.element.offsetWidth || 1
    // this.height = aspectRatio[1] || this.element.offsetHeight || 1

    this.width =
      aspectRatio[0] || parseFloat(getStyle('width', this.element), 10) || 1
    this.height =
      aspectRatio[1] || parseFloat(getStyle('height', this.element), 10) || 1

    this.aspectRatio = this.width / this.height

    this.col = parseInt(this.options.col, 10) || 1
    this.row = parseInt(this.options.row, 10) || 1

    this.img = this.instance.options.imgSelector
      ? query(this.instance.options.imgSelector, this.element)
      : query('img', this.element)

    if (this.img) {
      let loader = ''

      if (this.instance.options.loader) {
        loader = Loader.of(this.chunkInner, this.instance.options.loader)
        loader.show()

template.compile(this.options.templates.panel())({
        classes: this.classes
      })
    )
    // close button
    this.$close = parseHTML(
      template.compile(this.options.templates.icon())({
        classes: this.classes,
        icon: 'pj-icon pj-icon-char pj-icon-remove-small'
      })
    )

    this.$wrapper.append(this.$panel, this.$close)
    const panelWidth = this.options.panelWidth
      ? this.options.panelWidth
      : getStyle('width', this.$element)
    setStyle('width', panelWidth, this.$panel)

    if (this.options.keyboard) {
      this.$element.setAttribute('tabindex', 1)
    }

    if (isFunction(this.options.source)) {
      this.options.source.call(this, this.resolveData.bind(this))
    } else {
      this.resolveData(this.source)
    }
  }

this.$handle = parseHTML(`<div class="${this.classes.HANDLE}"></div>`)

    this.$inner.append(this.$on, this.$handle, this.$off)

    this.$wrap.append(this.$inner)

    this.initIcon()

    if (this.options.size !== null) {
      addClass(
        this.getClass(this.classes.SIZE, 'size', this.options.size),
        this.$wrap
      )
    }
    // get components width
    this.distance = this.$wrap.clientWidth - getWidth(this.$handle)

    if (!this.distance) {
      const clientWidth =
        parseInt(getStyle('width', this.$wrap).replace(/px|pt|em/gi, ''), 0) -
        Math.abs(getWidth(this.$wrap))
      this.distance =
        clientWidth -
        parseInt(getStyle('width', this.$handle).replace(/px|pt|em/gi, ''), 0)
    }

    setStyle('marginLeft', `-${this.distance}`, this.$inner)

    this.bind()
    this.set(this.checked, false)
    if (this.element.disabled || this.options.disabled) {
      this.disable()

if (hasClass(this.classes.MEDIUMSIZE, this.$preview)) {
      removeClass(this.classes.MEDIUMSIZE, this.$preview)
    }
    if (hasClass(this.classes.BIGSIZE, this.$preview)) {
      removeClass(this.classes.BIGSIZE, this.$preview)
    }
    if (value === 'auto') { /* eslint-disable-line */
    } else if (value === '3:2') {
      addClass(this.classes.SMALLSIZE, this.$preview)
    } else if (value === '4:3') {
      addClass(this.classes.MEDIUMSIZE, this.$preview)
    } else if (value === '16:9') {
      addClass(this.classes.BIGSIZE, this.$preview)
    }
    if (this.is('loaded')) {
      this.videoApi.setSize(getWidth(this.$video), getHeight(this.$video))
    }
  }

if (videoConfig.type === 'html5') {
      videoConfig.url = `${url}`
    }
    this.videoApi = Video.of(this.$video, videoConfig)
    this.videoApi.options.onLoad = () => {
      addClass(this.classes.VIDEOLOADING, this.$videoAction)
    }

    this.videoApi.options.onLoaded = () => {
      removeClass(this.classes.VIDEOLOADING, this.$videoAction)
      addClass(this.classes.VIDEOPLAYING, this.$videoAction)
    }

    // this.videoApi.load()
    this.videoApi.setSize(getWidth(this.$video), getHeight(this.$video))

    this.enter('loaded')
    this.enter('playing')
    return false
  }

initialize() {
    hideElement(this.element)

    this.createWrap()
    this.createItems()

    if (this.options.overflow === true) {
      this.createToggle()
      this.createDropdown()
      // this.setupPopper()
      this.updateOverflow()
    }

    this.bind()
    if (this.element.disabled || this.options.disabled) {
      this.disable()
    }

closePanel() {
    removeClass(this.classes.OPENPANEL, this.$panel)
    removeClass(this.classes.OPENACTIVE, this.element)
    hideElement(this.$mask)
    // this.element.style.removeProperty('border-color')

    this.update()

    // // this.element.openPanel = false;
    this.leave('Cancel')
    this.leave('openPanel')
  }

update(e) {
    this.origin = {
      x: offset(this.$el).left + this.r,
      y: offset(this.$el).top + this.r
    }

    const _coord = { x: e.pageX, y: e.pageY }

    const coord = this.getVector(_coord)
    const deg = this.getAngle(coord)
    // set wheel default val
    this.set(deg)

    this.instance.trigger('wheelChange', deg)
  }