[(#CACHE{0})][(#REM)
Sur les petits écrans, on cache les elements de classes .catHideLeftOnSmall, .catHideRightOnSmall
on élargit à 100% l'élément de classe .catExpandOnSmall, et on détecte les swipe events.
La taille max de petit écran est définie par la media query de la CSS.
Charge une librairie jquery.mobile.custom.min.js (touch events uniquement) - version 1.5.0-rc1
][(#INCLURE{composants/cadre/javascript/jquery.mobile.custom.min.js})]
jQuery(function () {
if ( ($('.catExpandOnSmall')[0]) && ($('.catHideLeftOnSmall')[0] || $('.catHideRightOnSmall')[0])) {
if ($('.catHideLeftOnSmall')[0]) {
$('body').append('
');
$('#catMenuLeft').on('click', function(e) {
toggle('Left');
e.stopPropagation();
});
}
if ($('.catHideRightOnSmall')[0]) {
$('body').append('');
$('#catMenuRight').on('click', function(e) {
toggle('Right');
e.stopPropagation();
});
}
function swipe(gd) {
var opp = (gd == 'Left' ? 'Right' : 'Left');
if ($('.catHide' + gd + 'OnSmall').hasClass('catShowOnSmall')) {
toggle(gd);
} else if (!$('.catHide' + opp + 'OnSmall').hasClass('catShowOnSmall')) {
toggle(opp);
}
}
function toggle(panel) {
var opp = (panel == 'Left' ? 'Right' : 'Left');
var op = $('.catHide' + opp + 'OnSmall');
op.removeClass('catShowOnSmall');
$('#catMenu' + opp).removeClass('clicked');
$('.catHide' + panel + 'OnSmall').toggleClass('catShowOnSmall');
$('#catMenu' + panel).toggleClass('clicked');
}
function checkSize() {
var eos = $('.catExpandOnSmall');
if (eos.width() == eos.parent().width()) {
$(window).off('swipeleft').on('swipeleft', function(e) {
swipe('Left');
e.stopPropagation();
});
$(window).off('swiperight').on('swiperight', function(e) {
swipe('Right');
e.stopPropagation();
});
//console.log('Responsive design for small window enabled.');
} else {
$(window).off('swipeleft swiperight');
$('.catShowOnSmall').removeClass('catShowOnSmall');
$('#catMenuLeft,#catMenuRight').removeClass('clicked');
//console.log('Responsive design for small window disabled.');
}
}
checkSize();
let resizeTimer;
$(window).resize(function (){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(checkSize, 400);
});
}
});