new copy to clipborad code. Css was updated

This commit is contained in:
Denis Fedoseev 2019-02-13 11:51:06 +03:00
parent cdf12250c6
commit 52b50e26f9
2 changed files with 24 additions and 26 deletions

View file

@ -12,26 +12,25 @@
padding-top: 10px;
}
button.copy_short_url {
width: 32px;
height:32px;
width:58px;
height:28px;
padding: 0px;
margin: 0;
margin-left: 10px;
margin: 0 0 0 5px;
}
button.copy_short_url > img {
display: block;
width: 28px;
height: 28px;
width: 23px;
height: 23px;
padding: 0px;
margin: 0;
margin-left: -6px;
margin-top: -4px;
margin: -2px 0 0 14px;
}
div.short_url_text {
width: 205px;
height: 32px;
width: 203px;
height: 28px;
padding: 5px;
box-sizing: border-box;
margin: 0;
float: left;
border: 1px solid #c3bbbb;
border-radius: 2px
}

View file

@ -18,26 +18,25 @@
<% if (exists($page_data->{'url'})) { %>
<div class=url_data>
<p>source url: <a href='<%== $page_data->{'url'} %>'><%= $page_data->{'url'} %></a></p>
<p><div class=short_url_text ><%= $page_data->{'shorten_url'} %></div><button class="copy_short_url"><img src="/icons/copy2.png"></button></p>
<p><div id='short_url_container' class=short_url_text ><%= $page_data->{'shorten_url'} %></div>
<button class="copy_short_url" onclick="CopyToClipboard('short_url_container')"><img src="/icons/copy2.png"></button></p>
</div>
<% } %>
</div>
</body>
<script>
var copyTextareaBtn = document.querySelector('.copy_short_url');
function CopyToClipboard(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("copy");
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.short_url_text');
copyTextarea.focus();
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("copy");
}}
</script>
</html>