Mercurial > libervia-templates

annotate sat_templates/templates/default/static/dom_update.js @ 401:0e454358ca49

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma: update `bulma` to version `1.0.2`
author Goffi <goffi@goffi.org>
date Wed, 02 Oct 2024 17:23:03 +0200
parents 178f55b825b7
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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 }