Packages

tailwind_live_components

0.2.6
0.6.4 0.6.3 0.6.2 0.6.1 0.6.0 0.5.7 0.5.6 0.5.5 0.5.4 0.5.3 0.5.2 0.5.1 0.5.0 0.4.2 0.4.1 0.4.0 0.3.7 0.3.6 0.3.5 0.3.4 0.3.3 0.3.2 0.3.1 0.3.0 0.2.8 0.2.7 0.2.6 0.2.5 0.2.4 0.2.3 0.2.2 0.2.1 0.2.0 0.1.11 0.1.10 0.1.9 0.1.8 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

Tailwind Live Components is a set of HEEX components that builds LiveView components with Tailwind 2.0+

HexDocs

Current section

Files

Jump to
Readme
45 Versions
3 Dependencies
Dependants
Files
Activity
tailwind_live_components priv static hooks toggle.js
Raw

priv/static/hooks/toggle.js 

export default {

  $valueInput: null,

  $toggleInput: null,

  on: false,



  mounted() {

    this.$valueInput = this.el.querySelector('[data-tlc-ref="valueInput"]')

    this.$toggleInput = this.el.querySelector('[data-tlc-ref="toggleInput"]')

    this.$toggleInput.addEventListener("click", () => this.toggle())



    this.$toggleInput.addEventListener("keydown", (event) => {

      if (event.code == "Enter" || event.code == "Space") {

        event.preventDefault()

        this.toggle()

      }

    })



    this.value = this.$valueInput.value == "true"

  },



  toggle() {

    this.on = !this.on

    this.$valueInput.value = this.on.toString()

    this.$toggleInput.setAttribute('aria-checked', this.on.toString())



    if (this.on) {

      document.querySelectorAll(`[data-toggle-on]`).forEach(el => {

        liveSocket.execJS(el, el.getAttribute("data-toggle-on"))

      })

    } else {

      document.querySelectorAll(`[data-toggle-off]`).forEach(el => {

        liveSocket.execJS(el, el.getAttribute("data-toggle-off"))

      })

    }

  }

}