Mercurial > libervia-templates
view sat_templates/templates/default/static/dom_update.js @ 183:240bbac435f4
base: implemented language button:
- `component.menu` can now be used with a `{% call %}`, allowing extra HTML to be added after in the <nav> element
- a language dropdown is shown if more than one translation is available, allowing to change page locale
- if javascript is available, only the dropdown is visible, and changing it reload the page with new locale
- if javascript is not available, a submit button is display to change the locale
author | Goffi <goffi@goffi.org> |
---|---|
date | Wed, 10 Apr 2019 21:05:58 +0200 |
parents | 178f55b825b7 |
children |
line wrap: on
line source
/* This script check for well-known DOM element to modify when javascript is enabled */ const EXPAND_LIMIT = 250; // max height before expanding is needed, in pixels const MAGIC_CLASSES = { "box--expand": "handleBoxExpand"}; function addExpandListeners(elt, expand_elt, reduce_elt) { let on_click = function(){ clicked_mh_fix(elt); }; expand_elt.addEventListener('click', on_click, false); reduce_elt.addEventListener('click', on_click, false); } function handleBoxExpand(box_elt) { /* Add expand zone elements if box height is > EXPAND_LIMIT * * Those zone will expand/reduce the box when clicked * @param box_elt(DOM element): element with box--expand class */ let content_elt = box_elt.getElementsByClassName("box__content")[0]; if (content_elt === undefined) { return; } if (content_elt.offsetHeight > EXPAND_LIMIT) { /* top expand box */ let reduce_elt = document.createElement("div"); reduce_elt.className = "box__expand_zone box__expand_zone--top show_if_parent_clicked"; let p_elt = document.createElement("p"); p_elt.textContent = reduce_txt; reduce_elt.appendChild(p_elt); box_elt.insertBefore(reduce_elt, box_elt.firstChild); /* bottom expand box */ let expand_elt = document.createElement("div"); expand_elt.className = "box__expand_zone box__expand_zone--bottom"; let p_elt_clicked = document.createElement("p"); p_elt_clicked.textContent = expand_txt; p_elt_clicked.className = "show_if_grandparent_not_clicked"; let p_elt_not_clicked = document.createElement("p"); p_elt_not_clicked.textContent = reduce_txt; p_elt_not_clicked.className = "show_if_grandparent_clicked"; expand_elt.appendChild(p_elt_clicked); expand_elt.appendChild(p_elt_not_clicked); box_elt.appendChild(expand_elt); addExpandListeners(box_elt, expand_elt, reduce_elt); } } function handleStateInit(elt) { /* Add a click listener which remove state_init * * The listener will call magic classes handlers when suitable * @param elt(DOM element): element with state_init class */ function onClick() { elt.removeEventListener('click', onClick, false); elt.classList.remove("state_init"); for (let [className, funcName] of Object.entries(MAGIC_CLASSES)){ if (elt.classList.contains(className)) { window[funcName](elt); } } } elt.addEventListener('click', onClick, false); } // we first have to handle "state_init" for (let elt of document.getElementsByClassName("state_init")) { handleStateInit(elt); } // we then launch every handler where "state_init" is not set // "state_init" handler will launch the handlers itself on first click for (let [className, funcName] of Object.entries(MAGIC_CLASSES)){ for (let box_elt of document.getElementsByClassName(className)) { if (!box_elt.classList.contains("state_init")) { window[funcName](box_elt); } } }