Mercurial > libervia-templates
diff sat_templates/templates/default/static/common.js @ 166:178f55b825b7
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 | e9f0a4215e46 |
children | cede18c118c9 |
line wrap: on
line diff
--- a/sat_templates/templates/default/static/common.js Fri Sep 14 19:49:15 2018 +0200 +++ b/sat_templates/templates/default/static/common.js Wed Oct 03 21:00:24 2018 +0200 @@ -43,19 +43,19 @@ return available; } -function toggle_clicked_class_tag(tag_name, class_name='clicked') { +function toggle_clicked_class_tag(tag_name, class_name='state_clicked') { for (let elt of document.getElementsByTagName(tag_name)) { elt.classList.toggle(class_name); } } -function toggle_clicked_class_sel(selectors, class_name='clicked') { +function toggle_clicked_class_sel(selectors, class_name='state_clicked') { for (let elt of document.querySelectorAll(selectors)) { elt.classList.toggle(class_name); } } -function set_clicked_class_id(trigger_elem_id, target_elem_id=null, class_name='clicked') { +function set_clicked_class_id(trigger_elem_id, target_elem_id=null, class_name='state_clicked') { if (target_elem_id === null) { target_elem_id = trigger_elem_id; } document.getElementById(trigger_elem_id).addEventListener( "click", @@ -65,6 +65,26 @@ ); } +function tab_select(tab_btn_elt, tab_page_id) { + for (let elt of document.getElementsByClassName("tab__btn")) { + if (elt === tab_btn_elt) { + elt.classList.add('state_clicked'); + } + else { + elt.classList.remove('state_clicked'); + } + } + let tab_page_elt = document.getElementById(tab_page_id); + for (let elt of document.getElementsByClassName("tab__page")) { + if (elt === tab_page_elt) { + elt.classList.add('state_clicked'); + } + else { + elt.classList.remove('state_clicked'); + } + } +} + function get_elt(arg) { if (typeof arg === 'string') { // we should have an id @@ -77,58 +97,73 @@ } function clicked_cls(elt) { - /* toggle "clicked" class on each click, and remove "init" class if present */ - // init - if (elt.classList.contains("init")) { - elt.classList.remove("init"); + /* toggle "state_clicked" class on each click, and remove "state_init" class if present */ + // state_init + if (elt.classList.contains("state_init")) { + elt.classList.remove("state_init"); } // clicked - elt.classList.toggle("clicked"); + elt.classList.toggle("state_clicked"); } -function clicked_mh_fix(arg) { - /* toggle clicked, and fix max-height on transitionend +function clicked_mh_fix(arg, max_height) { + /* toggle state_clicked, and fix max-height on transitionend * * needed to workaround transition issue with max-height:none * inspired from https://css-tricks.com/using-css-transitions-auto-dimensions, * thanks to Brandon Smith * - * @param arg: element to toggle (id as string, or element itself) + * @param arg(string, DOM element): element to toggle (id as string, or element itself) + * @param max_height(int): maximum height when collapsed (default to clientHeight) * */ elt = get_elt(arg); - if (!elt.classList.contains("clicked")) { + if (!elt.classList.contains("state_clicked")) { /* expand */ - var fix_expand = function(event) { + let fix_expand = function(event) { elt.removeEventListener("transitionend", fix_expand, false); - if (elt.classList.contains("clicked")) { + if (elt.classList.contains("state_clicked")) { /* if event is clicked quicker than transition time, * this callback can be called on reduce */ elt.style.maxHeight = "none"; } }; - elt.setAttribute('max_height_init', elt.clientHeight); + if (!elt.hasAttribute('_max_height_init')) { + elt.setAttribute('_max_height_init', max_height!==undefined?max_height:elt.clientHeight); + } elt.addEventListener("transitionend", fix_expand, false); clicked_cls(elt); elt.style.maxHeight = elt.scrollHeight + 'px'; + } else { /* reduce */ - var transition_save = elt.style.transition; + let transition_save = elt.style.transition; elt.style.transition = ''; requestAnimationFrame(function() { elt.style.maxHeight = elt.scrollHeight + 'px'; elt.style.transition = transition_save; requestAnimationFrame(function() { - elt.style.maxHeight = elt.getAttribute('max_height_init') + 'px'; - elt.removeAttribute('max_height_init'); - elt.style.maxHeight = null; + elt.style.maxHeight = elt.getAttribute('_max_height_init') + 'px'; }); }); clicked_cls(elt); } } + +function createElement(html) { + /* create a DOM element from raw HTML + * + * @param html(string): raw HTML to parse + * @return: DOM element + */ + + let template = document.createElement('template'); + template.innerHTML = html.trim(); + new_element = template.content.firstChild; + return new_element; + }