T/U box Fork

    @@ -19,63 +19,63 @@ */ (() => { - 'use strict'; + 'use strict'; - // 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.origin + location.pathname - ) + location.hash; - const title = document.title; - const hatenalink = `[${canonical}:title=]`; - const mdlink = `[${title}](${canonical})`; + // 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.origin + location.pathname + ) + location.hash; + const title = document.title; + const hatenalink = `[${canonical}:title=]`; + const mdlink = `[${title}](${canonical})`; - const box = document.body.appendChild(Object.assign(document.createElement('div'), { - id: 'copy-buttons', - style: ` - background-color: white; - border: 1px solid silver; - padding: 1em; - position: fixed; - top: 0; - left: 0; - z-index: ${Number.MAX_SAFE_INTEGER || Number.MAX_VALUE}; - `, - })); - box.addEventListener('dblclick', e => { - box.parentNode.removeChild(box); - e.stopPropagation(); - }); + const box = document.body.appendChild(Object.assign(document.createElement('div'), { + id: 'copy-buttons', + style: ` + background-color: white; + border: 1px solid silver; + padding: 1em; + position: fixed; + top: 0; + left: 0; + z-index: ${Number.MAX_SAFE_INTEGER || Number.MAX_VALUE}; + `, + })); + box.addEventListener('dblclick', e => { + box.parentNode.removeChild(box); + e.stopPropagation(); + }); - // TBD alignment - [ - { label: 'CanonicalURL', value: canonical }, - { label: 'Title', value: title }, - { label: 'Title + URL', value: title + ' ' + canonical }, - { label: 'HatenaSyntax', value: `[${canonical}:title=${title}]` }, - { label: 'Markdown', value: `[${title}](${canonical})` }, - ].forEach(({label, value}) => { - box.appendChild(Object.assign(document.createElement('label'), { - style: ` - display: block; - color: black; - background-color: silver; - text-align: left; - `, - textContent: `${label}: `, - })).appendChild(Object.assign(document.createElement('input'), { - style: ` - color: black; - background-color: silver; - margin: 0.5em; - `, - value, - })).addEventListener('click', e => { - e.target.select(); - document.execCommand('copy'); - e.stopPropagation(); - }); - }); + // TBD alignment + [ + { label: 'CanonicalURL', value: canonical }, + { label: 'Title', value: title }, + { label: 'Title + URL', value: title + ' ' + canonical }, + { label: 'HatenaSyntax', value: `[${canonical}:title=${title}]` }, + { label: 'Markdown', value: `[${title}](${canonical})` }, + ].forEach(({label, value}) => { + box.appendChild(Object.assign(document.createElement('label'), { + style: ` + display: block; + color: black; + background-color: silver; + text-align: left; + `, + textContent: `${label}: `, + })).appendChild(Object.assign(document.createElement('input'), { + style: ` + color: black; + background-color: silver; + margin: 0.5em; + `, + value, + })).addEventListener('click', e => { + e.target.select(); + document.execCommand('copy'); + e.stopPropagation(); + }); + }); })();
  • /*
     * @title T/U box
     * @description w/ "{title} {url}" format. easy copyable title/url box; click to copy, double-click outer to close
     * @include http://*
     * @include https://*
     * @contributor	pacochi	http://let.hatelabo.jp/pacochi/let/hJme3OvVzN41
     * @contributor noromanba http://let.hatelabo.jp/noromanba/let/hJme3Pyylqos
     * @license MIT License	https://opensource.org/licenses/MIT
     * @javascript_url
     */
    
    /* modifications
    
    * Fix copy format
    * Add Title+URL format
    * Append location.hash
    * Avoid to use array for querySelector (for cloudflare rocket.js)
    
    */
    
    (() => {
      'use strict';
    
      // 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.origin + location.pathname
      ) + location.hash;
      const title = document.title;
      const hatenalink = `[${canonical}:title=]`;
      const mdlink = `[${title}](${canonical})`;
    
      const box = document.body.appendChild(Object.assign(document.createElement('div'), {
        id: 'copy-buttons',
        style: `
    background-color: white;
    border: 1px solid silver;
    padding: 1em;
    position: fixed;
    top: 0;
    left: 0;
    z-index: ${Number.MAX_SAFE_INTEGER || Number.MAX_VALUE};
    `,
      }));
      box.addEventListener('dblclick', e => {
        box.parentNode.removeChild(box);
        e.stopPropagation();
      });
    
      // TBD alignment
      [
        { label: 'CanonicalURL', value: canonical },
        { label: 'Title', value: title },
        { label: 'Title + URL', value: title + ' ' + canonical },
        { label: 'HatenaSyntax', value: `[${canonical}:title=${title}]` },
        { label: 'Markdown', value: `[${title}](${canonical})` },
      ].forEach(({label, value}) => {
        box.appendChild(Object.assign(document.createElement('label'), {
          style: `
    display: block;
    color: black;
    background-color: silver;
    text-align: left;
    `,
          textContent: `${label}: `,
        })).appendChild(Object.assign(document.createElement('input'), {
          style: `
    color: black;
    background-color: silver;
    margin: 0.5em;
    `,
          value,
        })).addEventListener('click', e => {
          e.target.select();
          document.execCommand('copy');
          e.stopPropagation();
        });
      });
    })();
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。