T/U box

by noromanba 2017-03-26 [2017/03/26 05:03:29]
(Forked from タイトルとかのコピー by pacochi)

easy copyable title/url box; click to copy, double-click outer to close

@@ -1,50 +1,71 @@
 /*
- * @title タイトルとかのコピー
- * @description 出てきたやつをクリックするとクリップボードに入ります。外枠をダブルクリックすると消えます。
- * @include *
- * @license MIT License
+ * @title T/U box
+ * @description 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
+ * @license MIT License	https://opensource.org/licenses/MIT
  * @javascript_url
  */
 
-// タイトルコピーするために入れたアドオンが次々使えなくなっていくからこれでしのぐっていう用途
+// http://eslint.org/demo/
+//  ECMA Version [6]
+//  [x] browser
 
 (() => {
-
-	// 元のコード: 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;
+	// 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 title = document.title;
 	const hatenalink = `[${canonical}:title=${title}]`;
-	const base = 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: 2147483646;'
-	}));
-	base.addEventListener('dblclick', e => {
 
-		document.body.removeChild(e.target);
+	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();
+	});
 
-	}, false);
-	
-	[{ label: 'CanonicalURL', value: canonical },
-	 { label: 'タイトル', value: title },
-	 { label: 'はてな記法', value: hatenalink }].forEach(({label, value}) => {
-
-		base.appendChild(Object.assign(document.createElement('label'), {
-		 style: 'display: block; color: black; background-color: silver;',
-		 textContent: `${label}: `
+	// TBD alignment
+	[
+		{ label: 'CanonicalURL', value: canonical },
+		{ label: 'Title', value: title },
+		{ label: 'HatenaSyntax', value: hatenalink }
+	].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: value
+			style: `
+				color: black;
+				background-color: silver;
+				margin: 0.5em;
+			`,
+			value
 		})).addEventListener('click', e => {
-
 			e.target.select();
 			document.execCommand('copy');
 			e.stopPropagation();
-
-		}, false);
-
+		});
 	});
+})();
 
-})();

• /*
   * @title T/U box
   * @description 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
   * @license MIT License	https://opensource.org/licenses/MIT
   * @javascript_url
   */
  
  // http://eslint.org/demo/
  //  ECMA Version [6]
  //  [x] browser
  
  (() => {
  	// 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 title = document.title;
  	const hatenalink = `[${canonical}:title=${title}]`;
  
  	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: 'HatenaSyntax', value: hatenalink }
  	].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 です。