Mercurial > libervia-templates
changeset 41:e296ee56f611
static (css.js): max-height transition fix:
- added a "get_elt" function which allows to give element directly or by its id
- added "clicked_mh_fix" which allows transitions to max-height: none (not possible with CSS only)
author | Goffi <goffi@goffi.org> |
---|---|
date | Thu, 13 Jul 2017 08:36:07 +0200 |
parents | 134c731937e8 |
children | 0c6aa1c81252 |
files | default/static/css.js |
diffstat | 1 files changed, 55 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- a/default/static/css.js Tue Jul 11 07:55:45 2017 +0200 +++ b/default/static/css.js Thu Jul 13 08:36:07 2017 +0200 @@ -14,6 +14,17 @@ ); } +function get_elt(arg) { + if (typeof arg === 'string') { + // we should have an id + return document.getElementById(arg); + } + else { + // we should have an element + return arg; + } +} + function clicked_cls(elt) { /* toggle "clicked" class on each click, and remove "init" class if present */ // init @@ -24,3 +35,47 @@ // clicked elt.classList.toggle("clicked"); } + +function clicked_mh_fix(arg) { + /* toggle clicked, and fix max-height on transitionend + * + * needed to workaround transition issue with max-height:none + * + * inspired from https://css-tricks.com/using-css-transitions-auto-dimensions, + * thanks to Brandon Smith */ + elt = get_elt(arg); + + if (!elt.classList.contains("clicked")) { + /* expand */ + var fix_expand = function(event) { + elt.removeEventListener("transitionend", fix_expand, false); + if (elt.classList.contains("clicked")) { + /* if event is clicked quicker than transition time, + * this callback can be called on reduce */ + elt.style.maxHeight = "none"; + } + }; + + elt.setAttribute('max_height_init', elt.clientHeight); + elt.addEventListener("transitionend", fix_expand, false); + clicked_cls(elt); + elt.style.maxHeight = elt.scrollHeight + 'px'; + } + else { + /* reduce */ + var transition_save = elt.style.transition; + elt.style.transition = ''; + requestAnimationFrame(function() { + elt.style.maxHeight = elt.scrollHeight + 'px'; + elt.style.transition = transition_save; + + requestAnimationFrame(function() { + elt.style.maxHeight = elt.getAttribute('max_height_init') + 'px'; + elt.removeAttribute('max_height_init'); + elt.style.maxHeight = null; + }); + }); + + clicked_cls(elt); + } +}