by noromanba
2017-03-26 [2017/03/26 05:03:29]
easy copyable title/url box; click to copy, double-click outer to close
/*
* @title T/U box
* @description easy copyable title/url box; click to copy, double-click outer to close
* @include http://*
* @include https://*
* @contributor pacochi http://let.hatelabo.jp/pacochi/let/hJme3OvVzN41
* @license MIT License https://opensource.org/licenses/MIT
* @javascript_url
*/
(() => {
'use strict';
// https://gist.github.com/noromanba/d730ccf3ae5e6916cd60
const canonical = (document.querySelector([
'head meta[property="og:url"][content]'
]) || {}).content ||
(document.querySelector([
'head link[rel="canonical"][href]'
]) || {}).href ||
location.href;
const title = document.title;
const hatenalink = `[${canonical}:title=]`;
const mdlink = `[${title}](${canonical})`;
const box = document.body.appendChild(Object.assign(document.createElement('div'), {
id: 'copy-buttons',
style: `
background-color: white;
border: 1px solid silver;
padding: 1em;
position: fixed;
top: 0;
left: 0;
z-index: ${Number.MAX_SAFE_INTEGER || Number.MAX_VALUE};
`,
}));
box.addEventListener('dblclick', e => {
box.parentNode.removeChild(box);
e.stopPropagation();
});
// TBD alignment
[
{ label: 'CanonicalURL', value: canonical },
{ label: 'Title', value: title },
{ label: 'HatenaSyntax', value: hatenalink },
{ label: 'Markdown', value: mdlink },
].forEach(({label, value}) => {
box.appendChild(Object.assign(document.createElement('label'), {
style: `
display: block;
color: black;
background-color: silver;
text-align: left;
`,
textContent: `${label}: `,
})).appendChild(Object.assign(document.createElement('input'), {
style: `
color: black;
background-color: silver;
margin: 0.5em;
`,
value,
})).addEventListener('click', e => {
e.target.select();
document.execCommand('copy');
e.stopPropagation();
});
});
})();