Mercurial > libervia-templates

comparison sat_templates/templates/default/static/common.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 e9f0a4215e46
children cede18c118c9
comparison
equal deleted inserted replaced
165:9e8d9d754337 166:178f55b825b7
41 } 41 }
42 42
43 return available; 43 return available;
44 } 44 }
45 45
46 function toggle_clicked_class_tag(tag_name, class_name='clicked') { 46 function toggle_clicked_class_tag(tag_name, class_name='state_clicked') {
47 for (let elt of document.getElementsByTagName(tag_name)) { 47 for (let elt of document.getElementsByTagName(tag_name)) {
48 elt.classList.toggle(class_name); 48 elt.classList.toggle(class_name);
49 } 49 }
50 } 50 }
51 51
52 function toggle_clicked_class_sel(selectors, class_name='clicked') { 52 function toggle_clicked_class_sel(selectors, class_name='state_clicked') {
53 for (let elt of document.querySelectorAll(selectors)) { 53 for (let elt of document.querySelectorAll(selectors)) {
54 elt.classList.toggle(class_name); 54 elt.classList.toggle(class_name);
55 } 55 }
56 } 56 }
57 57
58 function set_clicked_class_id(trigger_elem_id, target_elem_id=null, class_name='clicked') { 58 function set_clicked_class_id(trigger_elem_id, target_elem_id=null, class_name='state_clicked') {
59 if (target_elem_id === null) { target_elem_id = trigger_elem_id; } 59 if (target_elem_id === null) { target_elem_id = trigger_elem_id; }
60 document.getElementById(trigger_elem_id).addEventListener( 60 document.getElementById(trigger_elem_id).addEventListener(
61 "click", 61 "click",
62 function() { 62 function() {
63 document.getElementById(target_elem_id).classList.toggle(class_name); 63 document.getElementById(target_elem_id).classList.toggle(class_name);
64 } 64 }
65 ); 65 );
66 }
67
68 function tab_select(tab_btn_elt, tab_page_id) {
69 for (let elt of document.getElementsByClassName("tab__btn")) {
70 if (elt === tab_btn_elt) {
71 elt.classList.add('state_clicked');
72 }
73 else {
74 elt.classList.remove('state_clicked');
75 }
76 }
77 let tab_page_elt = document.getElementById(tab_page_id);
78 for (let elt of document.getElementsByClassName("tab__page")) {
79 if (elt === tab_page_elt) {
80 elt.classList.add('state_clicked');
81 }
82 else {
83 elt.classList.remove('state_clicked');
84 }
85 }
66 } 86 }
67 87
68 function get_elt(arg) { 88 function get_elt(arg) {
69 if (typeof arg === 'string') { 89 if (typeof arg === 'string') {
70 // we should have an id 90 // we should have an id
75 return arg; 95 return arg;
76 } 96 }
77 } 97 }
78 98
79 function clicked_cls(elt) { 99 function clicked_cls(elt) {
80 /* toggle "clicked" class on each click, and remove "init" class if present */ 100 /* toggle "state_clicked" class on each click, and remove "state_init" class if present */
81 // init 101 // state_init
82 if (elt.classList.contains("init")) { 102 if (elt.classList.contains("state_init")) {
83 elt.classList.remove("init"); 103 elt.classList.remove("state_init");
84 } 104 }
85 105
86 // clicked 106 // clicked
87 elt.classList.toggle("clicked"); 107 elt.classList.toggle("state_clicked");
88 } 108 }
89 109
90 function clicked_mh_fix(arg) { 110 function clicked_mh_fix(arg, max_height) {
91 /* toggle clicked, and fix max-height on transitionend 111 /* toggle state_clicked, and fix max-height on transitionend
92 * 112 *
93 * needed to workaround transition issue with max-height:none 113 * needed to workaround transition issue with max-height:none
94 * inspired from https://css-tricks.com/using-css-transitions-auto-dimensions, 114 * inspired from https://css-tricks.com/using-css-transitions-auto-dimensions,
95 * thanks to Brandon Smith 115 * thanks to Brandon Smith
96 * 116 *
97 * @param arg: element to toggle (id as string, or element itself) 117 * @param arg(string, DOM element): element to toggle (id as string, or element itself)
118 * @param max_height(int): maximum height when collapsed (default to clientHeight)
98 * */ 119 * */
99 elt = get_elt(arg); 120 elt = get_elt(arg);
100 121
101 if (!elt.classList.contains("clicked")) { 122 if (!elt.classList.contains("state_clicked")) {
102 /* expand */ 123 /* expand */
103 var fix_expand = function(event) { 124 let fix_expand = function(event) {
104 elt.removeEventListener("transitionend", fix_expand, false); 125 elt.removeEventListener("transitionend", fix_expand, false);
105 if (elt.classList.contains("clicked")) { 126 if (elt.classList.contains("state_clicked")) {
106 /* if event is clicked quicker than transition time, 127 /* if event is clicked quicker than transition time,
107 * this callback can be called on reduce */ 128 * this callback can be called on reduce */
108 elt.style.maxHeight = "none"; 129 elt.style.maxHeight = "none";
109 } 130 }
110 }; 131 };
111 132
112 elt.setAttribute('max_height_init', elt.clientHeight); 133 if (!elt.hasAttribute('_max_height_init')) {
134 elt.setAttribute('_max_height_init', max_height!==undefined?max_height:elt.clientHeight);
135 }
113 elt.addEventListener("transitionend", fix_expand, false); 136 elt.addEventListener("transitionend", fix_expand, false);
114 clicked_cls(elt); 137 clicked_cls(elt);
115 elt.style.maxHeight = elt.scrollHeight + 'px'; 138 elt.style.maxHeight = elt.scrollHeight + 'px';
139
116 } 140 }
117 else { 141 else {
118 /* reduce */ 142 /* reduce */
119 var transition_save = elt.style.transition; 143 let transition_save = elt.style.transition;
120 elt.style.transition = ''; 144 elt.style.transition = '';
121 requestAnimationFrame(function() { 145 requestAnimationFrame(function() {
122 elt.style.maxHeight = elt.scrollHeight + 'px'; 146 elt.style.maxHeight = elt.scrollHeight + 'px';
123 elt.style.transition = transition_save; 147 elt.style.transition = transition_save;
124 148
125 requestAnimationFrame(function() { 149 requestAnimationFrame(function() {
126 elt.style.maxHeight = elt.getAttribute('max_height_init') + 'px'; 150 elt.style.maxHeight = elt.getAttribute('_max_height_init') + 'px';
127 elt.removeAttribute('max_height_init');
128 elt.style.maxHeight = null;
129 }); 151 });
130 }); 152 });
131 153
132 clicked_cls(elt); 154 clicked_cls(elt);
133 } 155 }
134 } 156 }
157
158 function createElement(html) {
159 /* create a DOM element from raw HTML
160 *
161 * @param html(string): raw HTML to parse
162 * @return: DOM element
163 */
164
165 let template = document.createElement('template');
166 template.innerHTML = html.trim();
167 new_element = template.content.firstChild;
168 return new_element;
169 }