La documentación de la base usa JQuery para escuchar los cambios en los puntos de interrupción
https://get.foundation/sites/docs/media-queries.html
$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) { if ( (oldSize === "small" && newSize === "large") || (oldSize === "small" && newSize === "xxlarge") || (oldSize === "medium" && newSize === "large") || (oldSize === "medium" && newSize === "xxlarge") ) { //my custom function displayFacets("desktop"); } else if ( (oldSize === "xxlarge" && newSize === "small") || (oldSize === "large" && newSize === "small") || (oldSize === "large" && newSize === "medium") || (oldSize === "xxlarge" && newSize === "medium") ) { displayFacets("mobile"); } });¿Cómo convertir esto en JS puro?
No está muy claro qué es exactamente lo que tienes en mente. Pero puedes lograr algo así con matchMedia . Por ejemplo, puede crear un EventListener que reaccione si un determinado MediaQuery coincide o no. Vea este ejemplo: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange
EDITAR: bien, después de los cambios en el ejemplo, se puede ver que en realidad solo desea distinguir entre dispositivos móviles y de escritorio. Puede implementar esto con bastante facilidad con las funciones mencionadas:
const mql = window.matchMedia('(max-width: 600px)'); mql.onchange = (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ displayFacets("mobile"); } else { /* the viewport is more than than 600 pixels wide */ displayFacets("desktop"); } }Foundation es de código abierto, por lo que siempre puede consultar su código fuente para descubrir cómo resolvieron tareas específicas.
La parte relevante de su pregunta se puede encontrar aquí: foundation.util.mediaQuery.js
Lo que hacen es escuchar el evento de cambio de resize de la ventana:
_watcher() { $(window).off('resize.zf.mediaquery').on('resize.zf.mediaquery', () => { var newSize = this._getCurrentSize(), currentSize = this.current; if (newSize !== currentSize) { // Change the current media query this.current = newSize; // Broadcast the media query change on the window $(window).trigger('changed.zf.mediaquery', [newSize, currentSize]); } }); }y verifique qué consulta de medios coincide actualmente usando window.matchMedia(…).matches :
_getCurrentSize() { var matched; for (var i = 0; i < this.queries.length; i++) { var query = this.queries[i]; if (window.matchMedia(query.value).matches) { matched = query; } } return matched && this._getQueryName(matched); }, Reemplazar el on , el off y el trigger en estas partes del código debería ser sencillo. Extraer los puntos de interrupción puede ser un poco más problemático, pero eso también está en ese archivo en la función _init .
Alternativamente, también puede usar MediaQueryList.onchange :
var mql = window.matchMedia('(max-width: 600px)'); mql.onchange = (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ console.log('This is a narrow screen — less than 600px wide.') } else { /* the viewport is more than than 600 pixels wide */ console.log('This is a wide screen — more than 600px wide.') } }Para obtener un evento si una consulta de medios coincide o no.