Copy img tag #4

Merged
alpha6 merged 3 commits from copy_img_tag into master 2017-08-01 21:07:10 +03:00
4 changed files with 20 additions and 5 deletions

View file

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

View file

@ -7,7 +7,7 @@
# registry = sqitch # registry = sqitch
# client = sqlite3 # client = sqlite3
[target "foto_test"] [target "foto_test"]
uri = db:sqlite:rsscp_test.db uri = db:sqlite:fotostore.db
[engine "sqlite"] [engine "sqlite"]
target = foto_test target = foto_test
[deploy] [deploy]

View file

@ -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> <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,18 @@
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)
} }
xhr.send() xhr.send()
} },
copyText(event) {
//TODO: rewrite it to vue/JS from jquery
var $temp = $("<input>");
$("body").append($temp);
$temp.val("<img src="+$(event.target).text()+">").select();
document.execCommand("copy");
$temp.remove();
},
} }
}) })
</script> </script>