From 968ae0f2ce81b511c9c442ede78195e25cd611e3 Mon Sep 17 00:00:00 2001
From: Denis Fedoseev <denis.fedoseev@gmail.com>
Date: Tue, 1 Aug 2017 21:04:12 +0300
Subject: [PATCH] Copy img tag to clipboard

---
 public/css/main.css                    |   6 ++++++
 public/img/copy_icon.png               | Bin 0 -> 2637 bytes
 templates/includes/images_list.html.ep |  18 ++++++++++++++----
 3 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 public/img/copy_icon.png

diff --git a/public/css/main.css b/public/css/main.css
index 58d8c9b..f68d8dd 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -6,4 +6,10 @@
 }
 .foto-block .foto-notes {
     padding: 5px;
+}
+.copy-img {
+    content:url(/img/copy_icon.png);
+    width: 32px;
+    height: 32px;
+    overflow: hidden;
 }
\ No newline at end of file
diff --git a/public/img/copy_icon.png b/public/img/copy_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d7a64e00e8823632c0660e5952acfb4fc9cf2e49
GIT binary patch
literal 2637
zcmd^BiB}Tn76(x%1JS8WFqdi^oy;Z4+;XYRFdLl8nQ-AnX&92qDDE4MGgeb7xnxda
zX{2eWqi8CoVwg*67Gt7<h-n$aqK-RmkKQ@&o%7E76W({e``z>V?!Djn&i&nc&b{?L
z<}^$bsR;l8V4i6A^D5o_MYe%eXC=0(NTt*xPk8!lQ?0~pK{r)+I~na82>|Ta`9*+$
z-wX9rcQc;u$9-Z8<zv2gOnxxvnwybv{<vxL2>i+<?AnzpdnY|!UR!9-L%-Z<_4hBg
zvhUC0r_N;@w!Agh4$0VlZX6o2>z0oD+ei5CechoY+a{@puHZW^m)@A0pm6C@dCJ4c
zioc53No^0O7~wJehzfRcLzu-@2<>an?0@fp5gr?a?7)cC@%)eni8$p3b6gI_05Kp8
zE~!O-SZgn+2w<qbsV>|Wpdobq{1v=|x)5ltA5L-5Cm3;ML5V5+VCoF$A|NG9n7=>J
z|8AvBLj);=6{1(0WlO6uar+FwF0jO=sMERAXT>4BE;YgWXx>VxO?+9l%Yg<F_FjDw
z{G?6DrIHPgTABPHzRM%UtbPtY8g6`a1t{rwX=X8hTv;<@@RpSf4M02IG};X+sae@R
zt0R^S859J$9r?yp!xErXujodCYFC*w(XXb0V#DNUy%j47d!PX#+p6c>_;LDuAyCqF
znGhbpI?5JKl%~X7>m;*EH_m4D+V&zi2M}E6?d#f&jaLl$AR|Cgh2BNy9tUo%+6z!D
zY8EX1f#ZeVqvvhX^1xE?pbs%s*=*|BAPy*SSf?}t?c*@L3`7K|Wbz|8NIsTgK3m!M
zQ>maDZFiyq2s&?SXPg5W^{0jhW!jA;f5#?aBMEMQO@XJn2V?!I)xnugV_`sy5xL+<
z8n8S^pSFn6O|*zymqeS-uJ6-Dvk)}LCZI#7($u>3ymdy;(vA14BrPbKo=v?DE1m!K
zXUW;;f>dW`s~m#0anu>L+R!v&QYqdqM~)FQ4fBb(-e|29Ud^4$nQGIl<Q^#|vwEv&
zlfBg3@57}h6l?ST_BLXAH><5&Kjo?bi%$84rxAD4LZ{yQd$(m8eq&9#e{FaVv^96J
zGk}ZxiiVpSD^75jef3+b5F|U0X9+DiYMf&$G(ES;NzI6EIn#;#;<dB8&1u<2{A~9|
zQ~s`O$iYrI-BuVndOxJmEAx2tZp_+wo`^-+Sl?}5#<f{|iBvofJ!C610Xh_4QRdS!
zH_q?}k~qCm-EyNLazl9F(+R@}c<rYvJVXa?G17JR_3OB30&LmdPl{AzQz??^Qw$XT
zi8R<%QYCF7wOk%9BDt2}&}Y<miw7n&7-{ROC_wCYU2%IzE$4<a!!KUg(kZ>&TE&=-
zca^*m^A_i|$zkyMfuZ=cKQ>aD)7hX2OSXuKoorz!vsG4a@gj~85MeNd%|~PmGm#1*
zZ#W~Q5q{T26Xwg^K#941)#*;lj@>%S4ZX&!g?AA#6R}x<8L;AM0r45t-B#$Je;ET?
zrdTY;|0#mn3i)>pDb`s?g)@hX;2JQtLOAp2EXYBNS4p|MvIPl>fuAB`NHamvuw^2a
zYfxXMiny?;@S9}zZ60%cyFLzHcVfYF<om=|L5tfp9ZM$rS?OyY=_zm9Z`-WdO!ePO
zNbN$c9UciIa0G>_T8ZP6$KBb|%Vt)6vMwWt48(ar?NWJ;xE%Glp|b1R3hh7xq!-8R
zphvbm!@o8d&tpDlyFgaPL6?`z3Pg+5ErLpbkyYW4Kib<Y5iWU*eyF7jZOE$2kYhsy
zrma=)d9wR+YX+!fyVd#7o#U<;UxdQz;#w50-QHK2Hb_*Z$tk@&A+Ds>HIQgqZ>n!&
z9Ob9_mB$v`aV6>MrA}V*yLlz`=K^W0itg4lN=1v+I8)Yz9ZfalzheEX-lv4GlTWoT
zd?UayP~Rst{!t4LB$`9X&TpuLh!0D%y*o-BMik(G2)Q=${kZSKTZ&_dEth<3jib^J
zTC<sWc8=VT$5Ll2gFdcz@#0f*%Yo&nPNX8iv&^Y^7{eCv;!jqGwzzf<s@@~Pmd8IQ
zhx0}lWw+`?!z8~M?>lzJQK}|LGMfGEbzGIh4GJ79g|*hvb6Mn*LPhKK7-?A0O-N;b
zgw8DP^-SilH@kK{|MhB>Llz~PWF?X8FU!F=G67rr#!}bJh`3`O?BSIo65R)Rx2nxi
zt*(x9tZVkvON6Buh_kETkTaTo>gj|C{(?REq6@FT+AAZ9?qYM13J`~sa6iS%|5_s*
zNprmI!`;xHWgD&?4hIJTKY|%c!-39g=$OHK>5Ta_EhNf#2LT=@mG=NYC5ir`c%A&)
zx;!Xe2SL+dJ+&1=J|`cp(E!!rb(_-H><)?ADy&uh??{bS291}JzQmS?G@gFMmk<8F
zFcF%LRLrM7+;fMOt74Ruo{$_rhS@{pH+3sQ$5Jzwo-5qU!9gxzU%*jrlHU)|?!<sU
z*&qXYPqyfZT&|d}x$T3kD~meqXkS1PD2Er>bT*_Qt1NY(LE(PdV$15oiP=Lx+6|Eh
zZUoop4r-Qv2uqP>`Z$iVK^A(n)lqLH<Yd#;;y{~?h1DnG<MB@O6%$39V+&-vt4j^b
zNJZ)bn~v1}xQT1fg$lBRYX&>^|MEBn?5?S&{Vm>&K?UAb`#%K&{}{I&li!NBkz*I7
z3sT?l0p;ohez<V%G0{+xP~5N!nsA*;tY{IoNeMaibfu2hf90(AGhRUjyZ3%h7XqF8
zpIvq8Z&rI@uoC))qc~o7HWOfEg4!$2qkI&=WY{u!z;x8Y#+!2fyCcCF`ip_n?gFj#
z9gVsxd&$8)C)RYlHgTZjj_m)T0{WA|R9at^W^ef}r(<p@jF6K75J||djYm)iM-IUz
zJ^p0U`TNIOC!%N^y=q4IrBKu73N(bYue!3wa(fV_C3@l0BaYs(F|zE5FfEp5sc}Z_
z1F-HM#?#GEkGY43&QqUax5w|x@aakAH*rGm%=hJ|M`_zXi8A#w8%YytB&rP%EFQ~{
zivH41gJUk@3mpH8U2Ph%v=<?)jEZ)lQ-=3B*fIgt87Zg-nj>70gdr&}E=>0{)r&e)
zr$CzrLc0mH3#>7dT$ADf`tm3rV=Mg6pq2eK5w&K7D1X)kJgDxgng;=%r!ekSC-6W2
E6BjG#1^@s6

literal 0
HcmV?d00001

diff --git a/templates/includes/images_list.html.ep b/templates/includes/images_list.html.ep
index 6447c5a..7c4d9b5 100644
--- a/templates/includes/images_list.html.ep
+++ b/templates/includes/images_list.html.ep
@@ -42,9 +42,9 @@
             </div>
             <div class="foto-notes col-md-3">
             <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">
-                    <a v-bind:href="scale.url">{{ scale.size }}</a> &lt;img src="{{ scale.url}}"&gt;
+                    <a v-bind:href="scale.url">{{ scale.size }}</a> <div @click="copyText" class="copy-img">{{ hostname+scale.url }}</div>
                 </li>
             </ul>  
             </div>
@@ -54,6 +54,7 @@
 
 <script>
     var apiURL = '<%= url_for('get_images') %>'
+    var hostname = window.location.protocol+"//"+window.location.host;
 
     var demo = new Vue({
 
@@ -74,10 +75,19 @@
             xhr.open('GET', apiURL)
             xhr.onload = function () {
                 self.imagesList = JSON.parse(xhr.responseText)
-                console.log(self.imagesList[0].thumbnail_url)
+                // console.log(self.imagesList[0].thumbnail_url)
             }
             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>
\ No newline at end of file