Contents

import {Controller} from "@hotwired/stimulus"

// References:
// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

export default class extends Controller {
    static get targets() {
        return ["input"]
    }

    connect() {
        this.element.classList.add('h-dropzone')

        // Drag
        this.inputTarget.addEventListener('dragover', (event) => {
            this.element.classList.add('dragover')
        })
        this.inputTarget.addEventListener('dragleave', (event) => {
            this.element.classList.remove('dragover')
        })
        this.inputTarget.addEventListener('drop', (event) => {
            this.element.classList.remove('dragover')
        })

        // Focus
        this.inputTarget.addEventListener('focusin', (event) => {
            this.element.classList.add('active')
        })
        this.inputTarget.addEventListener('focusout', (event) => {
            this.element.classList.remove('active')
        })
    }
}

Version data entries

4 entries across 4 versions & 1 rubygems

Version	Path
headmin-0.3.4	app/assets/javascripts/headmin/controllers/dropzone_controller.js
headmin-0.3.3	app/assets/javascripts/headmin/controllers/dropzone_controller.js
headmin-0.3.2	app/assets/javascripts/headmin/controllers/dropzone_controller.js
headmin-0.3.1	app/assets/javascripts/headmin/controllers/dropzone_controller.js