Mercurial > libervia-templates

comparison default/static/common.js @ 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 default/static/css.js@3a9dae71aa6c
children caab77328b1c
comparison
equal deleted inserted replaced
77:304a72392191 78:d1741c2f3e9d
1 function toggle_clicked_class_tag(tag_name, class_name='clicked') {
2 for (let elt of document.getElementsByTagName(tag_name)) {
3 elt.classList.toggle(class_name);
4 }
5 }
6
7 function toggle_clicked_class_sel(selectors, class_name='clicked') {
8 for (let elt of document.querySelectorAll(selectors)) {
9 elt.classList.toggle(class_name);
10 }
11 }
12
13 function set_clicked_class_id(trigger_elem_id, target_elem_id=null, class_name='clicked') {
14 if (target_elem_id === null) { target_elem_id = trigger_elem_id; }
15 document.getElementById(trigger_elem_id).addEventListener(
16 "click",
17 function() {
18 document.getElementById(target_elem_id).classList.toggle(class_name);
19 }
20 );
21 }
22
23 function get_elt(arg) {
24 if (typeof arg === 'string') {
25 // we should have an id
26 return document.getElementById(arg);
27 }
28 else {
29 // we should have an element
30 return arg;
31 }
32 }
33
34 function clicked_cls(elt) {
35 /* toggle "clicked" class on each click, and remove "init" class if present */
36 // init
37 if (elt.classList.contains("init")) {
38 elt.classList.remove("init");
39 }
40
41 // clicked
42 elt.classList.toggle("clicked");
43 }
44
45 function clicked_mh_fix(arg) {
46 /* toggle clicked, and fix max-height on transitionend
47 *
48 * needed to workaround transition issue with max-height:none
49 *
50 * inspired from https://css-tricks.com/using-css-transitions-auto-dimensions,
51 * thanks to Brandon Smith */
52 elt = get_elt(arg);
53
54 if (!elt.classList.contains("clicked")) {
55 /* expand */
56 var fix_expand = function(event) {
57 elt.removeEventListener("transitionend", fix_expand, false);
58 if (elt.classList.contains("clicked")) {
59 /* if event is clicked quicker than transition time,
60 * this callback can be called on reduce */
61 elt.style.maxHeight = "none";
62 }
63 };
64
65 elt.setAttribute('max_height_init', elt.clientHeight);
66 elt.addEventListener("transitionend", fix_expand, false);
67 clicked_cls(elt);
68 elt.style.maxHeight = elt.scrollHeight + 'px';
69 }
70 else {
71 /* reduce */
72 var transition_save = elt.style.transition;
73 elt.style.transition = '';
74 requestAnimationFrame(function() {
75 elt.style.maxHeight = elt.scrollHeight + 'px';
76 elt.style.transition = transition_save;
77
78 requestAnimationFrame(function() {
79 elt.style.maxHeight = elt.getAttribute('max_height_init') + 'px';
80 elt.removeAttribute('max_height_init');
81 elt.style.maxHeight = null;
82 });
83 });
84
85 clicked_cls(elt);
86 }
87 }