Mercurial > libervia-templates
annotate sat_templates/templates/default/static/dom_update.js @ 323:34b8de7be336
bulma (base): show breadcrumbs
author | Goffi <goffi@goffi.org> |
---|---|
date | Thu, 29 Apr 2021 20:52:17 +0200 |
parents | 178f55b825b7 |
children |
rev | line source |
---|---|
166
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
1 /* This script check for well-known DOM element to modify when javascript is enabled */ |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
2 |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
3 const EXPAND_LIMIT = 250; // max height before expanding is needed, in pixels |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
4 const MAGIC_CLASSES = { |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
5 "box--expand": "handleBoxExpand"}; |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
6 |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
7 |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
8 function addExpandListeners(elt, expand_elt, reduce_elt) { |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
9 let on_click = function(){ |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
10 clicked_mh_fix(elt); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
11 }; |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
12 expand_elt.addEventListener('click', on_click, false); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
13 reduce_elt.addEventListener('click', on_click, false); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
14 } |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
15 |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
16 function handleBoxExpand(box_elt) { |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
17 /* Add expand zone elements if box height is > EXPAND_LIMIT |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
18 * |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
19 * Those zone will expand/reduce the box when clicked |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
20 * @param box_elt(DOM element): element with box--expand class |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
21 */ |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
22 let content_elt = box_elt.getElementsByClassName("box__content")[0]; |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
23 |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
24 if (content_elt === undefined) { |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
25 return; |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
26 } |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
27 |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
28 if (content_elt.offsetHeight > EXPAND_LIMIT) { |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
29 /* top expand box */ |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
30 let reduce_elt = document.createElement("div"); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
31 reduce_elt.className = "box__expand_zone box__expand_zone--top show_if_parent_clicked"; |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
32 let p_elt = document.createElement("p"); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
33 p_elt.textContent = reduce_txt; |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
34 reduce_elt.appendChild(p_elt); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
35 box_elt.insertBefore(reduce_elt, box_elt.firstChild); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
36 |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
37 /* bottom expand box */ |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
38 let expand_elt = document.createElement("div"); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
39 expand_elt.className = "box__expand_zone box__expand_zone--bottom"; |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
40 let p_elt_clicked = document.createElement("p"); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
41 p_elt_clicked.textContent = expand_txt; |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
42 p_elt_clicked.className = "show_if_grandparent_not_clicked"; |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
43 let p_elt_not_clicked = document.createElement("p"); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
44 p_elt_not_clicked.textContent = reduce_txt; |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
45 p_elt_not_clicked.className = "show_if_grandparent_clicked"; |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
46 expand_elt.appendChild(p_elt_clicked); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
47 expand_elt.appendChild(p_elt_not_clicked); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
48 box_elt.appendChild(expand_elt); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
49 |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
50 addExpandListeners(box_elt, expand_elt, reduce_elt); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
51 } |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
52 } |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
53 |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
54 |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
55 function handleStateInit(elt) { |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
56 /* Add a click listener which remove state_init |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
57 * |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
58 * The listener will call magic classes handlers when suitable |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
59 * @param elt(DOM element): element with state_init class |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
60 */ |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
61 function onClick() { |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
62 elt.removeEventListener('click', onClick, false); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
63 elt.classList.remove("state_init"); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
64 |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
65 for (let [className, funcName] of Object.entries(MAGIC_CLASSES)){ |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
66 if (elt.classList.contains(className)) { |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
67 window[funcName](elt); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
68 } |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
69 } |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
70 } |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
71 elt.addEventListener('click', onClick, false); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
72 } |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
73 |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
74 // we first have to handle "state_init" |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
75 for (let elt of document.getElementsByClassName("state_init")) { |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
76 handleStateInit(elt); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
77 } |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
78 |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
79 // we then launch every handler where "state_init" is not set |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
80 // "state_init" handler will launch the handlers itself on first click |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
81 for (let [className, funcName] of Object.entries(MAGIC_CLASSES)){ |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
82 for (let box_elt of document.getElementsByClassName(className)) { |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
83 if (!box_elt.classList.contains("state_init")) { |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
84 window[funcName](box_elt); |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
85 } |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
86 } |
178f55b825b7
small refactoring/redesign, better BEM integration:
Goffi <goffi@goffi.org>
parents:
diff
changeset
|
87 } |