Skip to content

Commit 936f762

Browse files
felliottfelliott
committed
Merge branch 'feature/image-zoom' into develop
 [SVCS-571] Closes: #306
2 parents 8b07195 + 7b21920 commit 936f762

File tree

9 files changed

+446
-10
lines changed

9 files changed

+446
-10
lines changed

‎mfr/extensions/image/settings.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
config = settings.child('IMAGE_EXTENSION_CONFIG')
44

55
EXPORT_TYPE = config.get('EXPORT_TYPE', 'jpeg')
6-
EXPORT_MAXIMUM_SIZE = config.get('EXPORT_MAXIMUM_SIZE', '1200x1200')
6+
EXPORT_MAXIMUM_SIZE = config.get('EXPORT_MAXIMUM_SIZE', '2400x2400')
77
EXPORT_EXCLUSIONS = config.get('EXPORT_EXCLUSIONS', '.gif .ico').split(' ')
88
EXPORT_BACKGROUND_COLOR = config.get('EXPORT_BACKGROUND_COLOR', 'white')

‎mfr/extensions/image/static/images/question-circle.png‎

293 Bytes
Loading

‎mfr/extensions/image/static/js/jquery.mousewheel.min.js‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎mfr/extensions/image/static/js/jquery.zoom.js‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
/**
2+
* A plugin to enlarge images on touch, click, or mouseover.
3+
*
4+
* Original Copy: https://github.com/jackmoore/zoom/blob/1.7.20/jquery.zoom.js
5+
* Version: https://github.com/jackmoore/zoom/releases/tag/1.7.20
6+
*
7+
* The are two MFR customizations in this file, one for style and one for functionality
8+
*
9+
* 1. Updated code style according to `.eslintrc.js`
10+
* 2. Added `.on("mousewheel", function (e) { ... })` to enable further zoom by mouse wheel scroll
11+
*/
12+
13+
(function ($) {
14+
15+
"use strict";
16+
17+
var defaults = {
18+
url: false,
19+
callback: false,
20+
target: false,
21+
duration: 120,
22+
on: "mouseover",
23+
touch: true,
24+
onZoomIn: false,
25+
onZoomOut: false,
26+
magnify: 1
27+
};
28+
29+
// Core Zoom Logic, independent of event listeners.
30+
$.zoom = function(target, source, img, magnify) {
31+
32+
var targetHeight,
33+
targetWidth,
34+
sourceHeight,
35+
sourceWidth,
36+
xRatio,
37+
yRatio,
38+
offset,
39+
$target = $(target),
40+
position = $target.css("position"),
41+
$source = $(source);
42+
43+
// The parent element needs positioning so that the zoomed element can be correctly
44+
// positioned within.
45+
target.style.position = /(absolute|fixed)/.test(position) ? position : "relative";
46+
target.style.overflow = "hidden";
47+
img.style.width = img.style.height = "";
48+
49+
$(img)
50+
.addClass("zoomImage")
51+
.css({
52+
position: "absolute",
53+
top: 0,
54+
left: 0,
55+
opacity: 0,
56+
width: img.width * magnify,
57+
height: img.height * magnify,
58+
border: "none",
59+
maxWidth: "none",
60+
maxHeight: "none"
61+
}).appendTo(target);
62+
63+
return {
64+
init: function() {
65+
targetWidth = $target.outerWidth();
66+
targetHeight = $target.outerHeight();
67+
68+
if (source === target) {
69+
sourceWidth = targetWidth;
70+
sourceHeight = targetHeight;
71+
} else {
72+
sourceWidth = $source.outerWidth();
73+
sourceHeight = $source.outerHeight();
74+
}
75+
76+
xRatio = (img.width - targetWidth) / sourceWidth;
77+
yRatio = (img.height - targetHeight) / sourceHeight;
78+
79+
offset = $source.offset();
80+
},
81+
move: function (e) {
82+
var left = (e.pageX - offset.left),
83+
top = (e.pageY - offset.top);
84+
85+
top = Math.max(Math.min(top, sourceHeight), 0);
86+
left = Math.max(Math.min(left, sourceWidth), 0);
87+
88+
img.style.left = (left * -xRatio) + "px";
89+
img.style.top = (top * -yRatio) + "px";
90+
}
91+
};
92+
};
93+
94+
$.fn.zoom = function (options) {
95+
96+
return this.each(function () {
97+
98+
var
99+
settings = $.extend({}, defaults, options || {}),
100+
//Target will display the zoomed image
101+
target = settings.target && $(settings.target)[0] || this,
102+
//Source will provide zoom location info (thumbnail)
103+
source = this,
104+
$source = $(source),
105+
img = document.createElement("img"),
106+
$img = $(img),
107+
mousemove = "mousemove.zoom",
108+
clicked = false,
109+
touched = false;
110+
111+
// If a url wasn't specified, look for an image element.
112+
if (!settings.url) {
113+
var srcElement = source.querySelector("img");
114+
if (srcElement) {
115+
settings.url = srcElement.getAttribute("data-src") ||
116+
srcElement.currentSrc || srcElement.src;
117+
}
118+
if (!settings.url) {
119+
return;
120+
}
121+
}
122+
123+
$source.one("zoom.destroy", function(position, overflow) {
124+
$source.off(".zoom");
125+
target.style.position = position;
126+
target.style.overflow = overflow;
127+
img.onload = null;
128+
$img.remove();
129+
}.bind(this, target.style.position, target.style.overflow));
130+
131+
img.onload = function () {
132+
133+
var zoom = $.zoom(target, source, img, settings.magnify);
134+
135+
function start(e) {
136+
zoom.init();
137+
zoom.move(e);
138+
// Skip the fade-in for IE8 and lower. It chokes on fading-in and changing
139+
// position based on mousemovement at the same time.
140+
$img.stop().fadeTo(
141+
$.support.opacity ? settings.duration : 0, 1, $.isFunction(settings.onZoomIn) ? settings.onZoomIn.call(img) : false
142+
);
143+
}
144+
145+
function stop() {
146+
$img.stop().fadeTo(
147+
settings.duration, 0, $.isFunction(settings.onZoomOut) ? settings.onZoomOut.call(img) : false
148+
);
149+
}
150+
151+
// Mouse events
152+
if (settings.on === "grab") {
153+
154+
$source.on("mousedown.zoom", function (e) {
155+
if (e.which === 1) {
156+
$(document).one("mouseup.zoom", function () {
157+
stop();
158+
$(document).off(mousemove, zoom.move);
159+
});
160+
start(e);
161+
$(document).on(mousemove, zoom.move);
162+
e.preventDefault();
163+
}
164+
});
165+
166+
} else if (settings.on === "click") {
167+
168+
$source.on("click.zoom", function (e) {
169+
if (!clicked) {
170+
clicked = true;
171+
start(e);
172+
$(document).on(mousemove, zoom.move);
173+
$(document).one("click.zoom",
174+
function () {
175+
stop();
176+
clicked = false;
177+
$(document).off(mousemove, zoom.move);
178+
}
179+
);
180+
return false;
181+
}
182+
// do nothing if clicked is true, bubble the event up to the document to
183+
// trigger the unbind.
184+
});
185+
186+
// MFR customization: Allow further zoom using mouse wheel on the zoom image.
187+
// The zoom is only enabled when image is clicked. I am not entirely sure how
188+
// `stop()` works but having it inside or outside the `if (clicked) { ... }`
189+
// statement does not make a difference. TODO: need more investigation
190+
$source.on("mousewheel", function (e) {
191+
stop();
192+
if (clicked) {
193+
start(e);
194+
}
195+
});
196+
197+
} else if (settings.on === "toggle") {
198+
199+
$source.on("click.zoom", function (e) {
200+
if (clicked) {
201+
stop();
202+
} else {
203+
start(e);
204+
}
205+
clicked = !clicked;
206+
});
207+
208+
} else if (settings.on === "mouseover") {
209+
210+
// Preemptively call zoom.init() because IE7 will fire the mousemove handler
211+
// before the hover handler.
212+
zoom.init();
213+
$source.on("mouseenter.zoom", start)
214+
.on("mouseleave.zoom", stop)
215+
.on(mousemove, zoom.move);
216+
}
217+
218+
// Touch fallback
219+
if (settings.touch) {
220+
221+
$source.on("touchstart.zoom", function (e) {
222+
e.preventDefault();
223+
if (touched) {
224+
touched = false;
225+
stop();
226+
} else {
227+
touched = true;
228+
start(e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]);
229+
}
230+
}).on("touchmove.zoom", function (e) {
231+
e.preventDefault();
232+
zoom.move(e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]);
233+
}).on("touchend.zoom", function (e) {
234+
e.preventDefault();
235+
if (touched) {
236+
touched = false;
237+
stop();
238+
}
239+
});
240+
}
241+
242+
if ($.isFunction(settings.callback)) {
243+
settings.callback.call(img);
244+
}
245+
};
246+
247+
img.setAttribute("role", "presentation");
248+
img.src = settings.url;
249+
});
250+
};
251+
252+
$.fn.zoom.defaults = defaults;
253+
}(window.jQuery));

0 commit comments

Comments
 (0)