# HG changeset patch # User Goffi # Date 1514061428 -3600 # Node ID d1741c2f3e9df54f74918cea4264746c1e22d68b # Parent 304a72392191f98d107add54f1337c56e3233dfd js(common): renamed css.js to common.js has it will have generic functions not only for css manipulation. diff -r 304a72392191 -r d1741c2f3e9d default/base/base.html --- 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 #} diff -r 304a72392191 -r d1741c2f3e9d default/static/common.js --- /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); + } +} diff -r 304a72392191 -r d1741c2f3e9d default/static/css.js --- 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); - } -}