Packages

backpex

0.18.2
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
13 Dependencies
Dependants
Files
Activity
backpex assets js hooks _sticky_actions.js
Raw

assets/js/hooks/_sticky_actions.js 

/**

 * Hook to determine if a table row is horizontally scrollable (=> actions are sticky).

 *

 * Adds a 'stuck' attribute to the sticky element which can then be used for styling.

 */

export default {

  mounted () {

    this.sticky = this.el.querySelector('.sticky')



    this.observer = new IntersectionObserver(

      ([entry]) => {

        this.stuck = entry.intersectionRatio < 1

        this.toggleStuckAttribute()

      },

      { threshold: [1], root: this.el.closest('.overflow-x-auto') }

    )



    this.observer.observe(this.el)

  },

  updated () {

    this.toggleStuckAttribute()

  },

  destroyed () {

    this.observer.disconnect()

  },

  toggleStuckAttribute () {

    this.sticky.toggleAttribute('stuck', this.stuck)

  }

}