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

@@ -22,13 +22,11 @@
 	'use strict';
 
 	// https://gist.github.com/noromanba/d730ccf3ae5e6916cd60
-	const canonical = (document.querySelector(
-			'head meta[property="og:url"][content]'
-		) || {}).content + location.hash ||
-		(document.querySelector(
-			'head link[rel="canonical"][href]'
-		) || {}).href + location.hash ||
-		location.href;
+	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})`;

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

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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