Merge pull request #20 from francoischalifour/impl/clone-target

Clone target to support more cases
francoischalifour · Sep 30, 2017 · 5158cac · 5158cac
2 parents a6f424b + ccdabe9
commit 5158cac
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 78 deletions.
diff --git a/__tests__/__snapshots__/integration-test.js.snap b/__tests__/__snapshots__/integration-test.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`click on a detached image doesn’t add classes 1`] = `
+<body>
+  <img
+    class=""
+  />
+</body>
+`;
+
+exports[`click on an image renders correctly 1`] = `
+<body>
+  <img
+    class="medium-zoom-image"
+    style="visibility: hidden;"
+  />
+  <div
+    class="medium-zoom-overlay"
+    style="background-color: rgb(255, 255, 255);"
+  />
+  <img
+    class="medium-zoom-image medium-zoom-image--open"
+    style="position: absolute; top: 0px; left: 0px; width: 0px;"
+  />
+</body>
+`;
diff --git a/__tests__/__snapshots__/medium-zoom-test.js.snap b/__tests__/__snapshots__/medium-zoom-test.js.snap
@@ -22,35 +22,33 @@ exports[`hide renders correctly 1`] = `
 exports[`show renders correctly 1`] = `
 <body>
   <img
-    class="medium-zoom-image medium-zoom-image--open"
+    class="medium-zoom-image"
+    style="visibility: hidden;"
   />
   <div
     class="medium-zoom-overlay"
     style="background-color: rgb(255, 255, 255);"
   />
+  <img
+    class="medium-zoom-image medium-zoom-image--open"
+    style="position: absolute; top: 0px; left: 0px; width: 0px;"
+  />
 </body>
 `;
 
 exports[`show renders correctly with options overlay background 1`] = `
 <body>
   <img
-    class="medium-zoom-image medium-zoom-image--open"
+    class="medium-zoom-image"
+    style="visibility: hidden;"
   />
   <div
     class="medium-zoom-overlay"
     style="background-color: rgb(186, 218, 85);"
   />
-</body>
-`;
-
-exports[`update with background updates the background option, returns all options and renders correctly 1`] = `
-<body>
   <img
     class="medium-zoom-image medium-zoom-image--open"
