https://www.lens-apple.jp/js/tap_copy.js

1/**
2 * Tap to copy 
3 *
4 * @copyright  2022 Parente
5 */
6
7var app = app || {};
8
9app.ClipBoard = function() {
10
11	// コンストラクタ
12	var ClipBoard = function (elm) {
13		this.elm = elm || {};
14		this.settings = {
15			trigger: '.js_copy_btn',
16			copiedText: 'クーポンコードをコピーしました',
17			fadeSpeed: 300,
18			displayTime: 800
19		}
20		this.disabled = false;
21		this.code = elm.getAttribute('data-copy-code');
22		if(this.code) {
23			this.bindStyle();
24			this.bindEvents();
25		}
26	}
27
28	// コピー実行処理
29	ClipBoard.prototype.execCopy = function(code) {
30		// 空div 生成
31		var tmpElm = document.createElement("div");
32		// 選択用のタグ生成
33		var preElm = document.createElement('pre');
34		// 親要素のCSSで user-select: none だとコピーできないので書き換える
35		preElm.style.webkitUserSelect = 'auto';
36		preElm.style.userSelect = 'auto';
37		// 生成したタグにテキストを追加
38		tmpElm.appendChild(preElm).textContent = code;
39		// 要素を画面外へ
40		var s = tmpElm.style;
41		s.position = 'fixed';
42		s.right = '200%';
43		// body に追加
44		document.body.appendChild(tmpElm);
45		// 要素を選択
46		document.getSelection().selectAllChildren(tmpElm);
47		// クリップボードにコピー
48		var result = document.execCommand("copy");
49		// 要素削除
50		tmpElm.remove();
51
52		return result;
53	},
54	
55	// メッセージボックスを作成する処理
56	ClipBoard.prototype.createMsgBox = function() {
57		var self = this;
58		// 空ボックスにクラスを付与
59		self.msgBox = document.createElement('div');
60		self.msgBox.setAttribute('class', 'js_clipboard_msgbox');
61		// メッセージボックスにテキストを追加する
62		self.msgBox.textContent = self.settings.copiedText;
63		// スタイルを付与
64		var msgBoxStyles = {
65			display: 'none',
66			position: 'fixed',
67			top: '50%',
68			left: '0',
69			width: '100%',
70			padding: '15px 0',
71			backgroundColor: '#444444',
72			fontSize: '14px',
73			lineHeight: '1',
74			color: '#ffffff',
75			textAlign: 'center',
76			zIndex: '2147483647',
77			opacity: '0',
78			transform: 'translateY(-50%)',
79			transition: 'opacity ' + self.settings.fadeSpeed + 'ms ease'
80		}
81		for(var prop in msgBoxStyles) {
82			self.msgBox.style[prop] = msgBoxStyles[prop];
83		}
84		// bodyに追加
85		document.body.appendChild(self.msgBox);
86	}
87	
88	// メッセージボックスを表示する処理
89	ClipBoard.prototype.showMsgBox = function(time, callback) {
90		var self = this;
91		// アニメーション終了後の処理
92		var transitionEnd = function() {
93			if( typeof callback === 'function' ){
94				setTimeout(callback, time);
95				self.msgBox.removeEventListener('transitionend', transitionEnd);
96			};
97		}
98		// transitionend でアニメーションの終わりに実行させる
99		self.msgBox.addEventListener('transitionend', transitionEnd);
100		// メッセージボックスをdisplay:blockにする
101		self.msgBox.style.display = 'block';
102		// transitionendを発火させるためにsetTimeoutを使用する
103		setTimeout(function() {
104			self.msgBox.style.opacity = 1;
105		}, 0);
106	}
107
108	// メッセージボックスを非表示にする処理
109	ClipBoard.prototype.hideMsgBox = function(time, callback) {
110		var self = this;
111		// アニメーション終了後の処理
112		var transitionEnd = function() {
113			if( typeof callback === 'function' ){
114				setTimeout(callback, time);
115				self.msgBox.removeEventListener('transitionend', transitionEnd);
116			};
117		}
118		// transitionend でアニメーションの終わりに実行させる
119		self.msgBox.addEventListener('transitionend', transitionEnd);
120		// transitionendを発火させるためにsetTimeoutを使用する
121		setTimeout(function() {
122			self.msgBox.style.opacity = 0;
123		}, 0);
124	}
125
126	// メッセージボックスを削除する処理
127	ClipBoard.prototype.removeMsgBox = function() {
128		this.msgBox.remove();
129	}
130
131	// コピー成功時の処理
132	ClipBoard.prototype.copySuccessed = function() {
133		var self = this;
134		// メッセージボックスを作成する
135		self.createMsgBox();
136		// メッセージボックスを指定時間表示後、削除する
137		self.showMsgBox(self.settings.displayTime, function(){
138			self.hideMsgBox(0, function(){
139				self.removeMsgBox();
140		self.disabled = false;

141			});
142		});
143	}
144
145	// コピー失敗時の処理
146	ClipBoard.prototype.copyError = function() {
147		alert('このブラウザではコピーができません。申し訳ございませんが別のブラウザでお試しください。');
148	}
149
150	// CSSを適用
151	ClipBoard.prototype.bindStyle = function() {
152		var self = this;
153		self.elm.style.cursor = 'pointer';
154	}
155
156	// クリックイベントを適用
157	ClipBoard.prototype.bindEvents = function() {
158		var self = this;
159		self.elm.onclick = function(){
160			if(!self.disabled) {
161				self.disabled = true;
162				self.execCopy(self.code)? self.copySuccessed(self.code) : self.copyError();
163			}
164		}
165	}
166
167	// 対象要素を取得
168	var clipBoard = [];
169	var clipBoards = document.querySelectorAll('.js_copy_btn');
170	Array.prototype.forEach.call(clipBoards, function (elm, i) {
171		clipBoard[i] = new ClipBoard(elm);
172	});
173}
174
175//DOM構築完了後に実行
176document.addEventListener('DOMContentLoaded', function(){
177	app.ClipBoard();
178},false);