JS-255: Stabilization fixes for magnifier and gallery

magento · Oct 30, 2015 · f4bdb5d · f4bdb5d
1 parent eacba1c
commit f4bdb5d
Show file tree

Hide file tree

Showing 4 changed files with 548 additions and 435 deletions.
diff --git a/lib/web/mage/gallery/gallery.html b/lib/web/mage/gallery/gallery.html
@@ -7,7 +7,7 @@
 <div class="fotorama-item" data-gallery-role="gallery" tabindex="0">
     <div data-gallery-role="fotorama__focusable-start" tabindex="0"></div>
     <div class="fotorama__wrap fotorama__wrap--css3 fotorama__wrap--slide fotorama__wrap--toggle-arrows">
-        <div class="fotorama__stage">
+        <div class="fotorama__stage" data-fotorama-stage="fotorama__stage">
             <div class="fotorama__arr fotorama__arr--prev" tabindex="0" role="button" aria-label="Previos">
                 <div class="fotorama__arr__arr" data-gallery-role="arrow"></div>
             </div>
@@ -18,24 +18,24 @@
                 <div class="fotorama__arr__arr" data-gallery-role="arrow"></div>
             </div>
             <div class="fotorama__video-close"></div>
-            <div class="fotorama__zoom-in"></div>
-            <div class="fotorama__zoom-out"></div>
+            <div class="fotorama__zoom-in" data-gallery-role="fotorama__zoom-in" aria-label="Zoom in" role="button" tabindex="0"></div>
+            <div class="fotorama__zoom-out" data-gallery-role="fotorama__zoom-out" aria-label="Zoom out" role="button" tabindex="0"></div>
         </div>
         <div class="fotorama__nav-wrap" data-gallery-role="nav-wrap">
             <div class="fotorama__nav fotorama__nav--thumbs">
-                <div class="fotorama__fullscreen-icon" data-gallery-role="fotorama__fullscreen-icon" tabindex="0" role="button"></div>
-                <div class="fotorama__thumb__arr--left" tabindex="0" role="button" aria-label="<%= previous %>">
+                <div class="fotorama__fullscreen-icon" data-gallery-role="fotorama__fullscreen-icon" tabindex="0" aria-label="Exit fullscreen" role="button"></div>
+                <div class="fotorama__thumb__arr--left" tabindex="0" role="button" aria-label="Previos">
                     <div class="fotorama__thumb__arr" data-gallery-role="arrow"></div>
                 </div>
                 <div class="fotorama__nav__shaft">
                     <div class="fotorama__thumb-border"></div>
                 </div>
-                <div class="fotorama__thumb__arr--right" tabindex="0" role="button" aria-label="<%= next %>">
+                <div class="fotorama__thumb__arr--right" tabindex="0" role="button" aria-label="Next">
                     <div class="fotorama__thumb__arr" data-gallery-role="arrow"></div>
                 </div>
             </div>
         </div>
     </div>
     <div data-gallery-role="fotorama__focusable-end" tabindex="0"></div>
 </div>
-<div class="magnifier-preview" data-gallery-role="magnifier" id="preview"></div>
+<div class="magnifier-preview" data-gallery-role="magnifier" id="preview"></div>
diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less
@@ -8,6 +8,7 @@
 @fotorama_close_size: 30px;
 @size-fotorama-block: 50px;
 @fotorama-thumb-arrow: 30px;
+@fotorama-fullscreen-zoom-time: 0.3s;
 
 @import '../../css/source/lib/_lib.less'; // Global lib
 @import '../../css/source/_theme.less'; // Theme overrides
@@ -78,21 +79,30 @@
         &:extend(.fotorama-sprite);
         background-position: 0 (-@size-fotorama-block) !important;
     }
-
     .fotorama__zoom-in {
         top: 0;
         &:extend(.fotorama-sprite);
         background-position: 0 0 !important;
     }
 }
 
+.circle {
+    position: absolute;
+    background-color: silver;
+    opacity: 0.7;
+    border-radius: 100%;
+    height: 1px;
+    width: 1px;
+}
+
 .fotorama__zoom-in,
 .fotorama__zoom-out {
     display: none;
 }
 .fotorama__fullscreen {
     .fotorama__zoom-in,
     .fotorama__zoom-out {
+        overflow: hidden;
         position: absolute;
         width: 50px;
         height: 50px;
@@ -725,8 +735,13 @@
     display:  none;
 }
 
+.fotorama--fullscreen-icons {
+    .fotorama__fullscreen-icon {
+        display: none;
+    }
+}
+
 .fotorama__fullscreen-icon {
-    //display: none;
     &:focus {
         &:extend(.fotorama-focus);
         border-radius: 50%;
@@ -736,7 +751,7 @@
 
 .fotorama--fullscreen {
     .fotorama__fullscreen-icon {
-        //display: inline-block;
+        display: inline-block;
         background-position: (-@size-fotorama-block) 0;
     }
 }
@@ -1083,6 +1098,8 @@
         max-height: 100%;
         max-width: 100%;
         vertical-align: middle;
+        transition-duration: @fotorama-fullscreen-zoom-time;
+        transition-property: width, height, top, left;
     }
 }
 
@@ -1235,9 +1252,7 @@ body.fotorama__fullscreen {
     .magnify-fullimage {
         display: inline-block;
     }
-    .fotorama__stage__shaft {
-        //.fotorama__img {
-        //    display: none;
-        //}
+    .magnify-lens {
+        display: none !important;
     }
 }