IDlog3
模擬メニューcn:out
※body.classList.toggle一覧

🟦menu （移動コマンド）

🟦0:inc-min 🟦0:8inc-min,2
🟦0:ex-wait 🟦0:8ex-wait,2
🟦0:link-min 🟦0:8link-min,2
🟦0:link-off 🟦0:8link-off,2
🟦0:8link-min,8link-off

🟨(1)左フレームへの操作
だけど履歴をクリアしない。
マスコットを操作。🟨

🟦rows4
🟦0:rows-min 🟦0:8rows-min,2
🟦0:rows-off 🟦0:8rows-off,2
🟦0:8rows-min,8rows-off

　吹き出しスライド
🟦0:sl 🟦0:8sl,2
🟦1:sl 🟦1:8sl,2

🟨(2)転送領域を操作
連番を確保
🟨



done.
定義cn:out chi
🟨(-1)　🟦rows3 🟦rows4 🟦rows11
　最初の訪問だったなら違和感を感じると思う。一度、ブラウザの履歴で戻ってメインページを見て、また履歴で進んで今の位置に戻って確認して欲しい。どう？違和感があるでしょ。🟨

🟨(2)どういうこと？
ここってプロフィールのページじゃないの？🟨

🟨(1)　そう。ちゃんと右のフレームにはprofile.htmlが表示されているし、左のフレームにはmenu.htmlが表示されている。
　でもね、システムがエクラのサイトの概念を根底から変えてしまうことをやっているの。🟨

🟨(2)具体的にはどういうこと？
分かりやすく説明して。🟨

🟨(1)ひとつはフレームの幅を自在に操ること。
ひとつはメニューフレームに要素を送ること。🟨

🟨(2)　🟦cCode0
フレーム幅の変更って今迄はバインダーのクリックで出来ていたけれど・・・。うん、普通に出来るね。でも移動量が少ないよね。🟨

🟨(-1)　バインダーでの移動は補正と思えばいいよ。通常はページ毎に左側に転送する要素の幅などで程よい数値を指定してる。
　バインダーは右のフレーム領域だからメニュー幅の指定で100%となると右は表示されなくなってバインダーがないから操作が出来なくなる。
　だから左側のフレームにも同じものが備えているんだ。背景画像のバインダーが無いだけで中身は一緒。小さく+1、-1、50とか見えるだろう？右のバインダーの中にも小さく見えている筈だよ。🟨


🟨(-2)　そういえば左のタグとスタイルシートってこのフレーム幅を変更するためのものなの？うん、マウスポインタが変更になってそれになっているし。
　うん、それはそうとCSSファイルでスタイルシートを定義しているのに、ページにタグとして直に置いているのはどうして？それに関数がtop.chgFw('-1')とフレーム定義ページになっているじゃないの。🟨

🟨(4)　高度になる話
　ここから話の内容がかなり高度になるかもしれません。でもね、これらが「ふむふむ、なるほど」と、すらすらと理解できるようになれば、自身のスキルがかなり向上すると思う。🟨

🟨(1)通常のブート
top.eitherOwnerOrGuestをフック。
二つ目のフレームにイベントを定義。
初回は起動しないからプロフィールへ変移。
通常はmain.htmlだからopacityを操作。🟨

🟨(2)その他でF5を押してのブート
プロフィールを表示して定義した後で戻す。
スクロール位置の復元。
バインダー位置の復元。
🟦cCode2

🟨
はじめにcn:trans info

事情があって暫くここのサイトで衣替えをしています。
今は全面的に再構築の段階ですので素通りして下さい。

🟦<a href="/home/new-diary/main.html?uri=ex;p=298" target="_blank">開発途中のBIGBBS-ex</a>と<a href="/home/new-diary/diary/2020/05/1590583723.html" target="_blank">絵文字取得</a>🟦

🟨(1)上のリンクはこのサイトの直前のものです。
今度はフレームセットを自在に操作します。🟨
コマンドの説明などcn:trans code

　ページを拡張するにはCSSやJavaScriptがあります。今の時代はCSS3のお陰で随分と手軽に装飾が施せるようになりました。でもフレームセットのフレーム幅の変更やページ内の要素の移動などはCSSでは無理でしょう。そこでいつものようにJavaScriptを用いるのですが、このサイトでのコンセプトを設けようと思います。

　吹き出し in 吹き出しも可能なんだね。

🟨(1)・参照型読み物にすること。
・吹き出しを多用すること。
・機能（関数）の説明を参照型にすること。
・機能成長型サイトにすること。🟨


[DOC-CODE]
[/DOC-CODE]

　上の基本関数は最近のものです。これらは🟦<a href="/home/new-diary/main.html?uri=ex;p=298;" target="_blank">BIGBBS exP298</a>🟦で使っていました。

　新着日記も操作することが出来ます。🟦<a href="/cgi-bin/diary.cgi?oid=all" target="main_log3">素の新着日記（右フレーム）</a>🟦
　このサイトのCSS編集は🟦<a href="http://www.eclat.cc/home/default/" target="_blank">クッキー研究室のシステムの更新</a>🟦で。（http://指定）
　サイトのhttp:/https:の切り替えは、ここで。🟦<a href="http://www.eclat.cc/home/log3/" target="_top">http:</a> | <a href="https://www.eclat.cc/home/log3/" target="_top">https:</a>🟦

