Disconnect/reconnect controllers according to viewport size

simonlayfield · July 28, 2020, 5:19pm

I had a use case today whereby I needed particular controllers to only be connected above a specified viewport size (desktop only, basically).

Ultimately I achieved this by having some separate javascript with a media query listener that, when triggered, filtered the controllers from the DOM and removed/added their data-controller attributes as necessary.

The only immediate issue this caused was that rather than use this.somethingTarget in the disconnect function, I had to use this.element.querySelector(...).

I’d be keen to know if anyone has any cleaner ways of doing this? It’d be nice if there was a way to connect and disconnect controllers in a cleaner, more practical way from within the controllers themselves (which wouldn’t be possible with disconnect I guess, but maybe a method to conditionally detach/reattach a controller).

Maybe a bit of an edge case though…shrug

adrienpoly · July 29, 2020, 11:55am

maybe not exactly what you are looking for but the resizeObserver API could maybe help here.

IU have package this into a mixin you can add to you stimuluse controller to get a new resize lifecycle event when you component is resized

github.com

stimulus-use/stimulus-use/blob/master/docs/use-resize.md

# useResize

Adds one new behavior to your Stimulus controller : `resize`

This behavior is built on top of the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).


## Usage

**Composing**

```js
import { Controller } from 'stimulus'
import { useResize } from 'stimulus-use'

export default class extends Controller {

  connect() {
    useResize(this)
  }

This file has been truncated. show original

Topic		Replies	Views
Stimulus re-connect even with data-turbo-permanent?	3	1260	April 23, 2021
Stimulus: Lots of small controllers vs few larger ones?	6	653	November 22, 2021
Persist stimulus controller when moving element	14	2320	April 4, 2021
Any way to trigger a controller via intersectionObserver events?	6	620	January 15, 2023
Sharing state between controllers	1	371	May 24, 2023

Disconnect/reconnect controllers according to viewport size

Related Topics