whatshot【网页插件】老虎林代码复制插件 全平台兼容

闲来无事，花了几分钟写了一下复制插件

引用：

该插件引用的 斗图助手插件 按钮的部分css代码，感谢该插件的作者（@000，），插件地址：https://hu60.cn/q.php/bbs.topic.89902.html

功能：

自动识别帖子中的代码，并且实现一键复制代码功能。

使用方法：

和其他插件一样， 复制代码放进去就可以了。

兼容性：

理论兼容主流电脑、平板、手机设备。
实际上我只测试了 ios 和 win10
有问题就评论，有时间就解决。

2021/2/5 补充：
没尝试IE浏览器

更新日志

2021/2/5
被 @cnhong， 怼说干嘛不用同一个cdn —— 9楼发言
现在所有资源更新为同一CDN。 感谢：bootcdn（https://www.bootcdn.cn/） 提供服务
fixbug：修改ID分配BUG（由于写的时候没注意导致所有的id都是一样的，就永远只能复制第一个。）
更新数据存储API加载方式

插件代码：

数据存储API加载

<script src="https://hu60.cn/q.php/api.webplug-file/1_public_libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script src="https://hu60.cn/q.php/api.webplug-file/1_public_libs/layer/3.1.1/layer.min.js"></script>
<script src="https://hu60.cn/q.php/api.webplug-file.21196_public_wz_copy_code.js"></script>

原始代码加载

<script src="https://hu60.cn/q.php/api.webplug-file/1_public_libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script src="https://hu60.cn/q.php/api.webplug-file/1_public_libs/layer/3.1.1/layer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	let idx = 1;

	$('.hu60_code code').each(function(){
		// 获取要复制的代码文本
		// let code_text = $(this).text();

		// 分配ID给代码文本
		let generate_id = 'wz_copy_code_' + idx;
                idx++;
		$(this).attr('id', generate_id);

		// 设置代码框相对定位
		$(this).parent().css('position', 'relative');

		// 创建复制按钮
		let copt_bth = $('<button class="btn">复制</button>').attr('data-clipboard-target', '#' + generate_id).css({
			position: 'absolute',
			top: 0,
			right: 0,
			background: 'radial-gradient(#6cc3fe, #21a1d0)',
			color: 'white',
			padding: '3px 6px',
			'font-weigth': 'bold',
			'animation-timing-function': 'ease-in-out',
			'animation-name': 'breathe',
		    'animation-duration': '2700ms',
		    'animation-iteration-count': 'infinite',
		    'animation-direction': 'alternate',
		});

		// 将复制按钮添加在代码框的右上角
		$(this).parent().prepend(copt_bth);
	});

	let clipboard = new ClipboardJS('.btn');

	clipboard.on('success', function(e) {
		console.info('Action:', e.action);
	    console.info('Text:', e.text);
	    console.info('Trigger:', e.trigger);

	    layer.msg('复制成功！');
    	
    	e.clearSelection();
	});

	clipboard.on('error', function(e) {
	    console.error('Action:', e.action);
	    console.error('Trigger:', e.trigger);

	    layer.msg('复制失败！');
	});
})
</script>

白日梦还是要做的