Copy link to Buffer

Copy link to Buffer

if ($('.soc-sharing__copy').length) {
	var copyLinkBtn = document.querySelector('.soc-sharing__copy');
	// Textarea for select text link, hidden
	$('.soc-sharing__copy textarea').text(window.location);
	copyLinkBtn.addEventListener('click', function(event) {
		// Выборка ссылки
		var newsLink = document.querySelector('.soc-sharing__copy textarea');
		newsLink.select();

		try {
			// Теперь, когда мы выбрали текст ссылки, выполним команду копирования
			var successful = document.execCommand('copy');
			$('.soc-sharing__copy em').text('Ссылка скопирована');
			$('.soc-sharing__copy em').addClass('active');
		} catch(err) {
			$('.soc-sharing__copy em').text('Не удалось скопировать');
			$('.soc-sharing__copy em').addClass('active');
		}
		setTimeout(function(){
			$('.soc-sharing__copy em').removeClass('active');
		}, 1500);
		// Снятие выделения - ВНИМАНИЕ: вы должны использовать
		// removeRange(range) когда это возможно
		window.getSelection().removeAllRanges();
	});
}

Markup

<div class="soc-sharing__copy">
  <textarea></textarea>
  <em>Ссылка скопирована</em>
  <img src="img/svg/icons/icon-copy-link.svg" alt="">
  <span>Копировать ссылку</span>
</div>

Style

.soc-sharing__copy {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: 25px;
	cursor: pointer;
	&:hover {
		span {
			color: @blue-bord;
		}
	}
	span {
		display: block;
		padding-left: 4px;
		padding-bottom: 1px;
		font-size: 17px;
		color: #697796;
		line-height: 1.2;
		.trans-stnd();
		@media @tablet {
			font-size: 16px;
		}
		@media @phone {
			font-size: 14px;
		}
	}
	textarea {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
		pointer-events: none;
	}
	em {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		padding: 5px;
		padding-top: 0;
		font-size: 16px;
		color: #697796;
		line-height: 1.2;
		background: #FFF;
		transform: translateY(-100%);
		opacity: 0;
		.trans-stnd();
		@media @tablet {
			font-size: 14px;
		}
		&.active {
			transform: translateY(0);
			opacity: 1;
		}
	}
}