-  />
-  <div
-    class="medium-zoom-overlay"
-    style="background-color: rgb(0, 0, 0);"
+    style="position: absolute; top: 0px; left: 0px; width: 0px;"
   />
 </body>
 `;
diff --git a/__tests__/integration-test.js b/__tests__/integration-test.js
@@ -3,25 +3,27 @@ const mediumZoom = require('../src/medium-zoom')
 
 global.requestAnimationFrame = cb => setTimeout(cb, 0)
 
-describe('click', () => {
-  const root = document.body
+const root = document.body
 
-  beforeEach(() => {
-    while (root.firstChild) {
-      root.removeChild(root.firstChild)
-    }
-  })
+beforeEach(() => {
+  while (root.firstChild) {
+    root.removeChild(root.firstChild)
+  }
+})
 
-  test('on an image adds classes', () => {
+describe('click', () => {
+  test('on an image renders correctly', () => {
     const image = document.createElement('img')
     root.appendChild(image)
 
     mediumZoom('img')
 
     image.click()
-    const classNames = [...image.classList]
 
-    expect(classNames).toEqual(['medium-zoom-image', 'medium-zoom-image--open'])
+    expect(image.className).toBe('medium-zoom-image')
+    expect(document.querySelector('.medium-zoom-image--open')).toBeTruthy()
+    expect(document.querySelector('.medium-zoom-overlay')).toBeTruthy()
+    expect(root).toMatchSnapshot()
   })
 
   test('on a detached image doesn’t add classes', () => {
@@ -34,5 +36,6 @@ describe('click', () => {
     image.click()
 
     expect(image.classList).toHaveLength(0)
+    expect(root).toMatchSnapshot()
   })
 })
diff --git a/__tests__/medium-zoom-test.js b/__tests__/medium-zoom-test.js
@@ -226,7 +226,7 @@ describe('update', () => {
 
     expect(options).toEqual(expected)
     expect(zoom.options).toEqual(expected)
-    expect(root).toMatchSnapshot()
+    expect(document.querySelector('.medium-zoom-overlay').style.backgroundColor).toBe('rgb(0, 0, 0)')
   })
 
   test('with scroll offset updates the scroll offset option and returns all options', () => {
@@ -285,9 +285,10 @@ describe('show', () => {
 
     const zoom = mediumZoom('img')
     zoom.show()
-    const classNames = [...image.classList]
 
-    expect(classNames).toEqual(['medium-zoom-image', 'medium-zoom-image--open'])
+    expect(image.className).toBe('medium-zoom-image')
+    expect(document.querySelector('.medium-zoom-image--open')).toBeTruthy()
+    expect(document.querySelector('.medium-zoom-overlay')).toBeTruthy()
     expect(root).toMatchSnapshot()
   })
 

diff --git a/examples/javascript/demo.js b/examples/javascript/demo.js
@@ -8,9 +8,7 @@
 
   // Add a zoom to be detached
   var zoomToDetach = mediumZoom('#zoom-detach')
-  setTimeout(function () {
-    zoomToDetach.detach()
-  }, 5000)
+  zoomToDetach.addEventListeners('hidden', zoomToDetach.detach)
 
   // Add zooms to a container
   var containerZoom = [

diff --git a/examples/javascript/development/index.html b/examples/javascript/development/index.html
@@ -160,9 +160,9 @@ <h1 class="header__title">Medium Zoom</h1>
         <img
           id="zoom-detach"
           src="../images/image-7.jpg"
-          alt="Zoom detached after 5 seconds"
+          alt="Zoom detached after being zoomed once"
         >
-        <figcaption>Zoom detached after 5 seconds</figcaption>
+        <figcaption>Zoom detached after being zoomed once</figcaption>
       </figure>
 
       <h2>Journal</h2>

diff --git a/examples/javascript/preview/index.html b/examples/javascript/preview/index.html
@@ -26,6 +26,7 @@ <h1 class="header__title">Medium Zoom</h1>
     </header>
 
     <article class="container">
+
       <figure>
         <img
           id="zoom-default"
@@ -160,11 +161,36 @@ <h1 class="header__title">Medium Zoom</h1>
         <img
           id="zoom-detach"
           src="../images/image-7.jpg"
-          alt="Zoom detached after 5 seconds"
+          alt="Zoom detached after being zoomed once"
         >
-        <figcaption>Zoom detached after 5 seconds</figcaption>
+        <figcaption>Zoom detached after being zoomed once</figcaption>
       </figure>
 
+      <h2>Images in `overflow: hidden` containers</h2>
+
+      <div class="layout">
+        <div class="content">
+          <div class="card">
+            <img class="container-overflow" src="https://images.unsplash.com/photo-1502508512528-19b6a9fa4e95?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1920&fit=max&s=3b05e061cf6220cd16eeed6adf3be515" alt="">
+          </div>
+          <div class="card">
+            <img class="container-overflow" src="https://images.unsplash.com/photo-1502772066658-3006ff41449b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1920&fit=max&s=6fa8ec1e3b33dc527d677aa37e14661a" alt="">
+          </div>
+          <div class="card">
+            <img class="container-overflow" src="https://images.unsplash.com/photo-1488217820102-3ef7cfe8bb4e?dpr=1&auto=compress,format&fit=crop&w=1920&h=&q=80&cs=tinysrgb&crop=" alt="">
+          </div>
+          <div class="card">
+            <img class="container-overflow" src="https://images.unsplash.com/photo-1495548774443-1f50ef99b0d2?dpr=1&auto=compress,format&fit=crop&w=1268&h=&q=80&cs=tinysrgb&crop=" alt="">
+          </div>
+          <div class="card">
+            <img class="container-overflow" src="https://images.unsplash.com/photo-1481671703460-040cb8a2d909?dpr=1&auto=compress,format&fit=crop&w=668&h=&q=80&cs=tinysrgb&crop=" alt="">
+          </div>
+          <div class="card">
+            <img class="container-overflow" src="https://images.unsplash.com/photo-1496806195556-91bdded94209?dpr=1&auto=compress,format&fit=crop&w=1350&h=&q=80&cs=tinysrgb&crop=" alt="">
+          </div>
+        </div>
+      </div>
+
       <h2>Journal</h2>
 
       <blockquote id="journal">
@@ -196,10 +222,12 @@ <h2>Getting started</h2>
       <p><a href="#">Back to top</a></p>
     </footer>
 
+    <script src="medium-zoom.min.js"></script>
     <script>
       console.info('You\'re in preview environment 🖥')
+
+      mediumZoom('.container-overflow')
     </script>
-    <script src="medium-zoom.min.js"></script>
     <script src="../demo.js"></script>
   </body>
 </html>
diff --git a/examples/javascript/style.css b/examples/javascript/style.css
@@ -216,3 +216,21 @@ pre {
     margin-left: -92px;
   }
 }
+
+.card {
+  vertical-align: middle;
+  display: inline-block;
+  box-sizing: border-box;
+  max-width: 350px;
+  width: 30%;
+  margin: 16px 4px;
+  background: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .24);
+}
+
+.card img {
+  width: 100%;
+  display: block;
+}
diff --git a/src/medium-zoom.css b/src/medium-zoom.css
@@ -18,7 +18,7 @@
 .medium-zoom-image {
   cursor: pointer;
   cursor: zoom-in;
-  transition: all 300ms;
+  transition: transform 300ms;
 }
 
 .medium-zoom-image--open {