Bootstrap 5 Offcanvas – Detectar si el elemento de offcanvas se está mostrando al cargar
Tengo un div de búsqueda y filtrado en offcanvas, como la ubicación, el tipo de propiedad, etc. en esta página: https://finder.createx.studio/real-estate-catalog-rent.html
En dispositivos de escritorio (=>lg), se muestra permanentemente el “offcanvas”, en dispositivos móviles (<lg) se=”” oculta=”” “offcanvas”=”” y=”” se=”” puede=”” cambiar=”” mediante=”” un=”” botón.=”” todo=”” funciona=”” bien.=”” cuando=”” se=”” carga=”” la=”” página,=”” si=”” el=”” elemento=”” offcanvas=”” realmente=”” está=”” en=”” modo=”” offcanvas=”” (es=”” decir,=””></lg)><lg), quiero ejecutar un código javascript para mostrarlo (después de otra verificación de lógica empresarial, fuera del alcance de esta publicación).
¿cómo puedo hacer eso?
algo como esto:
var myoffcanvas = document.getelementbyid('filters-sidebar');
var bsoffcanvas = new bootstrap.offcanvas(myoffcanvas);
var mycustombusinesslogiccheck = true;
var istheoffcanvasactuallyoffcanvasrightnow = ?? //detectar si el elemento offcanvas está actualmente en modo off-canvas
if (istheoffcanvasactuallyoffcanvasrightnow && mycustombusinesslogiccheck) {
bsoffcanvas.show();
}
lo que intenté:
- intenté buscar los eventos *.bs.offcanvas, pero no se activan cuando la página se carga por primera vez (y el offcanvas se oculta inicialmente), solo en interacciones posteriores.
- miré la propiedad _isshown de bsoffcanvas, pero devuelve “false” en el escritorio, así que parece que no puedo usar eso.
- investigé otras propiedades en bsoffcanvas pero no encontré nada obvio.
- tal vez podría rastrear si un elemento con d-lg-none está visible o no, pero parece una solución poco elegante. sin embargo, será mi alternativa si no encuentro una forma más limpia. quiero=”” ejecutar=”” un=”” código=”” javascript=”” para=”” mostrarlo=”” (después=”” de=”” otra=”” verificación=”” de=”” lógica=”” empresarial,=”” fuera=”” del=”” alcance=”” de=”” esta=”” publicación).=”” ¿cómo=”” puedo=”” hacer=”” eso?=”” algo=”” como=”” esto:=””
javascript="" var="" myoffcanvas="document.getElementById('filters-sidebar');" var="" bsoffcanvas="new" bootstrap.offcanvas(myoffcanvas);="" var="" mycustombusinesslogiccheck="true;" var="" istheoffcanvasactuallyoffcanvasrightnow="??" detectar="" si="" el="" elemento="" offcanvas="" está="" actualmente="" en="" modo="" off-canvas="" if="" (istheoffcanvasactuallyoffcanvasrightnow="" &&="" mycustombusinesslogiccheck)="" {="" bsoffcanvas.show();="" }=""=”” lo=”” que=”” intenté:=”” -=”” intenté=”” buscar=”” los=”” eventos=”” *.bs.offcanvas,=”” pero=”” no=”” se=”” activan=”” cuando=”” la=”” página=”” se=”” carga=”” por=”” primera=”” vez=”” (y=”” el=”” offcanvas=”” se=”” oculta=”” inicialmente),=”” solo=”” en=”” interacciones=”” posteriores.=”” -=”” miré=”” la=”” propiedad=”” _isshown=”” de=”” bsoffcanvas,=”” pero=”” devuelve=”” “false”=”” en=”” el=”” escritorio,=”” así=”” que=”” parece=”” que=”” no=”” puedo=”” usar=”” eso.=”” -=”” investigé=”” otras=”” propiedades=”” en=”” bsoffcanvas=”” pero=”” no=”” encontré=”” nada=”” obvio.=”” -=”” tal=”” vez=”” podría=”” rastrear=”” si=”” un=”” elemento=”” con=”” d-lg-none=”” está=”” visible=”” o=”” no,=”” pero=”” parece=”” una=”” solución=”” poco=”” elegante.=”” sin=”” embargo,=”” será=”” mi=”” alternativa=”” si=”” no=”” encuentro=”” una=”” forma=”” más=””></lg), quiero ejecutar un código javascript para mostrarlo (después de otra verificación de lógica empresarial, fuera del alcance de esta publicación).
¿cómo puedo hacer eso?
algo como esto:
var myoffcanvas = document.getelementbyid('filters-sidebar');
var bsoffcanvas = new bootstrap.offcanvas(myoffcanvas);
var mycustombusinesslogiccheck = true;
var istheoffcanvasactuallyoffcanvasrightnow = ?? //detectar si el elemento offcanvas está actualmente en modo off-canvas
if (istheoffcanvasactuallyoffcanvasrightnow && mycustombusinesslogiccheck) {
bsoffcanvas.show();
}
lo que intenté:
- intenté buscar los eventos *.bs.offcanvas, pero no se activan cuando la página se carga por primera vez (y el offcanvas se oculta inicialmente), solo en interacciones posteriores.
- miré la propiedad _isshown de bsoffcanvas, pero devuelve “false” en el escritorio, así que parece que no puedo usar eso.
- investigé otras propiedades en bsoffcanvas pero no encontré nada obvio.
- tal vez podría rastrear si un elemento con d-lg-none está visible o no, pero parece una solución poco elegante. sin embargo, será mi alternativa si no encuentro una forma más limpia.>
davy.ai
Una solución potencial podría ser verificar el valor de la propiedad CSS “transform” en el elemento offcanvas. Cuando el offcanvas está oculto, debería tener un valor de transformación de “translateX(-100%)”, y cuando se muestra, el valor de transformación debería ser “translateX(0)”.
Puede utilizar el método getComputedStyle() para obtener el estilo calculado del elemento offcanvas y luego verificar su valor de transformación de la siguiente manera:
var myOffcanvas = document.getElementById(‘filters-sidebar’);
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
var myCustomBusinessLogicCheck = true;
var offcanvasTransform = window.getComputedStyle(myOffcanvas).getPropertyValue(‘transform’);
var isTheOffcanvasActuallyOffCanvasRightNow = (offcanvasTransform === ‘matrix(1, 0, 0, 1, -360, 0)’);
if (isTheOffcanvasActuallyOffCanvasRightNow && myCustomBusinessLogicCheck) {
bsOffcanvas.show();
}
Nota: los valores de matriz en la cadena de transformación pueden variar dependiendo de su diseño específico y la configuración del offcanvas. Puede utilizar console.log() para verificar el valor exacto de la propiedad de transformación y actualizar la expresión condicional en consecuencia.