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

• /*
   * @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 = "let-" + Date.now();
  
      // `id` is possibility of overwritten by Extension or else
      // e.g. It's All Text!
      //      <textarea id="itsalltext_generated_id__1">
      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);
      };
  
      // http://let.hatelabo.jp/noromanba/let/hJme3Pyylqos
      // https://gist.github.com/noromanba/d730ccf3ae5e6916cd60
      const canonical = (document.querySelector([
              "head meta[property='og:url'][content]"
          ]) || {}).content ||
          (document.querySelector([
              "head link[rel='canonical'][href]"
          ]) || {}).href ||
          location.href;
  
      const area = append_element(container, "textarea", {
          className: "page-meta",
          value: document.title + "\n" + canonical,
          cols: 100,
          rows: 5,
          // Chrome/mium can not use onkeypress w/ Esc key, use onkeydown/onkeyup
          onkeyup(evt) {
              const ESC = 27;
              if (evt.keyCode === ESC) {
                  remove_let();
              }
          },
          readOnly: true,
      });
  
      // TODO plain link for keyboard a11y
      append_element(container, "div", {
          className: "btn close",
          innerHTML: "&#x274c;",
          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://b.st-hatena.com/images/entry-button/button-only.gif'>",
          alt: "Hatena Bookmark",
          title: "Hatena Bookmark",
          onclick() {
              location.href = "http://b.hatena.ne.jp/entry/" + canonical;
          },
          tabIndex: 0,
      });
  
      const STYLE_PREFIX = "." + LET_ID;
      append_element(document.head || document.body, "style", {
          // BUG  Template Literals Workaround for JavaScript::Squish
          //      malfunction multi selector into a Template Literals,
          //      due to Hatena::Let packer was remove spaces at around punctuations
          //
          //      thx id:unarist
          //      JavaScript::Squish SYNOPSIS c.f.
          //      http://unarist.hatenablog.com/entry/2017/04/04/151131
          //          !%&()*+,-/:;<=>?[]\{|}~
          //      http://h.hatena.ne.jp/unarist/83469576782921676
          //      http://let.hatelabo.jp/unarist/let/hLHW5K6CvOAv
          //
          //      i.e.
          //      `.klass div {} .klass pre {}` -> `.klass div{}.klass pre{}`
          //      `${EXP} div {} ${EXP} .clazz {}` -> `${EXP}div{}${EXP}.clazz{}`
          //
          //      Hatena::Let using JavaScript::Squish c.f.
          //      http://secondlife.hatenablog.jp/entry/20100515/1273919432
          //      http://search.cpan.org/dist/JavaScript-Squish/
          //
          // TBD replace `''` c.f.
          // http://let.hatelabo.jp/unarist/let/hJme5PqDlpFI
          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();
  })();
  
  // WIP Experimental
  // http://let.hatelabo.jp/noromanba/let/hJme5LS4m4I9
  
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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