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: "&#x274c;", + 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: "&#x274c;",
            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 です。

History

  1. 2017/04/18 22:14:31 - 2017-04-18
  2. 2017/04/18 22:13:29 - 2017-04-18
  3. 2017/04/02 01:19:53 - 2017-04-02
  4. 2017/04/02 01:14:27 - 2017-04-02
  5. 2017/04/01 09:24:51 - 2017-04-01
  6. 2017/04/01 06:27:48 - 2017-04-01
  7. 2017/03/31 20:47:12 - 2017-03-31
  8. 2017/03/31 17:03:27 - 2017-03-31
  9. 2017/03/31 13:38:11 - 2017-03-31
  10. 2017/03/31 13:13:25 - 2017-03-31
  11. 2017/03/31 13:06:06 - 2017-03-31
  12. 2017/03/31 11:32:39 - 2017-03-31
  13. 2017/03/31 11:01:18 - 2017-03-31
  14. 2017/03/31 10:41:28 - 2017-03-31