Mercurial > libervia-templates

comparison default/static/css.js @ 41:e296ee56f611

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 494d740aa3d6
children 3a9dae71aa6c
comparison
equal deleted inserted replaced
40:134c731937e8 41:e296ee56f611
12 document.getElementById(target_elem_id).classList.toggle(class_name); 12 document.getElementById(target_elem_id).classList.toggle(class_name);
13 } 13 }
14 ); 14 );
15 } 15 }
16 16
17 function get_elt(arg) {
18 if (typeof arg === 'string') {
19 // we should have an id
20 return document.getElementById(arg);
21 }
22 else {
23 // we should have an element
24 return arg;
25 }
26 }
27
17 function clicked_cls(elt) { 28 function clicked_cls(elt) {
18 /* toggle "clicked" class on each click, and remove "init" class if present */ 29 /* toggle "clicked" class on each click, and remove "init" class if present */
19 // init 30 // init
20 if (elt.classList.contains("init")) { 31 if (elt.classList.contains("init")) {
21 elt.classList.remove("init"); 32 elt.classList.remove("init");
22 } 33 }
23 34
24 // clicked 35 // clicked
25 elt.classList.toggle("clicked"); 36 elt.classList.toggle("clicked");
26 } 37 }
38
39 function clicked_mh_fix(arg) {
40 /* toggle clicked, and fix max-height on transitionend
41 *
42 * needed to workaround transition issue with max-height:none
43 *
44 * inspired from https://css-tricks.com/using-css-transitions-auto-dimensions,
45 * thanks to Brandon Smith */
46 elt = get_elt(arg);
47
48 if (!elt.classList.contains("clicked")) {
49 /* expand */
50 var fix_expand = function(event) {
51 elt.removeEventListener("transitionend", fix_expand, false);
52 if (elt.classList.contains("clicked")) {
53 /* if event is clicked quicker than transition time,
54 * this callback can be called on reduce */
55 elt.style.maxHeight = "none";
56 }
57 };
58
59 elt.setAttribute('max_height_init', elt.clientHeight);
60 elt.addEventListener("transitionend", fix_expand, false);
61 clicked_cls(elt);
62 elt.style.maxHeight = elt.scrollHeight + 'px';
63 }
64 else {
65 /* reduce */
66 var transition_save = elt.style.transition;
67 elt.style.transition = '';
68 requestAnimationFrame(function() {
69 elt.style.maxHeight = elt.scrollHeight + 'px';
70 elt.style.transition = transition_save;
71
72 requestAnimationFrame(function() {
73 elt.style.maxHeight = elt.getAttribute('max_height_init') + 'px';
74 elt.removeAttribute('max_height_init');
75 elt.style.maxHeight = null;
76 });
77 });
78
79 clicked_cls(elt);
80 }
81 }