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

@@ -26,8 +26,7 @@
     const remove_let = () => {
         container.parentNode.removeChild(container);
 
-        // XXX attr selector quote
-        const style = document.querySelector("style[data-let-id='`${LET_ID}`']");
+        const style = document.querySelector(`style[data-let-id="${LET_ID}"]`);
         if (!style) return;
 
         style.parentNode.removeChild(style);
@@ -35,7 +34,7 @@
 
     // TBD readonly
     const area = append_element(container, "textarea", {
-        className: "page-desc",
+        className: "page-meta",
         value: document.title + "\n" + location.href,
         cols: 100,
         rows: 5,
@@ -70,9 +69,8 @@
     });
 
     const STYLE_PREFIX = "." + LET_ID;
-    // TODO icon alignment
     append_element(document.head || document.body, "style", {
-        // BUG  Template Strings Workaround for JavaScript::Squish
+        // BUG  Template Literals Workaround for JavaScript::Squish
         //      malfunction multi style due to Hatena::Let packer was remove all spaces
         //      i.e. `.klass div {} .klass pre {}` -> `.klassdiv{}.klasspre{}`
         //
@@ -127,9 +125,7 @@
             "    height: 1.5em;",
             "}",
         ].join("\n"),
-        // FIXME can not append data-*
-        "data-let-id": `${LET_ID}`,
-    });
+    }).setAttribute('data-let-id', LET_ID);;
 
     area.focus();
     area.select();

• /*
   * @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);
  
          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-meta",
          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;
      append_element(document.head || document.body, "style", {
          // BUG  Template Literals Workaround for JavaScript::Squish
          //      malfunction multi style due to Hatena::Let packer was remove all spaces
          //      i.e. `.klass div {} .klass pre {}` -> `.klassdiv{}.klasspre{}`
          //
          //      http://secondlife.hatenablog.jp/entry/20100515/1273919432
          //      http://search.cpan.org/dist/JavaScript-Squish/
          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"),
      }).setAttribute('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 です。