T/U area Fork

    @@ -11,10 +11,6 @@ (() => { "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)); };
    @@ -27,6 +23,16 @@ 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",
    @@ -36,7 +42,7 @@ onkeypress(evt) { const ESC = 27; if (evt.keyCode === ESC) { - remove_node(container); + remove_let(); } }, });
    @@ -46,7 +52,7 @@ className: "btn close", innerHTML: "❌", title: "Close", - onclick() { remove_node(container); }, + onclick() { remove_let(); }, tabIndex: 0, });
    @@ -63,57 +69,63 @@ tabIndex: 0, }); + const STYLE_PREFIX = "." + LET_ID; // 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; - } - `, + // 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();
  • /*
     * @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');
    })();
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。