💛 メモ帳

entry = () =>{
const obj = doc.body;
const css = doc.createElement("style");
css.type = "text/css";
css.innerHTML = Fid("emoCssDisp").textContent;
doc.body.append(css);
doc.body.classList.add("ent");
doc.body.classList.add("emo-entry");
createForm();

if(doc.URL.match(/page=([0-9a-z]+)/)){
toFormTop();
Fid("uni").value = RegExp.$1;
emoCmd(15);
}
};

toFormTop = e => {
Fid("emoForm").scrollIntoView();
setTimeout(() => {window.scrollBy(0, -20);}, 1000);
};
createForm = () => {
let btn = (txt, no, su) => {
let act = su != "" ? ` id="${su}"` : "";
return `\x3cbutton onclick="emoCmd(${no})"${act}>${txt}\x3c/button>`;
};
let s = `\x3cdiv id="dtArea">\x3cdiv class="emobtn">
${btn("\u{1f499}\u{1f191}", 0, "")}
${btn("\u{1f499}\u{1f53d}", 1, "")}
${btn("\u{1f499}\u{1f1ed}", 11, "dtBtn")}
\x3clabel>追記\x3cinput type="checkbox" id="dtAdd" checked="checked" />\x3c/label>
${btn("\u{1f49b}\u{1f1f9}", 13, "")}
${btn("\u{1f49b}\u{1f1f8}", 14, "")}
${btn("\u{1f497}\u{1f647}", 4, "")}
${btn("\u{1f497}\u{1f640}", 5, "")}
${btn("\u{1f496}\u{1f4a5}", 18, "")}
${btn("💚📄", 19, "")}
\x3ca href="javascript:toFormTop()" class="fix">fit.\x3c/a>
\x3c/div>
\x3ctextarea id="emoText" class="emoarea" placeholder="
　\u{1f499} #emoForm #dtArea #emoText.emoarea

　\u{1f191} 領域を白紙にする。placeholderが見える状態。
　\u{1f53d} 領域に対の領域を追加 。
　\u{1f499}\u{1f1ed} 領域の高さの変更。
　\u{1f49b}\u{1f1f9} TAB文字の除去。
　\u{1f49b}\u{1f1f8} TABを半角空白２文字に置換。
　\u{1f497}\u{1f647} 実態文字→参照文字の置換。
　\u{1f497}\u{1f640} 参照文字→実態文字の置換。">\x3c/textarea>
\x3c/div>\x3cdiv id="ddArea">\x3cdiv class="emobtn">
${btn("\u{1f497}\u{1f191}", 3, "")}
${btn("\u{1f497}\u{1f53d}", 7, "")}
${btn("\u{1f497}\u{1f1ed}", 9, "ddBtn")}
\x3clabel>追記\x3cinput type="checkbox" id="ddAdd" checked="checked" />\x3c/label>
${btn("\u{1f497}\u{1f1eb}", 8, "")}
${btn("\u{1f497}\u{1f1e8}", 12, "")} \x3cinput type="text" id="uni" size="3" value="1f4" />
${btn("\u{1f534}", 15, "")}
${btn("\u{1f53a}", 16, "")}
${btn("\u{1f53b}", 17, "")}

\x3c/div>
\x3ctextarea id="emoDone" class="emoarea" placeholder="
　\u{1f497} #emoForm #ddArea #emoDone.emoarea

　\u{1f497}\u{1f1eb} ボタンの処理関数(emoCmd)の表示。
　\u{1f497}\u{1f1e8} フォーム領域の生成関数(createForm)の表示。
　\u{1f534} : ユニコードの一覧を256字ずつ生成。
　\u{1f53a} : ユニコード番号を256減らして生成。
　\u{1f53b} : ユニコード番号を256増やして生成。
">\x3c/textarea>
\x3c/div>
`;
Fid("emoForm").innerHTML = s;
};
cpa = (s, n) => (n == 2 ? s.codePointAt(0) : s.charCodeAt(n)).toString(16);
toUni = () => {
const obj = Fid("uni");
let dat = obj.value;
if(dat == "" || dat.match(/[^0-9a-f]/) || dat.length > 3){
dat = "1f4";
obj.value = dat;
}
return dat;
};

emoCmd = no => {
const dt = Fid("emoText"), dd = Fid("emoDone");
let dts = dt.value, dds = dd.value;
let fcs = Fid("emoForm").classList;
let isDtAdd = Fid("dtAdd").checked;
let isDdAdd = Fid("ddAdd").checked;
let s,i,st;
switch(no){
case 0 : dt.value = ""; break;
case 1 : dt.value = isDtAdd ? dds +"\n\n" + dts: dds; break;
case 2 : dt.value = ""; break;
case 3 : dd.value = ""; break;
case 4 : dd.value = dts.replace(/[\ud800-\udbff][\udc00-\udfff]/g,
e => `\x26#x${ cpa(e, 2)};`); break;
case 5 : dd.value = dts.replace(/\x26#(x?)([0-9a-z]{2,});/g, (e, e1, e2) =>
String.fromCodePoint(parseInt(e2, e1 == "x" ? 16 : 10))); break;

case 6 : break;
case 7 : dd.value = isDdAdd ? dts + "\n\n" + dds : dts; break;
case 8 : dd.value = window.emoCmd.toString(); break;
case 9 : fcs.toggle("dd-all"); break;
case 10 : break;
case 11 : fcs.toggle("dt-all"); break
case 12 : dd.value = window.createForm.toString(); break;
case 13 : dt.value = dts.replace(/\t/g, ""); break;
case 14 : dt.value = dts.replace(/\t/g, " "); break;
case 15 : st = parseInt(toUni() + "00", 16);
s = " \n■U+" + st.toString(16).toUpperCase() + " - U+" + (st + 255).toString(16).toUpperCase() + "\n\n";
for(i = 0; i < 256; i++){
if(i % 16 == 0) s += " U+" + (st + i).toString(16).toUpperCase() + " : ";
s += String.fromCodePoint(st + i) + " ";
if(Math.floor(i % 16) == 15) s += "\n";
}
if(!fcs.contains("dd-all")){
fcs.remove("dt-all");
fcs.add("dd-all");
}
dd.value = isDdAdd ? dds + s : s;
if(isDdAdd) setTimeout(() => { dd.scrollTop += 600; }, 500); break;
case 16 :case 17 :
Fid("uni").value = (parseInt(toUni(), 16) + (no == 16 ? -1 : 1)).toString(16);
emoCmd(15); break;
case 18 : s = dt.value.match(/[\ud800-\udbff][\udc00-\udfff]/g);
st = "";
for(const s1 of s){
let c1 = cpa(s1,2);
let deg = s1.codePointAt(0);
st += ` U+${c1.toUpperCase()} \x26#x${c1}; \x26#${deg}; 0x${c1} \\u{${c1}} \\u${cpa(s1,0)}\\u${cpa(s1,1)} : ${s1}\n`;
}
dd.value = isDdAdd ? st + "\n\n" + dds : st; break;
case 19 : dt.value = dts.replace(/\r?\n/g, "\t").
replace(/\(\s*lg\-(\d+deg)/g, "background-image:linear-gradient($1").
replace(/lg\-(\d+deg)/g, "linear-gradient($1").
replace(/ bg\-c:/g, " background-color:").replace(/\t/g, "\n"); break;

}
};
entry();

#emoPin {
display:none;
}

#emoCon {
text-align:left;
margin-bottom:1rem;
}
#emoCon span {
display:inline-block;
width:3rem;
line-height:3rem;
text-align:center;
border-radius:50%;
border:1px solid #ccc;
cursor:pointer;
margin-right:.25rem;
background-color:snow;
transition:background-color .5s;
}

#emo:hover {
background-color:#ffc;
}
#emoCon span.act {
background-color:#ccf;
}

.emo {
font-size:1rem;
position:relative;
padding:1em;
margin-bottom:1rem;
background-color:#ffefff;
/* transform:scale(0);*/
border-radius:6px;
border:1px solid #808080;
transition:transform 1s, font-size 1s;
}
body.ent div.hide {
display:block;
}

#emoPia.loaded .emo {
font-size:1rem;
transform:scale(1);
}
.e1, span.w2{
font-size:1.6rem;
color:tomato;
letter-spacing:5px;

display:inline-block;
text-shadow:0 0 2px #000, 2px 2px 2px #666;
}
.e1::first-letter {
color:magenta;
}
.emoarea {
display:block;
width:100%;
padding-left:2px;
padding-right:2px;
border:2px solid #808080;
border-radius:6px;
background-color:#fff;
height:16em;
scroll-behavior:smooth;
transition:height .4s, background-color .6s;
}

.emoarea:focus {
background-color:#ffefff;
}

#upText.emoarea {
height:30em;
}
.dd-all #ddArea .emoarea, .dt-all #dtArea .emoarea {
height:28em;
}
.dd-all #dtArea .emoarea, .dt-all #ddArea .emoarea {
height:4em;
}
.dd-all #ddBtn, .dt-all #dtBtn {
color:#f00;
}
.emobtn {
margin-top:.5em;
margin-bottom:.25em;
}
.emobtn button {
display:inline-block;
width:3em;
font-size:.9em;
box-shadow:2px 2px 2px #ccc;
}
.emobtn button[id] {
margin-left:.5em;
margin-right:.5em;

}

.emobtn span {
display:inline-block;
/* padding:.1em .5em;*/
margin-right:.5em;
cursor:pointer;
}
.emobtn span.ebtn {
box-shadow:2px 2px 2px #ccc;
padding:0;
}

.emobtn label:hover {
background-color:#ffc;
}
.emobtn input[type="text"] {
display:inline-block;
font-size:1em;
padding-left:.25em;
}

a.fix {
display:inline-block;
text-decoration:underline dotted 3px;
float:right;
}
a.fix:hover {
color:magenta;
}