Hi,
PFA the patch for integration of minimap in graphical explain.
It will show minimap on left top corner of graphical explain.
Regards,
Sanket Mehta
Sr Software engineer
Enterprisedb
diff --git a/web/pgadmin/misc/__init__.py b/web/pgadmin/misc/__init__.py
index 2081822..6b307e3 100644
--- a/web/pgadmin/misc/__init__.py
+++ b/web/pgadmin/misc/__init__.py
@@ -33,6 +33,14 @@ class MiscModule(PgAdminModule):
'snap.svg' if config.DEBUG else 'snap.svg-min'
)),
'preloaded': False
+ }, {
+ 'name': 'imageviewer',
+ 'path': url_for(
+ 'misc.static', filename='explain/js/' + (
+ 'imageviewer.pgadmin' if config.DEBUG else 'imageviewer-min'
+ )),
+ 'exports': 'ImageViewer',
+ 'preloaded': False
}]
def get_own_stylesheets(self):
@@ -40,6 +48,9 @@ class MiscModule(PgAdminModule):
stylesheets.append(
url_for('misc.static', filename='explain/css/explain.css')
)
+ stylesheets.append(
+ url_for('misc.static', filename='explain/css/imageviewer.css')
+ )
return stylesheets
diff --git a/web/pgadmin/misc/static/explain/css/imageviewer.css b/web/pgadmin/misc/static/explain/css/imageviewer.css
new file mode 100644
index 0000000..8fc6c0f
--- /dev/null
+++ b/web/pgadmin/misc/static/explain/css/imageviewer.css
@@ -0,0 +1,226 @@
+/*
+ ImageViewer v 1.1.0
+ Author: Sudhanshu Yadav
+ Copyright (c) 2015 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
+ Demo on: http://ignitersworld.com/lab/imageViewer.html
+*/
+
+/***** image viewer css *****/
+#iv-container {
+ position: fixed;
+ background: #0d0d0d;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ display: none;
+ z-index: 1000;
+}
+
+.iv-container {
+ overflow: auto;
+}
+
+.iv-close {
+ width: 32px;
+ height: 32px;
+ position: absolute;
+ right: 20px;
+ top: 20px;
+ cursor: pointer;
+ text-align: center;
+ overflow: hidden;
+ text-shadow: 0px 0px 3px #6d6d6d;
+ -webkit-transition: all ease 200ms;
+ -moz-transition: all ease 200ms;
+ -o-transition: all ease 200ms;
+ transition: all ease 200ms;
+}
+.iv-close:after,
+.iv-close:before {
+ content: "";
+ height: 4px;
+ width: 32px;
+ background: #FFF;
+ position: absolute;
+ left: 0;
+ top: 50%;
+ margin-top: -2px;
+}
+.iv-close:before {
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ transform: rotate(45deg);
+}
+.iv-close:after {
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ -o-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+.iv-close:hover {
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+/***** snap view css *****/
+.iv-snap-view {
+ width: 150px;
+ height: 150px;
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ border: 1px solid #666;
+ background: black;
+ z-index: 100;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ -webkit-transition: all ease 400ms;
+ -moz-transition: all ease 400ms;
+ -o-transition: all ease 400ms;
+ transition: all ease 400ms;
+ opacity: 0;
+}
+
+.iv-snap-image-wrap {
+ display: inline-block;
+ position: absolute;
+ max-width: 150px;
+ max-height: 150px;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ -moz-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ -o-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ overflow: hidden;
+}
+
+.iv-snap-image {
+ position: relative;
+}
+
+.iv-snap-handle {
+ position: absolute;
+ border: 1px solid #ccc;
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ -webkit-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
+ box-shadow: 0px 0px 0px 200px rgba(0, 0, 0, 0.5);
+}
+
+/*** zoom slider ***/
+.iv-zoom-slider {
+ width: 100%;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ border: 1px solid #666;
+ border-top: 0;
+ background: rgba(204, 204, 204, 0.1);
+ height: 15px;
+ position: absolute;
+ top: 150px;
+ left: -1px;
+}
+
+.iv-zoom-handle {
+ width: 20px;
+ height: 15px;
+ background: #ccc;
+ position: absolute;
+}
+
+/**** snap view css end *****/
+.iv-image-view {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+}
+
+.iv-image-wrap {
+ display: inline-block;
+}
+
+.iv-image-wrap:active {
+ cursor: move;
+}
+
+.iv-large-image {
+ max-width: 100%;
+ max-height: 100%;
+ position: absolute;
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+
+/****** CSS loader by http://projects.lukehaas.me/css-loaders/ *****/
+.iv-loader {
+ top: 50%;
+ left: 50%;
+ border-radius: 50%;
+ width: 32px;
+ height: 32px;
+ z-index: 100;
+ margin-top: -16px;
+ margin-left: -16px;
+ font-size: 5px;
+ position: absolute;
+ text-indent: -9999em;
+ border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+ border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+ border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+ border-left: 1.1em solid #ffffff;
+ -webkit-transform: translateZ(0);
+ -ms-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-animation: load8 1.1s infinite linear;
+ animation: load8 1.1s infinite linear;
+}
+.iv-loader:after {
+ width: 10em;
+ height: 10em;
+ border-radius: 50%;
+}
+@-webkit-keyframes load8 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+@keyframes load8 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+
+@media screen and (max-width: 767px) {
+ .iv-snap-view {
+ z-index: -1;
+ visibility: hidden;
+ }
+}
\ No newline at end of file
diff --git a/web/pgadmin/misc/static/explain/js/imageviewer-min.js b/web/pgadmin/misc/static/explain/js/imageviewer-min.js
new file mode 100644
index 0000000..74eb01c
--- /dev/null
+++ b/web/pgadmin/misc/static/explain/js/imageviewer-min.js
@@ -0,0 +1,8 @@
+/*
+ ImageViewer v 1.1.3
+ Author: Sudhanshu Yadav
+ Copyright (c) 2015 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
+ Demo on: http://ignitersworld.com/lab/imageViewer.html
+*/
+
+!function(i,e,t,n){"use strict";function a(i,e,t,n){return i/=n,i--,-t*(i*i*i*i-1)+e}function o(i){return i.complete&&("undefined"==typeof i.naturalWidth||0!==i.naturalWidth)}function s(i,e){this.container=i,this.onStart=e.onStart||h,this.onMove=e.onMove||h,this.onEnd=e.onEnd||h,this.sliderId=e.sliderId||"slider"+Math.ceil(1e6*Math.random())}function r(e,t){var n=this;e.is("#iv-container")&&(n._fullPage=!0),n.container=e,t=n.options=i.extend({},r.defaults,t),n.zoomValue=100,e.find(".snap-view").length||e.prepend(v),e.addClass("iv-container"),"static"==e.css("position")&&e.css("position","relative"),n.snapView=e.find(".iv-snap-view"),n.snapImageWrap=e.find(".iv-snap-image-wrap"),n.imageWrap=e.find(".iv-image-wrap"),n.snapHandle=e.find(".iv-snap-handle"),n.zoomHandle=e.find(".iv-zoom-handle"),n._viewerId="iv"+Math.floor(1e6*Math.random())}var h=function(){},m=i("body"),c=i(e),l=i(t),d=15,u=5;!function(){for(var i=0,t=["ms","moz","webkit","o"],n=0;n<t.length&&!e.requestAnimationFrame;++n)e.requestAnimationFrame=e[t[n]+"RequestAnimationFrame"],e.cancelAnimationFrame=e[t[n]+"CancelAnimationFrame"]||e[t[n]+"CancelRequestAnimationFrame"];e.requestAnimationFrame||(e.requestAnimationFrame=function(t,n){var a=(new Date).getTime(),o=Math.max(0,16-(a-i)),s=e.setTimeout(function(){t(a+o)},o);return i=a+o,s}),e.cancelAnimationFrame||(e.cancelAnimationFrame=function(i){clearTimeout(i)})}();var v='<div class="iv-loader"></div> <div class="iv-snap-view"><div class="iv-snap-image-wrap"><div class="iv-snap-handle"></div></div><div class="iv-zoom-slider"><div class="iv-zoom-handle"></div></div></div><div class="iv-image-view" ><div class="iv-image-wrap" ></div></div>';i(function(){m.length||(m=i("body")),m.append('<div id="iv-container">'+v+'<div class="iv-close"></div><div>')}),s.prototype.init=function(){var i=this,e=(this.container,"."+this.sliderId);return this.container.on("touchstart"+e+" mousedown"+e,function(t){t.preventDefault();var n=("touchstart"==t.type?"touchmove":"mousemove")+e,a=("touchstart"==t.type?"touchend":"mouseup")+e,o=t.originalEvent,s=o.clientX||o.touches[0].clientX,r=o.clientY||o.touches[0].clientY,h=i.onStart(t,{x:s,y:r});if(h!==!1){var m=function(e){e.preventDefault(),o=e.originalEvent;var t=o.clientX||o.touches[0].clientX,n=o.clientY||o.touches[0].clientY;i.onMove(e,{dx:t-s,dy:n-r,mx:t,my:n})},c=function(){l.off(n,m),l.off(a,c),i.onEnd()};l.on(n,m),l.on(a,c)}}),this},r.prototype={constructor:r,_init:function(){function i(i){t.snapView&&(x||e.zoomValue<=100||!e.loaded||(clearTimeout(z),x=!0,e.snapView.css("opacity",1),i||(z=setTimeout(function(){e.snapView.css("opacity",0),x=!1},4e3))))}var e=this,t=e.options,n=!1,o=this.container,r="."+e._viewerId,h=this.snapHandle,m=this.snapImageWrap,v=this.imageWrap,f=new s(m,{sliderId:e._viewerId,onStart:function(){if(!e.loaded)return!1;var i=h[0].style;this.curHandleTop=parseFloat(i.top),this.curHandleLeft=parseFloat(i.left),this.handleWidth=parseFloat(i.width),this.handleHeight=parseFloat(i.height),this.width=m.width(),this.height=m.height(),clearInterval(p.slideMomentumCheck),cancelAnimationFrame(p.sliderMomentumFrame)},onMove:function(i,t){var n=this.curHandleLeft+100*t.dx/this.width,a=this.curHandleTop+100*t.dy/this.height;n=Math.max(0,n),n=Math.min(100-this.handleWidth,n),a=Math.max(0,a),a=Math.min(100-this.handleHeight,a);var o=e.containerDim,s=e.imageDim.w*(e.zoomValue/100),r=e.imageDim.h*(e.zoomValue/100),m=s<o.w?(o.w-s)/2:-s*n/100,c=r<o.h?(o.h-r)/2:-r*a/100;h.css({top:a+"%",left:n+"%"}),e.currentImg.css({left:m,top:c})}}).init(),p=e._imageSlider=new s(v,{sliderId:e._viewerId,onStart:function(i,t){if(!e.loaded)return!1;if(!n){var a=this;f.onStart(),a.imgWidth=e.imageDim.w*e.zoomValue/100,a.imgHeight=e.imageDim.h*e.zoomValue/100,a.positions=[t,t],a.startPosition=t,e._clearFrames(),a.slideMomentumCheck=setInterval(function(){a.currentPos&&(a.positions.shift(),a.positions.push({x:a.currentPos.mx,y:a.currentPos.my}))},50)}},onMove:function(i,e){n||(this.currentPos=e,f.onMove(i,{dx:-e.dx*f.width/this.imgWidth,dy:-e.dy*f.height/this.imgHeight}))},onEnd:function(){function i(){60>=s&&(e.sliderMomentumFrame=requestAnimationFrame(i)),r+=a(s,t/3,-t/3,60),h+=a(s,o/3,-o/3,60),f.onMove(null,{dx:-(r*f.width/e.imgWidth),dy:-(h*f.height/e.imgHeight)}),s++}if(!n){var e=this,t=this.positions[1].x-this.positions[0].x,o=this.positions[1].y-this.positions[0].y;if(Math.abs(t)>30||Math.abs(o)>30){var s=1,r=e.currentPos.dx,h=e.currentPos.dy;i()}}}}).init(),g=0;v.on("mousewheel"+r+" DOMMouseScroll"+r,function(n){if(t.zoomOnMouseWheel&&e.loaded){e._clearFrames();var a=Math.max(-1,Math.min(1,n.originalEvent.wheelDelta||-n.originalEvent.detail)),s=e.zoomValue*(100+a*d)/100;if(s>=100&&s<=t.maxZoom?g=0:g+=Math.abs(a),!(g>u)){n.preventDefault();var r=o.offset(),h=(n.pageX||n.originalEvent.pageX)-r.left,m=(n.pageY||n.originalEvent.pageY)-r.top;e.zoom(s,{x:h,y:m}),i()}}}),v.on("touchstart"+r,function(i){if(e.loaded){var t=i.originalEvent.touches[0],a=i.originalEvent.touches[1];if(t&&a){n=!0;var s=o.offset(),r=Math.sqrt(Math.pow(a.pageX-t.pageX,2)+Math.pow(a.pageY-t.pageY,2)),h=e.zoomValue,m={x:(a.pageX+t.pageX)/2-s.left,y:(a.pageY+t.pageY)/2-s.top},c=function(i){i.preventDefault();var t=i.originalEvent.touches[0],n=i.originalEvent.touches[1],a=Math.sqrt(Math.pow(n.pageX-t.pageX,2)+Math.pow(n.pageY-t.pageY,2)),o=h+(a-r)/2;e.zoom(o,m)},d=function(){l.off("touchmove",c),l.off("touchend",d),n=!1};l.on("touchmove",c),l.on("touchend",d)}}});var w,M=0;v.on("click"+r,function(i){0==M?(M=Date.now(),w={x:i.pageX,y:i.pageY}):Date.now()-M<500&&Math.abs(i.pageX-w.x)<50&&Math.abs(i.pageY-w.y)<50?(e.zoomValue==t.zoomValue?e.zoom(200):e.resetZoom(),M=0):M=0});var z,x,y=e.snapView.find(".iv-zoom-slider");new s(y,{sliderId:e._viewerId,onStart:function(i){return e.loaded?(this.leftOffset=y.offset().left,this.handleWidth=e.zoomHandle.width(),void this.onMove(i)):!1},onMove:function(i,n){var a=(i.pageX||i.originalEvent.touches[0].pageX)-this.leftOffset-this.handleWidth/2;a=Math.max(0,a),a=Math.min(e._zoomSliderLength,a);var o=100+(t.maxZoom-100)*a/e._zoomSliderLength;e.zoom(o)}}).init();v.on("touchmove"+r+" mousemove"+r,function(){i()});var D={};D["mouseenter"+r+" touchstart"+r]=function(){x=!1,i(!0)},D["mouseleave"+r+" touchend"+r]=function(){x=!1,i()},e.snapView.on(D),t.refreshOnResize&&c.on("resize"+r,function(){e.refresh()}),e._fullPage&&(o.on("touchmove"+r+" mousewheel"+r+" DOMMouseScroll"+r,function(i){i.preventDefault()}),o.find(".iv-close").on("click"+r,function(){e.hide()}))},zoom:function(i,e){function t(){l++,20>l&&(n._zoomFrame=requestAnimationFrame(t));var h=a(l,s,i-s,20),d=h/s,g=n.imageDim.w*h/100,w=n.imageDim.h*h/100,M=-((e.x-m)*d-e.x),z=-((e.y-c)*d-e.y);M=Math.min(M,u),z=Math.min(z,v),f>M+g&&(M=f-g),p>z+w&&(z=p-w),r.css({height:w+"px",width:g+"px",left:M+"px",top:z+"px"}),n.zoomValue=h,n._resizeHandle(g,w,M,z),n.zoomHandle.css("left",(h-100)*n._zoomSliderLength/(o-100)+"px")}i=Math.round(Math.max(100,i)),i=Math.min(this.options.maxZoom,i),e=e||{x:this.containerDim.w/2,y:this.containerDim.h/2};var n=this,o=this.options.maxZoom,s=this.zoomValue,r=this.currentImg,h=this.containerDim,m=parseFloat(r.css("left")),c=parseFloat(r.css("top"));n._clearFrames();var l=0,h=n.containerDim,d=n.imageDim,u=(h.w-d.w)/2,v=(h.h-d.h)/2,f=h.w-u,p=h.h-v;t()},_clearFrames:function(){clearInterval(this._imageSlider.slideMomentumCheck),cancelAnimationFrame(this._imageSlider.sliderMomentumFrame),cancelAnimationFrame(this._zoomFrame)},resetZoom:function(){this.zoom(this.options.zoomValue)},_calculateDimensions:function(){var i=this,e=i.currentImg,t=i.container,n=i.snapView,a=e.width(),o=e.height(),s=t.width(),r=t.height(),h=n.innerWidth(),m=n.innerHeight();i.containerDim={w:s,h:r};var c,l,d=a/o;c=a>o&&r>=s||d*r>s?s:d*r,l=c/d,i.imageDim={w:c,h:l},e.css({width:c+"px",height:l+"px",left:(s-c)/2+"px",top:(r-l)/2+"px","max-width":"none","max-height":"none"});var u=c>l?h:c*m/l,v=l>c?m:l*h/c;i.snapImageDim={w:u,h:v},i.snapImg.css({width:u,height:v}),i._zoomSliderLength=h-i.zoomHandle.outerWidth()},refresh:function(){this.loaded&&(this._calculateDimensions(),this.resetZoom())},_resizeHandle:function(i,e,t,n){var a=this.currentImg,o=i||this.imageDim.w*this.zoomValue/100,s=e||this.imageDim.h*this.zoomValue/100,r=Math.max(100*-(t||parseFloat(a.css("left")))/o,0),h=Math.max(100*-(n||parseFloat(a.css("top")))/s,0),m=Math.min(100*this.containerDim.w/o,100),c=Math.min(100*this.containerDim.h/s,100);this.snapHandle.css({top:h+"%",left:r+"%",width:m+"%",height:c+"%"})},show:function(i,e){this._fullPage&&(this.container.show(),i&&this.load(i,e))},hide:function(){this._fullPage&&this.container.hide()},options:function(i,e){return e?void(this.options[i]=e):this.options[i]},destroy:function(i,e){var t="."+this._viewerId;return this._fullPage?(container.off(t),container.find('[class^="iv"]').off(t)):this.container.remove('[class^="iv"]'),c.off(t),null},load:function(e,t){function n(){a.loaded=!0,a.zoomValue=100,h.show(),a.snapImg.show(),a.refresh(),a.resetZoom(),s.find(".iv-loader").hide()}var a=this,s=this.container;s.find(".iv-snap-image,.iv-large-image").remove();var r=this.container.find(".iv-snap-image-wrap");r.prepend('<img class="iv-snap-image" src="'+e+'" />'),this.imageWrap.prepend('<img class="iv-large-image" src="'+e+'" />'),t&&this.imageWrap.append('<img class="iv-large-image" src="'+t+'" />');var h=this.currentImg=this.container.find(".iv-large-image");this.snapImg=this.container.find(".iv-snap-image"),a.loaded=!1,s.find(".iv-loader").show(),h.hide(),a.snapImg.hide(),o(h[0])?n():i(h[0]).on("load",n)}},r.defaults={zoomValue:100,snapView:!0,maxZoom:500,refreshOnResize:!0,zoomOnMouseWheel:!0},e.ImageViewer=function(e,t){var n,a,o;e&&("string"==typeof e||e instanceof Element||e[0]instanceof Element)||(t=e,e=i("#iv-container")),e=i(e),e.is("img")?(n=e,a=n[0].src,o=n.attr("high-res-src")||n.attr("data-high-res-src"),e=n.wrap('<div class="iv-container" style="display:inline-block; overflow:hidden"></div>').parent(),n.css({opacity:0,position:"relative",zIndex:-1})):(a=e.attr("src")||e.attr("data-src"),o=e.attr("high-res-src")||e.attr("data-high-res-src"));var s=new r(e,t);return s._init(),a&&s.load(a,o),s},i.fn.ImageViewer=function(t){return this.each(function(){var n=i(this),a=e.ImageViewer(n,t);n.data("ImageViewer",a)})}}(window.jQuery,window,document);
\ No newline at end of file
diff --git a/web/pgadmin/misc/static/explain/js/imageviewer.pgadmin.js b/web/pgadmin/misc/static/explain/js/imageviewer.pgadmin.js
new file mode 100644
index 0000000..0885db2
--- /dev/null
+++ b/web/pgadmin/misc/static/explain/js/imageviewer.pgadmin.js
@@ -0,0 +1,824 @@
+/*
+ ImageViewer v 1.1.3
+ Author: Sudhanshu Yadav
+ Copyright (c) 2015-2016 to Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
+ Demo on: http://ignitersworld.com/lab/imageViewer.html
+*/
+
+/*** picture view plugin ****/
+(function ($, window, document, undefined) {
+ "use strict";
+
+ //an empty function
+ var noop = function () {};
+
+ var $body = $('body'),
+ $window = $(window),
+ $document = $(document);
+
+
+ //constants
+ var ZOOM_CONSTANT = 15; //increase or decrease value for zoom on mouse wheel
+ var MOUSE_WHEEL_COUNT = 5; //A mouse delta after which it should stop preventing default behaviour of mouse wheel
+
+ //ease out method
+ /*
+ t : current time,
+ b : intial value,
+ c : changed value,
+ d : duration
+ */
+ function easeOutQuart(t, b, c, d) {
+ t /= d;
+ t--;
+ return -c * (t * t * t * t - 1) + b;
+ };
+
+
+ // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+ // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+ // requestAnimationFrame polyfill by Erik Möller
+ // fixes from Paul Irish and Tino Zijdel
+
+ (function () {
+ var lastTime = 0;
+ var vendors = ['ms', 'moz', 'webkit', 'o'];
+ for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+ window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+ window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
+ }
+
+ if (!window.requestAnimationFrame)
+ window.requestAnimationFrame = function (callback, element) {
+ var currTime = new Date().getTime();
+ var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+ var id = window.setTimeout(function () {
+ callback(currTime + timeToCall);
+ },
+ timeToCall);
+ lastTime = currTime + timeToCall;
+ return id;
+ };
+
+ if (!window.cancelAnimationFrame)
+ window.cancelAnimationFrame = function (id) {
+ clearTimeout(id);
+ };
+ }());
+
+ //function to check if image is loaded
+ function imageLoaded(img) {
+ return img != undefined && img.complete && (typeof img.naturalWidth === 'undefined' || img.naturalWidth !== 0);
+ }
+
+ var imageViewHtml = '<div class="iv-snap-view">' + '<div class="iv-snap-image-wrap">' + '<div class="iv-snap-handle"></div>' + '</div>' + '<div class="iv-zoom-slider"><div class="iv-zoom-handle"></div></div></div>' + '<div class="iv-image-view" ><div class="iv-image-wrap" ></div></div>';
+
+ //add a full screen view
+ /*$(function () {
+ if(!$body.length) $body = $('body');
+ $body.append('<div id="iv-container">' + imageViewHtml + '<div class="iv-close"></div><div>');
+ });*/
+
+ function Slider(container, options) {
+ this.container = container;
+ this.onStart = options.onStart || noop;
+ this.onMove = options.onMove || noop;
+ this.onEnd = options.onEnd || noop;
+ this.sliderId = options.sliderId || 'slider' + Math.ceil(Math.random() * 1000000);
+ }
+
+ Slider.prototype.init = function () {
+ var self = this,
+ container = this.container,
+ eventSuffix = '.' + this.sliderId;
+
+ //assign event on snap image wrap
+ this.container.on('touchstart' + eventSuffix + ' mousedown' + eventSuffix, function (estart) {
+ estart.preventDefault();
+ var touchMove = (estart.type == "touchstart" ? "touchmove" : "mousemove") + eventSuffix,
+ touchEnd = (estart.type == "touchstart" ? "touchend" : "mouseup") + eventSuffix,
+ eOrginal = estart.originalEvent,
+ sx = eOrginal.clientX || eOrginal.touches[0].clientX,
+ sy = eOrginal.clientY || eOrginal.touches[0].clientY;
+
+ var start = self.onStart(estart, {
+ x: sx,
+ y: sy
+ });
+
+ if (start === false) return;
+
+ var moveListener = function (emove) {
+ emove.preventDefault();
+
+ eOrginal = emove.originalEvent;
+
+ //get the cordinates
+ var mx = eOrginal.clientX || eOrginal.touches[0].clientX,
+ my = eOrginal.clientY || eOrginal.touches[0].clientY;
+
+ self.onMove(emove, {
+ dx: mx - sx,
+ dy: my - sy,
+ mx: mx,
+ my: my
+ });
+
+ };
+
+ var endListener = function () {
+ $document.off(touchMove, moveListener);
+ $document.off(touchEnd, endListener);
+ self.onEnd();
+ };
+
+ $document.on(touchMove, moveListener);
+ $document.on(touchEnd, endListener);
+ });
+
+ return this;
+ }
+
+
+ function ImageViewer(container, options) {
+ var self = this;
+
+ if (container.is('#iv-container')) {
+ self._fullPage = true;
+ }
+
+ self.container = container;
+ options = self.options = $.extend({}, ImageViewer.defaults, options);
+
+ self.zoomValue = 100;
+
+ if (!container.find('.snap-view').length) {
+ container.prepend(imageViewHtml);
+ }
+
+ container.addClass('iv-container');
+
+ //if (container.css('position') == 'static') container.css('position', 'relative');
+
+ self.snapView = container.find('.iv-snap-view');
+ self.snapImageWrap = container.find('.iv-snap-image-wrap');
+ self.imageWrap = container.find('.iv-image-wrap');
+ self.snapHandle = container.find('.iv-snap-handle');
+ self.zoomHandle = container.find('.iv-zoom-handle');
+ self._viewerId = 'iv' + Math.floor(Math.random() * 1000000);
+ }
+
+
+ ImageViewer.prototype = {
+ constructor: ImageViewer,
+ _init: function () {
+ var viewer = this,
+ options = viewer.options,
+ zooming = false, // tell weather we are zooming trough touch
+ container = this.container;
+
+ var eventSuffix = '.' + viewer._viewerId;
+
+ //cache dom refrence
+ var snapHandle = this.snapHandle;
+ var snapImgWrap = this.snapImageWrap;
+ var imageWrap = this.imageWrap;
+
+ var snapSlider = new Slider(snapImgWrap, {
+ sliderId: viewer._viewerId,
+ onStart: function () {
+
+ if (!viewer.loaded) return false;
+
+ var handleStyle = snapHandle[0].style;
+
+ this.curHandleTop = parseFloat(handleStyle.top);
+ this.curHandleLeft = parseFloat(handleStyle.left);
+ this.handleWidth = parseFloat(handleStyle.width);
+ this.handleHeight = parseFloat(handleStyle.height);
+ this.width = snapImgWrap.width();
+ this.height = snapImgWrap.height();
+
+ //stop momentum on image
+ clearInterval(imageSlider.slideMomentumCheck);
+ cancelAnimationFrame(imageSlider.sliderMomentumFrame);
+ },
+ onMove: function (e, position) {
+ var xPerc = this.curHandleLeft + position.dx * 100 / this.width,
+ yPerc = this.curHandleTop + position.dy * 100 / this.height;
+
+ xPerc = Math.max(0, xPerc);
+ xPerc = Math.min(100 - this.handleWidth, xPerc);
+
+ yPerc = Math.max(0, yPerc);
+ yPerc = Math.min(100 - this.handleHeight, yPerc);
+
+
+ var containerDim = viewer.containerDim,
+ imgWidth = viewer.imageDim.w * (viewer.zoomValue / 100),
+ imgHeight = viewer.imageDim.h * (viewer.zoomValue / 100),
+ imgLeft = imgWidth < containerDim.w ? (containerDim.w - imgWidth) / 2 : -imgWidth * xPerc / 100,
+ imgTop = imgHeight < containerDim.h ? (containerDim.h - imgHeight) / 2 : -imgHeight * yPerc / 100;
+
+ snapHandle.css({
+ top: yPerc + '%',
+ left: xPerc + '%'
+ })
+
+ viewer.currentImg.css({
+ left: imgLeft,
+ top: imgTop
+ })
+ }
+ }).init();
+
+
+ /*Add slide interaction to image*/
+ var imageSlider = viewer._imageSlider = new Slider(imageWrap, {
+ sliderId: viewer._viewerId,
+ onStart: function (e, position) {
+ if (!viewer.loaded) return false;
+ if (zooming) return;
+ var self = this;
+ snapSlider.onStart();
+ self.imgWidth = viewer.imageDim.w * viewer.zoomValue / 100;
+ self.imgHeight = viewer.imageDim.h * viewer.zoomValue / 100;
+
+ self.positions = [position, position];
+
+ self.startPosition = position;
+
+ //clear all animation frame and interval
+ viewer._clearFrames();
+
+ self.slideMomentumCheck = setInterval(function () {
+ if (!self.currentPos) return;
+ self.positions.shift();
+ self.positions.push({
+ x: self.currentPos.mx,
+ y: self.currentPos.my
+ })
+ }, 50);
+ },
+ onMove: function (e, position) {
+ if (zooming) return;
+ this.currentPos = position;
+
+ snapSlider.onMove(e, {
+ dx: -position.dx * snapSlider.width / this.imgWidth,
+ dy: -position.dy * snapSlider.height / this.imgHeight
+ });
+ },
+ onEnd: function () {
+ if (zooming) return;
+ var self = this;
+
+ var xDiff = this.positions[1].x - this.positions[0].x,
+ yDiff = this.positions[1].y - this.positions[0].y;
+
+ function momentum() {
+ if (step <= 60) {
+ self.sliderMomentumFrame = requestAnimationFrame(momentum);
+ }
+
+ positionX = positionX + easeOutQuart(step, xDiff / 3, -xDiff / 3, 60);
+ positionY = positionY + easeOutQuart(step, yDiff / 3, -yDiff / 3, 60)
+
+
+ snapSlider.onMove(null, {
+ dx: -((positionX) * snapSlider.width / self.imgWidth),
+ dy: -((positionY) * snapSlider.height / self.imgHeight)
+ });
+ step++;
+ }
+
+ if (Math.abs(xDiff) > 30 || Math.abs(yDiff) > 30) {
+ var step = 1,
+ positionX = self.currentPos.dx,
+ positionY = self.currentPos.dy;
+
+ momentum();
+ }
+ }
+ }).init();
+
+
+ /*Add zoom interation in mouse wheel*/
+ var changedDelta = 0;
+ imageWrap.on("mousewheel" + eventSuffix + " DOMMouseScroll" + eventSuffix, function (e) {
+ if(!options.zoomOnMouseWheel) return;
+
+ if (!viewer.loaded) return;
+
+
+ //clear all animation frame and interval
+ viewer._clearFrames();
+
+ // cross-browser wheel delta
+ var delta = Math.max(-1, Math.min(1, (e.originalEvent.wheelDelta || -e.originalEvent.detail))),
+ zoomValue = viewer.zoomValue * (100 + delta * ZOOM_CONSTANT) / 100;
+
+ if(!(zoomValue >= 100 && zoomValue <= options.maxZoom)){
+ changedDelta += Math.abs(delta);
+ }
+ else{
+ changedDelta = 0;
+ }
+
+ if(changedDelta > MOUSE_WHEEL_COUNT) return;
+
+ e.preventDefault();
+
+ var contOffset = container.offset(),
+ x = (e.pageX || e.originalEvent.pageX) - contOffset.left,
+ y = (e.pageY || e.originalEvent.pageY) - contOffset.top;
+
+
+
+ viewer.zoom(zoomValue, {
+ x: x,
+ y: y
+ });
+
+ //show the snap viewer
+ showSnapView();
+ });
+
+
+ //apply pinch and zoom feature
+ imageWrap.on('touchstart' + eventSuffix, function (estart) {
+ if (!viewer.loaded) return;
+ var touch0 = estart.originalEvent.touches[0],
+ touch1 = estart.originalEvent.touches[1];
+
+ if (!(touch0 && touch1)) {
+ return;
+ }
+
+
+ zooming = true;
+
+ var contOffset = container.offset();
+
+ var startdist = Math.sqrt(Math.pow(touch1.pageX - touch0.pageX, 2) + Math.pow(touch1.pageY - touch0.pageY, 2)),
+ startZoom = viewer.zoomValue,
+ center = {
+ x: ((touch1.pageX + touch0.pageX) / 2) - contOffset.left,
+ y: ((touch1.pageY + touch0.pageY) / 2) - contOffset.top
+ }
+
+ var moveListener = function (emove) {
+ emove.preventDefault();
+
+ var touch0 = emove.originalEvent.touches[0],
+ touch1 = emove.originalEvent.touches[1],
+ newDist = Math.sqrt(Math.pow(touch1.pageX - touch0.pageX, 2) + Math.pow(touch1.pageY - touch0.pageY, 2)),
+ zoomValue = startZoom + (newDist - startdist) / 2;
+
+ viewer.zoom(zoomValue, center);
+ };
+
+ var endListener = function () {
+ $document.off('touchmove', moveListener);
+ $document.off('touchend', endListener);
+ zooming = false;
+ };
+
+ $document.on('touchmove', moveListener);
+ $document.on('touchend', endListener);
+
+ });
+
+
+ //handle double tap for zoom in and zoom out
+ var touchtime = 0,
+ point;
+ imageWrap.on('click' + eventSuffix, function (e) {
+ if (touchtime == 0) {
+ touchtime = Date.now();
+ point = {
+ x: e.pageX,
+ y: e.pageY
+ };
+ } else {
+ if ((Date.now() - touchtime) < 500 && Math.abs(e.pageX - point.x) < 50 && Math.abs(e.pageY - point.y) < 50) {
+ if (viewer.zoomValue == options.zoomValue) {
+ viewer.zoom(200)
+ } else {
+ viewer.resetZoom()
+ }
+ touchtime = 0;
+ } else {
+ touchtime = 0;
+ }
+ }
+ });
+
+ //zoom in zoom out using zoom handle
+ var slider = viewer.snapView.find('.iv-zoom-slider');
+ var zoomSlider = new Slider(slider, {
+ sliderId: viewer._viewerId,
+ onStart: function (eStart) {
+
+ if (!viewer.loaded) return false;
+
+ this.leftOffset = slider.offset().left;
+ this.handleWidth = viewer.zoomHandle.width();
+ this.onMove(eStart);
+
+ },
+ onMove: function (e, position) {
+ var newLeft = (e.pageX || e.originalEvent.touches[0].pageX) - this.leftOffset - this.handleWidth / 2;
+
+ newLeft = Math.max(0, newLeft);
+ newLeft = Math.min(viewer._zoomSliderLength, newLeft);
+
+ var zoomValue = 100 + (options.maxZoom - 100) * newLeft / viewer._zoomSliderLength;
+
+ viewer.zoom(zoomValue);
+ }
+ }).init();
+
+
+ //display snapView on interaction
+ var snapViewTimeout, snapViewVisible;
+
+ function showSnapView(noTimeout) {
+ if(!options.snapView) return;
+
+ if (snapViewVisible || viewer.zoomValue <= 100 || !viewer.loaded) return;
+ clearTimeout(snapViewTimeout);
+ snapViewVisible = true;
+ viewer.snapView.css('opacity', 1);
+ if (!noTimeout) {
+ snapViewTimeout = setTimeout(function () {
+ viewer.snapView.css('opacity', 0);
+ snapViewVisible = false;
+ }, 4000);
+ }
+ }
+
+ imageWrap.on('touchmove' + eventSuffix + ' mousemove' + eventSuffix, function () {
+ showSnapView();
+ });
+
+ var snapEventsCallback = {};
+ snapEventsCallback['mouseenter' + eventSuffix + ' touchstart' + eventSuffix] = function () {
+ snapViewVisible = false;
+ showSnapView(true);
+ };
+
+ snapEventsCallback['mouseleave' + eventSuffix + ' touchend' + eventSuffix] = function () {
+ snapViewVisible = false;
+ showSnapView();
+ };
+
+ viewer.snapView.on(snapEventsCallback);
+
+
+ //calculate elments size on window resize
+ if (options.refreshOnResize) $window.on('resize' + eventSuffix, function () {
+ viewer.refresh()
+ });
+
+ if (viewer._fullPage) {
+ //prevent scrolling the backside if container if fixed positioned
+ container.on('touchmove' + eventSuffix + ' mousewheel' + eventSuffix + ' DOMMouseScroll' + eventSuffix, function (e) {
+ e.preventDefault();
+ });
+
+ //assign event on close button
+ container.find('.iv-close').on('click' + eventSuffix, function () {
+ viewer.hide();
+ });
+ }
+ },
+
+ //method to zoom images
+ zoom: function (perc, point) {
+ perc = Math.round(Math.max(100, perc));
+ perc = Math.min(this.options.maxZoom, perc);
+
+ point = point || {
+ x: this.containerDim.w / 2,
+ y: this.containerDim.h / 2
+ };
+
+ var self = this,
+ maxZoom = this.options.maxZoom,
+ curPerc = this.zoomValue,
+ curImg = this.currentImg,
+ containerDim = this.containerDim,
+ curLeft = parseFloat(curImg.css('left')),
+ curTop = parseFloat(curImg.css('top'));
+
+ self._clearFrames();
+
+ var step = 0;
+
+ //calculate base top,left,bottom,right
+ var containerDim = self.containerDim,
+ imageDim = self.imageDim;
+ var baseLeft = (containerDim.w - imageDim.w) / 2,
+ baseTop = (containerDim.h - imageDim.h) / 2,
+ baseRight = containerDim.w - baseLeft,
+ baseBottom = containerDim.h - baseTop;
+
+ function zoom() {
+ step++;
+
+ if (step < 20) {
+ self._zoomFrame = requestAnimationFrame(zoom);
+ }
+
+ var tickZoom = easeOutQuart(step, curPerc, perc - curPerc, 20);
+
+
+ var ratio = tickZoom / curPerc,
+ imgWidth = self.imageDim.w * tickZoom / 100,
+ imgHeight = self.imageDim.h * tickZoom / 100,
+ newLeft = -((point.x - curLeft) * ratio - point.x),
+ newTop = -((point.y - curTop) * ratio - point.y);
+
+ //fix for left and top
+ newLeft = Math.min(newLeft, baseLeft);
+ newTop = Math.min(newTop, baseTop);
+
+ //fix for right and bottom
+ if((newLeft + imgWidth) < baseRight){
+ newLeft = baseRight - imgWidth; //newLeft - (newLeft + imgWidth - baseRight)
+ }
+
+ if((newTop + imgHeight) < baseBottom){
+ newTop = baseBottom - imgHeight; //newTop + (newTop + imgHeight - baseBottom)
+ }
+
+
+ /*curImg.css({
+ height: imgHeight + 'px',
+ width: imgWidth + 'px',
+ left: newLeft + 'px',
+ top: newTop + 'px'
+ });*/
+
+ curImg.find('g').attr('transform','scale(' + (curPerc/100) + ')');
+ curImg.attr('width', imgWidth);
+ curImg.attr('height', imgHeight);
+
+
+ self.zoomValue = tickZoom;
+
+ self._resizeHandle(imgWidth, imgHeight, newLeft, newTop);
+
+ //update zoom handle position
+ self.zoomHandle.css('left', ((tickZoom - 100) * self._zoomSliderLength) / (maxZoom - 100) + 'px');
+ }
+
+ zoom();
+ },
+ _clearFrames: function () {
+ clearInterval(this._imageSlider.slideMomentumCheck);
+ cancelAnimationFrame(this._imageSlider.sliderMomentumFrame);
+ cancelAnimationFrame(this._zoomFrame)
+ },
+ resetZoom: function () {
+ this.zoom(this.options.zoomValue);
+ },
+ //calculate dimensions of image, container and reset the image
+ _calculateDimensions: function () {
+ //calculate content width of image and snap image
+ var self = this,
+ curImg = self.currentImg,
+ container = self.container,
+ snapView = self.snapView,
+ imageWidth = curImg.attr('width'),
+ imageHeight = curImg.attr('height'),
+ //contWidth = container.width(),
+ //contHeight = container.height(),
+ contWidth = imageWidth,
+ contHeight = imageHeight,
+ snapViewWidth = snapView.innerWidth(),
+ snapViewHeight = snapView.innerHeight();
+
+ //set the container dimension
+ self.containerDim = {
+ w: contWidth,
+ h: contHeight
+ }
+
+ //set the image dimension
+ var imgWidth, imgHeight, ratio = imageWidth / imageHeight;
+
+ imgWidth = (imageWidth > imageHeight && contHeight >= contWidth) || ratio * contHeight > contWidth ? contWidth : ratio * contHeight;
+
+ imgHeight = imgWidth / ratio;
+
+ self.imageDim = {
+ w: imgWidth,
+ h: imgHeight
+ }
+
+ //reset image position and zoom
+ /*curImg.css({
+ width: imgWidth + 'px',
+ height: imgHeight + 'px',
+ left: (contWidth - imgWidth) / 2 + 'px',
+ top: (contHeight - imgHeight) / 2 + 'px',
+ 'max-width': 'none',
+ 'max-height': 'none'
+ });*/
+ curImg.attr('width', imgWidth);
+ curImg.attr('height', imgHeight);
+
+ //set the snap Image dimension
+ var snapWidth = imgWidth > imgHeight ? snapViewWidth : imgWidth * snapViewHeight / imgHeight,
+ snapHeight = imgHeight > imgWidth ? snapViewHeight : imgHeight * snapViewWidth / imgWidth;
+
+ self.snapImageDim = {
+ w: snapWidth,
+ h: snapHeight
+ }
+
+ /*self.snapImg.css({
+ width: snapWidth,
+ height: snapHeight
+ });*/
+ self.snapImg.attr('width', snapWidth);
+ self.snapImg.attr('height', snapHeight);
+
+ //calculate zoom slider area
+ self._zoomSliderLength = snapViewWidth - self.zoomHandle.outerWidth();
+
+ },
+ refresh: function () {
+ if (!this.loaded) return;
+ this._calculateDimensions();
+ this.resetZoom();
+ },
+ _resizeHandle: function (imgWidth, imgHeight, imgLeft, imgTop) {
+ var curImg = this.currentImg,
+ imageWidth = imgWidth || this.imageDim.w * this.zoomValue / 100,
+ imageHeight = imgHeight || this.imageDim.h * this.zoomValue / 100,
+ left = Math.max(-(imgLeft || parseFloat(curImg.css('left'))) * 100 / imageWidth, 0),
+ top = Math.max(-(imgTop || parseFloat(curImg.css('top'))) * 100 / imageHeight, 0),
+ handleWidth = Math.min(this.containerDim.w * 100 / imageWidth, 100),
+ handleHeight = Math.min(this.containerDim.h * 100 / imageHeight, 100);
+
+
+ this.snapHandle.css({
+ top: top + '%',
+ left: left + '%',
+ width: handleWidth + '%',
+ height: handleHeight + '%'
+ });
+ },
+ show: function (image, hiResImg) {
+ if (this._fullPage) {
+ this.container.show();
+ if (image) this.load(image, hiResImg);
+ }
+ },
+ hide: function () {
+ if (this._fullPage) {
+ this.container.hide();
+ }
+ },
+ options: function (key, value) {
+ if (!value) return this.options[key];
+
+ this.options[key] = value;
+ },
+ destroy: function (key, value) {
+ var eventSuffix = '.' + this._viewerId;
+ if (this._fullPage) {
+ container.off(eventSuffix);
+ container.find('[class^="iv"]').off(eventSuffix);
+ } else {
+ this.container.remove('[class^="iv"]');
+ }
+ $window.off(eventSuffix);
+ return null;
+ },
+ load: function (image, hiResImg) {
+ var self = this,
+ container = this.container;
+
+
+ var cloneImage = image.clone();
+ cloneImage.addClass("iv-snap-image");
+ image.addClass('iv-large-image');
+ //container.find('.iv-snap-image,.iv-large-image').remove();
+ //var currentImg = this.currentImg = this.container.find('.iv-large-image');
+ var currentImg = this.currentImg = image;
+ //this.snapImg = this.container.find('.iv-snap-image');
+ this.snapImg = cloneImage;
+ self.loaded = true;
+
+ //show loader
+ //container.find('.iv-loader').show();
+ refreshView();
+
+ var snapImageWrap = this.container.find('.iv-snap-image-wrap');
+
+ //snapImageWrap.prepend('<img class="iv-snap-image" src="' + image + '" />');
+ var widthRatio = this.snapImageDim.w/this.imageDim.w;
+ var heightRatio = this.snapImageDim.h/this.imageDim.h;
+
+ cloneImage.find('g').attr('transform','scale(' + widthRatio + ')');
+ cloneImage.attr('width', this.snapImageDim.w);
+ cloneImage.attr('height', this.snapImageDim.h);
+
+ snapImageWrap.prepend(cloneImage);
+ //this.imageWrap.prepend('<img class="iv-large-image" src="' + image + '" />');
+ var imageWrap = container.find('.iv-image-wrap');
+ imageWrap.prepend(image);
+ /*if (hiResImg) {
+ this.imageWrap.append('<img class="iv-large-image" src="' + hiResImg + '" />')
+ }*/
+
+
+ //refresh the view
+ function refreshView() {
+ self.loaded = true;
+ self.zoomValue = 100;
+
+ //reset zoom of images
+ self.snapImg.show();
+ self.refresh();
+ //self.resetZoom();
+
+ //hide loader
+ //container.find('.iv-loader').hide();
+ }
+
+ //if (imageLoaded(currentImg[0])) {
+ //refreshView();
+ //} else {
+ // $(currentImg[0]).on('load', refreshView);
+ // }
+
+ }
+ }
+
+ ImageViewer.defaults = {
+ zoomValue: 100,
+ snapView: true,
+ maxZoom: 500,
+ refreshOnResize: true,
+ zoomOnMouseWheel : true
+ }
+
+ window.ImageViewer = function (container, options) {
+ var imgElm, imgSrc, hiResImg;
+ if (!(container && (typeof container == "string" || container instanceof Element || container[0] instanceof Element))) {
+ options = container;
+ container = $('#iv-container');
+ }
+
+ container = $(container);
+
+ if (container.is('img')) {
+ imgElm = container;
+ imgSrc = imgElm[0].src;
+ hiResImg = imgElm.attr('high-res-src') || imgElm.attr('data-high-res-src');
+ container = imgElm.wrap('<div class="iv-container" style="display:inline-block; overflow:hidden"></div>').parent();
+ imgElm.css({
+ opacity: 0,
+ position: 'relative',
+ zIndex: -1
+ });
+ }/*else if (container.is('svg')) {
+ imgElm = container;
+ imgSrc = container;
+ container = imgElm.wrap('<div class="iv-container" style="display:inline-block; overflow:hidden"></div>').parent();
+ imgElm.css({
+ opacity: 0,
+ position: 'relative',
+ zIndex: -1
+ });
+ } */
+ else {
+ imgSrc = container.children(0);
+ hiResImg = container.attr('high-res-src') || container.attr('data-high-res-src');
+ }
+
+
+ var viewer = new ImageViewer(container, {});
+ viewer._init();
+
+ if (imgSrc) viewer.load(imgSrc, hiResImg);
+
+ return viewer;
+ };
+
+
+ $.fn.ImageViewer = function (options) {
+ return this.each(function () {
+ var $this = $(this);
+ var viewer = window.ImageViewer($this, options);
+ $this.data('ImageViewer', viewer);
+ });
+ }
+
+}((window.jQuery), window, document));
\ No newline at end of file
diff --git a/web/pgadmin/misc/templates/explain/js/explain.js b/web/pgadmin/misc/templates/explain/js/explain.js
index fd9a5e5..f9231f8 100644
--- a/web/pgadmin/misc/templates/explain/js/explain.js
+++ b/web/pgadmin/misc/templates/explain/js/explain.js
@@ -1,6 +1,9 @@
define (
'pgadmin.misc.explain',
- ['jquery', 'underscore', 'underscore.string', 'pgadmin', 'backbone', 'snap.svg'],
+ [
+ 'jquery', 'underscore', 'underscore.string', 'pgadmin', 'backbone',
+ 'snap.svg', 'imageviewer'
+ ],
function($, _, S, pgAdmin, Backbone, Snap) {
pgAdmin = pgAdmin || window.pgAdmin || {};
@@ -396,12 +399,12 @@ var PlanModel = Backbone.Model.extend({
// Draw the actual image for current node
var image = g.image(
pgExplain.prefix + this.get('image'),
+ //tempImage,
currentXpos + (pWIDTH - IMAGE_WIDTH) / 2,
currentYpos + (pHEIGHT - IMAGE_HEIGHT) / 2,
IMAGE_WIDTH,
IMAGE_HEIGHT
);
-
// Draw tooltip
var image_data = this.toJSON();
image.mouseover(function(evt){
@@ -628,13 +631,18 @@ _.extend(
planDiv.append($svg);
main_plan.draw(s, w - xMargin, yMargin, planDiv, toolTip);
+ var viewer = window.ImageViewer(planDiv);
+
+ /*
var initPanelWidth = planDiv.width(),
initPanelHeight = planDiv.height();
+ */
/*
* Scale graph in case its width is bigger than panel width
* in which the graph is displayed
*/
+ /*
if(initPanelWidth < w) {
var width_ratio = initPanelWidth / w;
@@ -681,7 +689,7 @@ _.extend(
$svg.attr({'width': w * curr_zoom_factor, 'height': h * curr_zoom_factor});
planDiv.data('zoom-factor', curr_zoom_factor);
zoomToNormal.blur();
- });
+ });*/
});
}
--
Sent via pgadmin-hackers mailing list (pgadmin-hackers@postgresql.org)
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers
