new copy to clipborad code. Css was updated
This commit is contained in:
parent
cdf12250c6
commit
52b50e26f9
2 changed files with 24 additions and 26 deletions
|
@ -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
|
||||||
}
|
}
|
|
@ -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>
|
Loading…
Reference in a new issue