Mercurial > libervia-templates

comparison sat_templates/templates/default/static/dom_update.js @ 166:178f55b825b7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
small refactoring/redesign, better BEM integration: - blog has been redesigned, and almost all blog CSS has been made generic and moved to main styles.css file. - better noscript handling, dynamic elements are created using "magic" classes (dom_update.js) - using better icons for older/newer messages - better state handling, classes now use "state_XXX" - more classes now use BEM convention - menu labels have been moved to a separate template (components/menu_labels.html), so it can be overriden easily by other sites - better styles.css organisation
author Goffi <goffi@goffi.org>
date Wed, 03 Oct 2018 21:00:24 +0200
parents
children
comparison
equal deleted inserted replaced
165:9e8d9d754337 166:178f55b825b7
1 /* This script check for well-known DOM element to modify when javascript is enabled */
2
3 const EXPAND_LIMIT = 250; // max height before expanding is needed, in pixels
4 const MAGIC_CLASSES = {
5 "box--expand": "handleBoxExpand"};
6
7
8 function addExpandListeners(elt, expand_elt, reduce_elt) {
9 let on_click = function(){
10 clicked_mh_fix(elt);
11 };
12 expand_elt.addEventListener('click', on_click, false);
13 reduce_elt.addEventListener('click', on_click, false);
14 }
15
16 function handleBoxExpand(box_elt) {
17 /* Add expand zone elements if box height is > EXPAND_LIMIT
18 *
19 * Those zone will expand/reduce the box when clicked
20 * @param box_elt(DOM element): element with box--expand class
21 */
22 let content_elt = box_elt.getElementsByClassName("box__content")[0];
23
24 if (content_elt === undefined) {
25 return;
26 }
27
28 if (content_elt.offsetHeight > EXPAND_LIMIT) {
29 /* top expand box */
30 let reduce_elt = document.createElement("div");
31 reduce_elt.className = "box__expand_zone box__expand_zone--top show_if_parent_clicked";
32 let p_elt = document.createElement("p");
33 p_elt.textContent = reduce_txt;
34 reduce_elt.appendChild(p_elt);
35 box_elt.insertBefore(reduce_elt, box_elt.firstChild);
36
37 /* bottom expand box */
38 let expand_elt = document.createElement("div");
39 expand_elt.className = "box__expand_zone box__expand_zone--bottom";
40 let p_elt_clicked = document.createElement("p");
41 p_elt_clicked.textContent = expand_txt;
42 p_elt_clicked.className = "show_if_grandparent_not_clicked";
43 let p_elt_not_clicked = document.createElement("p");
44 p_elt_not_clicked.textContent = reduce_txt;
45 p_elt_not_clicked.className = "show_if_grandparent_clicked";
46 expand_elt.appendChild(p_elt_clicked);
47 expand_elt.appendChild(p_elt_not_clicked);
48 box_elt.appendChild(expand_elt);
49
50 addExpandListeners(box_elt, expand_elt, reduce_elt);
51 }
52 }
53
54
55 function handleStateInit(elt) {
56 /* Add a click listener which remove state_init
57 *
58 * The listener will call magic classes handlers when suitable
59 * @param elt(DOM element): element with state_init class
60 */
61 function onClick() {
62 elt.removeEventListener('click', onClick, false);
63 elt.classList.remove("state_init");
64
65 for (let [className, funcName] of Object.entries(MAGIC_CLASSES)){
66 if (elt.classList.contains(className)) {
67 window[funcName](elt);
68 }
69 }
70 }
71 elt.addEventListener('click', onClick, false);
72 }
73
74 // we first have to handle "state_init"
75 for (let elt of document.getElementsByClassName("state_init")) {
76 handleStateInit(elt);
77 }
78
79 // we then launch every handler where "state_init" is not set
80 // "state_init" handler will launch the handlers itself on first click
81 for (let [className, funcName] of Object.entries(MAGIC_CLASSES)){
82 for (let box_elt of document.getElementsByClassName(className)) {
83 if (!box_elt.classList.contains("state_init")) {
84 window[funcName](box_elt);
85 }
86 }
87 }