T/U area
@@ -11,10 +11,6 @@
(() => {
"use strict";
- // XXX possibility of overwritten by Extension
- // e.g. It's All Text!
- const c_id = "a-kuma3-" + Date.now();
-
const remove_node = (node) => {
node.parentNode.removeChild(node);
};
@@ -23,8 +19,12 @@
return paren.appendChild(Object.assign(document.createElement(tag), attr));
};
+ const LET_ID = "a-kuma3-tu-area-" + Date.now();
+
+ // `id` is possibility of overwritten by Extension or else
+ // e.g. It's All Text!
const container = append_element(document.body, "div", {
- id: c_id,
+ className: LET_ID,
});
// TBD readonly
@@ -41,33 +41,41 @@
},
});
+ // TODO plain img-link for keyboard a11y
append_element(container, "div", {
className: "btn close",
innerHTML: "❌",
+ title: "Close",
onclick() { remove_node(container); },
+ tabIndex: 0,
});
+ // TODO plain img-link for keyboard a11y
append_element(container, "div", {
className: "btn bookmark",
innerHTML: "<img src='https://www.hatena.com/images/serviceicon-b-m.gif'>",
+ alt: "Hatena Bookmark",
+ title: "+B!",
+ // TBD canonical
onclick() {
location.href = "http://b.hatena.ne.jp/entry/" + location.href;
},
+ tabIndex: 0,
});
// TODO icon alignment
append_element(document.head || document.body, "style", {
innerHTML: `
- #${c_id} {
+ .${LET_ID} {
display: inline-block;
position: fixed;
top: 0;
left: 0;
background-color: white;
border: 1px inset gray;
- z-index: 10000;
+ z-index: ${Number.MAX_SAFE_INTEGER || Number.MAX_VALUE};
}
- #${c_id} textarea {
+ .#${LET_ID} textarea {
height: 5em !important;
vertical-align: top;
font-family: monospace;
@@ -76,11 +84,11 @@
width: auto;
margin: 0;
}
- #${c_id} textarea::-moz-selection {
+ .${LET_ID} textarea::-moz-selection {
background-color: #5dacf2;
color: #444;
}
- #${c_id} .btn {
+ .${LET_ID} .btn {
display: inline-block;
position: absolute;
right: 0;
@@ -93,15 +101,15 @@
font-family: monospace;
font-size: 10pt;
}
- #${c_id} .close {
+ .${LET_ID} .close {
background-color: darkred;
vertical-align: top;
}
- #${c_id} .bookmark {
+ .${LET_ID} .bookmark {
top: 1.5em;
padding: 0;
}
- #${c_id} .bookmark img {
+ .${LET_ID} .bookmark img {
width: 1.5em;
height: 1.5em;
}
/*
* @title T/U area
* @description show textarea for copy title/url
* @include http://*
* @include https://*
* @contributor a-kuma3 http://let.hatelabo.jp/a-kuma3/let/hJme4N-s77x7
* @license MIT License https://opensource.org/licenses/MIT
* @javascript_url
*/
(() => {
"use strict";
const remove_node = (node) => {
node.parentNode.removeChild(node);
};
const append_element = (paren, tag, attr) => {
return paren.appendChild(Object.assign(document.createElement(tag), attr));
};
const LET_ID = "a-kuma3-tu-area-" + Date.now();
// `id` is possibility of overwritten by Extension or else
// e.g. It's All Text!
const container = append_element(document.body, "div", {
className: LET_ID,
});
// TBD readonly
const area = append_element(container, "textarea", {
className: "page-desc",
value: document.title + "\n" + location.href,
cols: 100,
rows: 5,
onkeypress(evt) {
const ESC = 27;
if (evt.keyCode === ESC) {
remove_node(container);
}
},
});
// TODO plain img-link for keyboard a11y
append_element(container, "div", {
className: "btn close",
innerHTML: "❌",
title: "Close",
onclick() { remove_node(container); },
tabIndex: 0,
});
// TODO plain img-link for keyboard a11y
append_element(container, "div", {
className: "btn bookmark",
innerHTML: "<img src='https://www.hatena.com/images/serviceicon-b-m.gif'>",
alt: "Hatena Bookmark",
title: "+B!",
// TBD canonical
onclick() {
location.href = "http://b.hatena.ne.jp/entry/" + location.href;
},
tabIndex: 0,
});
// TODO icon alignment
append_element(document.head || document.body, "style", {
innerHTML: `
.${LET_ID} {
display: inline-block;
position: fixed;
top: 0;
left: 0;
background-color: white;
border: 1px inset gray;
z-index: ${Number.MAX_SAFE_INTEGER || Number.MAX_VALUE};
}
.#${LET_ID} textarea {
height: 5em !important;
vertical-align: top;
font-family: monospace;
font-size: 10pt;
height: 5em;
width: auto;
margin: 0;
}
.${LET_ID} textarea::-moz-selection {
background-color: #5dacf2;
color: #444;
}
.${LET_ID} .btn {
display: inline-block;
position: absolute;
right: 0;
color: white;
width: 1.5em;
height: "1.5em";
border: 2px silver solid;
cursor: pointer;
text-align: center;
font-family: monospace;
font-size: 10pt;
}
.${LET_ID} .close {
background-color: darkred;
vertical-align: top;
}
.${LET_ID} .bookmark {
top: 1.5em;
padding: 0;
}
.${LET_ID} .bookmark img {
width: 1.5em;
height: 1.5em;
}
`,
});
area.focus();
area.select();
//document.execCommand('copy');
})();
- Permalink
- このページへの個別リンクです。
- RAW
- 書かれたコードへの直接のリンクです。
- Packed
- 文字列が圧縮された書かれたコードへのリンクです。
- Userscript
- Greasemonkey 等で利用する場合の .user.js へのリンクです。
- Loader
- @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
- Metadata
- コード中にコメントで @xxx と書かれたメタデータの JSON です。