Packages

backpex

0.19.4
0.19.6 0.19.5 0.19.4 0.19.3 0.19.2 0.19.1 0.19.0 0.18.3 0.18.2 0.18.1 0.18.0 0.17.4 0.17.3 0.17.2 0.17.1 0.17.0 0.16.3 0.16.2 0.16.1 0.16.0 0.15.3 0.15.2 0.15.1 0.15.0 0.14.0 0.13.0 0.12.0 0.11.0 0.10.0 0.9.1 0.9.0 0.8.2 0.8.1 0.8.0 0.7.1 0.7.0 0.6.0 0.5.1 0.5.0 0.4.0 0.3.2 0.3.1 0.3.0 0.2.0 0.1.1

Highly customizable administration panel for Phoenix LiveView applications.

HexDocs

Current section

Files

Jump to
Readme
45 Versions
12 Dependencies
Dependants
Files
Activity
backpex assets js hooks _drag_hover.js
Raw

assets/js/hooks/_drag_hover.js 

/**

 * This hook adds hover styles on the upload dropzone when dragging a file over it.

 */

export default {

  mounted () {

    this.dragging = 0

    this.controller = new AbortController()

    const signal = this.controller.signal



    this.el.addEventListener('dragenter', () => this.dragChange(this.dragging + 1), { signal })

    this.el.addEventListener('dragleave', () => this.dragChange(this.dragging - 1), { signal })

    this.el.addEventListener('drop', () => this.dragChange(0), { signal })

  },

  destroyed () {

    this.controller.abort()

  },

  dragChange (value) {

    this.dragging = value

    this.el.firstElementChild.classList.toggle('border-primary', this.dragging > 0)

  }

}