s4

changeset 900:1fa8b4440f8f

Update button changed to ajax
author HIROSE Yuuji <yuuji@gentei.org>
date Sat, 02 Jan 2021 19:13:27 +0900
parents a4ad4101064d
children 1cff36303150
files examples/common/default/default.css s4-blog.sh s4-main.js
diffstat 3 files changed, 48 insertions(+), 27 deletions(-) [+]
line diff
     1.1 --- a/examples/common/default/default.css	Sat Jan 02 15:30:15 2021 +0900
     1.2 +++ b/examples/common/default/default.css	Sat Jan 02 19:13:27 2021 +0900
     1.3 @@ -32,7 +32,7 @@
     1.4      border-top: 2px inset #555; text-align: right; clear: both;
     1.5      font-size: 50%;
     1.6  }
     1.7 -p.copyright a {text-decoration: none;}
     1.8 +p.copyright a, a#reload {text-decoration: none;}
     1.9  
    1.10  td {padding-left: 0.5ex; padding-right: 0.5ex;}
    1.11  table.td2r td:nth-child(2) {text-align: right;}
    1.12 @@ -418,9 +418,9 @@
    1.13  }
    1.14  .dissolving {opacity: 0; transition: 3.0s;}
    1.15  .emerging {opacity: 1; transition: 3s;}
    1.16 -span.loading, input#c:disabled  {
    1.17 +button#c, button#reload  {display: inline-block;}
    1.18 +span.loading, button#c:disabled, button#reload:disabled  {
    1.19      visibility: visible; transform: rotateX(3600deg); transition: 30s;
    1.20 -    display: inline-block;
    1.21  }
    1.22  span.loading {padding: 0 1em;}
    1.23  
     2.1 --- a/s4-blog.sh	Sat Jan 02 15:30:15 2021 +0900
     2.2 +++ b/s4-blog.sh	Sat Jan 02 19:13:27 2021 +0900
     2.3 @@ -624,9 +624,9 @@
     2.4  	  )
     2.5    cat<<-EOF
     2.6  	</table> <!-- end of s4-blog:blog_showentry() main table -->
     2.7 -	<p class="update_link"><a
     2.8 -	 href="?reload/$rowid" accesskey="r"
     2.9 -	  title="Shortcut: R${nl}Reload">再読込</a> / <a
    2.10 +	<p class="update_link"><a href="?reload/$rowid" accesskey="r"
    2.11 +	  title="Shortcut: R${nl}Reload">
    2.12 +	  <button id="reload">再読込</button></a> / <a
    2.13  	 href="#title" id="bottom" accesskey="t"
    2.14  	  title="Shortcut: T${nl}to the Top">先頭へ</a>
    2.15  	 ${showalllink:+/ `echo $showalllink|sed 's/n:all/&\#bottom/'`$limitedmsg}</p>
     3.1 --- a/s4-main.js	Sat Jan 02 15:30:15 2021 +0900
     3.2 +++ b/s4-main.js	Sat Jan 02 19:13:27 2021 +0900
     3.3 @@ -122,7 +122,7 @@
     3.4  	for (i of newids)
     3.5  	    idlist.push(getArticleID(i));
     3.6  	console.log("IDList="+idlist.join());
     3.7 -	let cnt=0;
     3.8 +	let cnt=0, ntr;
     3.9  	let current = collectElementsByAttr("td", "class", "repl"),
    3.10  	    ncur=0, n, icur=0, o, oid, nid, otr;
    3.11  	current = document.querySelectorAll('td[class="repl"]');
    3.12 @@ -134,7 +134,7 @@
    3.13  	    if (!n.id) continue;
    3.14  	    nid = parseInt(n.id);
    3.15  	    if (nid<=0) continue;
    3.16 -	    let ntr = n.parentNode;
    3.17 +	    ntr = n.parentNode;
    3.18  	    for (; icur<current.length; icur++) {
    3.19  		o = current[icur];
    3.20  		otr = o.parentNode;
    3.21 @@ -152,18 +152,27 @@
    3.22  	    ntr = n.parentNode;
    3.23  	    ntr.getElementsByTagName("td")[0].classList.add("new");
    3.24  	    tbody.appendChild(ntr);
    3.25 +	    ntr.scrollIntoView({behavior: "smooth"});
    3.26  	    registPjaxViewers(ntr.querySelectorAll("a[href]"));
    3.27  	    ntr.classList.add("dissolving");
    3.28 -	    ntr.scrollIntoView({behavior: "smooth"});
    3.29 +	    let localntr = ntr;
    3.30  	    setTimeout(() => {
    3.31 -		ntr.classList.remove("dissolving");
    3.32 -		ntr.classList.add("emerging");
    3.33 +		localntr.classList.remove("dissolving");
    3.34 +		localntr.classList.add("emerging");
    3.35  	    }, 100);
    3.36  	    cnt++;
    3.37  	}
    3.38 -	ajaxSubmit.value = ajaxSubmit.back;
    3.39 +	ajaxSubmit.textContent = ajaxSubmit.back;
    3.40  	ajaxSubmit.disabled = false;
    3.41  	console.log("Update "+cnt+"rows");
    3.42 +	if (cnt>0)
    3.43 +	    try {	// Scroll to last updated row
    3.44 +		ntr.scrollIntoView({behavior: "smooth", block: "center"});
    3.45 +	    } catch (e1) {
    3.46 +		try {	// block: "center" is not supported by older agents
    3.47 +		    ntr.scrollIntoView({behavior: "smooth"});
    3.48 +		} catch (e2) {}
    3.49 +	    } 
    3.50  	return cnt;
    3.51      }
    3.52  
    3.53 @@ -213,16 +222,22 @@
    3.54  	if (!myurl.match(/replyblog\+([0-9]+)/)) return;
    3.55  	rowid = RegExp.$1
    3.56  	let myform = document.querySelector("form.replyblog");
    3.57 -	if (warnFileSize(myform)) return;
    3.58 -	ajaxSubmit = e.target;
    3.59 -	ajaxSubmit.back = ajaxSubmit.value;
    3.60 -	ajaxSubmit.value = "送信中";
    3.61 -	ajaxSubmit.blur();
    3.62 -	ajaxSubmit.disabled = true;
    3.63  	let data = new FormData(myform),
    3.64  	    fetchtime = data.get("fetchtime");
    3.65  	if (!fetchtime || fetchtime=="") return;
    3.66  	///*XX*/fetchtime = "2020-06-14T00:00:00";data.set("fetchtime", fetchtime)
    3.67 +
    3.68 +	ajaxSubmit = e.target;
    3.69 +	ajaxSubmit.back = ajaxSubmit.textContent;
    3.70 +	if (ajaxSubmit.id == "reload") {
    3.71 +	    ajaxSubmit.textContent = "更新中"
    3.72 +	    data.set("text", "")
    3.73 +	} else {
    3.74 +	    if (warnFileSize(myform)) return;
    3.75 +	    ajaxSubmit.textContent = "送信中";
    3.76 +	}
    3.77 +	ajaxSubmit.blur();
    3.78 +	ajaxSubmit.disabled = true;
    3.79  	let act = mypath+"?blog_fetch+"+rowid+"+f:"+fetchtime;
    3.80  	
    3.81  	function respUpdate(tbody) {
    3.82 @@ -237,8 +252,10 @@
    3.83  	    let update = replAddNews(form);
    3.84  	    let dispelem = myform.querySelector("textarea").parentNode;
    3.85  	    newform = new FormData(form);
    3.86 -	    myform.reset();
    3.87 -	    myform.text.value = '';
    3.88 +	    if (data.get("text") > "") {	// Called by submit button
    3.89 +		myform.reset();
    3.90 +		// myform.text.value = '';
    3.91 +	    }
    3.92  	    myform.fetchtime.value = newform.get("fetchtime");
    3.93  	    myform.id.value = newform.get("id");
    3.94  	    if (update && update > 0) {
    3.95 @@ -577,23 +594,27 @@
    3.96      }
    3.97      function initBlogs() {
    3.98  	// Auto-complete #xxxx
    3.99 -	var check = collectElementsByAttr("input", "name", "notifyto");
   3.100 +	let i, check = collectElementsByAttr("input", "name", "notifyto");
   3.101  	if (check)
   3.102 -	    for (let i of check) {
   3.103 +	    for (i of check) {
   3.104  		i.addEventListener("click", insertRedirect, false);
   3.105  	    }
   3.106 -	for (let i of document.querySelectorAll("a[href]"))
   3.107 +	for (i of document.querySelectorAll("a[href]"))
   3.108  	    if (i.getAttribute("href").match(/^#[0-9]+$/))
   3.109  		if (RegExp.lastMatch == i.innerHTML)
   3.110  		    i.addEventListener("click", insertRedirect, false)
   3.111 -	for (let i of document.querySelectorAll('input#c[value="送信"]')) {
   3.112 -	    // let b = document.createElement("button");
   3.113 -	    let b = i;
   3.114 -	    b.value = "送信!";
   3.115 +	for (i of document.querySelectorAll('input#c[value="送信"]')) {
   3.116 +	    let b = document.createElement("button");
   3.117 +	    b.textContent = "送信!";
   3.118  	    console.log("b="+b+", tc="+b.textContent);
   3.119  	    b.addEventListener("click", ajaxPost, false);
   3.120  	    // i.insertAdjacentElement('afterend', b);
   3.121 +	    b.id = i.id;
   3.122 +	    i.parentNode.replaceChild(b, i);
   3.123 +	    i.remove();
   3.124  	}
   3.125 +	i = document.getElementById("reload");
   3.126 +	if (i) i.addEventListener("click", ajaxPost, false);
   3.127  	for (let f of document.querySelectorAll('input[type="file"]')) {
   3.128  	    let form = document.forms[0];
   3.129  	    f.addEventListener('change', (e) => {