Mercurial > libervia-templates
diff default/static/common.js @ 78:d1741c2f3e9d
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 | default/static/css.js@3a9dae71aa6c |
children | caab77328b1c |
line wrap: on
line diff
--- /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); + } +}