[(#CACHE{0})][(#REM)
Les élements de classe catExpand sont agrandis en hauteur à la hauteur du plus grand des enfants
de leur parent n'ayant pas ladite classe catExpand
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();
});
} else {
$(window).off('swipeleft swiperight');
$('.catShowOnSmall').removeClass('catShowOnSmall');
$('#catMenuLeft,#catMenuRight').removeClass('clicked');
}
$('.catExpand').each(function() {
height = 0;
$(this).parent().children().not('.catExpand').each(function() {
if ($(this).height() > height) {
height = $(this).height();
}
});
$(this).height(height);
console.log(this.className + ' : ' + $(this).height()+ ' in ' + height);
});
}
checkSize();
let resizeTimer;
$(window).resize(function (){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(checkSize, 400);
$('.catExpand').each(function() {
height = 0;
$(this).parent().children().not('.catExpand').each(function() {
if ($(this).height() > height) {
height = $(this).height();
}
});
$(this).height(height);
console.log(this.className + ' : ' + $(this).height()+ ' in ' + height);
});
});
}
});