🟦r1p0 右のエリア
マスコットリンクの構築cn:trans code
🟨(-1)起動時に気が付いたかな？
左上に並ぶボタンは少し仕掛けがしてあるの。なんかふわっとしていたよね。
下にそこのコードを掲げたから読めば気が付くと思う。
中間の三個にincというクラスを定義しているのね。🟨

🟨(2)その「ふわっと」を再現してみるね。
🟦rows1 ここの操作で出来るよ。
メニューまで移動してボタンを押すと変化するから。
これらのボタンはトグルで作用するから。
処理の確認が済んだら移動ボタンで戻って。🟨

　※main.htmlより抜粋
[DOC-CODE] <a target="_blank" href="/home/log3/" id="newBtn"
class="c-btn" title="新規にサイトを開きます"></a><a
href="javascript:top.location.reload(true)"
id="relBtn0" class="c-btn inc" title="キャッシュ更新"></a><a
target="main_log3" href="diary/"
id="relBtn1" class="c-btn inc" title="日記"></a><a
target="main_log3" href="profile.html"
id="relBtn2" class="c-btn inc" title="システム読み込み"></a><a
target="main_log3" href="/cgi-bin/profile_editor.cgi?oid=log3;mode=load"
id="updBtn" class="c-btn" title="編集を行います"></a>
</div>

[/DOC-CODE]
🟨(2)ページが構築されてから間のボタンがふわっとなったね。
どうして？というより何故にするの？🟨

🟨(-1-)cf.append(
css,
Fid("cfDisp").cloneNode(true),
Fid("moveDisp").cloneNode(true)
);🟨
関数のフックと基本関数cn:trans code

[DOC-CODE]

<script>
checkFrame = () => {};
eitherOwnerOrGuest = () => {};

fullDec = e => e.replace(/\x26quot;/g, "\"").replace(/\x26amp;/g, "\x26").
replace(/\x26lt;/g, "<").replace(/\x26gt;/g, ">").replace(/\x26#39;/g, "'");
evalDec = e => fullDec(e).replace(/\x3cbr\s?\/?>/gi, "\n");

[/DOC-CODE]
キー取得 key keys keysncn:trans code


[DOC-CODE]
keysn = (a,b,c) => {
let dat = a.match(new RegExp("\\[(" + b + "\\])" +
(c ? ".*?" : "(.*?)") + "\\[\\/\\1",c ? "g" : "")
);
if(!c) return dat ? RegExp.$2 : "";
else {
let re = new RegExp("\\[\\/?" + b + "\\]", "g");
if(c == 1) return dat.join(" ").replace(re, "");
else {
dat.forEach((e,i,o) => o[i] = e.replace(re, ""));
return dat;
}
}
};

key = (a, b) => keysn(a, b, 0);
keys = (a, b) => keysn(a, b, 1);
keysArray = (a, b) => keysn(a, b, 2);


[/DOC-CODE]
mainFrameEntrycn:trans code

[DOC-CODE]
appendFunc = false;
mainFile = "main";

mainFrameEntry = () => {
const w1 = top.frames[1].document;
mainFile = w1.URL.replace(/^.+log3\/|^.+\-bin\/|\..+$|\/.+$/g, "");
if(mainFile == "profile" && !appendFunc){
try{eval(evalDec(keys(w1.body.innerHTML, "appendFuncCode")))}
catch(err){ alert("何かが変です");}
appendFunc = true;
}
appendFwControl();
if(window[mainFile + "Entry"]) window[mainFile + "Entry"]();
};




[/DOC-CODE]
eitherOwnerOrGuestcn:trans code

[DOC-CODE]

top.checkFrame = () => {};
top.eitherOwnerOrGuest = () => {
top.document.getElementsByTagName("frame")[1].
addEventListener("load", mainFrameEntry, false);
top.frames[1].location.replace("profile.html");
};

</script>

[/DOC-CODE]
左フレームの要素の構築cn:trans code

[DOC-CODE]
<div id="clsInfo"></div>
<div id="mainDisp"></div>
<div id="linkDisp"><div
id="linkPar0" class="link-par"></div><div
id="linkPar1" class="link-par"></div>
</div>
<table><tbody id="transDisp"></tbody></table>
<div class="hold">

[/DOC-CODE]
donecn:cln
done
donedone
転送・基本CSS (1)cn:trans code

[cf-code]
body.cf-right.wait {
opacity:.3;
}

#cfDisp {
display:inline-block;
position:fixed; left:3px; top:0;
transition:all .5s;
background-image:url("/home/log3/files/ring.gif");
background-position:left top;
background-size:2rem auto;
background-repeat:repeat-y;
z-index:5;
}

body:not(.cf-right) #cfDisp {
display:none;
}

body:not(.cf-right).w10 #cfDisp {
display:block;
}

#cfDisp a {
font-size:.5rem;
display:block;
width:2rem; line-height:33.3vh;
text-decoration:none;
}

.cl-btn {
display:inline-block;
padding:0 1rem;
margin:.25rem;
border:1px solid #808080;
border-radius:1rem;
background-color:#eef;
box-shadow:2px 2px 2px #ccc;
cursor:pointer;
transition:all .5s;
}

.cl-btn:hover {
background-color:#ffc;
color:#00f;
}

.cl-btn:active {
box-shadow:2px 2px 2px #ccc inset;
color:#f00;
}

.cl-btn.rev {
color:#000;
background-color:orange;
}

