--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/static/common.js	Sat Dec 23 21:37:08 2017 +0100
@@ -0,0 +1,87 @@
+function toggle_clicked_class_tag(tag_name, class_name='clicked') {
+    for (let elt of document.getElementsByTagName(tag_name)) {
+        elt.classList.toggle(class_name);
+    }
+}
+
+function toggle_clicked_class_sel(selectors, class_name='clicked') {
+    for (let elt of document.querySelectorAll(selectors)) {
+        elt.classList.toggle(class_name);
+    }
+}
+
+function set_clicked_class_id(trigger_elem_id, target_elem_id=null, class_name='clicked') {
+    if (target_elem_id === null) { target_elem_id = trigger_elem_id; }
+    document.getElementById(trigger_elem_id).addEventListener(
+        "click",
+        function() {
+            document.getElementById(target_elem_id).classList.toggle(class_name);
+        }
+    );
+}
+
+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
+    if (elt.classList.contains("init")) {
+        elt.classList.remove("init");
+    }
+
+    // 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);
+    }
+}