s4
changeset 893:c1a5d137740d
Display momentary information of frozen state change
author | HIROSE Yuuji <yuuji@gentei.org> |
---|---|
date | Sat, 26 Dec 2020 15:17:56 +0900 |
parents | 3c9c65ff80f0 |
children | 1dc4007d7c20 |
files | examples/common/default/default.css s4-main.js |
diffstat | 2 files changed, 36 insertions(+), 5 deletions(-) [+] |
line diff
1.1 --- a/examples/common/default/default.css Sat Dec 26 15:17:21 2020 +0900 1.2 +++ b/examples/common/default/default.css Sat Dec 26 15:17:56 2020 +0900 1.3 @@ -382,10 +382,19 @@ 1.4 background: linear-gradient(#d8e2ea, #83bbea); 1.5 } 1.6 .凍結 button.toggle-frozen::before { 1.7 - content: "凍"; color: blue; 1.8 + content: attr(frozen-marker); color: blue; 1.9 } 1.10 .toggle-frozen::before { 1.11 - content: "動"; 1.12 + content: attr(running-marker); 1.13 +} 1.14 +.info-tooltip { 1.15 + position: absolute; padding: 1ex; 1.16 + background: ivory; 1.17 + border-radius: 1em; border: double 5px blue; 1.18 + min-width: 10em; right: 0; bottom: 0; 1.19 +} 1.20 +.dissolving { 1.21 + opacity: 0; transition: 3.0s; 1.22 } 1.23 1.24 /*
2.1 --- a/s4-main.js Sat Dec 26 15:17:21 2020 +0900 2.2 +++ b/s4-main.js Sat Dec 26 15:17:56 2020 +0900 2.3 @@ -307,6 +307,19 @@ 2.4 }, null); 2.5 } 2.6 } 2.7 + function dispInfoMomentary(msg, elem) { 2.8 + // Momentarily display MSG in tooltip-baloon relative to ELEM element. 2.9 + let help = document.createElement("p"); 2.10 + elem.style.position = 'relative'; 2.11 + elem.style.overflow = 'visible'; 2.12 + help.setAttribute("class", "info-tooltip"); 2.13 + help.innerHTML = msg; 2.14 + elem.appendChild(help); 2.15 + setTimeout(() => { 2.16 + help.classList.add("dissolving"); 2.17 + setTimeout(() => help.remove(), 3000); 2.18 + }, 1000); 2.19 + } 2.20 function initGrphome() { 2.21 console.log("initGrphome"); 2.22 let btn = document.querySelectorAll("button.toggle-frozen"); 2.23 @@ -318,10 +331,12 @@ 2.24 mypath = mypath.substring(0, mypath.lastIndexOf("?")); 2.25 //alert("mypath="+mypath); 2.26 } else return; 2.27 + var ja = navigator.language.match(/ja/i); 2.28 2.29 function toggleFrozen(e, rowid) { 2.30 let tgt = mypath+"?blog_setfrozen+"+rowid; 2.31 - let tr = e.target.parentNode.parentNode; 2.32 + let td = e.target.parentNode; 2.33 + let tr = td.parentNode; 2.34 fetch(tgt, { 2.35 method: "POST", 2.36 headers: {'Content-Type': 'text/html; charset=utf-8'}, 2.37 @@ -333,21 +348,28 @@ 2.38 } catch (e) { 2.39 return; 2.40 } 2.41 - let state = json.state, newstate; 2.42 + let state = json.state, newstate, info; 2.43 if (json.alert) { 2.44 alert(json.alert) 2.45 } 2.46 if (state.match(/frozen/i)) { 2.47 newstate = "凍結"; 2.48 + info = ja ? newstate+"に設定しました" : 'Set Frozen'; 2.49 } else { 2.50 newstate = null; 2.51 + info = ja ? '稼動に設定しました' : 'Set Running'; 2.52 } 2.53 tr.setAttribute("class", newstate); 2.54 + dispInfoMomentary(info, td); 2.55 }); 2.56 } 2.57 for (let b of btn) { 2.58 let rowid = null; 2.59 - let td=b.parentNode, tr = td.parentNode; 2.60 + let td=b.parentNode, tr = td.parentNode, fr, ru; 2.61 + ru = ja ? "動" : "Running"; 2.62 + fr = ja ? "凍" : "Frozen"; 2.63 + b.setAttribute('frozen-marker', fr); 2.64 + b.setAttribute('running-marker', ru); 2.65 for (let a of tr.querySelectorAll("a[href]")) { 2.66 if (a.getAttribute("href").match(/\?replyblog\+([0-9]+)/)) { 2.67 rowid = parseInt(RegExp.$1);