.cl-btn.rev:hover {
color:#fff;
}

#xhrBtn {
position:fixed;
right:0rem;
top:1rem;
display:inline-block;
}

#xhrBtn a {
display:inline-block;
text-decoration:none;
line-height:3rem;
width:3rem;
text-align:center;
border:1px solid #808080;
border-radius:50%;
box-shaow:3px 3px 3px #ccc;
font-size:.9rem;
transition:all .6s;
background-color:#ffc;
color:#600;
}


[/cf-code]
転送・基本CSS (2)cn:trans code

[cf-code]

#moveDisp {
position:fixed; top:calc(50vh - 2.6rem); right:0;
width:2.6rem;
text-align:right;
}

#moveDisp span {
display:block;
width:2.6rem;
text-align:center;
line-height:2.6em;
border:1px solid #808080;
border-radius:50%;
background-color:#fff;
box-shadow:3px 3px 3px #ccc;
cursor:pointer;
margin-bottom:.25rem;
transition:all .7s;
z-index:10;
}

#moveDisp span:hover {
background-color:#ff9;
}
#moveDisp span:active {
background-color:#ff6;
box-shadow:3px 3px 3px #ccc inset;
}

#moveDisp span#movBtn2 {
position:fixed; bottom:1rem; right:0;
width:2.6rem; height:2.6rem;
background-image:url("/home/log3/files/yosei_0.gif");
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
z-index:20;
transition:all .8s;
}

#movBtn2:hover {
transform:rotate(360deg);
}

.def-exec {
display:inline-block;
padding:.5rem 1rem;
margin:.5rem;
border:1px solid #808080;
border-radius:4px;
box-shadow:3px 3px 3px #ccc;
text-align:center;
color:#00f;
cursor:pointer;
transition:.7s;
}

.def-exec:hover {
background-color:#ffc;
}

.def-exec:active {
box-shadow:3px 3px 3px #ccc inset;
color:#f00;
}

.def-exec.act {
background-color:orange;
color:#fff;
}

[/cf-code]
転送・基本CSS (3)cn:trans code

[cf-code]
/* -- 汎用ボタン -- */
.c-btn {
display:inline-block;
width:3em; height:3em;
border:1px solid #808080;
border-radius:50%;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
background-size:contain;
box-shadow:3px 3px 3px #ccc;
cursor:pointer;
transition:all .8s;
}

body:not(.inc-min) .c-btn.inc, .c-btn.min {
width:0; height:0;
font-size:0;
border:none;
box-shadow:none;
}

.fx0 {
transition:all .5s;
position:fixed; top:1rem; right:0;
}

#newBtn { background-image:url("files/yosei_2.gif"); }
#relBtn0 { background-image:url("files/yosei_0.gif"); }
#relBtn1 { background-image:url("files/yosei_1.gif"); }
#relBtn2 { background-image:url("files/yosei_3.gif"); }
#updBtn { background-image:url("files/angel.gif"); }

#masBtn {
position:fixed;
right:.5em; bottom:1em;
background-image:url("files/yosei_0.gif");
z-index:10;
}

.c-btn:hover {
background-color:#fff;
transform:rotate(360deg);
}

#updBtn.c-btn:hover { transform:scale(-1, 1); }

.c-btn:active {
background-color:#ff9;
box-shadow:3px 3px 3px #ccc inset;
}


[/cf-code]
css・profile_editor 1cn:trans code

[profile_editor]

html {
scrollbar-color:orange #fff;
scroll-behavior:smooth;
font-size:100%;
color:#000;
}

body {
margin:1rem 0 2rem 3rem;
background-color:transparent;
transition:all .8s;
}

form + div {
display:none;
}

table {
display:block;
width:100%;
}

tbody {
display:block;
}

tr {
display:block;
position:relative;
margin:1rem 1rem 2rem 4rem;
border:1px solid #000;
border-radius:.5rem;
}

th {
display:block;
font-weight:normal;
text-align:left;
padding:.5rem .5rem .5rem 1rem;
}

th span {
display:inline-block;
margin-left:1rem;
}

th span.cnt::after {
content:"/2000(max)";
}

th span.cmd {
float:right;
cursor:pointer;
}

td {
display:block;
padding:.5rem 0 .5rem .5rem;
}

[/profile_editor]
css・profile_editor 2cn:trans code

[profile_editor]
tr::before {
position:absolute; left:-4rem; top:1rem;
display:inline-block;
font-size:.8rem; line-height:1.3rem;
text-align:center;
white-space:pre-wrap;
}

tr::after {
position:absolute; left:-.6rem; top:1.5rem;
border-style:solid; border-width:1px;
border-color:transparent transparent #000 #000;
display:inline-block;
width:1rem; height:1rem;
content:"";
transform:rotate(45deg);
}

textarea {
height:26rem;
width:calc(100% - 1rem);
padding:3px;
outline:none;
background-color:#ffefff;
transition:all .5s;
}

.out textarea {
background-color:#eef;
}

[/profile_editor]
css・profile_editor 3cn:trans code

[profile_editor]

