s4

changeset 1002:47b3e770372d

Auth-ON/OFF button available in all modes
author HIROSE Yuuji <yuuji@gentei.org>
date Sun, 04 Dec 2022 16:59:59 +0859
parents bbd5a0c50d5b
children 5bd1b5125049
files examples/common/default/default.css s4-blog.sh s4-main.js
diffstat 3 files changed, 68 insertions(+), 53 deletions(-) [+]
line diff
     1.1 --- a/examples/common/default/default.css	Sun Dec 04 10:36:33 2022 +0859
     1.2 +++ b/examples/common/default/default.css	Sun Dec 04 16:59:59 2022 +0859
     1.3 @@ -1,6 +1,13 @@
     1.4  /*
     1.5   * Default CSS definitions
     1.6   */
     1.7 +@media print {
     1.8 +    div.blogcomment, div.blogcomment *, div.topmenu,
     1.9 +    table.bloghead button {
    1.10 +	display: none
    1.11 +    }
    1.12 +    a {text-decoration: none;}
    1.13 +}
    1.14  body {background: #eff; margin: 2px; padding: 6px;}
    1.15  h2, h3, hr {clear: both;}
    1.16  *.warn {color: red;}
    1.17 @@ -222,54 +229,56 @@
    1.18  body.grouphome p.groupimg img {
    1.19      max-width: 380px; max-height: 380px;}
    1.20  
    1.21 -div.fold {margin-top: 1em; border-top: 1px solid black; padding-top: 1em;}
    1.22 -div.noborder {border: 0px; margin: 0;}
    1.23 -div.fold > div {
    1.24 +@media screen {
    1.25 +  div.fold {margin-top: 1em; border-top: 1px solid black; padding-top: 1em;}
    1.26 +  div.noborder {border: 0px; margin: 0;}
    1.27 +  div.fold > div {
    1.28      xxdisplay: none; max-height: 80%; overflow: auto;
    1.29      height: 0px; opacity: 0; padding: 0 1ex;
    1.30 -}
    1.31 -div.fold input[type="checkbox"]:checked ~ div,
    1.32 -div.fold input[type="radio"]:checked ~ div {
    1.33 +  }
    1.34 +  div.fold input[type="checkbox"]:checked ~ div,
    1.35 +  div.fold input[type="radio"]:checked ~ div {
    1.36      display: block; background: #fadede;
    1.37      height: auto; opacity: 1.0; transition: 1s;
    1.38 +  }
    1.39 +  input.fold + label + *.folded {opacity: 0; display: none; hight: 0;}
    1.40 +  input[type="checkbox"].fold:checked + label + *.folded {
    1.41 +      opacity: 1.0; transition: 2s;
    1.42 +  }
    1.43 +  input[type="checkbox"].fold:checked + label + div.folded {
    1.44 +      display: block; hight: auto; transition: 2s;
    1.45 +  }
    1.46 +
    1.47 +  /* fold2!! */
    1.48 +  div.foldtabs {
    1.49 +      position: relative; height: 5em; margin-top: 1em;
    1.50 +      border-top: 1px solid black; padding-top: 1em;
    1.51 +  }
    1.52 +  div.foldtabs > div {
    1.53 +      position: absolute; top: 2.5em; opacity: 0.0; background: pink;
    1.54 +      margin: 2px; overflow: auto;
    1.55 +  }
    1.56 +  div.foldtabs input[type="radio"] {display: none;}
    1.57 +  div.foldtabs input[type="radio"]:checked + label + div {
    1.58 +      display: block; opacity: 1.0; transition: 0.2s; width: 100%;
    1.59 +      margin: 0; z-index: 2;
    1.60 +  }
    1.61 +  div.foldtabs > label {
    1.62 +      border: 1px outset #ddd; background: #ddd; xbackground: pink;
    1.63 +      border-top-left-radius: 0.8em; border-top-right-radius: 0.8em;
    1.64 +      margin: 0;
    1.65 +      padding: 0.2ex 0.5em; height: 3em;
    1.66 +  }
    1.67 +  div.foldtabs > input:active + label {background: white;}
    1.68 +  div.foldtabs input:checked + label {
    1.69 +      background: pink; border: pink 1px solid; border-bottom-width: 6px;
    1.70 +  }
    1.71 +  div.foldtabs input:checked + label:last-of-type {border-width: 1px;}
    1.72 +  input[type="checkbox"] + label + input[type="submit"] {display: none;}
    1.73 +  input[type="checkbox"]:checked + label + input[type="submit"] {
    1.74 +      display: inline;}
    1.75 +  div.foldtabs p {margin: 0;}
    1.76  }
    1.77 -input.fold + label + *.folded {opacity: 0; display: none; hight: 0;}
    1.78 -input[type="checkbox"].fold:checked + label + *.folded {
    1.79 -    opacity: 1.0; transition: 2s;
    1.80 -}
    1.81 -input[type="checkbox"].fold:checked + label + div.folded {
    1.82 -    display: block; hight: auto; transition: 2s;
    1.83 -}
    1.84 -
    1.85 -/* fold2!! */
    1.86 -div.foldtabs {
    1.87 -    position: relative; height: 5em; margin-top: 1em;
    1.88 -    border-top: 1px solid black; padding-top: 1em;
    1.89 -}
    1.90 -div.foldtabs > div {
    1.91 -    position: absolute; top: 2.5em; opacity: 0.0; background: pink;
    1.92 -    margin: 2px; overflow: auto;
    1.93 -}
    1.94 -div.foldtabs input[type="radio"] {display: none;}
    1.95 -div.foldtabs input[type="radio"]:checked + label + div {
    1.96 -    display: block; opacity: 1.0; transition: 0.2s; width: 100%;
    1.97 -    margin: 0; z-index: 2;
    1.98 -}
    1.99 -div.foldtabs > label {
   1.100 -    border: 1px outset #ddd; background: #ddd; xbackground: pink;
   1.101 -    border-top-left-radius: 0.8em; border-top-right-radius: 0.8em;
   1.102 -    margin: 0;
   1.103 -    padding: 0.2ex 0.5em; height: 3em;
   1.104 -}
   1.105 -div.foldtabs > input:active + label {background: white;}
   1.106 -div.foldtabs input:checked + label {
   1.107 -    background: pink; border: pink 1px solid; border-bottom-width: 6px;
   1.108 -}
   1.109 -div.foldtabs input:checked + label:last-of-type {border-width: 1px;}
   1.110 -input[type="checkbox"] + label + input[type="submit"] {display: none;}
   1.111 -input[type="checkbox"]:checked + label + input[type="submit"] {
   1.112 -    display: inline;}
   1.113 -div.foldtabs p {margin: 0;}
   1.114  
   1.115  /* ToDo List CheckBox inspired by https://cultureacademia.jp/webcreate/303/ */
   1.116  input.s4-checkbox {display: none;}	/* Do not show real checkbox */
     2.1 --- a/s4-blog.sh	Sun Dec 04 10:36:33 2022 +0859
     2.2 +++ b/s4-blog.sh	Sun Dec 04 16:59:59 2022 +0859
     2.3 @@ -269,13 +269,16 @@
     2.4  	case "$isgrpadmin$blog_mode" in
     2.5  	  false*closed*|false*quiz|false*enquete*) ;;
     2.6  	  *)
     2.7 -	    href3="(ファイル取得[<a href=\"?gethandout+$rowid\" accesskey=\"f\" title=\"Shortcut: F${nl}File Retrieval\">記事順</a>|<a href=\"?gethandout+$rowid+by_uname\" accesskey=\"u\" title=\"Shortcut: F${nl}File Retrieval by User\">著者順</a>])"
     2.8 +	    href3="(ファイル取得[<a href=\"?gethandout+$rowid\" accesskey=\"f\" title=\"Shortcut: F${nl}File Retrieval\">記事順</a>|<a href=\"?gethandout+$rowid+by_uname\" accesskey=\"u\" title=\"Shortcut: U${nl}File Retrieval by User\">著者順</a>])"
     2.9  	    ;;
    2.10  	esac
    2.11  	;;
    2.12      esac
    2.13    fi
    2.14 -  href4="${blog_math:+<span id=\"mathjax\">Math</span>} <a href=\"#bottom\" accesskey=\"b\" title=\"Shortcut: B${nl}to the Bottom\"> 末尾へ</a>"
    2.15 +  hidebtn='<button type="button" id="hideauth" accesskey="a" title="Shortcut: A
    2.16 +Hide/Show Author - Useful for summary printing
    2.17 +OFFにするとまとめ印刷に便利。">著者OFF</button>'
    2.18 +  href4="${blog_math:+<span id=\"mathjax\">Math</span>} $hidebtn <a href=\"#bottom\" accesskey=\"b\" title=\"Shortcut: B${nl}to the Bottom\"> 末尾へ</a>"
    2.19    $isgrpadmin &&
    2.20        href5="<a href=\"?blogseen+$rowid\" accesskey=\"s\" title=\"Shortcut: S${nl}State of Accesses\"> 読刻</a>"
    2.21    quizmodefile=$tmpd/quiz; rm -f "$quizmodefile"	# XXX: Global state
    2.22 @@ -311,7 +314,6 @@
    2.23        case "$blogtype" in
    2.24  	"クイズ"|"XXXX集計")
    2.25  	  echo "${blogtype}モードは本人と管理者の書き込みのみが表示されます"
    2.26 -	  echo "隠す/見せる(Hide/Show)" | html button 'id="quizwarn" type="button"'
    2.27  	  ;;
    2.28        esac | html p 'class="warn"'
    2.29  
     3.1 --- a/s4-main.js	Sun Dec 04 10:36:33 2022 +0859
     3.2 +++ b/s4-main.js	Sun Dec 04 16:59:59 2022 +0859
     3.3 @@ -803,21 +803,23 @@
     3.4  	}
     3.5  	return elem;
     3.6      }
     3.7 -    var quizwarnVisible = false;
     3.8 +    var authVisible = false;
     3.9      function toggleAuthorVisibility(e) {
    3.10 -	// In QUIZ mode, click to quizwarn line toggles visibility of author
    3.11 +	// Click to hideauth button toggles visibility of author columns
    3.12  	e.stopPropagation();
    3.13 -	if (quizwarnVisible) {
    3.14 +	let b = document.getElementById("hideauth");
    3.15 +	if (authVisible) {
    3.16  	    for (let i of document.querySelectorAll("td.repatt")) {
    3.17  		i.classList.remove("hideauthor");
    3.18  	    }
    3.19 -	    quizwarnVisible = false;
    3.20 +	    authVisible = false;
    3.21  	} else {
    3.22  	    for (let i of document.querySelectorAll("td.repatt")) {
    3.23  		i.classList.add("hideauthor");
    3.24  	    }
    3.25 -	    quizwarnVisible = true;
    3.26 +	    authVisible = true;
    3.27  	}
    3.28 +	b.textContent = b.textContent.replace(/OFF|ON/, authVisible ? "ON" : "OFF");
    3.29      }
    3.30      function downloadFile(filename, content, BOM) {
    3.31          let bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
    3.32 @@ -926,7 +928,9 @@
    3.33  		let btn = document.createElement("button");
    3.34  		btn.innerText = "CSVget";
    3.35  		btn.type = "button";
    3.36 -		btn.title = `見えている書き込みをCSVで取得します
    3.37 +		btn.accessKey = "g";
    3.38 +		btn.title = `Shortcut: G
    3.39 +見えている書き込みをCSVで取得します
    3.40  全件表示されていることを確認してから利用して下さい。
    3.41  Excelで利用する場合は Ctrl を押しながらクリックして下さい。
    3.42  Get seen TEXT content as CSV.`;
    3.43 @@ -949,7 +953,7 @@
    3.44  		warnFileSize(document.forms[0]);
    3.45  	    }, false)
    3.46  	}
    3.47 -	if (i=document.getElementById("quizwarn")) {
    3.48 +	if (i=document.getElementById("hideauth")) {
    3.49  	    i.addEventListener('click', toggleAuthorVisibility, false);
    3.50  	}
    3.51  	// Hack article_m links