Mercurial > libervia-templates

annotate sat_templates/default/static/common.js @ 155:954759f0e8fa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
css: styles improvments + following a bit more BEM conventions
author Goffi <goffi@goffi.org>
date Thu, 21 Jun 2018 01:12:40 +0200
parents 33c7ce833d3f
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
83
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
1 var __session_storage_available;
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
2 var __local_storage_available;
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
3
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
4 function storageAvailable(type) {
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
5 /* check if session or local storage is available
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
6 *
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
7 * @param type(string): "session" or "storage"
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
8 * @return (boolean): true if requested storage is available
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
9 */
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
10 console.assert(type == 'session' || type == 'storage', "bad storage type (%s)", type);
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
11 const var_name = '__' + type + '_storage_available';
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
12 var available = window[var_name];
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
13 if (available === undefined) {
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
14 // test method from https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
15 var storage = window[type + 'Storage'];
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
16 try {
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
17 x = '__storage_test__';
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
18 storage.setItem(x, x);
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
19 storage.removeItem(x);
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
20 available = true;
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
21 }
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
22 catch(e) {
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
23 available = e instanceof DOMException && (
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
24 // everything except Firefox
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
25 e.code === 22 ||
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
26 // Firefox
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
27 e.code === 1014 ||
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
28 // test name field too, because code might not be present
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
29 // everything except Firefox
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
30 e.name === 'QuotaExceededError' ||
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
31 // Firefox
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
32 e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
33 // acknowledge QuotaExceededError only if there's something already stored
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
34 storage.length !== 0;
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
35 }
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
36
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
37 if (!available) {
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
38 console.warn("%s storage not available", type);
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
39 }
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
40 window[var_name] = available;
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
41 }
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
42
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
43 return available;
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
44 }
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
45
67
3a9dae71aa6c static (js/css): method to toggle clicked class on all elements matching a selector
Goffi <goffi@goffi.org>
parents: 41
diff changeset
46 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
47 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
48 elt.classList.toggle(class_name);
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
49 }
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
50 }
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
51
67
3a9dae71aa6c static (js/css): method to toggle clicked class on all elements matching a selector
Goffi <goffi@goffi.org>
parents: 41
diff changeset
52 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
53 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
54 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
55 }
3a9dae71aa6c static (js/css): method to toggle clicked class on all elements matching a selector
Goffi <goffi@goffi.org>
parents: 41
diff changeset
56 }
3a9dae71aa6c static (js/css): method to toggle clicked class on all elements matching a selector
Goffi <goffi@goffi.org>
parents: 41
diff changeset
57
15
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
58 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
59 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
60 document.getElementById(trigger_elem_id).addEventListener(
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
61 "click",
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
62 function() {
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
63 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
64 }
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
65 );
c319291943be static: css.js (library for basic style manipulation) first draft
Goffi <goffi@goffi.org>
parents:
diff changeset
66 }
29
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
67
41
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
68 function get_elt(arg) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
69 if (typeof arg === 'string') {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
70 // we should have an id
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
71 return document.getElementById(arg);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
72 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
73 else {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
74 // we should have an element
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
75 return arg;
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
29
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
79 function clicked_cls(elt) {
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
80 /* 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
81 // init
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
82 if (elt.classList.contains("init")) {
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
83 elt.classList.remove("init");
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
84 }
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
85
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
86 // clicked
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
87 elt.classList.toggle("clicked");
494d740aa3d6 static/css.js: added clicked_cls function:
Goffi <goffi@goffi.org>
parents: 15
diff changeset
88 }
41
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
89
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
90 function clicked_mh_fix(arg) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
91 /* toggle clicked, and fix max-height on transitionend
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
92 *
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
93 * needed to workaround transition issue with max-height:none
83
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
94 * inspired from https://css-tricks.com/using-css-transitions-auto-dimensions,
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
95 * thanks to Brandon Smith
41
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
96 *
83
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
97 * @param arg: element to toggle (id as string, or element itself)
caab77328b1c js (common): added a method to check if local or session storage is available
Goffi <goffi@goffi.org>
parents: 78
diff changeset
98 * */
41
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
99 elt = get_elt(arg);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
100
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
101 if (!elt.classList.contains("clicked")) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
102 /* expand */
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
103 var fix_expand = function(event) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
104 elt.removeEventListener("transitionend", fix_expand, false);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
105 if (elt.classList.contains("clicked")) {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
106 /* if event is clicked quicker than transition time,
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
107 * this callback can be called on reduce */
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
108 elt.style.maxHeight = "none";
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
109 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
110 };
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
111
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
112 elt.setAttribute('max_height_init', elt.clientHeight);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
113 elt.addEventListener("transitionend", fix_expand, false);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
114 clicked_cls(elt);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
115 elt.style.maxHeight = elt.scrollHeight + 'px';
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
116 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
117 else {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
118 /* reduce */
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
119 var transition_save = elt.style.transition;
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
120 elt.style.transition = '';
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
121 requestAnimationFrame(function() {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
122 elt.style.maxHeight = elt.scrollHeight + 'px';
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
123 elt.style.transition = transition_save;
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
124
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
125 requestAnimationFrame(function() {
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
126 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
127 elt.removeAttribute('max_height_init');
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
128 elt.style.maxHeight = null;
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
129 });
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
130 });
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
131
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
132 clicked_cls(elt);
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
133 }
e296ee56f611 static (css.js): max-height transition fix:
Goffi <goffi@goffi.org>
parents: 29
diff changeset
134 }