/* -- ハム太郎・緑 -- */
tr:nth-child(4n+1) { background-color:#efe; }
tr:nth-child(4n+1)::before {
content:url("/home/log3/files/hamu_folder1.gif") "\Aハム太郎";
}
tr:nth-child(4n+1)::after { background-color:#eef8ee; }

/* -- はむはむ・ピンク -- */
tr:nth-child(4n+2) { background-color:#ffefff; }
tr:nth-child(4n+2)::before {
content:url("/home/log3/files/hamu_folder2.gif") "\Aはむはむ";
}
tr:nth-child(4n+2)::after { background-color:#ffefff; }

/* -- 妖精・右向き -- */
tr:nth-child(4n+3) {
background-color:#ffe;
font-family:serif; font-size:1rem;
}
tr:nth-child(4n+3):first-line { color:#00f; }
tr:nth-child(4n+3)::before {
content:url("/home/log3/files/yosei_2.gif");
}
tr:nth-child(4n+3)::after { background-color:#ffe; }

/* -- 妖精・アニメ -- */
tr:nth-child(4n) {
background-color:#fff;
font-family:serif; font-size:1rem;
}
tr:nth-child(4n):first-line { font-weight:bold; color:brown; }
tr:nth-child(4n)::before {
content:url("/home/log3/files/angel.gif");
}
tr:nth-child(4n)::after { background-color:#fff; }

[/profile_editor]
css・profile_editor 4cn:trans code

[profile_editor]

input[type = "submit"] {
display:inline-block;
position:fixed; right:.5rem; bottom:5rem;
text-align:center;
width:3rem;
line-height:3rem;
border:1px solid #808080; border-radius:50%;
box-shadow:3px 3px 3px #ccc;
transition:all .5s;
}

input[type = "text"] {
width:25vw;
padding:0 .5rem;
border-radius:1rem;
line-height:1.7rem;
transition:all .5s;
}



[/profile_editor]
diaryEntrycn:trans code

[appendFuncCode]
diaryEntry = () => {
top.chgFw(30);





};





[/appendFuncCode]
転送・追加関数 (1)cn:trans code

[appendFuncCode]
doc = document;
ref = doc.referrer;
https = "https://www.eclat.cc";
Fce = a => doc.createElement(a);
Fid = a => typeof(a) == "object" ? a : doc.getElementById(a);
Fwin = (a,b) => {
let o = top.frames[a]; return !b ? o : b > 0 ?
o.document : o.document.scrollingElement;
};
Fboy = a => Fwin(a, 1).body;
Fwid = (a,b) => typeof(a) == "object" ? a : Fwin(b, 1).getElementById(a);
Ftag = (...a) => (a.length > 1 ? Fid(a[0]) : doc).getElementsByTagName(a.slice(-1));
Fap = (a,b) => Fid(a).appendChild(b);
Fcn = (...a) => (a.length > 1 ? Fid(a[0]) : doc).getElementsByClassName(a.slice(-1));
Fis = (a,b) => a.classList.contains(b) ? 1 : 0;
Fsa = a => typeof(a) == "string" ?
a.replace(/^\s+|\s+$/g, "").split(a.includes(",") ? "," : " ") : a;
enc = s => encodeURIComponent(s);

Fcl = (e, tp, cl, fg) => {
if(e == 0 || e == 1) e = Fboy(e);
cl = Fsa(cl); if(!cl.length) return;
let cx = cl.shift(), cs = 1;
cx = cx.replace(/^\d+/, en => { cs = en; return ""; });
if(!fg) cs = 0;
setTimeout(() => {
e.classList[!tp ? "remove" : tp > 0 ? "add" : "toggle"](cx);
Fcl(e, tp, cl, 1);
showInfo();
}, 100 * cs);
};

mainEntry = () => {
top.chgFw(40);
window.scrollTo(0,0);
};



[/appendFuncCode]
addFunc・echocn:trans code

[appendFuncCode]
echo = (...a) => {
let n = a.length;
let o = typeof(a[0]) == "string" ? Fid(a[0]) : a[0];
if(o.tagName == "SELECT"){
if(n == 1) return o.options[o.selectedIndex].value;
else {
if(typeof(a[1]) == "string"){
if(a[1] != ""){
for(let i = o.options.length - 1; i >= 0; i--){
if(o.options[i].value == a[1]) break;
}
o.selectedIndex = i > 0 ? i : 0;
} else o.selectedIndex = 0;
} else o.selectedIndex = a[1];
}
} else {
type =
o.tagName == "TEXTAREA" || o.tagName == "INPUT" ? "value" : "innerHTML";
if(n == 1) return o[type];
else {
if(n == 2){
let s = a[1];
if(typeof(s) == "object") s = s.join("");
o[type] = (s + "").replace(/\t/g, "\n");
} else {
let s = o[type];
if(a[2] == "add") o[type] = s + a[1];
if(a[2] == "math") o[type] = Number(s) + a[1];
}
}
}
return o;
};
[/appendFuncCode]
addFunc・xhrcn:trans code

[appendFuncCode]
xhr = (d1,d2,d3) => {
xmlPath = d1;
const a = new XMLHttpRequest();
a.onreadystatechange = () => {
if(a.readyState == 4){
if(a.status == 200){
d3(a.responseText.replace(/\r?\n/g, "\t"),
Math.floor((new Date(a.getResponseHeader("last-modified"))).
getTime() / 1000)
);
} else d3("");
}
};
const mode = d1.match(/^[a-z0-9_]+$/) ? "post" : "get";
a.open(mode, mode == "get" ?
d1.replace(/#.*$/, "") : "/cgi-bin/" + d1 + ".cgi", true);
a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
a.send(d2);
};

xhrEntry = () => {
alert("検証中");
return;
let dt = Ftag(Fboy(1), "textarea");
let dn = "";
for(let i = 2; i < dt.length - 5; i++){
dn += "name=" +
enc(dt[i].parentNode.parentNode.firstChild.firstChild.value) +
"&value=" + enc(dt[i].value) + "&";
}
dn += "name=oid&value=log3&name=mode&value=update";
xhr("profile_editor", dn, e => {
alert(e);
});
};





[/appendFuncCode]
profile_editorEntrycn:trans code

[appendFuncCode]
profile_editorEntry = () => {
let w1 = top.frames[1].document;
let cf = w1.body;
let da = Fce("span"); da.id = "xhrBtn";
da.innerHTML = `<a href="javascript:top.frames[0].xhrEntry()">送信</a>`;
cf.append(da);
Ftag(Fboy(1), "p")[1].textContent = "Profile update.";
let dt = Ftag(Fboy(1), "textarea");
for(let i = 0; i < dt.length; i++){
dt[i].addEventListener("click", e => {
e.target.parentNode.previousSibling.childNodes[1].textContent =
charLen(e.target.value); }, false);
let sp = Fce("span"); sp.className = "cnt";
let sc = Fce("span"); sc.className = "cmd";
sc.append("新規挿入");
sc.addEventListener("click", a => {
let obj = a.target.parentNode.parentNode;
let tb = obj.parentNode.parentNode;
let job = tb.rows[tb.rows.length -1];
obj.parentNode.insertBefore(job, obj);
}, false);
let par = dt[i].parentNode.parentNode;
sp.append(charLen(dt[i].value));
par.firstChild.append(sp, sc);
if(par.firstChild.firstChild.value.match(/cn:([a-z0-9]+)/)){
par.classList.add(RegExp.$1);
}
}
top.chgFw(30);
let o = Ftag(Fboy(1), "tr");
let a = "";
for(let i = 0; i < o.length; i++){
a += `<span class="ed" onclick="edSel(this,${i})">${i}</span>`;
}
echo("mainDisp", a);
Fcl(Fboy(0), 1, "main-edit link-min");
showInfo();
};

[/appendFuncCode]
addFunc・loginEntrycn:trans code

[appendFuncCode]

loginEntry = s => {
let dt = top.frames[1].document.body.childNodes;
dt[7].remove(); dt[5].remove(); dt[3].remove();
dt[1].innerHTML =
`<img src="/home/log3/files/waiting_usa.jpg" alt="" /><br / ><br / >
編集ページを表示しようと頑張ったのですが<br / >
編集権限がないかログアウト状態みたいです。`;
dt[1].style = 'margin-top:7rem; text-align:center;';
top.chgFw(60);
};

strYsRep = (s, no) => {
let tpCnt = 0;
s = s.replace(/🟨\((\-?)(\d)(\-?)\)(.+?)🟨/g,
(e0,e1,e2,e3,e4) => `<span class="eps ${
e4.length < 25 && !e4.includes("<") ? "one " : ""}${
e4.length > 60 || (e4.match(/</g) || []).length > 2 ?
"wide " : "" }${e1 == "" ? "" : "tp "}es-${
e2}"><span id="r${no}p${
tpCnt++}" class="tp-u" onclick="parentNode.classList.toggle('tp');"></span>${
e3 == "" ? e4 : "<code>" + e4 + "</code>"}</span>`);
s = s.replace(/🟦defExec:(\d+)/g,
`<span class="def-exec" onclick="top.defExec(this, $1)">$1</span>`);
s = s.replace(/🟦(r\d+p\d+|rows\d+|cCode\d+|menu)/g,
`<a class="scc" href="javascript:top.scCode('$1')">$1</a>`);
s = s.replace(/🟦([0|1]):([a-zA-Z0-9\-_\,]+)/g,
`<span class="cl-btn" onclick="top.clToggleChg(this, $1, '$2')">$1 : $2</span>`);
s = s.replace(/🟦(\x26lt;.+?)🟦/g, (e0, e1) => fullDec(e1));
return s;
};

[/appendFuncCode]
addFunc・defExeccn:trans code
[appendFuncCode]
defExec = (e, no) => {
let obj,o,w = Fis(e, "act"),dt;
switch(no){
case 0 :
window.scrollTo(0,0);
obj = Fwid("relBtn0", w);
Fcl(obj, 1, "min");
if(w){
setTimeout(() => {
o = Fid("menu");
o.insertBefore(obj, o.childNodes[2]);
Fcl(obj, 0, "2fx0 min");
}, 600);
} else {
Fcl(1, 1, "inc-min");
setTimeout(() => {
Fboy(1).append(obj);
Fcl(obj, 1, "fx0");
Fcl(obj, 0, "2min");
}, 600);
}
Fcl(e, -1, "act"); break;

case 1 :
if(!w){
allDiary();
Fcl(e, 1, "act");
}
setTimeout(() => scCode("menu"), 1000); break;

case 2 :
let num = 221579;
xhr(`/cgi-bin/diary_form.cgi?oid=log3;mode=edit;article_id=${num}`, null, e => {
let fg = e.indexOf('article_notify" value="1" checked="checked"') == -1;
alert(fg ? "非公開" : "公開");
});
Fcl(e, -1, "act");
break;
case 3 : let c = doc.cookie;
alert(c); break;
}

showInfo();
};

[/appendFuncCode]
scCodec clToggleChgcn:trans code

[appendFuncCode]


footprintEntry = () => {

};

linksEntry = () => {

};

friendsEntry = () => {

};

scCodeExec = (obj, fn) => {
toMove[2 * fn].push(Fwin(fn, -1).scrollTop);
Fwid("movBtn0", fn).textContent = toMove[2 * fn].length;
obj.scrollIntoView();
setTimeout(() => {
top.frames[fn].scrollBy(0, fn ? -20 : -30);
if(obj.id.includes("rows")) Fcl(obj, -1, "cln,8cln");
showInfo();
}, fn ? 1000 : 800);
};

scCode = dt => {
let o;
if(o = Fid(dt)) scCodeExec(o, 0);
else if(o = Fwid(dt, 1)) scCodeExec(o, 1);
};

clToggleChg = (e, w, cl) => {
cl = Fsa(cl);
if(cl.length == 2 && cl[1] == "2"){
cl[1] = cl[0];
Fcl(w, -1, cl);
} else {
if(Fis(e, "rev")) cl.reverse();
Fcl(w, -1, cl);
Fcl(e, -1, "rev");
}
showInfo();
};

[/appendFuncCode]
転送・chgFw chgFwLoopcn:trans code

[appendFuncCode]
fwSize = 40;
isFwJob = false;
chgFw = dw => {
if(dw == fwSize || isFwJob) return;
if(dw == "-1"){
if(mainFile == "profile_editor"){
dw = fwSize == 30 ? 60 : 30;
} else {
dw = fwSize - 10;
if(dw < 0) dw = 100;
}
}
if(dw == "+1"){ dw = fwSize + 10; if(dw > 100) dw = 0; }
if(isNaN(dw) || dw < 0 || dw > 100) return;
isFwJob = true;
Fcl(0, 1, "ex-wait");
Fcl(1, 1, "ex-wait");
let fn = Math.floor(fwSize / 10);
Fcl(0, 0, "w" + fn);
Fcl(1, 0, "w" + (10 - fn));
dw = Math.floor(dw / 10) * 10;
showInfo();
fwSizeAt = dw;
fwSizeDx = (dw - fwSize) / 10;
setTimeout(() => {
chgFwLoop();
}, 400);
};

chgFwLoop = () => {
top.document.body.cols = fwSize + "%, *";
if(fwSize != fwSizeAt){
fwSize += fwSizeDx;
setTimeout(() => chgFwLoop(), 10);
} else {
Fcl(Fboy(0), 0, "ex-wait");
Fcl(Fboy(1), 0, "ex-wait");
let fw = Math.floor(fwSize / 10);
Fcl(0, 1, "w" + fw);
Fcl(1, 1, "w" + (10 - fw));
isFwJob = false;
showInfo();
}
};

showInfo = () => {
echo("clsInfo", "　" + doc.body.classList + " : " + Fboy(1).classList);
};

[/appendFuncCode]
charLen datTranscn:trans code

[appendFuncCode]
delayCls = (w, delay, c, dt) => {
let cl = top.frames[w].document.body.classList;
setTimeout(() => {
!c ? cl.remove(dt) : c > 0 ? cl.add(dt) : cl.toggle(dt);
showInfo();
}, delay * 100);
};

charLen = str => {
str = str.replace(/\r?\n/g, " ").replace(/<|>/g, " ").
replace(/"/g, " ").replace(/\x26|'/g, " ");
return str.length;
};

tdCreate = (dtf, cnt, s1, cn, s) => {
echo(dtf,
`<div class="rows-info">
<span class="rows-sec">sec</span>
<span class="rows-id">rows${cnt}</span>
<span class="rows-len">${charLen(s1)}</span>
<span class="rows-cn">${cn}</span>
</div>
<div class="rows-doc">${s}</div>`);
};

datTrans = () => {
let o = Fcn(Fwin(1, 1), "trans");
let len = o.length;
let tar = Fid("transDisp"); tar.innerHTML = "";
for(let i = 0; i < len; i++){
tar.append(o[0]);
}
if(!defExecDone){
setTimeout(() => {
/* Fcn(Fboy(1), "def-exec")[1].click(); */
}, 3000);
defExecDone = true;
}
};

thEntry = e => {
alert("ok");
};

[/appendFuncCode]
転送・profileEntrycn:trans code

[appendFuncCode]
profileEntry = () => {
let cCode = 0;
infCnt = 0;
let trarnsCnt = 0;
Fid("transDisp").innerHTML = "";
let s, s1, o = Ftag(Fboy(1), "td");
let vol = o.length - 1;
let cnt = 0;
echo(o[0], "cn:out " + "0123456789".replace(/\d/g, "🟦defExec:$&"));
o[0].parentNode.classList.add("out");
for(let dtf of o){
let par = dtf.parentNode;
echo(par.firstChild,
`<span onclick="parentNode.parentNode.classList.toggle('cln')">${
par.firstChild.innerHTML}</span>`
);
par.id = "rows" + cnt;
s = dtf.innerHTML;
s1 = s;
s = strYsRep(s, cnt);
s = s.replace(/\[([a-zA-Z\-_0-9]+\])(.+?)\[\/\1/g,
(e0,e1,e2) => `<div class="key" id="cCode${cCode}">${
e1} <span>cCode:${cCode++}</span></div><code>${
e2}</code><div class="key">[/${e1}</div>`);

let cn = "";
s = s.replace(/^cn:([a-z0-9\-_ ]+)/, (e0,e1) => { cn = e1; return ""; });
par.className = cn;
tdCreate(dtf, cnt, s1, cn, s);

let obj = Fce("div");
if(!cn.includes("trans")) Fcl(obj, 1, "rtn");
let a = Fce("a"); a.className = "scc";
a.href = "javascript:scCode('" + par.id + "')";
a.textContent = par.id + " : " + par.firstChild.textContent;
obj.append(a);
Fid("linkPar" + (cnt % 2)).append(obj);
cnt++;
}
datTrans();
top.chgFw(60);
delayCls(0, 10, 1, "inc-min");
showInfo();
};

[/appendFuncCode]
appendFwControl cn:trans code

[appendFuncCode]
edSel = (e, n) => {
alert("ok");


};

appendFwControl = () => {
let w1 = top.frames[1].document;
let cf = w1.body, cfc = cf.innerHTML.replace(/\n/g, "\t");
let fn = mainFile;
cf.classList.add("cf-right");
let cp = Fid("cssDisp");
if(cp.innerHTML == "" && fn == "profile"){
cp.innerHTML = evalDec(keys(cfc, "cf-code")).replace(/\t/g, "\n");
}
let css = cp.cloneNode(true);
if(fn == "profile_editor"){
css.append(evalDec(keys(cfc, fn)).replace(/\t/g, "\n"));
}

cf.append(
css,
Fid("cfDisp").cloneNode(true),
Fid("moveDisp").cloneNode(true)
);
showInfo();
};

[/appendFuncCode]
moveEntrycn:trans code

[appendFuncCode]

moveEntry = (par, el, no) => {
let cl = par.body.classList;
let sc = par.scrollingElement;
let w = cl.contains("cf-right") ? 1 : 0;
if(no == -1){
sc.scrollTop = 0;
toMove[2 * w] = [];
toMove[2 * w + 1] = [];

Fwid("movBtn0", w).textContent = 0;
Fwid("movBtn1", w).textContent = 0;
} else {
let num = 2 * w + no;
if(toMove[num].length == 0) return;
let st = sc.scrollTop;
let dy = toMove[num].pop();
sc.scrollTop = dy;
el.textContent = toMove[num].length;
if(no == 0){
toMove[num + 1].push(st);
el.nextElementSibling.textContent = toMove[num + 1].length;
} else {
toMove[num - 1].push(st);
el.previousElementSibling.textContent = toMove[num - 1].length;
}
}
showInfo();
};


[/appendFuncCode]
三冊目cn:out
🟨(1)
吹き出しブロックの三冊目を動かします。
今度は指定の箇所に挿入を試みます。

cCode10の手前に表示してみましょう。
🟨
appendFuncCode execcn:trans code

[appendFuncCode]
{
top.chgFw = dw => chgFw(dw);
top.scCode = dt => scCode(dt);
top.clToggleChg = (e, w, dt) => clToggleChg(e, w, dt);
top.moveEntry = (d, e, no) => moveEntry(d, e, no);
top.defExec = (e, no) => defExec(e, no);
defExecDone = false;
toMove = [];
toMove[0] = [];
toMove[1] = [];
toMove[2] = [];
toMove[3] = [];

let w = top.document, o = w.body;
o.border = 0; o.setAttribute("frameborder","0"); o.cols = "40%, *";
o = w.createElement("link"); o.rel = "icon";
o.type = "image/vnd.microsoft.icon";
o.href = "http://nancyan.main.jp/image/icon/favicon2.ico";
w.head.append(o);

let obj = Fce("style"); obj.id = "cssDisp"; doc.body.append(obj);
obj = Fce("span"); obj.id = "cfDisp";
echo(obj, evalDec(`
<a style="cursor:cell" href="javascript:top.chgFw('-1')">-1</a>
<a style="cursor:all-scroll" href="javascript:top.chgFw(50)">50</a>
<a style="cursor:cell" href="javascript:top.chgFw('+1')">+1</a>`
));
doc.body.append(obj);

obj = Fce("span"); obj.id = "moveDisp";
echo(obj, evalDec(`
<span id="movBtn0" onclick="top.moveEntry(document, this, 0)">0</span>
<span id="movBtn1" onclick="top.moveEntry(document, this, 1)">0</span>
<span id="movBtn2" onclick="top.moveEntry(document, this, -1)"></span>`
));
doc.body.append(obj);
}
[/appendFuncCode]
追加指定cn:out

🟨(1)　フォームの上に新規でフォームを挿入するコマンドを付けてみました。要素の移動だから一度の更新時には5つ以下になります。まぁ、必要な時に増やすのだからひとつずつですよね。🟨
臨時検証cn:out

オブジェクトの参照変数は移動した後でも有効なのか？
イベントの振り分けの考察

🟦defExec:0
getAllDiarycn:trans code

[appendFuncCode]
getAllDiary = (uri, au, fg) => {
xhr(uri, false, e => {
e = e.replace(/.+<div id="main">/, "");
let dt = e.match(/entry_title">.+?<\/a>/g);
let next = e.match(/href="([^"]+)/) ? RegExp.$1 : "";
for(let i = 0; i < dt.length; i++){
let user = dt[i].replace(/.+\/home\/([0-9a-z\-]+).+/, "$1");
let obj = Fid("uP" + user);
if(!obj){
let o = Fce("div"); o.id = "uP" + user; o.className = "all-ent";
echo(o, "<a class=\"all-user\" target=\"_blank\" " +
"href=\"/home/new-diary/main.html?fn=3;user=" + user +
"\">" + user + "</a><span class=\"user-cnt\">1</span>" +
"<span class=\"all-article\"></span>" +
"<span class=\"user-date\"></span>" +
"<span class=\"user-come\">0</span>" +
dt[i].replace(/^[^<]+/, "")
);
au.append(o);
userMax++;
} else {
echo(obj.childNodes[1], 1, "math");
}
}
if(fg) getAllDiary(next, au, 0);
else {
userCnt = 0;
userDiaryLoad();
}
});
};
[/appendFuncCode]
userDiaryLoadcn:trans code

[appendFuncCode]
userDiaryLoad = () => {
let obj = Fcn("mainDisp", "user-date")[userCnt];
xhr(obj.nextElementSibling.nextElementSibling.href, false, e => {
obj.textContent = e.replace(/.+entry_date">\d{4} ([^<]+)<.+/, "$1");
if(userCnt == 0){
echo("allInfo", "新着日記（全カテゴリ200件）" + e.replace(/.+id="(A\d+).+/, "$1"));
}
if(userCnt == userMax - 1){
let s1 = e.replace(/.+id="(A\d+).+/, "$1");
let n = echo("allInfo").replace(/.+A/, "") - s1.replace(/A/, "") + 1;
echo("allInfo", " - " + s1 + " \x3cbr />※<span>" +
n + "</span>件中<span>200</span>件が公開、" +
"<a class=\"scc\" href=\"javascript:scCode('allAn')\">" +
(n - 200) + "件が非公開</a>です", "add");
}
obj.previousSibling.textContent = e.replace(/.+id="A\d\d(\d+).+/, "$1");
echo(obj.nextElementSibling,
e.replace(/.+id="comments">コメント \((\d+)\).+/, "$1") - 0, "math");
userCnt++;
if(userCnt < userMax) userDiaryLoad();
else {
let an = Fce("div"); an.id = "allAn";
echo(an, `
<div id="anInfo"></div>
<div id="anDiary"></div>
`);
Fid("mainDisp").append(an);
allDiaryArray("ini");
}
});
};

[/appendFuncCode]
allDiaryAppendcn:trans code

[appendFuncCode]
allDiaryArray = dt => {
if(dt == "ini") dt = "freehand2007 yu-ma mikiharb tanpopo sakura1205 haru midnight kakei new-diary".split(" ");
allDiaryAppend(dt);
};

allDiaryAppend = dt => {
if(dt.length == 0) return;
let user = dt.shift();
let o = Fce("div"); o.id = "an" + user; o.className = "an-ent";
echo(o, `
<div class="an-info">
<a class="an-user" target="_blank" href="/home/new-diary/main.html?fn=3;user=${user}">${user}</a>
<span class="an-cnt" onclick="allAnDiaryEntry('${user}')">直近100件取得</span>
<span class="an-article"></span>
<span class="an-date"></span>
<span class="an-come">0</span>
</div>
<div class="an-dat min" id="dat${user}"></div>
`);
Fid("anDiary").append("\n ", o);
xhr("/cgi-bin/diary.cgi?oid=" + user + ";n=100", false , e => {

setTimeout(() => allDiaryAppend(dt), 100);
});
};


[/appendFuncCode]
addFunc・allDiarycn:trans code

[appendFuncCode]
allDiary = () => {
let par = Fid("mainDisp");
echo("mainDisp", "");
let as = Fce("div"); as.id = "allInfo";
let au = Fce("div"); au.className = "all-diary";
par.append(as, au);
userMax = 0;
getAllDiary("/cgi-bin/diary.cgi?oid=all;n=100", au, 1);
};

[/appendFuncCode]
allAnDiaryEntrycn:trans code

[appendFuncCode]
allAnDiaryEntry = user => {
let obj = Fid("dat" + user);
if(echo(obj) == ""){
xhr("/cgi-bin/diary.cgi?oid=" + user + ";n=100", false, e => {
let dt = e.match(/<div class="entry C.+?<\/a>/g);
let c = e.match(/comments">コメント \(\d+\)</g);
dt = dt.join(" ");
dt = dt.replace(/<div class="entry C\d+" id="A(\d+)">/g, "$1");
dt = dt.replace(/title="[^"]+"/g, "");
dt = dt.replace(/<div class="entry_date">([^<]+)<\/div>/g, "$1");
dt = dt.replace(/<div class="entry_title">/g, "");
dt = dt.replace(/(<a )/g, "$1target=\"_blank\" ");
dt = dt.replace(/\t/g, "").split(" ");
let s = "";
for(let i = 0, j = 0; i < dt.length; i+=3){
s += `
<div class="an-s1">
<span class="">A${dt[i]}</span>
<span class="">${dt[i+1]}</span>
<span class="an-c">${c[j++].replace(/^.+\((\d+).+/, "$1")}</span>
${dt[i+2]}
</div>
`;

}
echo(obj, s);
Fcl(obj, -1, "min");
// setTimeout(() => scCode("dat" + user), 1000);
});
} else {
Fcl(obj, -1, "min");
}

};

[/appendFuncCode]