Moving zoomed to top center, RTL Sass, reversing keys

cms/static/sass/elements/_vendor.scss

@@ -70,7 +70,7 @@
     .indicator {
         display: none;
         position: absolute;
-        left: 46%;
+        @include left(46%);
         top: 45%;
         width: 50px;
         height: 50px;
@@ -101,8 +101,9 @@
         position: absolute;
         height: 350px;
         width: 350px;
-        top: 10% !important;
-        right: -350px !important;
+        top: -375px;
+        @include left(50%);
+        @include margin-left(-175px);
         border-radius: 50%;
         border: 2px solid $gray-d4;
         background: $white;

common/lib/xmodule/xmodule/templates/html/zooming_image.yaml

@@ -42,6 +42,7 @@ data: |
       <div class="zooming-image-place" style="position: relative;">
         <a class="edx-zoom" href="https://studio.edx.org/c4x/edX/DemoX/asset/pathways_detail_01.png">
             <img alt="magnify" src="https://studio.edx.org/c4x/edX/DemoX/asset/pathways_overview_01.png" />
+            <span class="indicator icon fa fa-search-plus" aria-hidden="true"></span>
           </a>
         <div class="script_placeholder" data-src="https://studio.edx.org/c4x/edX/DemoX/asset/image-zoom-tool.js" />
       </div>

common/static/js/vendor/image-zoom-tool.js

@@ -53,24 +53,22 @@
                 filter: 'alpha(opacity=75)',
                 background: '#000'
             });
-            
+
             $errorMessage
                 .text(settings.errorMessage)
                     .css({
                         height: settings.height,
                         width: settings.width
                     });
-                    
+
             $loader.css({
                 height: settings.height,
                 width: settings.width
             });
 
-            $this.on('click keydown', function(event) {
+            $targetImage.on('click', function(event) {
                 event.preventDefault();
-            });
 
-            $targetImage.on('click', function(event) {
                 if (!$zoomed.hasClass('is-visible')) {
                     var left = event.pageX,
                         top = event.pageY;
@@ -80,7 +78,7 @@
                     }
 
                     setTimeout(function() {
-                        appendZoomed();
+                        appendZoomed(true);
                         magnifyWithMouse(left, top);
 
                         if (settings.lightbox == true) {
@@ -111,18 +109,16 @@
             }).mouseleave(function() {
                 pulseZoomed();
             });
-            
+
             $imageArea.on('keydown', function(event) {
                 var left = event.pageX,
                     top = event.pageY;
 
                 switch (event.which) {
-                    case keys.tab:
-                        return true;
-                        break;
-
                     case keys.enter:
                     case keys.space:
+                        event.preventDefault();
+
                         if (!$zoomed.hasClass('is-visible')) {
                             var left = event.pageX,
                                 top = event.pageY;
@@ -145,12 +141,9 @@
                     default:
                         return true;
                 }
-                
             });
-            
-            $zoomed.on('keydown', function(event) {
-                event.preventDefault();
 
+            $zoomed.on('keydown', function(event) {
                 var left,
                     top,
                     $zoomedImage = $zoomed.find('img'),
@@ -161,7 +154,7 @@
 
                 switch (event.which) {
                     case keys.esc:
-                    case keys.tab:
+                        event.preventDefault();
                         if ($zoomed.hasClass('is-visible')) {
                             detachZoomed();
 
@@ -174,21 +167,25 @@
                         break;
 
                     case keys.up:
-                        magnifyWithKeyboard(0, -1);
+                        // we move two spaces at a time
+                        magnifyWithKeyboard(0, 2, event);
                         break;
 
                     case keys.down:
-                        magnifyWithKeyboard(0, 1);
+                        // we move two spaces at a time
+                        magnifyWithKeyboard(0, -2, event);
                         break;
 
                     case keys.left:
-                        magnifyWithKeyboard(-1, 0);
+                        // we move two spaces at a time
+                        magnifyWithKeyboard(2, 0, event);
                         break;
 
                     case keys.right:
-                        magnifyWithKeyboard(1, 0);
+                        // we move two spaces at a time
+                        magnifyWithKeyboard(-2, 0, event);
                         break;
-                        
+
                     default:
                         return true;
                 }
@@ -206,11 +203,6 @@
 
             $(window).resize(function() {
                 if ($zoomed.is(':visible')) {
-                    // $zoomed.css({
-                    //     left: $targetImage.offset().left + ($targetImage.width() / 2) - ($zoomed.width() / 2),
-                    //     top: $targetImage.offset().top + ($targetImage.height() / 2) - ($zoomed.height() / 2)
-                    // });
-
                     $magnifiedImage.css({
                         left: -($magnifiedImage.width() / 2) + ($zoomed.width() / 2),
                         top: -($magnifiedImage.height() / 2) + ($zoomed.height() / 2)
@@ -242,11 +234,13 @@
                     left: magnifierLeft
                 });
             };
-            
-            function magnifyWithKeyboard(left, top) {
+
+            function magnifyWithKeyboard(left, top, event) {
                 var newLeft,
                     newTop;
 
+                event.preventDefault();
+
                 newLeft = $magnifiedImage.css('left');
                 newLeft = newLeft.replace('px', '');
                 newLeft = parseInt(newLeft) + left;
@@ -324,9 +318,6 @@
 
     $.fn.edxImageZoomTool.defaults = {
         zIndex: 1000,
-        // width: 150,
-        // height: 150,
-        // border: '2px solid #191919',
         fadeSpeed: 250,
         lightbox: true,
         errorMessage: 'Image load error'