From 7cf29b9d3e35ca4f4c6abb03c9aec876bd99a918 Mon Sep 17 00:00:00 2001
From: bohung <bohung@rulingcom.com>
Date: Mon, 7 Sep 2020 15:50:40 +0800
Subject: [PATCH] Fix image preview problem.(Add zoom-in and zoom-out to larger
 image.)

---
 app/assets/images/archive/zoomin.cur      | Bin 0 -> 4286 bytes
 app/assets/images/archive/zoomout.cur     | Bin 0 -> 4286 bytes
 app/views/archives/download_file.html.erb | 125 ++++++++++++++++++++++
 3 files changed, 125 insertions(+)
 create mode 100644 app/assets/images/archive/zoomin.cur
 create mode 100644 app/assets/images/archive/zoomout.cur

diff --git a/app/assets/images/archive/zoomin.cur b/app/assets/images/archive/zoomin.cur
new file mode 100644
index 0000000000000000000000000000000000000000..8ec1f766775d204ae04098a577837fa399868429
GIT binary patch
literal 4286
zcmeH}F>e|{5QX<-B&Q=15-A}~M2FI(NpUC9(Ig;6QQSC1(xjpZ6%rIlLFHe7D3GO;
zG!`WkxWT=lBI(k)u|p#8<h?V4R&X)q&cZ1e^jL0hcfQ@Z**T1H@JXi)zs<MD#w3j~
z83<j*gV^sI?(J+Bfd`7f>j&ZzOSV97d9h_vHu>9L!!n!vcU#*3j(zjI8S{gPF@K5q
zU!fD|3_695p-<2gNG&MlQP>_F_aHxa6N$v{Y&JW~WHNtZvDi%e(H=o>tZRQfuA{I&
z(;qm~N~I#h;ZT;X)9FY)pTC-O?e#>BxzEn!a<lPxyo_DBZnawCI1ZWD^R-0Tw?`jj
zuYhjpU@YeBbF@*c$CwB0+jU)KNVQsBSxvoO*ZUtsE`WJ1eBME}j?X#CWbzU|1|j)8
zV}ZFw-*@4c%Vmwh(-3Po;Ta=KjZ9TM9#`LzN~IS4&1O@FOS|3HF{}lf+8NLH!Wn+R
z!CKk5Fc=JU{D)297=Oyz5{2LI_mzJbf`81qX7jnXTCL_QoldK7@jP$Q-|co6QyPti
zj`2e9S<i)MImnm?yieINx5pNX#b3BTg&skh8s8;;O|^aM?{)mqXr$}oyD6;kT_UWh
z%f>v{XJN-&#}x_%<-Z6E$2`XEob~))&p~;1TPl^5{Urihr#=V&CoY6F^)_S7t$jDu
z!9BFk;G+lmHI;RZwT0)KXN-A1&$av9chIu=E@3@aj@>fPnQKv=H>TgoSkGTUtZRpm
z2ZcFfnD+lzKyH0U-x0Jgat%%6B9oNJg)6o9Rs6w`sc~dt_T<9sLwoYWmxDG)9CtHz
PV&a$!SH>0TiEn=aTAo|4

literal 0
HcmV?d00001

diff --git a/app/assets/images/archive/zoomout.cur b/app/assets/images/archive/zoomout.cur
new file mode 100644
index 0000000000000000000000000000000000000000..8335144b178f74c2d768bf9eaa8ab2fa2e195f40
GIT binary patch
literal 4286
zcmeH}F-#&s6ozLbiPvdDf~8(_p(BRG#==eLXgo+R7j3jq3M(3^NVL#`%9?^$5EDxp
zLrZ}T_Ckerwl*pn@cI8MV>Y-^m@#O<BfrB8Gw*xzcIK^0IruCrDE?Kavr0vjQc(y)
z%7r-Y8Gf7CBm>`+fxq9xC6;V~{<AY?(`@p`9m61-{IxOdf5Lu!-pu*BWzLte{t!BY
zE}(Ph1lob-AZ<Z8w_&?*T!Xx`8xDsbW3gB-8jU`MLZO}>M|%YQ^Yy*?=-aS&=?|Q4
zKA)FnvnhjCtyU$OOy2jo{&;M2?y(bzM6ca$4`Sc-%jL2-jzi{iKNg#PyYxZ!JJ1IM
z%tfDliPpwy%=s|;9t@{YDCiir4Fljg7d~%Oi$o%K@X;{j^Nt0cwPEAQ<#IX)zYStI
z;~n#};_<kArc5UDwxm+2Xg+JfsCL2o{pJi`;NVmF`He<H&)*sqj``=TEjIjmy{`Ei
z2K*D&H9x;tEXpv_Yf7b(=DP-b)^p)qHnns*{Qw_b=$8SX?-H-3n($k#mfkzxO{T_o
ziLj=QYN=F8^OsEFSjW6wvYwCf9J1N0W*=Cv_0mP~Z_p9e)Q^lg_wD;wJNSb34}8=h
zVNGRSV{PI6<{jfX@1M1=+;>pee3!7EYmUF=Ip<lkdEQt)l(C+#Lab{WkPDgIF)aHz
z7I3z%Fm?n@i#$W!8IjJs$nA>kZ|>nA9O)`YI%-O8)ig9E*Pa}-LE^mExg9lwwQ!|Y
IL~7#M3xh?NBme*a

literal 0
HcmV?d00001

diff --git a/app/views/archives/download_file.html.erb b/app/views/archives/download_file.html.erb
index 62dc9fd..d17299b 100644
--- a/app/views/archives/download_file.html.erb
+++ b/app/views/archives/download_file.html.erb
@@ -16,6 +16,131 @@
         </object>
     <% else %>
         <img alt="<%=@filename%>" src="<%=@url%>">
+        <script type="text/javascript">
+            var img = document.getElementsByTagName('img')[0];
+            var width = img.width;
+            var height = img.height;
+            window.innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+            window.innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+            var window_width = window.innerWidth;
+            var window_height = window.innerHeight;
+            var zoom_in_cursor,zoom_out_cursor;
+            var IE_ver = 11;
+            if(navigator.userAgent.search("MSIE") != -1){
+                IE_ver = Number(navigator.userAgent.split("MSIE")[1].split(";")[0]);
+            }
+            if(IE_ver <= 8){
+                img.style.marginTop = "-"+img.height/2+"px";
+                img.style.marginLeft = "-"+img.width/2+"px";
+            }else{
+                img.style.transform= "translate(-50%, -50%)";
+                img.style["-ms-transform"]= "translate(-50%, -50%)";
+                img.style["-moz-transform"]= "translate(-50%, -50%)";
+            }
+            if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
+                zoom_in_cursor =  'url("/assets/archive/zoomin.cur"), auto';
+                zoom_out_cursor =  'url("/assets/archive/zoomout.cur"), auto';
+            }else{
+                zoom_in_cursor =  'zoom-in';
+                zoom_out_cursor =  'zoom-out';
+            }
+            if(height > window_height && (height / width) > (window_height / window_width) ){
+                img.height = window_height;
+                img.width = window_height / height * width;
+                img.style.cursor = zoom_in_cursor;
+                if(IE_ver <= 8){
+                    img.style.marginTop = "-"+img.height/2+"px";
+                    img.style.marginLeft = "-"+img.width/2+"px";
+                }
+                img.onclick=function(e){
+                    var event = e || window.event;
+                    if(img.style.cursor == zoom_in_cursor){
+                        var cursor_x = event.clientX;
+                        var cursor_y = event.clientY;
+                        img.height = height;
+                        img.width = width;
+                        img.style.cursor = zoom_out_cursor;
+                        document.getElementsByTagName('html')[0].style.overflow = "";
+                        img.style.transform= "none";
+                        img.style["-ms-transform"]= "none";
+                        img.style["-moz-transform"]= "none";
+                        img.style.top= "0";
+                        img.style.left= "0";
+                        if(IE_ver <= 8){
+                            img.style.marginTop = "0";
+                            img.style.marginLeft = "0";
+                        }
+                        window.scroll(
+                          (((cursor_x - (window_width - window_height / height * width)/2) * height / window_height) - window_width / 2),
+                          ((cursor_y * height / window_height) - window_height / 2)
+                        );
+                    }else{
+                        img.height = window_height;
+                        img.width = window_height / height * width;
+                        img.style.cursor = zoom_in_cursor;
+                        document.getElementsByTagName('html')[0].style.overflow = "hidden";
+                        if(IE_ver <= 8){
+                            img.style.marginTop = "-"+img.height/2+"px";
+                            img.style.marginLeft = "-"+img.width/2+"px";
+                        }else{
+                            img.style.transform= "translate(-50%, -50%)";
+                            img.style["-ms-transform"]= "translate(-50%, -50%)";
+                            img.style["-moz-transform"]= "translate(-50%, -50%)";
+                        }
+                        img.style.top= "50%";
+                        img.style.left= "50%";
+                        window.scroll(0, 0);
+                    }
+                };
+            }else if(width > window_width){
+                img.width = window_width;
+                img.height = window_width / width * height;
+                img.style.cursor = zoom_in_cursor;
+                if(IE_ver <= 8){
+                    img.style.marginTop = "-"+img.height/2+"px";
+                    img.style.marginLeft = "-"+img.width/2+"px";
+                }
+                img.onclick=function(e){
+                    var event = e || window.event;
+                    if(img.style.cursor == zoom_in_cursor){
+                        var cursor_x = event.clientX;
+                        var cursor_y = event.clientY;
+                        img.height = height;
+                        img.width = width;
+                        img.style.cursor = zoom_out_cursor;
+                        document.getElementsByTagName('html')[0].style.overflow = "";
+                        img.style.transform= "none";
+                        img.style["-ms-transform"]= "none";
+                        img.style["-moz-transform"]= "none";
+                        img.style.top= "0";
+                        img.style.left= "0";
+                        if(IE_ver <= 8){
+                            img.style.marginTop = "0";
+                            img.style.marginLeft = "0";
+                        }
+                        window.scroll( ((cursor_x * height / window_height) - window_width / 2),
+                            (((cursor_y - (window_height - window_width / width * height)/2) * height / window_height) - window_height / 2)
+                        );
+                    }else{
+                        img.width = window_width;
+                        img.height = window_width / width * height;
+                        img.style.cursor = zoom_in_cursor;
+                        document.getElementsByTagName('html')[0].style.overflow = "hidden";
+                        if(IE_ver <= 8){
+                            img.style.marginTop = "-"+img.height/2+"px";
+                            img.style.marginLeft = "-"+img.width/2+"px";
+                        }else{
+                            img.style.transform= "translate(-50%, -50%)";
+                            img.style["-ms-transform"]= "translate(-50%, -50%)";
+                            img.style["-moz-transform"]= "translate(-50%, -50%)";
+                        }
+                        img.style.top= "50%";
+                        img.style.left= "50%";
+                        window.scroll(0, 0);
+                    }
+                };
+            }
+        </script>
     <% end %>
 </body>
 </html>