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);