# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1499927767 -7200
# Node ID e296ee56f611e16b54dfd75ab6748f60bfc8e601
# Parent  134c731937e80b7c6f200bc0e29af0722ff6a082
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)

diff -r 134c731937e8 -r e296ee56f611 default/static/css.js
--- 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);
+    }
+}