Mercurial > hgrepos > hgweb.cgi > 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 wrap: on
line diff
--- a/examples/common/default/default.css Sat Jan 02 15:30:15 2021 +0900 +++ b/examples/common/default/default.css Sat Jan 02 19:13:27 2021 +0900 @@ -32,7 +32,7 @@ border-top: 2px inset #555; text-align: right; clear: both; font-size: 50%; } -p.copyright a {text-decoration: none;} +p.copyright a, a#reload {text-decoration: none;} td {padding-left: 0.5ex; padding-right: 0.5ex;} table.td2r td:nth-child(2) {text-align: right;} @@ -418,9 +418,9 @@ } .dissolving {opacity: 0; transition: 3.0s;} .emerging {opacity: 1; transition: 3s;} -span.loading, input#c:disabled { +button#c, button#reload {display: inline-block;} +span.loading, button#c:disabled, button#reload:disabled { visibility: visible; transform: rotateX(3600deg); transition: 30s; - display: inline-block; } span.loading {padding: 0 1em;}
--- a/s4-blog.sh Sat Jan 02 15:30:15 2021 +0900 +++ b/s4-blog.sh Sat Jan 02 19:13:27 2021 +0900 @@ -624,9 +624,9 @@ ) cat<<-EOF </table> <!-- end of s4-blog:blog_showentry() main table --> - <p class="update_link"><a - href="?reload/$rowid" accesskey="r" - title="Shortcut: R${nl}Reload">再読込</a> / <a + <p class="update_link"><a href="?reload/$rowid" accesskey="r" + title="Shortcut: R${nl}Reload"> + <button id="reload">再読込</button></a> / <a href="#title" id="bottom" accesskey="t" title="Shortcut: T${nl}to the Top">先頭へ</a> ${showalllink:+/ `echo $showalllink|sed 's/n:all/&\#bottom/'`$limitedmsg}</p>
--- a/s4-main.js Sat Jan 02 15:30:15 2021 +0900 +++ b/s4-main.js Sat Jan 02 19:13:27 2021 +0900 @@ -122,7 +122,7 @@ for (i of newids) idlist.push(getArticleID(i)); console.log("IDList="+idlist.join()); - let cnt=0; + let cnt=0, ntr; let current = collectElementsByAttr("td", "class", "repl"), ncur=0, n, icur=0, o, oid, nid, otr; current = document.querySelectorAll('td[class="repl"]'); @@ -134,7 +134,7 @@ if (!n.id) continue; nid = parseInt(n.id); if (nid<=0) continue; - let ntr = n.parentNode; + ntr = n.parentNode; for (; icur<current.length; icur++) { o = current[icur]; otr = o.parentNode; @@ -152,18 +152,27 @@ ntr = n.parentNode; ntr.getElementsByTagName("td")[0].classList.add("new"); tbody.appendChild(ntr); + ntr.scrollIntoView({behavior: "smooth"}); registPjaxViewers(ntr.querySelectorAll("a[href]")); ntr.classList.add("dissolving"); - ntr.scrollIntoView({behavior: "smooth"}); + let localntr = ntr; setTimeout(() => { - ntr.classList.remove("dissolving"); - ntr.classList.add("emerging"); + localntr.classList.remove("dissolving"); + localntr.classList.add("emerging"); }, 100); cnt++; } - ajaxSubmit.value = ajaxSubmit.back; + ajaxSubmit.textContent = ajaxSubmit.back; ajaxSubmit.disabled = false; console.log("Update "+cnt+"rows"); + if (cnt>0) + try { // Scroll to last updated row + ntr.scrollIntoView({behavior: "smooth", block: "center"}); + } catch (e1) { + try { // block: "center" is not supported by older agents + ntr.scrollIntoView({behavior: "smooth"}); + } catch (e2) {} + } return cnt; } @@ -213,16 +222,22 @@ if (!myurl.match(/replyblog\+([0-9]+)/)) return; rowid = RegExp.$1 let myform = document.querySelector("form.replyblog"); - if (warnFileSize(myform)) return; - ajaxSubmit = e.target; - ajaxSubmit.back = ajaxSubmit.value; - ajaxSubmit.value = "送信中"; - ajaxSubmit.blur(); - ajaxSubmit.disabled = true; let data = new FormData(myform), fetchtime = data.get("fetchtime"); if (!fetchtime || fetchtime=="") return; ///*XX*/fetchtime = "2020-06-14T00:00:00";data.set("fetchtime", fetchtime) + + ajaxSubmit = e.target; + ajaxSubmit.back = ajaxSubmit.textContent; + if (ajaxSubmit.id == "reload") { + ajaxSubmit.textContent = "更新中" + data.set("text", "") + } else { + if (warnFileSize(myform)) return; + ajaxSubmit.textContent = "送信中"; + } + ajaxSubmit.blur(); + ajaxSubmit.disabled = true; let act = mypath+"?blog_fetch+"+rowid+"+f:"+fetchtime; function respUpdate(tbody) { @@ -237,8 +252,10 @@ let update = replAddNews(form); let dispelem = myform.querySelector("textarea").parentNode; newform = new FormData(form); - myform.reset(); - myform.text.value = ''; + if (data.get("text") > "") { // Called by submit button + myform.reset(); + // myform.text.value = ''; + } myform.fetchtime.value = newform.get("fetchtime"); myform.id.value = newform.get("id"); if (update && update > 0) { @@ -577,23 +594,27 @@ } function initBlogs() { // Auto-complete #xxxx - var check = collectElementsByAttr("input", "name", "notifyto"); + let i, check = collectElementsByAttr("input", "name", "notifyto"); if (check) - for (let i of check) { + for (i of check) { i.addEventListener("click", insertRedirect, false); } - for (let i of document.querySelectorAll("a[href]")) + for (i of document.querySelectorAll("a[href]")) if (i.getAttribute("href").match(/^#[0-9]+$/)) if (RegExp.lastMatch == i.innerHTML) i.addEventListener("click", insertRedirect, false) - for (let i of document.querySelectorAll('input#c[value="送信"]')) { - // let b = document.createElement("button"); - let b = i; - b.value = "送信!"; + for (i of document.querySelectorAll('input#c[value="送信"]')) { + let b = document.createElement("button"); + b.textContent = "送信!"; console.log("b="+b+", tc="+b.textContent); b.addEventListener("click", ajaxPost, false); // i.insertAdjacentElement('afterend', b); + b.id = i.id; + i.parentNode.replaceChild(b, i); + i.remove(); } + i = document.getElementById("reload"); + if (i) i.addEventListener("click", ajaxPost, false); for (let f of document.querySelectorAll('input[type="file"]')) { let form = document.forms[0]; f.addEventListener('change', (e) => {