Mercurial > libervia-templates

annotate default/static/css.js @ 75:9471c7309ecc

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
base: added viewport meta
author Goffi <goffi@goffi.org>
date Mon, 04 Dec 2017 01:11:33 +0100
parents 3a9dae71aa6c
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
67
3a9dae71aa6c static (js/css): method to toggle clicked class on all elements matching a selector
Goffi <goffi@goffi.org>
parents: 41
diff changeset
1 function toggle_clicked_class_tag(tag_name, class_name='clicked') {
15
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
67
3a9dae71aa6c static (js/css): method to toggle clicked class on all elements matching a selector
Goffi <goffi@goffi.org>
parents: 41
diff changeset
7 function toggle_clicked_class_sel(selectors, class_name='clicked') {
3a9dae71aa6c static (js/css): method to toggle clicked class on all elements matching a selector
Goffi <goffi@goffi.org>
parents: 41
diff changeset
8 for (let elt of document.querySelectorAll(selectors)) {
3a9dae71aa6c static (js/css): method to toggle clicked class on all elements matching a selector
Goffi <goffi@goffi.org>
parents: 41
diff changeset
9 elt.classList.toggle(class_name);
3a9dae71aa6c static (js/css): method to toggle clicked class on all elements matching a selector
Goffi <goffi@goffi.org>
parents: 41
diff changeset
10 }
3a9dae71aa6c static (js/css): method to toggle clicked class on all elements matching a selector
Goffi <goffi@goffi.org>
parents: 41
diff changeset
11 }
3a9dae71aa6c static (js/css): method to toggle clicked class on all elements matching a selector
Goffi <goffi@goffi.org>
parents: 41
diff changeset
12
15
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
13 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
14 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
15 document.getElementById(trigger_elem_id).addEventListener(
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
16 "click",
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
17 function() {
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
18 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
19 }
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
20 );
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
21 }
29
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
22
41
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
23 function get_elt(arg) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
24 if (typeof arg === 'string') {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
25 // we should have an id
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
26 return document.getElementById(arg);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
27 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
28 else {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
29 // we should have an element
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
30 return arg;
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
31 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
32 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
33
29
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
34 function clicked_cls(elt) {
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
35 /* 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
36 // init
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
37 if (elt.classList.contains("init")) {
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
38 elt.classList.remove("init");
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
39 }
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
40
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
41 // clicked
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
42 elt.classList.toggle("clicked");
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
43 }
41
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
44
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
45 function clicked_mh_fix(arg) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
46 /* toggle clicked, and fix max-height on transitionend
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 * 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
49 *
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
50 * 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
51 * thanks to Brandon Smith */
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
52 elt = get_elt(arg);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
53
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
54 if (!elt.classList.contains("clicked")) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
55 /* expand */
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
56 var fix_expand = function(event) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
57 elt.removeEventListener("transitionend", fix_expand, false);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
58 if (elt.classList.contains("clicked")) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
59 /* if event is clicked quicker than transition time,
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
60 * this callback can be called on reduce */
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
61 elt.style.maxHeight = "none";
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
62 }
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
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
65 elt.setAttribute('max_height_init', elt.clientHeight);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
66 elt.addEventListener("transitionend", fix_expand, false);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
67 clicked_cls(elt);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
68 elt.style.maxHeight = elt.scrollHeight + 'px';
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
69 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
70 else {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
71 /* reduce */
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
72 var transition_save = elt.style.transition;
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
73 elt.style.transition = '';
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
74 requestAnimationFrame(function() {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
75 elt.style.maxHeight = elt.scrollHeight + 'px';
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
76 elt.style.transition = transition_save;
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 requestAnimationFrame(function() {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
79 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
80 elt.removeAttribute('max_height_init');
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
81 elt.style.maxHeight = null;
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
82 });
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
83 });
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
84
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
85 clicked_cls(elt);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
86 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
87 }