/*
* @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 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,
});
const remove_let = () => {
container.parentNode.removeChild(container);
// XXX attr selector quote
const style = document.querySelector("style[data-let-id='`${LET_ID}`']");
if (!style) return;
style.parentNode.removeChild(style);
};
// 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_let();
}
},
});
// TODO plain img-link for keyboard a11y
append_element(container, "div", {
className: "btn close",
innerHTML: "❌",
title: "Close",
onclick() { remove_let(); },
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,
});
const STYLE_PREFIX = "." + LET_ID;
// TODO icon alignment
append_element(document.head || document.body, "style", {
// Template Strings Workaround:
// malfunction multi style due to Hatena::Let packer was remove all spaces
// i.e. `.klass div {} .klass pre {}` -> ".klassdiv{}.klasspre{}"
textContent: [
STYLE_PREFIX + " {",
"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 + ";",
"}",
STYLE_PREFIX + " textarea {",
" height: 5em !important;",
" vertical-align: top;",
" font-family: monospace;",
" font-size: 10pt;",
" height: 5em;",
" width: auto;",
" margin: 0;",
"}",
STYLE_PREFIX + " textarea::-moz-selection {",
" background-color: #5dacf2;",
" color: #444;",
"}",
STYLE_PREFIX + " .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;",
"}",
STYLE_PREFIX + " .close {",
" background-color: darkred;",
" vertical-align: top;",
"}",
STYLE_PREFIX + " .bookmark {",
" top: 1.5em;",
" padding: 0;",
"}",
STYLE_PREFIX + " .bookmark img {",
" width: 1.5em;",
" height: 1.5em;",
"}",
].join("\n"),
// FIXME can not append data-*
"data-let-id": `${LET_ID}`,
});
area.focus();
area.select();
//document.execCommand('copy');
})();