T/U area

by noromanba 2017-04-18 [2017/04/18 22:14:31]
(Forked from title and url (for copy) by a-kuma3)

show textarea for copy title/url

@@ -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 LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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