T/U box

by unarist 2022-12-07 [2022/12/07 00:28:34]
(Forked from T/U box by noromanba)

w/ "{title} {url}" format. easy copyable title/url box; click to copy, double-click outer to close

@@ -18,12 +18,21 @@
 * Append location.hash
 * Avoid to use array for querySelector (for cloudflare rocket.js)
 * Close on click anywhere
-* support og:url with absolute path and protocol-less URL
+* Add support of og:url with absolute path and protocol-less URL
+* Add support od Web Share API
+* More styles
 
 */
 
 (() => {
   'use strict';
+  
+  const tag = (name, props = {}, children = []) => {
+    const e = Object.assign(document.createElement(name), props);
+    if (typeof props.style === "object") Object.assign(e.style, props.style);
+    (children.forEach ? children : [children]).forEach(c => e.appendChild(c));
+    return e;
+  };
 
   // https://gist.github.com/noromanba/d730ccf3ae5e6916cd60
   const canonical_base = 
@@ -43,12 +52,13 @@
         (confirm(`次のURLがmetaタグから見つかりましたが、現在のpathと異なります。\nキャンセルを押すとlocation.hrefを使用します。\n${canonical}`) && canonical) ||
         location.href;
 
-  const box = document.body.appendChild(Object.assign(document.createElement('div'), {
+  const box = document.body.appendChild(tag('div', {
     id: 'copy-buttons',
     style: `
-background-color: white;
-border: 1px solid silver;
-padding: 1em;
+border: 1em solid white;
+outline: 1px solid silver;
+padding: 0.2em 0.5em;
+background: silver;
 position: fixed;
 top: 0;
 left: 0;
@@ -65,33 +75,43 @@
   box.addEventListener('dblclick', onClose);
   document.addEventListener('click', onClose);
   
-  // TBD alignment
   [
     { label: 'URL', value: url },
     { label: 'Title', value: title },
     { label: 'Title + URL', value: title + ' ' + url },
-    { label: 'HatenaSyntax', value: `[${url}:title=${title}]` },
+    { label: 'Hatena', value: `[${url}:title=${title}]` },
     { label: 'Markdown', value: `[${title}](${url})` },
-  ].forEach(({label, value}) => {
-    box.appendChild(Object.assign(document.createElement('label'), {
-      style: `
-display: block;
+    navigator.share && { label: 'Web Share', value: `Share!`, onclick: () => navigator.share({ title, url }) },
+  ].filter(x => x).forEach(({label, value, onclick}) => {
+    box.appendChild(tag('label', {
+      style: `display: block; color: black; text-align: left;`,
+    }, [
+      tag('span', {
+        style: `display: inline-block; width: 8em;`,
+        textContent: `${label}: `
+      }),
+      !onclick ?
+      tag('input', {
+        style: `
 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();
-    });
+background-color: #ddd;
+border: none;
+border-bottom: 1px solid gray;
+padding: 0.2em;
+margin: 0.3em 0;
+width: 15em;`,
+        value,
+        onclick: e => {
+          e.target.select();
+          document.execCommand('copy');
+          e.stopPropagation();
+        }
+      }) :
+      tag('button', {
+        style: `margin: 0.3em 0; `,
+        onclick,
+        textContent: value
+      })
+    ]));
   });
 })();

• /*
   * @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
  
  * Show confirm dialog for doubtful URL
   (location.pushState/replace will cause mismatch between meta URLs and current URL)
  * Fix copy format
  * Add Title+URL format
  * Append location.hash
  * Avoid to use array for querySelector (for cloudflare rocket.js)
  * Close on click anywhere
  * Add support of og:url with absolute path and protocol-less URL
  * Add support od Web Share API
  * More styles
  
  */
  
  (() => {
    'use strict';
    
    const tag = (name, props = {}, children = []) => {
      const e = Object.assign(document.createElement(name), props);
      if (typeof props.style === "object") Object.assign(e.style, props.style);
      (children.forEach ? children : [children]).forEach(c => e.appendChild(c));
      return e;
    };
  
    // https://gist.github.com/noromanba/d730ccf3ae5e6916cd60
    const canonical_base = 
          (document.querySelector('head meta[property="og:url"][content]') || {}).content ||
          (document.querySelector('head link[rel="canonical"][href]') || {}).href ||
          '';
    const prefix = 
          (canonical_base.startsWith('/') && location.origin) ||
          (!canonical_base.match(/^[a-z]+:/) && location.protocol + '//') || /* :/ */
          '';
    const canonical = canonical_base ? prefix + canonical_base + location.hash : null;
    const title = document.title;
    
    const url =
          (!canonical && location.href) ||
          (new URL(canonical).pathname === location.pathname && canonical) ||
          (confirm(`次のURLがmetaタグから見つかりましたが、現在のpathと異なります。\nキャンセルを押すとlocation.hrefを使用します。\n${canonical}`) && canonical) ||
          location.href;
  
    const box = document.body.appendChild(tag('div', {
      id: 'copy-buttons',
      style: `
  border: 1em solid white;
  outline: 1px solid silver;
  padding: 0.2em 0.5em;
  background: silver;
  position: fixed;
  top: 0;
  left: 0;
  z-index: ${Number.MAX_SAFE_INTEGER || Number.MAX_VALUE};
  `,
    }));
    const onClose = e => {
      box.parentNode.removeChild(box);
      document.removeEventListener('click', onClose);
      e.stopPropagation();
    };
    
    box.addEventListener('click', e => e.stopPropagation());
    box.addEventListener('dblclick', onClose);
    document.addEventListener('click', onClose);
    
    [
      { label: 'URL', value: url },
      { label: 'Title', value: title },
      { label: 'Title + URL', value: title + ' ' + url },
      { label: 'Hatena', value: `[${url}:title=${title}]` },
      { label: 'Markdown', value: `[${title}](${url})` },
      navigator.share && { label: 'Web Share', value: `Share!`, onclick: () => navigator.share({ title, url }) },
    ].filter(x => x).forEach(({label, value, onclick}) => {
      box.appendChild(tag('label', {
        style: `display: block; color: black; text-align: left;`,
      }, [
        tag('span', {
          style: `display: inline-block; width: 8em;`,
          textContent: `${label}: `
        }),
        !onclick ?
        tag('input', {
          style: `
  color: black;
  background-color: #ddd;
  border: none;
  border-bottom: 1px solid gray;
  padding: 0.2em;
  margin: 0.3em 0;
  width: 15em;`,
          value,
          onclick: e => {
            e.target.select();
            document.execCommand('copy');
            e.stopPropagation();
          }
        }) :
        tag('button', {
          style: `margin: 0.3em 0; `,
          onclick,
          textContent: value
        })
      ]));
    });
  })();
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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