Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Clone target to support more cases #20

Merged
merged 12 commits into from
Sep 30, 2017
Merged

Clone target to support more cases #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
acaeba4
Transition only the transform property
francoischalifour Sep 25, 2017
b6ecbc5
Clone target to allow zoom in overflow-hidden containers (#19)
francoischalifour Sep 25, 2017
619c517
Update tests to clone target
francoischalifour Sep 25, 2017
d3369cc
Add demo to preview new implementation
francoischalifour Sep 25, 2017
5342f48
Fix preview scripts
francoischalifour Sep 25, 2017
2b15025
Reset `transform` to empty string instead of 'none'
francoischalifour Sep 25, 2017
d02393a
Simplify `translateX` computation
francoischalifour Sep 25, 2017
3c4c2fe
Fix `hide` event thrown multiple times on scroll
francoischalifour Sep 29, 2017
fef808b
Add polyfills for scroll positions
francoischalifour Sep 29, 2017
6c7eb0f
Force `detach` when active target
francoischalifour Sep 30, 2017
df2a8f7
Remove all event listeners on `detach`
francoischalifour Sep 30, 2017
ccdabe9
Update `detach` example
francoischalifour Sep 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions __tests__/__snapshots__/integration-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
`;
20 changes: 9 additions & 11 deletions __tests__/__snapshots__/medium-zoom-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;
23 changes: 13 additions & 10 deletions __tests__/integration-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -34,5 +36,6 @@ describe('click', () => {
image.click()

expect(image.classList).toHaveLength(0)
expect(root).toMatchSnapshot()
})
})
7 changes: 4 additions & 3 deletions __tests__/medium-zoom-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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()
})

Expand Down
4 changes: 1 addition & 3 deletions examples/javascript/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
4 changes: 2 additions & 2 deletions examples/javascript/development/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
34 changes: 31 additions & 3 deletions examples/javascript/preview/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ <h1 class="header__title">Medium Zoom</h1>
</header>

<article class="container">

<figure>
<img
id="zoom-default"
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
18 changes: 18 additions & 0 deletions examples/javascript/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion src/medium-zoom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
.medium-zoom-image {
cursor: pointer;
cursor: zoom-in;
transition: all 300ms;
transition: transform 300ms;
}

.medium-zoom-image--open {
Expand Down
Loading