# HG changeset patch
# User HIROSE Yuuji <yuuji@gentei.org>
# Date 1608963476 -32400
# Node ID c1a5d137740d740e6b3f7413fb6c29f9f9911659
# Parent  3c9c65ff80f074686a14a2bf07e22b1218a89f1f
Display momentary information of frozen state change

diff -r 3c9c65ff80f0 -r c1a5d137740d examples/common/default/default.css
--- a/examples/common/default/default.css	Sat Dec 26 15:17:21 2020 +0900
+++ b/examples/common/default/default.css	Sat Dec 26 15:17:56 2020 +0900
@@ -382,10 +382,19 @@
     background: linear-gradient(#d8e2ea, #83bbea);
 }
 .凍結 button.toggle-frozen::before {
-    content: "凍"; color: blue;
+    content: attr(frozen-marker); color: blue;
 }
 .toggle-frozen::before {
-    content: "動";
+    content: attr(running-marker);
+}
+.info-tooltip {
+    position: absolute; padding: 1ex;
+    background: ivory;
+    border-radius: 1em; border: double 5px blue;
+    min-width: 10em; right: 0; bottom: 0;
+}
+.dissolving {
+    opacity: 0; transition: 3.0s;
 }
 
 /*
diff -r 3c9c65ff80f0 -r c1a5d137740d s4-main.js
--- a/s4-main.js	Sat Dec 26 15:17:21 2020 +0900
+++ b/s4-main.js	Sat Dec 26 15:17:56 2020 +0900
@@ -307,6 +307,19 @@
 	    }, null);
 	}
     }
+    function dispInfoMomentary(msg, elem) {
+	// Momentarily display MSG in tooltip-baloon relative to ELEM element.
+	let help = document.createElement("p");
+	elem.style.position = 'relative';
+	elem.style.overflow = 'visible';
+	help.setAttribute("class", "info-tooltip");
+	help.innerHTML = msg;
+	elem.appendChild(help);
+	setTimeout(() => {
+	    help.classList.add("dissolving");
+	    setTimeout(() => help.remove(), 3000);
+	}, 1000);
+    }
     function initGrphome() {
 	console.log("initGrphome");
 	let btn = document.querySelectorAll("button.toggle-frozen");
@@ -318,10 +331,12 @@
 	    mypath = mypath.substring(0, mypath.lastIndexOf("?"));
 	    //alert("mypath="+mypath);
 	} else return;
+	var ja = navigator.language.match(/ja/i);
 
 	function toggleFrozen(e, rowid) {
 	    let tgt = mypath+"?blog_setfrozen+"+rowid;
-	    let tr = e.target.parentNode.parentNode;
+	    let td = e.target.parentNode;
+	    let tr = td.parentNode;
 	    fetch(tgt, {
 		method: "POST",
 		headers: {'Content-Type': 'text/html; charset=utf-8'},
@@ -333,21 +348,28 @@
 		} catch (e) {
 		    return;
 		}
-		let state = json.state, newstate;
+		let state = json.state, newstate, info;
 		if (json.alert) {
 		    alert(json.alert)
 		}
 		if (state.match(/frozen/i)) {
 		    newstate = "凍結";
+		    info = ja ? newstate+"に設定しました" : 'Set Frozen';
 		} else {
 		    newstate = null;
+		    info = ja ? '稼動に設定しました' : 'Set Running';
 		}
 		tr.setAttribute("class", newstate);
+		dispInfoMomentary(info, td);
 	    });
 	}
 	for (let b of btn) {
 	    let rowid = null;
-	    let td=b.parentNode, tr = td.parentNode;
+	    let td=b.parentNode, tr = td.parentNode, fr, ru;
+	    ru = ja ? "動" : "Running";
+	    fr = ja ? "凍" : "Frozen";
+	    b.setAttribute('frozen-marker', fr);
+	    b.setAttribute('running-marker', ru);
 	    for (let a of tr.querySelectorAll("a[href]")) {
 		if (a.getAttribute("href").match(/\?replyblog\+([0-9]+)/)) {
 		    rowid = parseInt(RegExp.$1);