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) => {