Slidebars close when clicking canvas - mobile issue
flourCityDesign opened this issue · comments
I have slidebars installed in my Wordpress theme and it works fine. However I want users to be able to click anywhere outside of the Slidebars to close them, instead of having to click the link/button again to close.
I found this thread where Adam explained how to add a '.js-close-any' class to the canvas to achieve this:
// Controller
var controller = new slidebars();
controller.init();
// Close any
$( document ).on( 'click', '.js-close-any', function ( event ) {
if ( controller.getActiveSlidebar() ) {
event.preventDefault();
event.stopPropagation();
controller.close();
}
} );
// Add close class to canvas container when Slidebar is opened
$( controller.events ).on( 'opening', function ( event ) {
$( '[canvas]' ).addClass( 'js-close-any' );
} );
// Add close class to canvas container when Slidebar is opened
$( controller.events ).on( 'closing', function ( event ) {
$( '[canvas]' ).removeClass( 'js-close-any' );
} );
This works fine in the browser (Chrome and Safari) but does not work on my mobile device (iPhone). This is obviously where I really want the functionality. Does anyone have a solution?
Thanks
Have you found a solution for this?
@amichel86 Try to use touchstart
instead of click
for iOS devices.
// Close any
var clickEvent;
if ( navigator.userAgent.match( /(iPhone|iPad)/i ) ) {
clickEvent = 'touchstart';
} else {
clickEvent = 'click';
}
$( document ).on( clickEvent, '.js-close-any', function ( event ) {
if ( controller.getActiveSlidebar() ) {
event.preventDefault();
event.stopPropagation();
controller.close();
}
} );