Mercurial > libervia-templates

changeset 78:d1741c2f3e9d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
js(common): renamed css.js to common.js has it will have generic functions not only for css manipulation.
author Goffi <goffi@goffi.org>
date Sat, 23 Dec 2017 21:37:08 +0100
parents 304a72392191
children 0ecc1ea955e5
files default/base/base.html default/static/common.js default/static/css.js
diffstat 3 files changed, 88 insertions(+), 88 deletions(-) [+]
line wrap: on
line diff
--- a/default/base/base.html	Sat Dec 23 15:53:02 2017 +0100
+++ b/default/base/base.html	Sat Dec 23 21:37:08 2017 +0100
@@ -1,6 +1,6 @@
 {% set embedded = True %} {# embedded is set to avoid including base.html several times if a generic page is included (e.g. blog/articles.html) #}
 {% import 'components/common.html' as component with context %}
-{{ script.include('css') }} {# css.js is a common script, so it's useful to import it here #}
+{{ script.include('common') }} {# common.js has many useful functions, so we import it here #}
 <!DOCTYPE html>
 <html>
 <head>
--- /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);
+    }
+}
--- a/default/static/css.js	Sat Dec 23 15:53:02 2017 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,87 +0,0 @@
-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);
-    }
-}