Skip to content

E
edx-platform
Commit 6c6cd430 by Chris Rodriguez
Options

Adding visual indicator of placemenet

parent ba60d2e0
Showing with 93 additions and 23 deletions
cms/static/sass/xmodule/_image-zoom-tool.scss
...@@ -52,4 +52,15 @@ ...@@ -52,4 +52,15 @@
display: block; display: block;
} }
} }
.edx-zoom-loop {
position: absolute;
border-radius: 50%;
border-width: 1px;
border-style: solid;
border-color: $black;
box-shadow: inset 0 0 4px $blue;
background: transparent;
z-index: 20;
}
} }
common/static/js/vendor/image-zoom-tool.js
...@@ -28,8 +28,10 @@ ...@@ -28,8 +28,10 @@
$lightbox = $('<div class="edx_imagezoom_lightbox">'), $lightbox = $('<div class="edx_imagezoom_lightbox">'),
$errorMessage = $('<div class="edx_imagezoom_errorMessage">'), $errorMessage = $('<div class="edx_imagezoom_errorMessage">'),
$loader = $('<div class="edx_imagezoom_loader">Loading...</div>'), $loader = $('<div class="edx_imagezoom_loader">Loading...</div>'),
$zoomArea = $('.zooming-image-place'),
$imageArea = $('.zooming-image-place a'), $imageArea = $('.zooming-image-place a'),
$indicator = $('.zooming-image-place .indicator'); $indicator = $('.zooming-image-place .indicator'),
$disc = $('.edx-zoom-loop');
$this.css({ $this.css({
cursor: 'default' cursor: 'default'
...@@ -120,8 +122,6 @@ ...@@ -120,8 +122,6 @@
event.preventDefault(); event.preventDefault();
if (!$zoomed.hasClass('is-visible')) { if (!$zoomed.hasClass('is-visible')) {
var left = event.pageX,
top = event.pageY;
if (!$magnifiedImage.hasClass('is-appended')) { if (!$magnifiedImage.hasClass('is-appended')) {
getMagnifiedImage(); getMagnifiedImage();
...@@ -129,6 +129,7 @@ ...@@ -129,6 +129,7 @@
setTimeout(function() { setTimeout(function() {
appendZoomed(true); appendZoomed(true);
addZoomLocationDisc();
magnifyWithMouse(left, top, true); magnifyWithMouse(left, top, true);
if (settings.lightbox == true) { if (settings.lightbox == true) {
...@@ -156,9 +157,11 @@ ...@@ -156,9 +157,11 @@
case keys.esc: case keys.esc:
if ($zoomed.hasClass('is-visible')) { if ($zoomed.hasClass('is-visible')) {
detachZoomed(); detachZoomed();
removeZoomLocationDisc();
if (settings.lightbox == true) { if (settings.lightbox == true) {
detachLightbox(); detachLightbox();
removeZoomLocationDisc();
} }
$imageArea.focus(); $imageArea.focus();
...@@ -166,23 +169,23 @@ ...@@ -166,23 +169,23 @@
break; break;
case keys.up: case keys.up:
// we move two spaces at a time // we move five spaces at a time
magnifyWithKeyboard(0, 2, event); magnifyWithKeyboard(0, 5, event);
break; break;
case keys.down: case keys.down:
// we move two spaces at a time // we move five spaces at a time
magnifyWithKeyboard(0, -2, event); magnifyWithKeyboard(0, -5, event);
break; break;
case keys.left: case keys.left:
// we move two spaces at a time // we move five spaces at a time
magnifyWithKeyboard(2, 0, event); magnifyWithKeyboard(5, 0, event);
break; break;
case keys.right: case keys.right:
// we move two spaces at a time // we move five spaces at a time
magnifyWithKeyboard(-2, 0, event); magnifyWithKeyboard(-5, 0, event);
break; break;
default: default:
...@@ -193,9 +196,11 @@ ...@@ -193,9 +196,11 @@
$(document).click(function(event) { $(document).click(function(event) {
if ($zoomed.hasClass('is-visible')) { if ($zoomed.hasClass('is-visible')) {
detachZoomed(); detachZoomed();
removeZoomLocationDisc();
if (settings.lightbox == true) { if (settings.lightbox == true) {
detachLightbox(); detachLightbox();
removeZoomLocationDisc();
} }
} }
}); });
...@@ -213,6 +218,33 @@ ...@@ -213,6 +218,33 @@
}); });
} }
}); });
function addZoomLocationDisc() {
if ($zoomArea.find($('.edx-zoom-loop'))) {
$('.edx-zoom-loop').remove();
}
var discHeight = $zoomed.height() / 5,
discWidth = $zoomed.width() / 5,
zoomAreaHeight = $zoomArea.height(),
zoomAreaWidth = $zoomArea.width(),
zoomAreaCenterX = (zoomAreaWidth / 2) - (discWidth / 2),
zoomAreaCenterY = (zoomAreaHeight / 2) - (discHeight / 2);
$disc = $('<div class="edx-zoom-loop"></div>')
.height(discHeight)
.width(discWidth)
.css({
left: zoomAreaCenterX,
top: zoomAreaCenterY
});
$zoomArea.append($disc);
};
function removeZoomLocationDisc() {
$disc.remove();
};
function magnifyWithMouse(left, top, centered) { function magnifyWithMouse(left, top, centered) {
var heightDiff = $magnifiedImage.height() / $targetImage.height(), var heightDiff = $magnifiedImage.height() / $targetImage.height(),
...@@ -221,8 +253,8 @@ ...@@ -221,8 +253,8 @@
magnifierLeft; magnifierLeft;
if (centered) { if (centered) {
magnifierTop = -$magnifiedImage.height() / 2; magnifierTop = (-$magnifiedImage.height() / 2) + ($zoomed.height() / 2);
magnifierLeft = -$magnifiedImage.width() / 2; magnifierLeft = (-$magnifiedImage.width() / 2) + ($zoomed.width() / 2);
} else { } else {
magnifierTop = (-(top - $targetImage.offset().top) * heightDiff) + (settings.height / 2); magnifierTop = (-(top - $targetImage.offset().top) * heightDiff) + (settings.height / 2);
magnifierLeft = (-(left - $targetImage.offset().left) * widthDiff) + (settings.width / 2); magnifierLeft = (-(left - $targetImage.offset().left) * widthDiff) + (settings.width / 2);
...@@ -235,21 +267,37 @@ ...@@ -235,21 +267,37 @@
}; };
function magnifyWithKeyboard(left, top, event) { function magnifyWithKeyboard(left, top, event) {
var newLeft, var largeLeft,
newTop; largeTop,
smallLeft,
smallTop;
event.preventDefault(); event.preventDefault();
newLeft = $magnifiedImage.css('left'); largeLeft = $magnifiedImage.css('left');
newLeft = newLeft.replace('px', ''); largeLeft = largeLeft.replace('px', '');
newLeft = parseInt(newLeft) + left; largeLeft = parseInt(largeLeft) + left;
newTop = $magnifiedImage.css('top');
newTop = newTop.replace('px', ''); largeTop = $magnifiedImage.css('top');
newTop = parseInt(newTop) + top; largeTop = largeTop.replace('px', '');
largeTop = parseInt(largeTop) + top;
smallLeft = $disc.css('left');
smallLeft = smallLeft.replace('px', '');
smallLeft = parseInt(smallLeft) - (left / 5);
smallTop = $disc.css('top');
smallTop = smallTop.replace('px', '');
smallTop = parseInt(smallTop) - (top / 5);
$magnifiedImage.css({ $magnifiedImage.css({
top: newTop + 'px', top: largeTop + 'px',
left: newLeft + 'px' left: largeLeft + 'px'
});
$disc.css({
top: smallTop + 'px',
left: smallLeft + 'px'
}); });
}; };
......
lms/static/sass/course/_image-zoom-tool.scss
...@@ -52,4 +52,15 @@ ...@@ -52,4 +52,15 @@
display: block; display: block;
} }
} }
.edx-zoom-loop {
position: absolute;
border-radius: 50%;
border-width: 1px;
border-style: solid;
border-color: $black;
box-shadow: inset 0 0 4px $blue;
background: transparent;
z-index: 20;
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment