Feature Request: event listener that detects screen size change

Ask the community
, ,
1

Being able to respond to screen size change would enable using breakpoints for responsive layouts. Currently it is possible to get window size using wixWindow.getBoundingRec(). However there is no way to set an onChangeListener on the object returned by getBoundingRec() - that means the only way to detect when a user resizes the browser is by using setInterval(), as described here https://www.wix.com/velo/forum/coding-with-velo/show-hide-elements-based-on-screen-size .

While setInterval() will work for this it is much more resource intensive than makes sense for something as simple as adding breakpoints.

Even if this feature is added, responsive design will be limited by lack of ability to reposition elements programmatically, but it will be possible with use of show() and hide().

1 Like
2

It should be noted that you can listen for screen size changes using Custom-Element. But I do agree that it would have been great to have a built-in listener.

3

I guess you know that if you need your website to be fully responsive, you should use EditorX and not the classic editor. Right?
(and Simen is right, you can easily add the event listener using custom element).

4

I am aware of this, however, I am working on a website that was built using the classic Wix editor, and it is not currently supported to import a Wix site into EditorX (and customer service reps declined to offer a timeline for when that feature will be avilable again)

5

Can you give a concrete example on how to add an event listener to a Custom-Element?

6 
// Public/custom-elements/Size.js:
class Size extends HTMLElement { 
    connectedCallback() { 
        window.onresize = () => { 
            this.dispatchEvent( new CustomEvent('changed', 
                {detail: {h: window.innerHeight, w: window.innerWidth}}
             ) ) 
        } 
    } 
}
customElements.define('re-size', Size);

// Wix page : '#size' custom element : tag : 're-size', source: Size.js
// code:
$w.onReady(() => { 
        // ...
        $w('#size').on('changed', (e) => { console.log(e.detail) }) 
})