Mercurial > libervia-templates

annotate default/static/css.js @ 41:e296ee56f611

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
static (css.js): max-height transition fix: - added a "get_elt" function which allows to give element directly or by its id - added "clicked_mh_fix" which allows transitions to max-height: none (not possible with CSS only)
author Goffi <goffi@goffi.org>
date Thu, 13 Jul 2017 08:36:07 +0200
parents 494d740aa3d6
children 3a9dae71aa6c
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
15
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
1 function set_clicked_class_tag(tag_name, class_name='clicked') {
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
2 for (let elt of document.getElementsByTagName(tag_name)) {
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
3 elt.classList.toggle(class_name);
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
4 }
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
5 }
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
6
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
7 function set_clicked_class_id(trigger_elem_id, target_elem_id=null, class_name='clicked') {
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
8 if (target_elem_id === null) { target_elem_id = trigger_elem_id; }
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
9 document.getElementById(trigger_elem_id).addEventListener(
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
10 "click",
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
11 function() {
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
12 document.getElementById(target_elem_id).classList.toggle(class_name);
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
13 }
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
14 );
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
15 }
29
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
16
41
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
17 function get_elt(arg) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
18 if (typeof arg === 'string') {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
19 // we should have an id
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
20 return document.getElementById(arg);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
21 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
22 else {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
23 // we should have an element
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
24 return arg;
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
25 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
26 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
27
29
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
28 function clicked_cls(elt) {
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
29 /* toggle "clicked" class on each click, and remove "init" class if present */
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
30 // init
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
31 if (elt.classList.contains("init")) {
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
32 elt.classList.remove("init");
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
33 }
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
34
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
35 // clicked
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
36 elt.classList.toggle("clicked");
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
37 }
41
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
38
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
39 function clicked_mh_fix(arg) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
40 /* toggle clicked, and fix max-height on transitionend
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
41 *
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
42 * needed to workaround transition issue with max-height:none
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
43 *
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
44 * inspired from https://css-tricks.com/using-css-transitions-auto-dimensions,
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
45 * thanks to Brandon Smith */
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
46 elt = get_elt(arg);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
47
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
48 if (!elt.classList.contains("clicked")) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
49 /* expand */
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
50 var fix_expand = function(event) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
51 elt.removeEventListener("transitionend", fix_expand, false);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
52 if (elt.classList.contains("clicked")) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
53 /* if event is clicked quicker than transition time,
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
54 * this callback can be called on reduce */
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
55 elt.style.maxHeight = "none";
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
56 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
57 };
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
58
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
59 elt.setAttribute('max_height_init', elt.clientHeight);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
60 elt.addEventListener("transitionend", fix_expand, false);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
61 clicked_cls(elt);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
62 elt.style.maxHeight = elt.scrollHeight + 'px';
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
63 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
64 else {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
65 /* reduce */
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
66 var transition_save = elt.style.transition;
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
67 elt.style.transition = '';
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
68 requestAnimationFrame(function() {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
69 elt.style.maxHeight = elt.scrollHeight + 'px';
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
70 elt.style.transition = transition_save;
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
71
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
72 requestAnimationFrame(function() {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
73 elt.style.maxHeight = elt.getAttribute('max_height_init') + 'px';
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
74 elt.removeAttribute('max_height_init');
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
75 elt.style.maxHeight = null;
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
76 });
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
77 });
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
78
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
79 clicked_cls(elt);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
80 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
81 }