Copy img tag to clipboard
This commit is contained in:
parent
cecb6e4ed1
commit
968ae0f2ce
3 changed files with 20 additions and 4 deletions
|
@ -6,4 +6,10 @@
|
||||||
}
|
}
|
||||||
.foto-block .foto-notes {
|
.foto-block .foto-notes {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.copy-img {
|
||||||
|
content:url(/img/copy_icon.png);
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
BIN
public/img/copy_icon.png
Normal file
BIN
public/img/copy_icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.6 KiB |
|
@ -42,9 +42,9 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="foto-notes col-md-3">
|
<div class="foto-notes col-md-3">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a v-bind:href="image.original_url">Original</a></li>
|
<li><a v-bind:href="image.original_url">Original</a> <div @click="copyText" class="copy-img">{{ hostname+image.original_url }}</div></li>
|
||||||
<li v-for="scale in image.scales">
|
<li v-for="scale in image.scales">
|
||||||
<a v-bind:href="scale.url">{{ scale.size }}</a> <img src="{{ scale.url}}">
|
<a v-bind:href="scale.url">{{ scale.size }}</a> <div @click="copyText" class="copy-img">{{ hostname+scale.url }}</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -54,6 +54,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var apiURL = '<%= url_for('get_images') %>'
|
var apiURL = '<%= url_for('get_images') %>'
|
||||||
|
var hostname = window.location.protocol+"//"+window.location.host;
|
||||||
|
|
||||||
var demo = new Vue({
|
var demo = new Vue({
|
||||||
|
|
||||||
|
@ -74,10 +75,19 @@
|
||||||
xhr.open('GET', apiURL)
|
xhr.open('GET', apiURL)
|
||||||
xhr.onload = function () {
|
xhr.onload = function () {
|
||||||
self.imagesList = JSON.parse(xhr.responseText)
|
self.imagesList = JSON.parse(xhr.responseText)
|
||||||
console.log(self.imagesList[0].thumbnail_url)
|
// console.log(self.imagesList[0].thumbnail_url)
|
||||||
}
|
}
|
||||||
xhr.send()
|
xhr.send()
|
||||||
}
|
},
|
||||||
|
copyText(event) {
|
||||||
|
// console.log(event.target);
|
||||||
|
var $temp = $("<input>");
|
||||||
|
$("body").append($temp);
|
||||||
|
$temp.val("<img src="+$(event.target).text()+">").select();
|
||||||
|
document.execCommand("copy");
|
||||||
|
$temp.remove();
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
Loading…
Reference in a new issue