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; padding-top: 10px;
} }
button.copy_short_url { button.copy_short_url {
width: 32px; width:58px;
height:32px; height:28px;
padding: 0px; padding: 0px;
margin: 0; margin: 0 0 0 5px;
margin-left: 10px;
} }
button.copy_short_url > img { button.copy_short_url > img {
display: block; display: block;
width: 28px; width: 23px;
height: 28px; height: 23px;
padding: 0px; padding: 0px;
margin: 0; margin: -2px 0 0 14px;
margin-left: -6px;
margin-top: -4px;
} }
div.short_url_text { div.short_url_text {
width: 205px; width: 203px;
height: 32px; height: 28px;
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
float: left; float: left;
border: 1px solid #c3bbbb;
border-radius: 2px
} }

View file

@ -18,26 +18,25 @@
<% if (exists($page_data->{'url'})) { %> <% if (exists($page_data->{'url'})) { %>
<div class=url_data> <div class=url_data>
<p>source url: <a href='<%== $page_data->{'url'} %>'><%= $page_data->{'url'} %></a></p> <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>
<% } %> <% } %>
</div> </div>
</body> </body>
<script> <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) { } else if (window.getSelection) {
var copyTextarea = document.querySelector('.short_url_text'); var range = document.createRange();
copyTextarea.focus(); range.selectNode(document.getElementById(containerid));
copyTextarea.select(); window.getSelection().addRange(range);
document.execCommand("copy");
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');
}
});
</script> </script>
</html> </html>