materialbox tests added and overlay with transformed ancestor bug fixed

Author: acburst

_SpecRunner.html

@@ -36,6 +36,8 @@
 
   <script src="tests/spec/collapsible/collapsibleSpec.js"></script>
 
+  <script src="tests/spec/materialbox/materialboxSpec.js"></script>
+  
   <script src="tests/spec/scrollFire/scrollFireSpec.js"></script>
 
   <script src="tests/spec/select/selectSpec.js"></script>

bin/materialize.css

@@ -5649,9 +5649,9 @@ button.btn-floating {
 #materialbox-overlay {
   position: fixed;
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   background-color: #292929;
   z-index: 1000;
   will-change: opacity;

bin/materialize.js

@@ -92,10 +92,21 @@
             if (doneAnimating === true)
             returnToOriginal();
           });
-          // Animate Overlay
-          // Put before in origin image to preserve z-index layering.
-          origin.before(overlay);
-          overlay.velocity({opacity: 1},
+
+        // Put before in origin image to preserve z-index layering.
+        origin.before(overlay);
+
+        // Set dimensions if needed
+        var overlayOffset = overlay[0].getBoundingClientRect();
+        overlay.css({
+          width: windowWidth,
+          height: windowHeight,
+          left: -1 * overlayOffset.left,
+          top: -1 * overlayOffset.top
+        })
+
+        // Animate Overlay
+        overlay.velocity({opacity: 1},
                            {duration: inDuration, queue: false, easing: 'easeOutQuad'} );
 
         // Add and animate caption if it exists

css/ghpages-materialize.css

@@ -336,4 +336,4 @@ <h5 class="white-text">Connect</h5>
     </script>
 
   </body>
-</html>
+</html>

js/materialbox.js

@@ -1,32 +1,33 @@
 .materialboxed {
+  &:hover {
+    &:not(.active) {
+      opacity: .8;
+    }
+  }
+
   display: block;
   cursor: zoom-in;
   position: relative;
   transition: opacity .4s;
   -webkit-backface-visibility: hidden;
 
-  &:hover {
-    &:not(.active) {
-      opacity: .8;
-    }
+  &.active {
+    cursor: zoom-out;
   }
 }
 
-.materialboxed.active {
-  cursor: zoom-out;
-}
-
 #materialbox-overlay {
   position:fixed;
-  top:0;
-  left:0;
+  top: 0;
   right: 0;
   bottom: 0;
+  left: 0;
+
   background-color: #292929;
   z-index: 1000;
-
   will-change: opacity;
 }
+
 .materialbox-caption {
   position: fixed;
   display: none;

sass.html

@@ -361,4 +361,4 @@ <h5 class="white-text">Connect</h5>
     </script>
 
   </body>
-</html>
+</html>

sass/components/_materialbox.scss

@@ -48,6 +48,15 @@
   </div>
 </div>
 
+<div class="row">
+
+  <div class="col s6 right">
+    <div style="transform: translate3d(1px,1px,1px)">
+      <h3>Materialbox inside transformed parent</h3>
+      <img materialize="" class="materialboxed" width="650" src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?q=80&fm=jpg&s=643e44f5177366de6cc914c8bcfbe064">
+    </div>
+  </div>
+</div>
 
 
   <ul id="slide-out" class="side-nav fixed rtl grey darken-3 white-text center row">

side-nav.html

@@ -0,0 +1,3 @@
+<div id="transformTest" style="transform: translate3d(1px,1px,1px)">
+  <img class="materialboxed" width="650" src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?q=80&fm=jpg&s=643e44f5177366de6cc914c8bcfbe064">
+</div>

test/html/materialbox.html

@@ -0,0 +1,33 @@
+describe( 'Materialbox:', function() {
+  var transformMaterialbox;
+
+  beforeEach(function() {
+    loadFixtures('materialbox/materialboxFixture.html');
+  });
+
+  describe('Materialbox opens correctly with transformed ancestor', function() {
+    it('Opens a correctly placed overlay when clicked', function(done) {
+      transformMaterialbox = $('#transformTest');
+      $('.materialboxed').materialbox();
+
+      // Mouse click
+      transformMaterialbox.find('.materialboxed').trigger('click');
+      setTimeout(function() {
+        // Check overlay is attached
+        var overlay = transformMaterialbox.find('#materialbox-overlay');
+        var overlayRect = overlay[0].getBoundingClientRect();
+        var windowWidth = window.innerWidth;
+        var windowHeight = window.innerHeight;
+        expect(overlay).toExist('because it is generated on init');
+        expect(overlay).toBeVisible('because materialbox was clicked');
+        expect(overlayRect.top).toEqual(0);
+        expect(overlayRect.left).toEqual(0);
+        expect(overlayRect.width).toEqual(windowWidth);
+        expect(overlayRect.height).toEqual(windowHeight);
+
+        done();
+      }, 1000);
+    });
+  });
+
+});