title and url (for copy)

by a-kuma3 2017-03-25 [2017/03/25 23:53:54]

タイトルと URL をコピーするための TEXTAREA

/*
 * @title title and url (for copy)
 * @description タイトルと URL をコピーするための TEXTAREA
 * @include http://*
 * @include https://*
 * @license MIT License
 * @javascript_url
 */
(function () {
    const c_id = "a-kuma3-" + Date.now();
    const remove_textarea = function() {
        this.parentNode.parentNode.removeChild(this.parentNode);
    };

    function append_element(parent, tag, attr) {
        return parent.appendChild(Object.assign(document.createElement(tag), attr));
    }

    let c = append_element(document.body, "div", {
        id: c_id
    });

    let txt = append_element(c, "textarea", {
        className: "txt",
        value: document.title + "\n" + location.href,
        cols: 100,
        rows: 5,
        onkeypress: function(ev) {
            if (ev.keyCode == 27) {     // ESC
                remove_textarea.call(this);
            }
        },
    });

    append_element(c, "div", {
        className: "btn close",
        innerHTML: "&#x274c;",
        onclick: remove_textarea,
    });

    append_element(c, "div", {
        className: "btn bookmark",
        innerHTML: "<img src='http://localhost/images/firefox_favicon/hatebu.png'>",
        onclick: function() {
            location.href = "http://b.hatena.ne.jp/entry/" + location.href;
        },
    });

    append_element(document.head, "style", {
        innerHTML: `
        #${c_id} {
            display: inline-block;
            position: fixed;
            top: 0;
            left: 0;
            background-color: white;
            border: 1px inset gray;
            z-index: 10000;
        }
        #${c_id} textarea {
            height: 5em !important;
            vertical-align: top;
            font-family: monospace;
            font-size: 10pt;
            height: 5em;
            width: auto;
            margin: 0;
        }
        #${c_id} textarea::-moz-selection {
            background-color: #5dacf2;
            color: #444;
        }
        #${c_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;
        }
        #${c_id} .close {
            background-color: darkred;
            vertical-align: top;
        }
        #${c_id} .bookmark {
            top: 1.5em;
            padding: 0;
        }
        #${c_id} .bookmark img {
            width: 1.5em;
            height: 1.5em;
        }
        `,
    });

    txt.focus();
    txt.select();

})();

Permalink RAW Packed Userscript LOADER Metadata ?

Permalink

このページへの個別リンクです。

RAW

書かれたコードへの直接のリンクです。

Packed

文字列が圧縮された書かれたコードへのリンクです。

Userscript

Greasemonkey 等で利用する場合の .user.js へのリンクです。

Loader

@require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

Metadata

コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

2017/03/25 23:53:54 - 2017-03-25