├── .babelrc
├── .codesandbox
    └── ci.json
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    └── pull_request_template.md
├── .gitignore
├── .nvmrc
├── .prettierrc
├── .release-it.json
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── bundlesize.config.json
├── cypress.json
├── cypress
    ├── .eslintrc.js
    ├── integration
    │   └── stories.spec.js
    ├── plugins
    │   └── index.js
    ├── snapshots
    │   └── stories.spec.js
    │   │   ├── attributes
    │   │       ├── data-zoom-src-1.snap.png
    │   │       ├── srcset-1.snap.png
    │   │       ├── srcset-and-data-zoom-src-1.snap.png
    │   │       └── svg-1.snap.png
    │   │   └── options
    │   │       ├── background-(dark)-1.snap.png
    │   │       ├── background-(transparent)-1.snap.png
    │   │       ├── container-(coordinates-object)-1.snap.png
    │   │       ├── container-(dom-element)-1.snap.png
    │   │       ├── default-1.snap.png
    │   │       ├── margin-1.snap.png
    │   │       ├── scrolloffset-1.snap.png
    │   │       ├── template-(dropbox-paper)-1.snap.png
    │   │       └── template-(facebook)-1.snap.png
    └── support
    │   ├── commands.js
    │   └── index.js
├── docs
    ├── container.md
    └── template.md
├── examples
    ├── dropbox-paper-template
    │   ├── .gitignore
    │   ├── README.md
    │   ├── index.html
    │   ├── package.json
    │   ├── src
    │   │   ├── images
    │   │   │   ├── image-1.jpg
    │   │   │   └── image-2.jpg
    │   │   ├── index.js
    │   │   ├── reset.css
    │   │   └── style.css
    │   └── yarn.lock
    ├── facebook-template
    │   ├── .gitignore
    │   ├── README.md
    │   ├── index.html
    │   ├── package.json
    │   ├── src
    │   │   ├── images
    │   │   │   ├── image-1.jpg
    │   │   │   └── image-2.jpg
    │   │   ├── index.js
    │   │   ├── reset.css
    │   │   └── style.css
    │   └── yarn.lock
    ├── react-markdown
    │   ├── .gitignore
    │   ├── README.md
    │   ├── index.html
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── images
    │   │   │   ├── image-1.jpg
    │   │   │   ├── image-2.jpg
    │   │   │   └── image-3.jpg
    │   ├── src
    │   │   ├── App.tsx
    │   │   ├── main.tsx
    │   │   ├── reset.css
    │   │   ├── style.css
    │   │   └── vite-env.d.ts
    │   ├── tsconfig.json
    │   ├── tsconfig.node.json
    │   ├── vite.config.ts
    │   └── yarn.lock
    ├── react
    │   ├── .gitignore
    │   ├── README.md
    │   ├── index.html
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── images
    │   │   │   ├── image-1.jpg
    │   │   │   ├── image-2.jpg
    │   │   │   └── image-3.jpg
    │   ├── src
    │   │   ├── App.tsx
    │   │   ├── ImageZoom.tsx
    │   │   ├── main.tsx
    │   │   ├── reset.css
    │   │   ├── style.css
    │   │   └── vite-env.d.ts
    │   ├── tsconfig.json
    │   ├── tsconfig.node.json
    │   ├── vite.config.ts
    │   └── yarn.lock
    ├── svelte
    │   ├── .gitignore
    │   ├── README.md
    │   ├── index.html
    │   ├── jsconfig.json
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── images
    │   │   │   ├── image-1.jpg
    │   │   │   ├── image-2.jpg
    │   │   │   └── image-3.jpg
    │   ├── src
    │   │   ├── App.svelte
    │   │   ├── app.css
    │   │   ├── lib
    │   │   │   └── ImageZoom.svelte
    │   │   ├── main.js
    │   │   ├── reset.css
    │   │   ├── style.css
    │   │   └── vite-env.d.ts
    │   ├── svelte.config.js
    │   ├── vite.config.js
    │   └── yarn.lock
    ├── vanilla
    │   ├── .gitignore
    │   ├── README.md
    │   ├── index.html
    │   ├── package.json
    │   ├── src
    │   │   ├── images
    │   │   │   ├── image-1.jpg
    │   │   │   └── image-2.jpg
    │   │   ├── index.js
    │   │   ├── reset.css
    │   │   └── style.css
    │   └── yarn.lock
    └── vue
    │   ├── .gitignore
    │   ├── README.md
    │   ├── index.html
    │   ├── package.json
    │   ├── public
    │       ├── favicon.ico
    │       └── images
    │       │   ├── image-1.jpg
    │       │   ├── image-2.jpg
    │       │   └── image-3.jpg
    │   ├── src
    │       ├── App.vue
    │       ├── components
    │       │   └── ImageZoom.vue
    │       ├── main.ts
    │       ├── reset.css
    │       ├── style.css
    │       └── vite-env.d.ts
    │   ├── tsconfig.json
    │   ├── tsconfig.node.json
    │   ├── vite.config.ts
    │   └── yarn.lock
├── husky.config.js
├── jest.config.js
├── logo.svg
├── netlify.toml
├── package.json
├── rollup.config.js
├── scripts
    ├── release-examples.sh
    └── update-examples.js
├── src
    ├── __mocks__
    │   └── styleMock.js
    ├── __tests__
    │   ├── __snapshots__
    │   │   └── medium-zoom.test.js.snap
    │   ├── index.test.js
    │   └── medium-zoom.test.js
    ├── index.js
    ├── medium-zoom.css
    ├── medium-zoom.d.ts
    ├── medium-zoom.js
    └── utils.js
├── stories
    ├── attach.stories.js
    ├── attributes.stories.js
    ├── clone.stories.js
    ├── close.stories.js
    ├── config
    │   ├── addons.js
    │   ├── config.js
    │   ├── decorators.js
    │   ├── preview-head.html
    │   ├── style.css
    │   └── webpack.config.js
    ├── detach.stories.js
    ├── getImages.stories.js
    ├── getOptions.stories.js
    ├── getZoomedImage.stories.js
    ├── images
    │   ├── crab.svg
    │   ├── image-1.jpg
    │   ├── image-1.thumbnail.jpg
    │   ├── image-1x1000.jpg
    │   ├── image-1x1200.jpg
    │   ├── image-1x300.jpg
    │   ├── image-1x600.jpg
    │   ├── image-1x800.jpg
    │   ├── image-2.jpg
    │   ├── image-2.thumbnail.jpg
    │   ├── image-3.jpg
    │   ├── image-3.thumbnail.jpg
    │   ├── image-4.jpg
    │   ├── image-4.thumbnail.jpg
    │   ├── image-5.jpg
    │   ├── image-5.thumbnail.jpg
    │   ├── image-6.jpg
    │   ├── image-6.thumbnail.jpg
    │   ├── image-7.jpg
    │   └── image-7.thumbnail.jpg
    ├── off.stories.js
    ├── on.stories.js
    ├── open.stories.js
    ├── options.stories.js
    ├── toggle.stories.js
    └── update.stories.js
├── website
    ├── .editorconfig
    ├── .eslintignore
    ├── .eslintrc.js
    ├── .gitignore
    ├── .prettierrc
    ├── LICENSE
    ├── README.md
    ├── icons
    │   ├── favicon.ico
    │   └── favicon.png
    ├── index.html
    ├── manifest.webmanifest
    ├── package.json
    ├── src
    │   ├── images
    │   │   ├── image-1.jpg
    │   │   ├── image-2.jpg
    │   │   ├── image-3.jpg
    │   │   ├── image-4.jpg
    │   │   ├── image-5.jpg
    │   │   ├── image-6.jpg
    │   │   └── image-7.jpg
    │   ├── index.js
    │   ├── placeholders.js
    │   ├── reset.css
    │   └── style.css
    └── yarn.lock
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "loose": true,
 6 |       "targets": {
 7 |         "browsers": "ie >= 10"
 8 |       }
 9 |     }]
10 |   ],
11 |   "env": {
12 |     "test": {
13 |       "presets": [["env"]]
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/.codesandbox/ci.json:
--------------------------------------------------------------------------------
1 | {
2 |   "sandboxes": ["/examples/vanilla"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | **/node_modules/**
2 | /coverage
3 | /dist
4 | /examples
5 | /stories
6 | /website
7 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: ['eslint:recommended', 'airbnb-base', 'prettier'],
 3 |   parser: 'babel-eslint',
 4 |   env: {
 5 |     es6: true,
 6 |     browser: true,
 7 |     node: true,
 8 |     jest: true,
 9 |   },
10 |   globals: {
11 |     __TEST__: false,
12 |   },
13 |   rules: {
14 |     'no-underscore-dangle': 0,
15 |     'no-use-before-define': 0,
16 |     'no-shadow': 0,
17 |     'no-console': ['error', { allow: ['warn', 'error'] }],
18 |   },
19 | }
20 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Did something not work?
 4 | ---
 5 | 
 6 | <!--
 7 |   Thank you for opening an issue 🙌
 8 |   This template helps you create an effective bug report.
 9 | -->
10 | 
11 | ## Bug description
12 | 
13 | > A clear and concise description of what the bug is.
14 | 
15 | ## How to reproduce
16 | 
17 | > A list of the steps to reproduce the bug.
18 | 
19 | 1. Run `mediumZoom(selector, options)`
20 | 1. Click on the image
21 | 1. See error
22 | 
23 | ## Expected behavior
24 | 
25 | > A clear and concise description of what you expected to happen.
26 | 
27 | ## Reproducible example
28 | 
29 | <!--
30 |   - Go to the vanilla JavaScript example on CodeSandbox: https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/vanilla
31 |   - Fork it
32 |   - Reproduce the bug you noticed
33 |   - Share the link of the sandbox
34 | -->
35 | 
36 | [Link to the bug reproduction](https://codesandbox.io/s/ADD_THE_SANDBOX_ID)
37 | 
38 | ## Environment
39 | 
40 |  - Browser: name / version
41 |  - `medium-zoom` version:
42 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Would you like to add something?
 4 | ---
 5 | 
 6 | <!--
 7 |   Thank you for opening an issue 🙌
 8 |   This template helps you create an effective feature request.
 9 | -->
10 | 
11 | ## The problem
12 | 
13 | > A concise description of why you want a new feature.
14 | 
15 | ## Solution
16 | 
17 | > A clear description of what you want to happen.
18 | 
19 | ## Implementation
20 | 
21 | > Do you have an idea how it could be implemented?
22 | 


--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 |   Thank you for submitting a pull request 🙌
 3 |   This template helps you create an effective feature report.
 4 | -->
 5 | 
 6 | ## Summary
 7 | 
 8 | <!-- Explain why you are making this change and link related issues (#ISSUE_NUMBER) -->
 9 | 
10 | ## Result
11 | 
12 | <!-- Explain what you've changed and what's the result! -->
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | /node_modules
 2 | /coverage
 3 | /cypress/screenshots
 4 | /cypress/videos
 5 | /dist
 6 | /storybook
 7 | 
 8 | .DS_Store
 9 | package-lock.json
10 | *.log
11 | .vscode
12 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 10.16.0
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "semi": false,
4 |   "trailingComma": "es5"
5 | }
6 | 


--------------------------------------------------------------------------------
/.release-it.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "increment": "conventional:angular",
 3 |   "scripts": {
 4 |     "beforeStart": "yarn run lint && yarn run test --colors && yarn run build && yarn run test:size && yarn run test:cypress"
 5 |   },
 6 |   "git": {
 7 |     "requireUpstream": false,
 8 |     "requireCleanWorkingDir": false,
 9 |     "commitMessage": "chore(release): %s",
10 |     "changelog": "yarn run changelog:update"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | cache:
 3 |   directories:
 4 |     - ~/.cache
 5 | before_install:
 6 |   - curl -o- -L yarnpkg.com/install.sh | bash -s -- --version 1.13.0
 7 |   - export PATH=$HOME/.yarn/bin:$PATH
 8 | install: yarn install --frozen-lockfile
 9 | before_script: yarn run build
10 | script:
11 |   - '${SCRIPT}'
12 | env:
13 |   matrix:
14 |     - SCRIPT="yarn run lint"
15 |     - SCRIPT="yarn run test --coverage --colors"
16 |     # - SCRIPT="yarn run test:cypress:record $CYPRESS_RECORD_KEY"
17 |     - SCRIPT="yarn run test:size"
18 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # [1.1.0](https://github.com/francoischalifour/medium-zoom/compare/1.0.8...1.1.0) (2023-11-16)
  2 | 
  3 | ### Features
  4 | 
  5 | - introduce pure bundle (JS and CSS separated) ([#204](https://github.com/francoischalifour/medium-zoom/issues/204) and [#206](https://github.com/francoischalifour/medium-zoom/issues/206)) ([0a05b46](https://github.com/francoischalifour/medium-zoom/commit/0a05b4626b0f2820ae5bc3e2b0ef081244679750))
  6 | 
  7 | ## [1.0.8](https://github.com/francoischalifour/medium-zoom/compare/1.0.7...1.0.8) (2022-11-15)
  8 | 
  9 | ### Bug Fixes
 10 | 
 11 | - support images in `<picture>` elements with `currentSrc` ([#194](https://github.com/francoischalifour/medium-zoom/issues/194)) ([32ee39f](https://github.com/francoischalifour/medium-zoom/commit/32ee39f424f91e2f34e5e06e7ddc6bf8e4be9d23))
 12 | 
 13 | ## [1.0.7](https://github.com/francoischalifour/medium-zoom/compare/1.0.6...1.0.7) (2022-11-14)
 14 | 
 15 | ### Bug Fixes
 16 | 
 17 | - ensure zooming out doesn't happen ([#176](https://github.com/francoischalifour/medium-zoom/issues/176)) ([b920940](https://github.com/francoischalifour/medium-zoom/commit/b920940c061d2dcb280e873ac4ca577130d4efc1))
 18 | - remove `loading` attribute on HD target ([#186](https://github.com/francoischalifour/medium-zoom/issues/186)) ([dd01423](https://github.com/francoischalifour/medium-zoom/commit/dd01423b983a228be348c81ef9347d688a166cb6))
 19 | 
 20 | ## [1.0.6](https://github.com/francoischalifour/medium-zoom/compare/1.0.5...1.0.6) (2020-07-08)
 21 | 
 22 | ### Bug Fixes
 23 | 
 24 | - support lazy loading images on Firefox ([#158](https://github.com/francoischalifour/medium-zoom/issues/158)) ([aebb316](https://github.com/francoischalifour/medium-zoom/commit/aebb31636cb9e87f3a9b25f8bd0007f0269c1ae7))
 25 | 
 26 | ## [1.0.5](https://github.com/francoischalifour/medium-zoom/compare/1.0.4...1.0.5) (2019-12-07)
 27 | 
 28 | ### Fixed
 29 | 
 30 | - Give zoom transition higher priority ([#148](https://github.com/francoischalifour/medium-zoom/issues/148)) ([25b3524](https://github.com/francoischalifour/medium-zoom/commit/25b3524bb76e19a5e8dc46e32cadca3db7fedbef)), closes [#110](https://github.com/francoischalifour/medium-zoom/issues/110)
 31 | 
 32 | ## [1.0.4](https://github.com/francoischalifour/medium-zoom/compare/1.0.3...1.0.4) (2019-04-06)
 33 | 
 34 | ### Fixed
 35 | 
 36 | - Bring SSR compatibility by not using window outside of main function ([#95](https://github.com/francoischalifour/medium-zoom/issues/95)) ([541e8f0](https://github.com/francoischalifour/medium-zoom/commit/541e8f0f9fb06cf9c72bb92541b87a5153a15d18)), closes [#94](https://github.com/francoischalifour/medium-zoom/issues/94)
 37 | 
 38 | ## [1.0.3](https://github.com/francoischalifour/medium-zoom/compare/1.0.2...1.0.3) (2019-01-20)
 39 | 
 40 | ### Changed
 41 | 
 42 | - Export default export type as ESM module ([#82](https://github.com/francoischalifour/medium-zoom/issues/82)) ([ed45fcb](https://github.com/francoischalifour/medium-zoom/commit/ed45fcbe0ae318f70411d8975c0c557ccf81f92b))
 43 | 
 44 | ### Fixed
 45 | 
 46 | - Use document viewport size ([#78](https://github.com/francoischalifour/medium-zoom/issues/78)) ([9a06f9b](https://github.com/francoischalifour/medium-zoom/commit/9a06f9b41d644b3d8b17c0782518036620f31a11)), closes [#75](https://github.com/francoischalifour/medium-zoom/issues/75)
 47 | - Improve type definitions ([#85](https://github.com/francoischalifour/medium-zoom/issues/85)) ([702a767](https://github.com/francoischalifour/medium-zoom/commit/702a7670fa8f5a680c5d0abd1f2ea308f97ad395))
 48 | 
 49 | ## [1.0.2](https://github.com/francoischalifour/medium-zoom/compare/1.0.1...1.0.2) (2018-09-05)
 50 | 
 51 | ### Added
 52 | 
 53 | - Improve TypeScript definition (#73)
 54 | 
 55 | ## [1.0.1](https://github.com/francoischalifour/medium-zoom/compare/1.0.0...1.0.1) (2018-08-29)
 56 | 
 57 | ### Fixed
 58 | 
 59 | - Don't prevent behavior of all clicks ([#72](https://github.com/francoischalifour/medium-zoom/issues/72)) ([71eebf9](https://github.com/francoischalifour/medium-zoom/commit/71eebf90f09a81c013731871b8cab92a4243a557)), closes [#71](https://github.com/francoischalifour/medium-zoom/issues/71)
 60 | 
 61 | # [1.0.0](https://github.com/francoischalifour/medium-zoom/compare/v0.4.0...1.0.0) (2018-08-28)
 62 | 
 63 | ### Added
 64 | 
 65 | - **Methods become chainable**. All methods except getters and animation methods (`open()`, `close()` and `toggle()`) return the zoom object to allow method calls to be chained.
 66 | 
 67 | ```js
 68 | const zoom = mediumZoom()
 69 | 
 70 | zoom
 71 |   .attach('#image-1', '#image-2')
 72 |   .on('open', () => zoom.update({ background: 'yellow' }))
 73 |   .open()
 74 | ```
 75 | 
 76 | - **Animation methods return promises**. `open()`, `close()` and `toggle()` return promises resolving with the zoom for acting accordingly when the animation is completed. To remain compatible with IE10, promises are converted to no-operation functions if unavailable.
 77 | 
 78 | ```js
 79 | const zoom = mediumZoom('[data-zoom]')
 80 | 
 81 | zoom.open().then(() => zoom.update({ background: 'yellow' }))
 82 | ```
 83 | 
 84 | - **Options**
 85 | 
 86 |   - `background` supports the [`background` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/background) (not only `background-color`)
 87 | 
 88 | - **Methods**
 89 | 
 90 |   - `attach(...selectors: string[]|Element[]|NodeList[]|Array[]) => Zoom`
 91 |   - `clone(options?: object) => Zoom`
 92 |   - `getOptions() => object`
 93 |   - `getImages() => Element[]`
 94 |   - `getZoomedImage() => Element`
 95 | 
 96 | - **Events**
 97 | 
 98 |   - "update" is fired when the `update` method is called
 99 | 
100 | - Add **TypeScript definitions**
101 | 
102 | - Improve **documentation**
103 | 
104 | ### Fixed
105 | 
106 | - HD image scales the first time on Firefox (264c81f9d54b7272fa260616f117c3149be89123)
107 | - Support `srcset` attribute (#51)
108 | - Support SVG sources (#56)
109 | 
110 | ### Breaking changes
111 | 
112 | - **Imports**. If you're using CommonJS, you'll need to change the require statement:
113 | 
114 | ```diff
115 | - const mediumZoom = require('medium-zoom')
116 | + const mediumZoom = require('medium-zoom').default
117 | ```
118 | 
119 | - **No images selected by default**. Prior to version 1, all scaled images (via HTML or CSS properties) were added to the zoom when calling `mediumZoom()`. Now, calling `mediumZoom()` without selector does not attach any images to the zoom. This change is necessary for having a more predictable behavior and a more composable API.
120 | 
121 | - **Options**
122 | 
123 |   - `metaClick` was removed
124 | 
125 | - **Methods**
126 | 
127 |   - `show() => void` → `open({ target?: Element }) => Promise<Zoom>`
128 |   - `hide() => void` → `close() => Promise<Zoom>`
129 |   - `toggle() => void` → `toggle({ target?: Element }) => Promise<Zoom>`
130 |   - `detach() => void` → `detach(...selectors: string[]|Element[]|NodeList[]|Array[]) => Zoom`
131 |   - `update(options: object) => void` → `update(options: object) => Zoom`
132 |   - `addEventListeners(type: string, listener: Function) => void` → `on(type: string, listener: Function, options?: object) => Zoom`
133 |   - `removeEventListeners(type: string, listener: Function) => void` → `off(type: string, listener: Function, options?: object) => Zoom`
134 | 
135 | - **Attributes**
136 | 
137 |   - `data-zoom-target` → `data-zoom-src`
138 | 
139 | - **Events**
140 |   - "show" → "open"
141 |   - "shown" → "opened"
142 |   - "hide" → "close"
143 |   - "hidden" → "closed"
144 | 
145 | # [0.4.0](https://github.com/francoischalifour/medium-zoom/compare/v0.3.0...v0.4.0) (2018-03-09)
146 | 
147 | ### Added
148 | 
149 | - Support for IE ([#35](https://github.com/francoischalifour/medium-zoom/issues/35)) ([bd485fc](https://github.com/francoischalifour/medium-zoom/commit/bd485fc0416b4d3f8d7d1b6fd4e523f42ca2d8d8)), closes [#34](https://github.com/francoischalifour/medium-zoom/issues/34)
150 | 
151 | ### Fixed
152 | 
153 | - Calling `.detach()` when having a zoomed image: 9fa798d3fe96ae7060f316995b84eaacf3ce8a11
154 | 
155 | # [0.3.0](https://github.com/francoischalifour/medium-zoom/compare/v0.2.0...v0.3.0) (2017-12-07)
156 | 
157 | ### Added
158 | 
159 | - Add support for `template`s and `container`s: d0d1ec141ffe744d059dddcfc08b6e830b7c17c9
160 | 
161 | # [0.2.0](https://github.com/francoischalifour/medium-zoom/compare/v0.1.8...v0.2.0) (2017-10-01)
162 | 
163 | ### Added
164 | 
165 | - Add HD support: 1db9607dce2aa348d9be465208395d125b16e728
166 | 
167 | ### Changed
168 | 
169 | - Rewrite core implementation: 5158cace958acee0e89a4c9358704ed504756254
170 | - Update library description: a6f424bae2da534563154c26b49046367d7db215
171 | - Use less restrictive CSS rules: acaeba4bf96576b65867c3effc2710bd9d029dc0
172 | - Reduce latency on click to unzoom: 3c4c2fef2c2fca2ce542e57e13ce3198fe7ba2bb
173 | 
174 | ### Fixed
175 | 
176 | - Fix `hide` event being thrown multiple times on scroll: 3c4c2fef2c2fca2ce542e57e13ce3198fe7ba2bb
177 | 
178 | ## [0.1.8](https://github.com/francoischalifour/medium-zoom/compare/v0.1.7...v0.1.8) (2017-09-17)
179 | 
180 | ### Fixed
181 | 
182 | - Do not trigger the zoom when target is `null` (can happen on fast double click): 3f795b44877af341ed65ae7c1bc764cc5122cdfb
183 | 
184 | ## [0.1.7](https://github.com/francoischalifour/medium-zoom/compare/v0.1.6...v0.1.7) (2017-07-21)
185 | 
186 | ### Fixed
187 | 
188 | - Don't ignore margin on floating images: 384f0b1576e66f16844e0482eb1653a0c9479ad2
189 | 
190 | ## [0.1.6](https://github.com/francoischalifour/medium-zoom/compare/v0.1.5...v0.1.6) (2017-07-19)
191 | 
192 | ### Fixed
193 | 
194 | - Support `scrollTop` position on Firefox: ee13718c38a7a4ba486cacfb50f2861dd1adb8ad
195 | 
196 | ## [0.1.5](https://github.com/francoischalifour/medium-zoom/compare/v0.1.4...v0.1.5) (2017-06-10)
197 | 
198 | ### Changed
199 | 
200 | - Wrong selector trows a `TypeError` instead of a `SyntaxError`: 38e6292ce83d1b54f4fd80cce03d737c3872a58f
201 | - Library now fully exported by webpack: 5c7944b5e2de19828c8f9298fdc7a03a9146e42b
202 | - Production version is used when importing the library: 3a7d8ebc0ddd2cb142ccb8519de6fc57e8e8ba3e
203 | 
204 | ## [0.1.4](https://github.com/francoischalifour/medium-zoom/compare/v0.1.3...v0.1.4) (2017-05-31)
205 | 
206 | ### Added
207 | 
208 | - Support NodeLists, HTMLCollections and Nodes (#8): aa8ff0ff6743e0bc011ea162ff068a2ddbb0f9ab
209 | 
210 | ### Changed
211 | 
212 | - Apply the default selector only when the plugin is given none (#7): aa8ff0ff6743e0bc011ea162ff068a2ddbb0f9ab
213 | 
214 | ## [0.1.3](https://github.com/francoischalifour/medium-zoom/compare/v0.1.2...v0.1.3) (2017-04-01)
215 | 
216 | ### Fixed
217 | 
218 | - Center image when the doctype is not declared (#4): 95be45a63837bcd282433728f8db8759bd5777cb
219 | - Ignore zero-pixel scroll offset: 3cd34640ab26b04b802ce39ce74f092180e3cb00
220 | 
221 | ## [0.1.2](https://github.com/francoischalifour/medium-zoom/compare/v0.1.1...v0.1.2) (2017-03-04)
222 | 
223 | ### Added
224 | 
225 | - `.detach()` method that unsubscribe images from the zoom (#2): 2ceb5120ebc35bb457a08474e0d39430e253ab08
226 | 
227 | ## [0.1.1](https://github.com/francoischalifour/medium-zoom/compare/v0.1.0...v0.1.1) (2016-10-06)
228 | 
229 | ### Fixed
230 | 
231 | - Export the plugin for npm usage (#1): affca211ac6999f1d2c554205d5b216c37fc7c1c
232 | 
233 | # 0.1.0 (2016-07-28)
234 | 
235 | Initial release.
236 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | # Contributing to Medium Zoom
  2 | 
  3 | Thank you for getting involved in Medium Zoom!
  4 | 
  5 | ## Concept
  6 | 
  7 | This module is meant to reproduce the zoom from [Medium](http://medium.com). We want to provide a great UX (User Experience) with a lightweight vanilla JavaScript solution. Thus, this package must remain focused on this core principle, yet be extended with a composable API.
  8 | 
  9 | ## Folder structure
 10 | 
 11 | ```
 12 | ▸ cypress           The end-to-end tests written for Cypress
 13 | ▸ examples          The Medium Zoom featured examples available on CodeSandbox
 14 | ▸ src               The source code of the module
 15 |   ▸ __tests__       The tests for the module API
 16 | ▸ stories           The stories for the Medium Zoom Storybook
 17 | ▸ website           The Medium Zoom website source code
 18 | ```
 19 | 
 20 | ## Requirements
 21 | 
 22 | - [Node](https://nodejs.org)
 23 | - [Yarn](https://yarnpkg.com)
 24 | 
 25 | ## Conventions
 26 | 
 27 | ### Commits
 28 | 
 29 | This project follows the [conventional changelog](https://conventionalcommits.org/) guidelines. All commit messages should be formatted using the following scheme:
 30 | 
 31 | ```
 32 | type(scope): description
 33 | ```
 34 | 
 35 | ## Workflow
 36 | 
 37 | ### Filing issues
 38 | 
 39 | Reporting a bug or requesting a feature is always welcome. Feel free to [open an issue](https://github.com/francoischalifour/medium-zoom/issues/new/choose) with the according template which helps you create an effective report.
 40 | 
 41 | ### Submit code
 42 | 
 43 | After discussing in an issue about the need to change the code, you will need to follow these steps:
 44 | 
 45 | - [Fork the repository](https://help.github.com/articles/fork-a-repo/)
 46 | - Clone your fork
 47 | - Install the dependencies: `yarn`
 48 | - For a **documentation** change:
 49 |   - Create a branch `docs/what-you-change`
 50 |   - Make the changes
 51 |   - Run `yarn run format`
 52 | - For a **bug fix**:
 53 |   - Create a branch `fix/issue-number`
 54 |   - [Write a test](src/__tests__/medium-zoom.test.js) to reproduce the bug (run `yarn run test`)
 55 |   - Fix the bug in the [source code](src/medium-zoom.js)
 56 |   - Make your test pass the previous bug
 57 |   - Run `yarn run format` and fix problems if any
 58 | - For a **feature**:
 59 |   - Create a branch `feat/name-of-the-feature`
 60 |   - Add the feature to the [source code](src/medium-zoom.js)
 61 |   - Create a story in the [storybook](stories) showcasing the feature
 62 |   - [Write a test](src/__tests__/medium-zoom.test.js) to ensure it's working as expected (run `yarn run test`)
 63 |   - Run `yarn run format` and fix problems if any
 64 | - [Create a pull request](https://help.github.com/articles/creating-a-pull-request/)
 65 | 
 66 | We will then review your pull request!
 67 | 
 68 | ### Testing
 69 | 
 70 | #### Unit and integration tests
 71 | 
 72 | [Unit and integration tests](src/__tests__) with [Jest](https://jestjs.io) ensure that the API works as documented.
 73 | 
 74 | ###### Commands
 75 | 
 76 | - Run the tests: `yarn run test`
 77 | - Watch the tests: `yarn run test --watch`
 78 | - Run the tests with coverage: `yarn run test --coverage`
 79 | 
 80 | #### End-to-end tests
 81 | 
 82 | [End-to-end tests](cypress/integration) with [Cypress](https://cypress.io) take screenshots of the stories to ensure that the zoom looks as expected.
 83 | 
 84 | ###### Commands
 85 | 
 86 | - Open the Cypress UI: `yarn run test:cypress:open`
 87 | - Run the Cypress tests: `yarn run test:cypress:run`
 88 | 
 89 | ### Releasing
 90 | 
 91 | We rely on [release-it](https://github.com/webpro/release-it) to release new versions of this package.
 92 | 
 93 | #### Release flow
 94 | 
 95 | The release flow goes through these steps:
 96 | 
 97 | 1. Run acceptance tests
 98 | 1. Bump the project version in [`package.json`](package.json) based on [the commits](#conventions)
 99 | 1. Commit the release version
100 | 1. Create the new Git tag for this release
101 | 1. Push to GitHub
102 | 1. Publish to npm
103 | 
104 | #### Release steps
105 | 
106 | ##### Unstable version
107 | 
108 | 1. Make sure you're on the `next` branch
109 | 1. Run `npm run release:next` (_do not_ use `yarn` for releasing)
110 | 1. Follow the command-line instructions
111 | 
112 | ##### Stable version
113 | 
114 | 1. Make sure you're on the `master` branch
115 | 1. Run `npm run release` (_do not_ use `yarn` for releasing)
116 | 1. Follow the command-line instructions
117 | 
118 | ---
119 | 
120 | Thank you for contributing!
121 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016-present François Chalifour
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/bundlesize.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [
 3 |     {
 4 |       "path": "dist/style.css",
 5 |       "maxSize": "250 B"
 6 |     },
 7 |     {
 8 |       "path": "dist/medium-zoom.esm.js",
 9 |       "maxSize": "5 kB"
10 |     },
11 |     {
12 |       "path": "dist/medium-zoom.min.js",
13 |       "maxSize": "3.25 kB"
14 |     },
15 |     {
16 |       "path": "dist/pure/index.js",
17 |       "maxSize": "4.75 kB"
18 |     },
19 |     {
20 |       "path": "dist/pure/medium-zoom.min.umd.js",
21 |       "maxSize": "2.75 kB"
22 |     }
23 |   ]
24 | }
25 | 


--------------------------------------------------------------------------------
/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 |   "projectId": "w2qxb8",
3 |   "baseUrl": "http://localhost:9001",
4 |   "viewportWidth": 720,
5 |   "viewportHeight": 480,
6 |   "fixturesFolder": false
7 | }
8 | 


--------------------------------------------------------------------------------
/cypress/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: ['cypress'],
 3 |   env: {
 4 |     'cypress/globals': true,
 5 |   },
 6 |   rules: {
 7 |     'import/no-extraneous-dependencies': 0,
 8 |   },
 9 | }
10 | 


--------------------------------------------------------------------------------
/cypress/integration/stories.spec.js:
--------------------------------------------------------------------------------
 1 | const LOADING_DURATION = 200
 2 | const ANIMATION_DURATION = 400
 3 | 
 4 | const storybook = [
 5 |   {
 6 |     kind: 'attributes',
 7 |     stories: [
 8 |       { name: 'data-zoom-src' },
 9 |       { name: 'srcset' },
10 |       { name: 'srcset and data-zoom-src' },
11 |       { name: 'SVG' },
12 |     ],
13 |   },
14 |   {
15 |     kind: 'options',
16 |     stories: [
17 |       { name: 'default' },
18 |       { name: 'background (dark)' },
19 |       { name: 'background (transparent)' },
20 |       { name: 'margin' },
21 |       { name: 'scrollOffset' },
22 |       { name: 'container (DOM element)' },
23 |       { name: 'container (coordinates object)' },
24 |       { name: 'template (Dropbox Paper)' },
25 |       { name: 'template (Facebook)' },
26 |     ],
27 |   },
28 | ]
29 | 
30 | storybook.forEach(category => {
31 |   describe(category.kind, () => {
32 |     category.stories.forEach(story => {
33 |       it(story.name, () => {
34 |         const queryParams = {
35 |           full: 1,
36 |           addons: 0,
37 |           stories: 0,
38 |           selectedKind: encodeURI(category.kind),
39 |           selectedStory: encodeURI(story.name),
40 |         }
41 | 
42 |         const urlParams = Object.entries(queryParams)
43 |           .map(param => param.join('='))
44 |           .join('&')
45 | 
46 |         cy.visit(`/?${urlParams}`)
47 |         cy.wait(LOADING_DURATION)
48 | 
49 |         cy.findInStory('.medium-zoom-image').each(($image, index) => {
50 |           $image.click()
51 |           cy.wait(ANIMATION_DURATION)
52 | 
53 |           cy.matchImageSnapshot(
54 |             `${category.kind}/${[
55 |               story.name.toLowerCase().replace(/\s/g, '-'),
56 |               index + 1,
57 |             ].join('-')}`,
58 |             {
59 |               failureThreshold: 0.26, // threshold for entire image to accept scrollbars depending on the OS (especially for Travis)
60 |               failureThresholdType: 'percent',
61 |               customDiffConfig: {
62 |                 threshold: 0.1,
63 |               },
64 |             }
65 |           )
66 | 
67 |           const $zoomedImage = cy.getInStory('.medium-zoom-image--opened')
68 | 
69 |           if ($zoomedImage.length) {
70 |             $zoomedImage.click()
71 |             cy.wait(ANIMATION_DURATION)
72 |           }
73 |         })
74 |       })
75 |     })
76 |   })
77 | })
78 | 


--------------------------------------------------------------------------------
/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin')
2 | 
3 | module.exports = on => {
4 |   addMatchImageSnapshotPlugin(on)
5 | }
6 | 


--------------------------------------------------------------------------------
/cypress/snapshots/stories.spec.js/attributes/data-zoom-src-1.snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/cypress/snapshots/stories.spec.js/attributes/data-zoom-src-1.snap.png


--------------------------------------------------------------------------------
/cypress/snapshots/stories.spec.js/attributes/srcset-1.snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/cypress/snapshots/stories.spec.js/attributes/srcset-1.snap.png


--------------------------------------------------------------------------------
/cypress/snapshots/stories.spec.js/attributes/srcset-and-data-zoom-src-1.snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/cypress/snapshots/stories.spec.js/attributes/srcset-and-data-zoom-src-1.snap.png


--------------------------------------------------------------------------------
/cypress/snapshots/stories.spec.js/attributes/svg-1.snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/cypress/snapshots/stories.spec.js/attributes/svg-1.snap.png


--------------------------------------------------------------------------------
/cypress/snapshots/stories.spec.js/options/background-(dark)-1.snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/cypress/snapshots/stories.spec.js/options/background-(dark)-1.snap.png


--------------------------------------------------------------------------------
/cypress/snapshots/stories.spec.js/options/background-(transparent)-1.snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/cypress/snapshots/stories.spec.js/options/background-(transparent)-1.snap.png


--------------------------------------------------------------------------------
/cypress/snapshots/stories.spec.js/options/container-(coordinates-object)-1.snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/cypress/snapshots/stories.spec.js/options/container-(coordinates-object)-1.snap.png


--------------------------------------------------------------------------------
/cypress/snapshots/stories.spec.js/options/container-(dom-element)-1.snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/cypress/snapshots/stories.spec.js/options/container-(dom-element)-1.snap.png


--------------------------------------------------------------------------------
/cypress/snapshots/stories.spec.js/options/default-1.snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/cypress/snapshots/stories.spec.js/options/default-1.snap.png


--------------------------------------------------------------------------------
/cypress/snapshots/stories.spec.js/options/margin-1.snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/cypress/snapshots/stories.spec.js/options/margin-1.snap.png


--------------------------------------------------------------------------------
/cypress/snapshots/stories.spec.js/options/scrolloffset-1.snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/cypress/snapshots/stories.spec.js/options/scrolloffset-1.snap.png


--------------------------------------------------------------------------------
/cypress/snapshots/stories.spec.js/options/template-(dropbox-paper)-1.snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/cypress/snapshots/stories.spec.js/options/template-(dropbox-paper)-1.snap.png


--------------------------------------------------------------------------------
/cypress/snapshots/stories.spec.js/options/template-(facebook)-1.snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/cypress/snapshots/stories.spec.js/options/template-(facebook)-1.snap.png


--------------------------------------------------------------------------------
/cypress/support/commands.js:
--------------------------------------------------------------------------------
 1 | import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command'
 2 | 
 3 | addMatchImageSnapshotCommand()
 4 | 
 5 | Cypress.Commands.add('getInStory', getInStory)
 6 | Cypress.Commands.add('findInStory', findInStory)
 7 | 
 8 | function getInStory(selector) {
 9 |   return cy.get('#storybook-preview-iframe').then($iframe => {
10 |     const doc = $iframe.contents()
11 | 
12 |     return cy.wrap(doc.get(selector))
13 |   })
14 | }
15 | 
16 | function findInStory(selector) {
17 |   return cy.get('#storybook-preview-iframe').then($iframe => {
18 |     const doc = $iframe.contents()
19 | 
20 |     return cy.wrap(doc.find(selector))
21 |   })
22 | }
23 | 


--------------------------------------------------------------------------------
/cypress/support/index.js:
--------------------------------------------------------------------------------
1 | import './commands'
2 | 


--------------------------------------------------------------------------------
/docs/container.md:
--------------------------------------------------------------------------------
 1 | # Using a custom viewport
 2 | 
 3 | The zoom is by default rendered in the window viewport. You can also render your image in any element of the DOM, or any custom coordinates with the `container` option.
 4 | 
 5 | ## Rendering in a DOM Element
 6 | 
 7 | ```html
 8 | <article>
 9 |   <p>My article...</p>
10 |   <img src="image.jpg" alt="My image">
11 |   <div id="zoom-container"></div>
12 | </article>
13 | 
14 | <script>
15 |   mediumZoom('img', {
16 |     container: '#zoom-container'
17 |   })
18 | </script>
19 | ```
20 | 
21 | [Check the example →](https://medium-zoom.francoischalifour.com/storybook/?selectedKind=options&selectedStory=container%20%28DOM%20element%29)
22 | 
23 | ## Rendering with coordinates
24 | 
25 | If you don't already have an element in your DOM to specify the position of the zoom, you can pass an object with the following properties as `number`s:
26 | 
27 | ```js
28 | mediumZoom('img', {
29 |   container: {
30 |     width: 720,
31 |     height: 480,
32 |     top: 64,
33 |     bottom: 64,
34 |     right: 0,
35 |     left: 0,
36 |   },
37 | })
38 | ```
39 | 
40 | These properties behave very much like [`Element.getBoundingClientRect()`](https://developer.mozilla.org/docs/Web/API/Element/getBoundingClientRect). They will get merged with the default ones so you don't need to specify all of them.
41 | 
42 | The default `width` and `height` are `window.innerWidth` and `window.innerHeight`. Others are set to `0`.
43 | 
44 | [Check the example →](https://medium-zoom.francoischalifour.com/storybook/?selectedKind=options&selectedStory=container%20%28coordinates%20object%29)
45 | 


--------------------------------------------------------------------------------
/docs/template.md:
--------------------------------------------------------------------------------
 1 | # Using a custom template
 2 | 
 3 | You might want to render the zoom in your own template. You could reproduce zooms as seen on [Facebook](https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/facebook-template) or [Dropbox Paper](https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/dropbox-paper-template). This is possible with the `template` option.
 4 | 
 5 | 1. Create a [`template`](https://developer.mozilla.org/docs/Web/HTML/Element/template) element
 6 | 2. Add the template selector or the element to the `template` option
 7 | 
 8 | ```html
 9 | <template id="zoom-template">
10 |   <div>
11 |     <header>My image zoom template</header>
12 |     <div id="zoom-container"></div>
13 |     <aside>Comment on my image</aside>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 |   mediumZoom('[data-zoom]', {
19 |     template: '#zoom-template',
20 |     container: '#zoom-container'
21 |   })
22 | </script>
23 | ```
24 | 
25 | [Using a container](container.md) within a template is possible.
26 | 
27 | ## Examples
28 | 
29 | - [Dropbox Paper](https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/dropbox-paper-template)
30 | - [Facebook](https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/facebook-template)
31 | 


--------------------------------------------------------------------------------
/examples/dropbox-paper-template/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /dist
3 | /.cache
4 | 


--------------------------------------------------------------------------------
/examples/dropbox-paper-template/README.md:
--------------------------------------------------------------------------------
 1 | # Dropbox Paper template
 2 | 
 3 | > Source code for a Dropbox Paper template example.
 4 | 
 5 | [![Preview](https://user-images.githubusercontent.com/6137112/32421182-c55c3a76-c263-11e7-80ce-be7cb35efcc9.png)](https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/dropbox-paper-template?view=preview)
 6 | 
 7 | <p align="center">
 8 |   <a href="https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/dropbox-paper-template">
 9 |     <img alt="Edit Dropbox Paper Template Example" src="https://codesandbox.io/static/img/play-codesandbox.svg">
10 |   </a>
11 | </p>
12 | 
13 | ## Usage
14 | 
15 | * Install dependencies: `yarn`
16 | * Run: `yarn start`
17 | 


--------------------------------------------------------------------------------
/examples/dropbox-paper-template/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <meta name="theme-color" content="#0070e0" />
 7 | 
 8 |     <link href="src/reset.css" rel="stylesheet" />
 9 |     <link href="src/style.css" rel="stylesheet" />
10 | 
11 |     <title>Medium Zoom | Dropbox Paper Demo</title>
12 |   </head>
13 | 
14 |   <body>
15 |     <template id="template-dropbox-paper">
16 |       <div class="paper-wrapper">
17 |         <section class="paper-main" data-zoom-close>
18 |           <header class="paper-header">
19 |             <svg class="paper-close" data-zoom-close viewBox="0 0 24 24">
20 |               <path
21 |                 d="M8.817 7.403a1 1 0 0 0-1.414 1.414L10.586 12l-3.183 3.183a1 1 0 0 0 1.414 1.415L12 13.415l3.183 3.183a1 1 0 0 0 1.415-1.415L13.415 12l3.183-3.183a1 1 0 0 0-1.415-1.414L12 10.586 8.817 7.403z"
22 |                 fill-rule="evenodd"
23 |               ></path>
24 |             </svg>
25 |           </header>
26 |           <div class="paper-container" data-zoom-container></div>
27 |         </section>
28 |         <aside class="paper-sidebar">
29 |           <header class="paper-sidebar__header">
30 |             <textarea
31 |               class="paper-sidebar__textarea"
32 |               rows="1"
33 |               placeholder="Write a caption"
34 |             ></textarea>
35 |           </header>
36 |           <section class="paper-sidebar__content">
37 |             <textarea
38 |               class="paper-sidebar__textarea paper-sidebar__textarea_comment"
39 |               rows="1"
40 |               placeholder="New comment"
41 |             ></textarea>
42 |           </section>
43 |         </aside>
44 |       </div>
45 |     </template>
46 | 
47 |     <article class="container">
48 |       <h1>Dropbox Paper Demo</h1>
49 | 
50 |       <img
51 |         src="src/images/image-1.jpg"
52 |         alt="Zoom 1 with Dropbox Paper template"
53 |       />
54 | 
55 |       <p>
56 |         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora
57 |         praesentium cupiditate fugit voluptas, rem eligendi, voluptatem
58 |         molestias pariatur atque amet, dicta, similique beatae optio quos! Hic
59 |         necessitatibus dicta magni, tempore.
60 |       </p>
61 | 
62 |       <img
63 |         src="src/images/image-2.jpg"
64 |         alt="Zoom 2 with Dropbox Paper template"
65 |       />
66 |     </article>
67 | 
68 |     <script src="src/index.js"></script>
69 |   </body>
70 | </html>
71 | 


--------------------------------------------------------------------------------
/examples/dropbox-paper-template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@medium-zoom/dropbox-paper-template-example",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "main": "index.html",
 6 |   "scripts": {
 7 |     "start": "parcel index.html --open",
 8 |     "build": "parcel build index.html"
 9 |   },
10 |   "dependencies": {
11 |     "medium-zoom": "1.0.8"
12 |   },
13 |   "devDependencies": {
14 |     "parcel-bundler": "1.12.4"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/dropbox-paper-template/src/images/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/dropbox-paper-template/src/images/image-1.jpg


--------------------------------------------------------------------------------
/examples/dropbox-paper-template/src/images/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/dropbox-paper-template/src/images/image-2.jpg


--------------------------------------------------------------------------------
/examples/dropbox-paper-template/src/index.js:
--------------------------------------------------------------------------------
 1 | import mediumZoom from 'medium-zoom'
 2 | 
 3 | const zoomPaper = mediumZoom('.container img', {
 4 |   background: 'rgba(247, 249, 250, 0.97)',
 5 |   margin: 16,
 6 |   template: '#template-dropbox-paper',
 7 |   container: '[data-zoom-container]',
 8 | })
 9 | 
10 | // You can start manipulating the DOM after the `opened` event has been triggered
11 | zoomPaper.on('opened', () => {
12 |   const closeButton = document.querySelector('[data-zoom-close]')
13 |   closeButton.addEventListener('click', () => zoomPaper.close())
14 | })
15 | 
16 | // Block scroll on zoom
17 | zoomPaper.on('open', () => {
18 |   document.body.style.overflow = 'hidden'
19 | })
20 | zoomPaper.on('close', () => {
21 |   document.body.style.overflow = ''
22 | })
23 | 


--------------------------------------------------------------------------------
/examples/dropbox-paper-template/src/reset.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 |   margin: 0;
20 |   padding: 0;
21 |   border: 0;
22 |   font-size: 100%;
23 |   font: inherit;
24 |   vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 |   display: block;
30 | }
31 | body {
32 |   line-height: 1;
33 | }
34 | ol, ul {
35 |   list-style: none;
36 | }
37 | blockquote, q {
38 |   quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 |   content: '';
43 |   content: none;
44 | }
45 | table {
46 |   border-collapse: collapse;
47 |   border-spacing: 0;
48 | }
49 | 


--------------------------------------------------------------------------------
/examples/dropbox-paper-template/src/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | body {
  6 |   font-family: 'AtlasGrotesk-dmc', -apple-system, BlinkMacSystemFont, 'Segoe UI',
  7 |     Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  8 |   font-size: 20px;
  9 |   color: #212121;
 10 |   background-color: #fff;
 11 |   text-rendering: optimizeLegibility;
 12 |   -webkit-font-smoothing: antialiased;
 13 |   -moz-osx-font-smoothing: grayscale;
 14 | }
 15 | 
 16 | h1 {
 17 |   font-size: 2em;
 18 |   margin-bottom: 2em;
 19 | }
 20 | 
 21 | p {
 22 |   line-height: 1.5;
 23 |   margin: 2em 0;
 24 | }
 25 | 
 26 | img {
 27 |   max-width: 100%;
 28 |   height: auto;
 29 | }
 30 | 
 31 | .container {
 32 |   width: 100%;
 33 |   max-width: 768px;
 34 |   margin: 48px auto;
 35 |   padding: 16px;
 36 | }
 37 | 
 38 | .paper-wrapper {
 39 |   position: fixed;
 40 |   display: flex;
 41 |   top: 0;
 42 |   left: 0;
 43 |   width: 100%;
 44 |   height: 100vh;
 45 | }
 46 | 
 47 | .paper-container {
 48 |   width: 100%;
 49 |   height: calc(100% - 64px);
 50 |   margin: 0 auto;
 51 | }
 52 | 
 53 | .paper-header {
 54 |   display: flex;
 55 |   align-items: center;
 56 |   height: 64px;
 57 |   padding: 16px;
 58 | }
 59 | 
 60 | .paper-main {
 61 |   flex: 1;
 62 |   height: 100%;
 63 | }
 64 | 
 65 | .paper-close {
 66 |   width: 24px;
 67 |   cursor: pointer;
 68 |   fill: #637282;
 69 | }
 70 | 
 71 | .paper-sidebar {
 72 |   width: 290px;
 73 |   border-left: 1px solid #e6e8eb;
 74 |   background-color: #fff;
 75 |   padding: 32px 0 16px 0;
 76 | }
 77 | 
 78 | @media (max-width: 800px) {
 79 |   .paper-sidebar {
 80 |     display: none;
 81 |   }
 82 | }
 83 | 
 84 | .paper-sidebar__header,
 85 | .paper-sidebar__content {
 86 |   padding: 16px;
 87 | }
 88 | 
 89 | .paper-sidebar__header {
 90 |   border-bottom: 1px solid #e6e8eb;
 91 | }
 92 | 
 93 | .paper-sidebar__textarea {
 94 |   outline: none;
 95 |   width: 100%;
 96 |   border: none;
 97 |   background: none;
 98 |   font: inherit;
 99 |   font-size: 0.9rem;
100 |   color: #637282;
101 | }
102 | 
103 | .paper-sidebar__textarea::placeholder {
104 |   color: #c1c7cd;
105 | }
106 | 
107 | .paper-sidebar__textarea_comment {
108 |   width: 100%;
109 |   padding: 16px;
110 |   border-radius: 5px;
111 |   border: 1px solid rgba(99, 114, 130, 0.4);
112 | }
113 | 


--------------------------------------------------------------------------------
/examples/facebook-template/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .cache
4 | 


--------------------------------------------------------------------------------
/examples/facebook-template/README.md:
--------------------------------------------------------------------------------
 1 | # Facebook template
 2 | 
 3 | > Source code for a Facebook template example.
 4 | 
 5 | [![Preview](https://user-images.githubusercontent.com/6137112/32421170-9c37500e-c263-11e7-8ef0-07a388f36210.png)](https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/facebook-template?view=preview)
 6 | 
 7 | <p align="center">
 8 |   <a href="https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/facebook-template">
 9 |     <img alt="Edit Facebook Template Example" src="https://codesandbox.io/static/img/play-codesandbox.svg">
10 |   </a>
11 | </p>
12 | 
13 | ## Usage
14 | 
15 | * Install dependencies: `yarn`
16 | * Run: `yarn start`
17 | 


--------------------------------------------------------------------------------
/examples/facebook-template/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <meta name="theme-color" content="#3b5998" />
 7 | 
 8 |     <link href="src/reset.css" rel="stylesheet" />
 9 |     <link href="src/style.css" rel="stylesheet" />
10 | 
11 |     <title>Medium Zoom | Facebook Demo</title>
12 |   </head>
13 | 
14 |   <body>
15 |     <template id="template-facebook">
16 |       <div class="facebook-wrapper">
17 |         <svg class="facebook-close" data-zoom-close viewBox="0 0 24 24">
18 |           <path
19 |             d="M8.817 7.403a1 1 0 0 0-1.414 1.414L10.586 12l-3.183 3.183a1 1 0 0 0 1.414 1.415L12 13.415l3.183 3.183a1 1 0 0 0 1.415-1.415L13.415 12l3.183-3.183a1 1 0 0 0-1.415-1.414L12 10.586 8.817 7.403z"
20 |             fill-rule="evenodd"
21 |           ></path>
22 |         </svg>
23 |         <section class="facebook-main" data-zoom-container></section>
24 |         <aside class="facebook-sidebar"></aside>
25 |       </div>
26 |     </template>
27 | 
28 |     <article class="container">
29 |       <h1>Facebook Demo</h1>
30 | 
31 |       <img src="src/images/image-1.jpg" alt="Zoom 1 with Facebook template" />
32 | 
33 |       <p>
34 |         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora
35 |         praesentium cupiditate fugit voluptas, rem eligendi, voluptatem
36 |         molestias pariatur atque amet, dicta, similique beatae optio quos! Hic
37 |         necessitatibus dicta magni, tempore.
38 |       </p>
39 | 
40 |       <img src="src/images/image-2.jpg" alt="Zoom 2 with Facebook template" />
41 |     </article>
42 | 
43 |     <script src="src/index.js"></script>
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/examples/facebook-template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@medium-zoom/facebook-template-example",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "main": "index.html",
 6 |   "scripts": {
 7 |     "start": "parcel index.html --open",
 8 |     "build": "parcel build index.html"
 9 |   },
10 |   "dependencies": {
11 |     "medium-zoom": "1.0.8"
12 |   },
13 |   "devDependencies": {
14 |     "parcel-bundler": "1.12.4"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/facebook-template/src/images/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/facebook-template/src/images/image-1.jpg


--------------------------------------------------------------------------------
/examples/facebook-template/src/images/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/facebook-template/src/images/image-2.jpg


--------------------------------------------------------------------------------
/examples/facebook-template/src/index.js:
--------------------------------------------------------------------------------
 1 | import mediumZoom from 'medium-zoom'
 2 | 
 3 | const zoomFacebook = mediumZoom('.container img', {
 4 |   background: 'rgba(0, 0, 0, 0.9)',
 5 |   template: '#template-facebook',
 6 |   container: '[data-zoom-container]',
 7 | })
 8 | 
 9 | // You can start manipulating the DOM after the `opened` event has been triggered
10 | zoomFacebook.on('opened', () => {
11 |   const closeButton = document.querySelector('[data-zoom-close]')
12 |   closeButton.addEventListener('click', () => zoomFacebook.close())
13 | })
14 | 
15 | // Block scroll on zoom
16 | zoomFacebook.on('open', () => {
17 |   document.body.style.overflow = 'hidden'
18 | })
19 | 
20 | zoomFacebook.on('close', () => {
21 |   document.body.style.overflow = ''
22 | })
23 | 


--------------------------------------------------------------------------------
/examples/facebook-template/src/reset.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 |   margin: 0;
20 |   padding: 0;
21 |   border: 0;
22 |   font-size: 100%;
23 |   font: inherit;
24 |   vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 |   display: block;
30 | }
31 | body {
32 |   line-height: 1;
33 | }
34 | ol, ul {
35 |   list-style: none;
36 | }
37 | blockquote, q {
38 |   quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 |   content: '';
43 |   content: none;
44 | }
45 | table {
46 |   border-collapse: collapse;
47 |   border-spacing: 0;
48 | }
49 | 


--------------------------------------------------------------------------------
/examples/facebook-template/src/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   font-family: 'AtlasGrotesk-dmc', -apple-system, BlinkMacSystemFont, 'Segoe UI',
 7 |     Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 8 |   font-size: 20px;
 9 |   color: #212121;
10 |   background-color: #fff;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | h1 {
17 |   font-size: 2em;
18 |   margin-bottom: 2em;
19 | }
20 | 
21 | p {
22 |   line-height: 1.5;
23 |   margin: 2em 0;
24 | }
25 | 
26 | img {
27 |   max-width: 100%;
28 |   height: auto;
29 | }
30 | 
31 | .container {
32 |   width: 100%;
33 |   max-width: 768px;
34 |   margin: 48px auto;
35 |   padding: 16px;
36 | }
37 | 
38 | .facebook-wrapper {
39 |   position: fixed;
40 |   display: flex;
41 |   top: 0;
42 |   height: 520px;
43 |   top: 0;
44 |   bottom: 0;
45 |   left: 4rem;
46 |   right: 4rem;
47 |   margin: auto;
48 |   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
49 | }
50 | 
51 | .facebook-main {
52 |   flex: 1;
53 |   height: 100%;
54 |   background-color: #000;
55 | }
56 | 
57 | .facebook-sidebar {
58 |   width: 360px;
59 |   background-color: #fff;
60 |   padding: 32px 0 16px 0;
61 | }
62 | 
63 | @media (max-width: 800px) {
64 |   .facebook-sidebar {
65 |     display: none;
66 |   }
67 | }
68 | 
69 | .facebook-close {
70 |   position: fixed;
71 |   top: 8px;
72 |   right: 8px;
73 |   width: 32px;
74 |   cursor: pointer;
75 |   fill: #ddd;
76 | }
77 | 


--------------------------------------------------------------------------------
/examples/react-markdown/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/examples/react-markdown/README.md:
--------------------------------------------------------------------------------
 1 | # Medium Zoom React Markdown Example
 2 | 
 3 | This example reads Markdown in a React component and attaches the zoom on the Markdown images.
 4 | 
 5 | [![Edit React Markdown Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/react-markdown?file=/src/App.tsx)
 6 | 
 7 | ## Usage
 8 | 
 9 | - Install dependencies: `yarn`
10 | - Run: `yarn dev`
11 | 


--------------------------------------------------------------------------------
/examples/react-markdown/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta
 6 |       name="viewport"
 7 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 8 |     />
 9 |     <meta name="theme-color" content="#000" />
10 |     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
11 |     <title>Medium Zoom | React Markdown Demo</title>
12 |   </head>
13 |   <body>
14 |     <div id="root"></div>
15 |     <script type="module" src="/src/main.tsx"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/examples/react-markdown/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@medium-zoom/react-markdown-example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc && vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "medium-zoom": "1.0.8",
13 |     "react": "18.2.0",
14 |     "react-dom": "18.2.0",
15 |     "react-markdown": "8.0.6"
16 |   },
17 |   "devDependencies": {
18 |     "@types/react": "^18.0.28",
19 |     "@types/react-dom": "^18.0.11",
20 |     "@vitejs/plugin-react": "3.1.0",
21 |     "typescript": "4.9.3",
22 |     "vite": "4.2.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/examples/react-markdown/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/react-markdown/public/favicon.ico


--------------------------------------------------------------------------------
/examples/react-markdown/public/images/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/react-markdown/public/images/image-1.jpg


--------------------------------------------------------------------------------
/examples/react-markdown/public/images/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/react-markdown/public/images/image-2.jpg


--------------------------------------------------------------------------------
/examples/react-markdown/public/images/image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/react-markdown/public/images/image-3.jpg


--------------------------------------------------------------------------------
/examples/react-markdown/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react'
 2 | import ReactMarkdown from 'react-markdown'
 3 | import mediumZoom from 'medium-zoom'
 4 | 
 5 | const markdown = `
 6 | ![Zoom 1](images/image-1.jpg)
 7 | 
 8 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora praesentium cupiditate fugit voluptas, rem eligendi, voluptatem molestias. Doloremque sit voluptatum odio maiores provident consequuntur accusantium saepe.
 9 | 
10 | ![Zoom 2](images/image-2.jpg)
11 | 
12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
13 | Ea dolores quaerat, quis modi nostrum sequi adipisci ratione esse blanditiis error beatae vel non vero dolor nemo. Animi nemo quisquam ducimus!
14 | 
15 | ![Zoom 3](images/image-3.jpg)
16 | `
17 | 
18 | export function App() {
19 |   useEffect(() => {
20 |     const zoom = mediumZoom('.container img')
21 | 
22 |     return () => {
23 |       zoom.detach()
24 |     }
25 |   }, [])
26 | 
27 |   return (
28 |     <article className="container">
29 |       <h1>Medium Zoom React Markdown demo</h1>
30 | 
31 |       <ReactMarkdown children={markdown} />
32 |     </article>
33 |   )
34 | }
35 | 


--------------------------------------------------------------------------------
/examples/react-markdown/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | 
 4 | import { App } from './App'
 5 | 
 6 | import './reset.css'
 7 | import './style.css'
 8 | 
 9 | ReactDOM.createRoot(document.getElementById('root')!).render(
10 |   <React.StrictMode>
11 |     <App />
12 |   </React.StrictMode>
13 | )
14 | 


--------------------------------------------------------------------------------
/examples/react-markdown/src/reset.css:
--------------------------------------------------------------------------------
  1 | /* http://meyerweb.com/eric/tools/css/reset/
  2 |    v2.0 | 20110126
  3 |    License: none (public domain)
  4 | */
  5 | 
  6 | html,
  7 | body,
  8 | div,
  9 | span,
 10 | applet,
 11 | object,
 12 | iframe,
 13 | h1,
 14 | h2,
 15 | h3,
 16 | h4,
 17 | h5,
 18 | h6,
 19 | p,
 20 | blockquote,
 21 | pre,
 22 | a,
 23 | abbr,
 24 | acronym,
 25 | address,
 26 | big,
 27 | cite,
 28 | code,
 29 | del,
 30 | dfn,
 31 | em,
 32 | img,
 33 | ins,
 34 | kbd,
 35 | q,
 36 | s,
 37 | samp,
 38 | small,
 39 | strike,
 40 | strong,
 41 | sub,
 42 | sup,
 43 | tt,
 44 | var,
 45 | b,
 46 | u,
 47 | i,
 48 | center,
 49 | dl,
 50 | dt,
 51 | dd,
 52 | ol,
 53 | ul,
 54 | li,
 55 | fieldset,
 56 | form,
 57 | label,
 58 | legend,
 59 | table,
 60 | caption,
 61 | tbody,
 62 | tfoot,
 63 | thead,
 64 | tr,
 65 | th,
 66 | td,
 67 | article,
 68 | aside,
 69 | canvas,
 70 | details,
 71 | embed,
 72 | figure,
 73 | figcaption,
 74 | footer,
 75 | header,
 76 | hgroup,
 77 | menu,
 78 | nav,
 79 | output,
 80 | ruby,
 81 | section,
 82 | summary,
 83 | time,
 84 | mark,
 85 | audio,
 86 | video {
 87 |   margin: 0;
 88 |   padding: 0;
 89 |   border: 0;
 90 |   font-size: 100%;
 91 |   font: inherit;
 92 |   vertical-align: baseline;
 93 | }
 94 | /* HTML5 display-role reset for older browsers */
 95 | article,
 96 | aside,
 97 | details,
 98 | figcaption,
 99 | figure,
100 | footer,
101 | header,
102 | hgroup,
103 | menu,
104 | nav,
105 | section {
106 |   display: block;
107 | }
108 | body {
109 |   line-height: 1;
110 | }
111 | ol,
112 | ul {
113 |   list-style: none;
114 | }
115 | blockquote,
116 | q {
117 |   quotes: none;
118 | }
119 | blockquote:before,
120 | blockquote:after,
121 | q:before,
122 | q:after {
123 |   content: '';
124 |   content: none;
125 | }
126 | table {
127 |   border-collapse: collapse;
128 |   border-spacing: 0;
129 | }
130 | 


--------------------------------------------------------------------------------
/examples/react-markdown/src/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   font-family: 'AtlasGrotesk-dmc', -apple-system, BlinkMacSystemFont, 'Segoe UI',
 7 |     Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 8 |   font-size: 20px;
 9 |   color: #212121;
10 |   background-color: #fff;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | h1 {
17 |   font-size: 2em;
18 |   margin-bottom: 2em;
19 | }
20 | 
21 | p {
22 |   line-height: 1.5;
23 |   margin: 2em 0;
24 | }
25 | 
26 | img {
27 |   max-width: 100%;
28 |   height: auto;
29 | }
30 | 
31 | .container {
32 |   width: 100%;
33 |   max-width: 768px;
34 |   margin: 48px auto;
35 |   padding: 16px;
36 | }
37 | 


--------------------------------------------------------------------------------
/examples/react-markdown/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/examples/react-markdown/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["DOM", "DOM.Iterable", "ESNext"],
 6 |     "allowJs": false,
 7 |     "skipLibCheck": true,
 8 |     "esModuleInterop": false,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "strict": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "module": "ESNext",
13 |     "moduleResolution": "Node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "noEmit": true,
17 |     "jsx": "react-jsx"
18 |   },
19 |   "include": ["src"],
20 |   "references": [{ "path": "./tsconfig.node.json" }]
21 | }
22 | 


--------------------------------------------------------------------------------
/examples/react-markdown/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/examples/react-markdown/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/examples/react/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/examples/react/README.md:
--------------------------------------------------------------------------------
 1 | # Medium Zoom React Example
 2 | 
 3 | This example creates an `<ImageZoom>` component that attaches the zoom to the image.
 4 | 
 5 | [![Edit React Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/react?file=/src/App.tsx)
 6 | 
 7 | ## Usage
 8 | 
 9 | - Install dependencies: `yarn`
10 | - Run: `yarn dev`
11 | 


--------------------------------------------------------------------------------
/examples/react/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta
 6 |       name="viewport"
 7 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 8 |     />
 9 |     <meta name="theme-color" content="#000" />
10 |     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
11 |     <title>Medium Zoom | React Demo</title>
12 |   </head>
13 |   <body>
14 |     <div id="root"></div>
15 |     <script type="module" src="/src/main.tsx"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/examples/react/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@medium-zoom/react-example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc && vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "medium-zoom": "1.0.8",
13 |     "react": "18.2.0",
14 |     "react-dom": "18.2.0"
15 |   },
16 |   "devDependencies": {
17 |     "@types/react": "^18.0.28",
18 |     "@types/react-dom": "^18.0.11",
19 |     "@vitejs/plugin-react": "3.1.0",
20 |     "typescript": "4.9.3",
21 |     "vite": "4.2.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/examples/react/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/react/public/favicon.ico


--------------------------------------------------------------------------------
/examples/react/public/images/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/react/public/images/image-1.jpg


--------------------------------------------------------------------------------
/examples/react/public/images/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/react/public/images/image-2.jpg


--------------------------------------------------------------------------------
/examples/react/public/images/image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/react/public/images/image-3.jpg


--------------------------------------------------------------------------------
/examples/react/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { ImageZoom } from './ImageZoom'
 2 | 
 3 | export function App() {
 4 |   return (
 5 |     <article className="container">
 6 |       <h1>React demo</h1>
 7 | 
 8 |       <ImageZoom src="images/image-1.jpg" alt="Zoom 1" />
 9 | 
10 |       <p>
11 |         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora
12 |         praesentium cupiditate fugit voluptas, rem eligendi, voluptatem
13 |         molestias. Doloremque sit voluptatum odio maiores provident consequuntur
14 |         accusantium saepe.
15 |       </p>
16 | 
17 |       <ImageZoom src="images/image-2.jpg" alt="Zoom 2" />
18 | 
19 |       <p>
20 |         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores
21 |         quaerat, quis modi nostrum sequi adipisci ratione esse blanditiis error
22 |         beatae vel non vero dolor nemo. Animi nemo quisquam ducimus!
23 |       </p>
24 | 
25 |       <ImageZoom
26 |         src="images/image-3.jpg"
27 |         alt="Zoom 3"
28 |         options={{ background: 'yellow' }}
29 |       />
30 |     </article>
31 |   )
32 | }
33 | 


--------------------------------------------------------------------------------
/examples/react/src/ImageZoom.tsx:
--------------------------------------------------------------------------------
 1 | import { useRef, ComponentProps, RefCallback } from 'react'
 2 | import mediumZoom, { Zoom, ZoomOptions } from 'medium-zoom'
 3 | 
 4 | type ImageZoomProps = ComponentProps<'img'> & {
 5 |   options?: ZoomOptions
 6 | }
 7 | 
 8 | export function ImageZoom({ options, ...props }: ImageZoomProps) {
 9 |   const zoomRef = useRef<Zoom | null>(null)
10 | 
11 |   function getZoom() {
12 |     if (zoomRef.current === null) {
13 |       zoomRef.current = mediumZoom(options)
14 |     }
15 | 
16 |     return zoomRef.current
17 |   }
18 | 
19 |   const attachZoom: RefCallback<HTMLImageElement> = node => {
20 |     const zoom = getZoom()
21 | 
22 |     if (node) {
23 |       zoom.attach(node)
24 |     } else {
25 |       zoom.detach()
26 |     }
27 |   }
28 | 
29 |   return <img {...props} ref={attachZoom} />
30 | }
31 | 


--------------------------------------------------------------------------------
/examples/react/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | 
 4 | import { App } from './App'
 5 | 
 6 | import './reset.css'
 7 | import './style.css'
 8 | 
 9 | ReactDOM.createRoot(document.getElementById('root')!).render(
10 |   <React.StrictMode>
11 |     <App />
12 |   </React.StrictMode>
13 | )
14 | 


--------------------------------------------------------------------------------
/examples/react/src/reset.css:
--------------------------------------------------------------------------------
  1 | /* http://meyerweb.com/eric/tools/css/reset/
  2 |    v2.0 | 20110126
  3 |    License: none (public domain)
  4 | */
  5 | 
  6 | html,
  7 | body,
  8 | div,
  9 | span,
 10 | applet,
 11 | object,
 12 | iframe,
 13 | h1,
 14 | h2,
 15 | h3,
 16 | h4,
 17 | h5,
 18 | h6,
 19 | p,
 20 | blockquote,
 21 | pre,
 22 | a,
 23 | abbr,
 24 | acronym,
 25 | address,
 26 | big,
 27 | cite,
 28 | code,
 29 | del,
 30 | dfn,
 31 | em,
 32 | img,
 33 | ins,
 34 | kbd,
 35 | q,
 36 | s,
 37 | samp,
 38 | small,
 39 | strike,
 40 | strong,
 41 | sub,
 42 | sup,
 43 | tt,
 44 | var,
 45 | b,
 46 | u,
 47 | i,
 48 | center,
 49 | dl,
 50 | dt,
 51 | dd,
 52 | ol,
 53 | ul,
 54 | li,
 55 | fieldset,
 56 | form,
 57 | label,
 58 | legend,
 59 | table,
 60 | caption,
 61 | tbody,
 62 | tfoot,
 63 | thead,
 64 | tr,
 65 | th,
 66 | td,
 67 | article,
 68 | aside,
 69 | canvas,
 70 | details,
 71 | embed,
 72 | figure,
 73 | figcaption,
 74 | footer,
 75 | header,
 76 | hgroup,
 77 | menu,
 78 | nav,
 79 | output,
 80 | ruby,
 81 | section,
 82 | summary,
 83 | time,
 84 | mark,
 85 | audio,
 86 | video {
 87 |   margin: 0;
 88 |   padding: 0;
 89 |   border: 0;
 90 |   font-size: 100%;
 91 |   font: inherit;
 92 |   vertical-align: baseline;
 93 | }
 94 | /* HTML5 display-role reset for older browsers */
 95 | article,
 96 | aside,
 97 | details,
 98 | figcaption,
 99 | figure,
100 | footer,
101 | header,
102 | hgroup,
103 | menu,
104 | nav,
105 | section {
106 |   display: block;
107 | }
108 | body {
109 |   line-height: 1;
110 | }
111 | ol,
112 | ul {
113 |   list-style: none;
114 | }
115 | blockquote,
116 | q {
117 |   quotes: none;
118 | }
119 | blockquote:before,
120 | blockquote:after,
121 | q:before,
122 | q:after {
123 |   content: '';
124 |   content: none;
125 | }
126 | table {
127 |   border-collapse: collapse;
128 |   border-spacing: 0;
129 | }
130 | 


--------------------------------------------------------------------------------
/examples/react/src/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   font-family: 'AtlasGrotesk-dmc', -apple-system, BlinkMacSystemFont, 'Segoe UI',
 7 |     Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 8 |   font-size: 20px;
 9 |   color: #212121;
10 |   background-color: #fff;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | h1 {
17 |   font-size: 2em;
18 |   margin-bottom: 2em;
19 | }
20 | 
21 | p {
22 |   line-height: 1.5;
23 |   margin: 2em 0;
24 | }
25 | 
26 | img {
27 |   max-width: 100%;
28 |   height: auto;
29 | }
30 | 
31 | .container {
32 |   width: 100%;
33 |   max-width: 768px;
34 |   margin: 48px auto;
35 |   padding: 16px;
36 | }
37 | 


--------------------------------------------------------------------------------
/examples/react/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/examples/react/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["DOM", "DOM.Iterable", "ESNext"],
 6 |     "allowJs": false,
 7 |     "skipLibCheck": true,
 8 |     "esModuleInterop": false,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "strict": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "module": "ESNext",
13 |     "moduleResolution": "Node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "noEmit": true,
17 |     "jsx": "react-jsx"
18 |   },
19 |   "include": ["src"],
20 |   "references": [{ "path": "./tsconfig.node.json" }]
21 | }
22 | 


--------------------------------------------------------------------------------
/examples/react/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/examples/react/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/examples/svelte/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/examples/svelte/README.md:
--------------------------------------------------------------------------------
 1 | # Medium Zoom Svelte Example
 2 | 
 3 | This example creates an `<ImageZoom>` component that attaches the zoom to the image.
 4 | 
 5 | [![Edit Svelte Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/svelte?file=/src/App.svelte)
 6 | 
 7 | ## Usage
 8 | 
 9 | - Install dependencies: `yarn`
10 | - Run: `yarn dev`
11 | 


--------------------------------------------------------------------------------
/examples/svelte/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta
 6 |       name="viewport"
 7 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 8 |     />
 9 |     <meta name="theme-color" content="#000" />
10 |     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
11 |     <title>Medium Zoom | Svelte Demo</title>
12 |   </head>
13 |   <body>
14 |     <div id="app"></div>
15 |     <script type="module" src="/src/main.js"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/examples/svelte/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "moduleResolution": "Node",
 4 |     "target": "ESNext",
 5 |     "module": "ESNext",
 6 |     /**
 7 |      * svelte-preprocess cannot figure out whether you have
 8 |      * a value or a type, so tell TypeScript to enforce using
 9 |      * `import type` instead of `import` for Types.
10 |      */
11 |     "importsNotUsedAsValues": "error",
12 |     "isolatedModules": true,
13 |     "resolveJsonModule": true,
14 |     /**
15 |      * To have warnings / errors of the Svelte compiler at the
16 |      * correct position, enable source maps by default.
17 |      */
18 |     "sourceMap": true,
19 |     "esModuleInterop": true,
20 |     "skipLibCheck": true,
21 |     "forceConsistentCasingInFileNames": true,
22 |     /**
23 |      * Typecheck JS in `.svelte` and `.js` files by default.
24 |      * Disable this if you'd like to use dynamic types.
25 |      */
26 |     "checkJs": true
27 |   },
28 |   /**
29 |    * Use global.d.ts instead of compilerOptions.types
30 |    * to avoid limiting type declarations.
31 |    */
32 |   "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
33 | }
34 | 


--------------------------------------------------------------------------------
/examples/svelte/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@medium-zoom/svelte-example",
 3 |   "private": true,
 4 |   "version": "0.1.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "medium-zoom": "1.0.8"
13 |   },
14 |   "devDependencies": {
15 |     "@sveltejs/vite-plugin-svelte": "2.0.3",
16 |     "svelte": "3.55.1",
17 |     "vite": "4.2.0"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/examples/svelte/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/svelte/public/favicon.ico


--------------------------------------------------------------------------------
/examples/svelte/public/images/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/svelte/public/images/image-1.jpg


--------------------------------------------------------------------------------
/examples/svelte/public/images/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/svelte/public/images/image-2.jpg


--------------------------------------------------------------------------------
/examples/svelte/public/images/image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/svelte/public/images/image-3.jpg


--------------------------------------------------------------------------------
/examples/svelte/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import ImageZoom from './lib/ImageZoom.svelte'
 3 | </script>
 4 | 
 5 | <article class="container">
 6 |   <h1>Medium Zoom Svelte demo</h1>
 7 | 
 8 |   <ImageZoom src="images/image-1.jpg" alt="Zoom 1" />
 9 | 
10 |   <p>
11 |     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora
12 |     praesentium cupiditate fugit voluptas, rem eligendi, voluptatem molestias.
13 |     Doloremque sit voluptatum odio maiores provident consequuntur accusantium
14 |     saepe.
15 |   </p>
16 | 
17 |   <ImageZoom src="images/image-2.jpg" alt="Zoom 2" />
18 | 
19 |   <p>
20 |     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores
21 |     quaerat, quis modi nostrum sequi adipisci ratione esse blanditiis error
22 |     beatae vel non vero dolor nemo. Animi nemo quisquam ducimus!
23 |   </p>
24 | 
25 |   <ImageZoom
26 |     src="images/image-3.jpg"
27 |     alt="Zoom 3"
28 |     options={{ background: 'black' }}
29 |   />
30 | </article>
31 | 


--------------------------------------------------------------------------------
/examples/svelte/src/app.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 3 |   line-height: 1.5;
 4 |   font-weight: 400;
 5 | 
 6 |   color-scheme: light dark;
 7 |   color: rgba(255, 255, 255, 0.87);
 8 |   background-color: #242424;
 9 | 
10 |   font-synthesis: none;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 |   -webkit-text-size-adjust: 100%;
15 | }
16 | 
17 | a {
18 |   font-weight: 500;
19 |   color: #646cff;
20 |   text-decoration: inherit;
21 | }
22 | a:hover {
23 |   color: #535bf2;
24 | }
25 | 
26 | body {
27 |   margin: 0;
28 |   display: flex;
29 |   place-items: center;
30 |   min-width: 320px;
31 |   min-height: 100vh;
32 | }
33 | 
34 | h1 {
35 |   font-size: 3.2em;
36 |   line-height: 1.1;
37 | }
38 | 
39 | .card {
40 |   padding: 2em;
41 | }
42 | 
43 | #app {
44 |   max-width: 1280px;
45 |   margin: 0 auto;
46 |   padding: 2rem;
47 |   text-align: center;
48 | }
49 | 
50 | button {
51 |   border-radius: 8px;
52 |   border: 1px solid transparent;
53 |   padding: 0.6em 1.2em;
54 |   font-size: 1em;
55 |   font-weight: 500;
56 |   font-family: inherit;
57 |   background-color: #1a1a1a;
58 |   cursor: pointer;
59 |   transition: border-color 0.25s;
60 | }
61 | button:hover {
62 |   border-color: #646cff;
63 | }
64 | button:focus,
65 | button:focus-visible {
66 |   outline: 4px auto -webkit-focus-ring-color;
67 | }
68 | 
69 | @media (prefers-color-scheme: light) {
70 |   :root {
71 |     color: #213547;
72 |     background-color: #ffffff;
73 |   }
74 |   a:hover {
75 |     color: #747bff;
76 |   }
77 |   button {
78 |     background-color: #f9f9f9;
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/examples/svelte/src/lib/ImageZoom.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import mediumZoom from 'medium-zoom'
 3 | 
 4 |   export let src = undefined
 5 |   export let alt = undefined
 6 |   export let options = undefined
 7 | 
 8 |   let zoom = null
 9 | 
10 |   function getZoom() {
11 |     if (zoom === null) {
12 |       zoom = mediumZoom(options)
13 |     }
14 | 
15 |     return zoom
16 |   }
17 | 
18 |   function attachZoom(image) {
19 |     const zoom = getZoom()
20 |     zoom.attach(image)
21 | 
22 |     return {
23 |       update(newOptions) {
24 |         zoom.update(newOptions)
25 |       },
26 |       destroy() {
27 |         zoom.detach()
28 |       },
29 |     }
30 |   }
31 | </script>
32 | 
33 | <img {src} {alt} {...$$restProps} use:attachZoom={options} />
34 | 


--------------------------------------------------------------------------------
/examples/svelte/src/main.js:
--------------------------------------------------------------------------------
 1 | import './reset.css'
 2 | import './style.css'
 3 | 
 4 | import App from './App.svelte'
 5 | 
 6 | const app = new App({
 7 |   target: document.getElementById('app'),
 8 | })
 9 | 
10 | export default app
11 | 


--------------------------------------------------------------------------------
/examples/svelte/src/reset.css:
--------------------------------------------------------------------------------
  1 | /* http://meyerweb.com/eric/tools/css/reset/
  2 |    v2.0 | 20110126
  3 |    License: none (public domain)
  4 | */
  5 | 
  6 | html,
  7 | body,
  8 | div,
  9 | span,
 10 | applet,
 11 | object,
 12 | iframe,
 13 | h1,
 14 | h2,
 15 | h3,
 16 | h4,
 17 | h5,
 18 | h6,
 19 | p,
 20 | blockquote,
 21 | pre,
 22 | a,
 23 | abbr,
 24 | acronym,
 25 | address,
 26 | big,
 27 | cite,
 28 | code,
 29 | del,
 30 | dfn,
 31 | em,
 32 | img,
 33 | ins,
 34 | kbd,
 35 | q,
 36 | s,
 37 | samp,
 38 | small,
 39 | strike,
 40 | strong,
 41 | sub,
 42 | sup,
 43 | tt,
 44 | var,
 45 | b,
 46 | u,
 47 | i,
 48 | center,
 49 | dl,
 50 | dt,
 51 | dd,
 52 | ol,
 53 | ul,
 54 | li,
 55 | fieldset,
 56 | form,
 57 | label,
 58 | legend,
 59 | table,
 60 | caption,
 61 | tbody,
 62 | tfoot,
 63 | thead,
 64 | tr,
 65 | th,
 66 | td,
 67 | article,
 68 | aside,
 69 | canvas,
 70 | details,
 71 | embed,
 72 | figure,
 73 | figcaption,
 74 | footer,
 75 | header,
 76 | hgroup,
 77 | menu,
 78 | nav,
 79 | output,
 80 | ruby,
 81 | section,
 82 | summary,
 83 | time,
 84 | mark,
 85 | audio,
 86 | video {
 87 |   margin: 0;
 88 |   padding: 0;
 89 |   border: 0;
 90 |   font-size: 100%;
 91 |   font: inherit;
 92 |   vertical-align: baseline;
 93 | }
 94 | /* HTML5 display-role reset for older browsers */
 95 | article,
 96 | aside,
 97 | details,
 98 | figcaption,
 99 | figure,
100 | footer,
101 | header,
102 | hgroup,
103 | menu,
104 | nav,
105 | section {
106 |   display: block;
107 | }
108 | body {
109 |   line-height: 1;
110 | }
111 | ol,
112 | ul {
113 |   list-style: none;
114 | }
115 | blockquote,
116 | q {
117 |   quotes: none;
118 | }
119 | blockquote:before,
120 | blockquote:after,
121 | q:before,
122 | q:after {
123 |   content: '';
124 |   content: none;
125 | }
126 | table {
127 |   border-collapse: collapse;
128 |   border-spacing: 0;
129 | }
130 | 


--------------------------------------------------------------------------------
/examples/svelte/src/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   font-family: 'AtlasGrotesk-dmc', -apple-system, BlinkMacSystemFont, 'Segoe UI',
 7 |     Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 8 |   font-size: 20px;
 9 |   color: #212121;
10 |   background-color: #fff;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | h1 {
17 |   font-size: 2em;
18 |   margin-bottom: 2em;
19 | }
20 | 
21 | p {
22 |   line-height: 1.5;
23 |   margin: 2em 0;
24 | }
25 | 
26 | img {
27 |   max-width: 100%;
28 |   height: auto;
29 | }
30 | 
31 | .container {
32 |   width: 100%;
33 |   max-width: 768px;
34 |   margin: 48px auto;
35 |   padding: 16px;
36 | }
37 | 


--------------------------------------------------------------------------------
/examples/svelte/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="svelte" />
2 | /// <reference types="vite/client" />
3 | 


--------------------------------------------------------------------------------
/examples/svelte/svelte.config.js:
--------------------------------------------------------------------------------
1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
2 | 
3 | export default {
4 |   // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
5 |   // for more information about preprocessors
6 |   preprocess: vitePreprocess(),
7 | }
8 | 


--------------------------------------------------------------------------------
/examples/svelte/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import { svelte } from '@sveltejs/vite-plugin-svelte'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [svelte()],
7 | })
8 | 


--------------------------------------------------------------------------------
/examples/svelte/yarn.lock:
--------------------------------------------------------------------------------
  1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
  2 | # yarn lockfile v1
  3 | 
  4 | 
  5 | "@esbuild/android-arm64@0.17.15":
  6 |   version "0.17.15"
  7 |   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.15.tgz#893ad71f3920ccb919e1757c387756a9bca2ef42"
  8 |   integrity sha512-0kOB6Y7Br3KDVgHeg8PRcvfLkq+AccreK///B4Z6fNZGr/tNHX0z2VywCc7PTeWp+bPvjA5WMvNXltHw5QjAIA==
  9 | 
 10 | "@esbuild/android-arm@0.17.15":
 11 |   version "0.17.15"
 12 |   resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.17.15.tgz#143e0d4e4c08c786ea410b9a7739779a9a1315d8"
 13 |   integrity sha512-sRSOVlLawAktpMvDyJIkdLI/c/kdRTOqo8t6ImVxg8yT7LQDUYV5Rp2FKeEosLr6ZCja9UjYAzyRSxGteSJPYg==
 14 | 
 15 | "@esbuild/android-x64@0.17.15":
 16 |   version "0.17.15"
 17 |   resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.17.15.tgz#d2d12a7676b2589864281b2274355200916540bc"
 18 |   integrity sha512-MzDqnNajQZ63YkaUWVl9uuhcWyEyh69HGpMIrf+acR4otMkfLJ4sUCxqwbCyPGicE9dVlrysI3lMcDBjGiBBcQ==
 19 | 
 20 | "@esbuild/darwin-arm64@0.17.15":
 21 |   version "0.17.15"
 22 |   resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.17.15.tgz#2e88e79f1d327a2a7d9d06397e5232eb0a473d61"
 23 |   integrity sha512-7siLjBc88Z4+6qkMDxPT2juf2e8SJxmsbNVKFY2ifWCDT72v5YJz9arlvBw5oB4W/e61H1+HDB/jnu8nNg0rLA==
 24 | 
 25 | "@esbuild/darwin-x64@0.17.15":
 26 |   version "0.17.15"
 27 |   resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.17.15.tgz#9384e64c0be91388c57be6d3a5eaf1c32a99c91d"
 28 |   integrity sha512-NbImBas2rXwYI52BOKTW342Tm3LTeVlaOQ4QPZ7XuWNKiO226DisFk/RyPk3T0CKZkKMuU69yOvlapJEmax7cg==
 29 | 
 30 | "@esbuild/freebsd-arm64@0.17.15":
 31 |   version "0.17.15"
 32 |   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.15.tgz#2ad5a35bc52ebd9ca6b845dbc59ba39647a93c1a"
 33 |   integrity sha512-Xk9xMDjBVG6CfgoqlVczHAdJnCs0/oeFOspFap5NkYAmRCT2qTn1vJWA2f419iMtsHSLm+O8B6SLV/HlY5cYKg==
 34 | 
 35 | "@esbuild/freebsd-x64@0.17.15":
 36 |   version "0.17.15"
 37 |   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.17.15.tgz#b513a48446f96c75fda5bef470e64d342d4379cd"
 38 |   integrity sha512-3TWAnnEOdclvb2pnfsTWtdwthPfOz7qAfcwDLcfZyGJwm1SRZIMOeB5FODVhnM93mFSPsHB9b/PmxNNbSnd0RQ==
 39 | 
 40 | "@esbuild/linux-arm64@0.17.15":
 41 |   version "0.17.15"
 42 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.17.15.tgz#9697b168175bfd41fa9cc4a72dd0d48f24715f31"
 43 |   integrity sha512-T0MVnYw9KT6b83/SqyznTs/3Jg2ODWrZfNccg11XjDehIved2oQfrX/wVuev9N936BpMRaTR9I1J0tdGgUgpJA==
 44 | 
 45 | "@esbuild/linux-arm@0.17.15":
 46 |   version "0.17.15"
 47 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.17.15.tgz#5b22062c54f48cd92fab9ffd993732a52db70cd3"
 48 |   integrity sha512-MLTgiXWEMAMr8nmS9Gigx43zPRmEfeBfGCwxFQEMgJ5MC53QKajaclW6XDPjwJvhbebv+RzK05TQjvH3/aM4Xw==
 49 | 
 50 | "@esbuild/linux-ia32@0.17.15":
 51 |   version "0.17.15"
 52 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.17.15.tgz#eb28a13f9b60b5189fcc9e98e1024f6b657ba54c"
 53 |   integrity sha512-wp02sHs015T23zsQtU4Cj57WiteiuASHlD7rXjKUyAGYzlOKDAjqK6bk5dMi2QEl/KVOcsjwL36kD+WW7vJt8Q==
 54 | 
 55 | "@esbuild/linux-loong64@0.17.15":
 56 |   version "0.17.15"
 57 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.17.15.tgz#32454bdfe144cf74b77895a8ad21a15cb81cfbe5"
 58 |   integrity sha512-k7FsUJjGGSxwnBmMh8d7IbObWu+sF/qbwc+xKZkBe/lTAF16RqxRCnNHA7QTd3oS2AfGBAnHlXL67shV5bBThQ==
 59 | 
 60 | "@esbuild/linux-mips64el@0.17.15":
 61 |   version "0.17.15"
 62 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.17.15.tgz#af12bde0d775a318fad90eb13a0455229a63987c"
 63 |   integrity sha512-ZLWk6czDdog+Q9kE/Jfbilu24vEe/iW/Sj2d8EVsmiixQ1rM2RKH2n36qfxK4e8tVcaXkvuV3mU5zTZviE+NVQ==
 64 | 
 65 | "@esbuild/linux-ppc64@0.17.15":
 66 |   version "0.17.15"
 67 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.17.15.tgz#34c5ed145b2dfc493d3e652abac8bd3baa3865a5"
 68 |   integrity sha512-mY6dPkIRAiFHRsGfOYZC8Q9rmr8vOBZBme0/j15zFUKM99d4ILY4WpOC7i/LqoY+RE7KaMaSfvY8CqjJtuO4xg==
 69 | 
 70 | "@esbuild/linux-riscv64@0.17.15":
 71 |   version "0.17.15"
 72 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.17.15.tgz#87bd515e837f2eb004b45f9e6a94dc5b93f22b92"
 73 |   integrity sha512-EcyUtxffdDtWjjwIH8sKzpDRLcVtqANooMNASO59y+xmqqRYBBM7xVLQhqF7nksIbm2yHABptoioS9RAbVMWVA==
 74 | 
 75 | "@esbuild/linux-s390x@0.17.15":
 76 |   version "0.17.15"
 77 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.17.15.tgz#20bf7947197f199ddac2ec412029a414ceae3aa3"
 78 |   integrity sha512-BuS6Jx/ezxFuHxgsfvz7T4g4YlVrmCmg7UAwboeyNNg0OzNzKsIZXpr3Sb/ZREDXWgt48RO4UQRDBxJN3B9Rbg==
 79 | 
 80 | "@esbuild/linux-x64@0.17.15":
 81 |   version "0.17.15"
 82 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.17.15.tgz#31b93f9c94c195e852c20cd3d1914a68aa619124"
 83 |   integrity sha512-JsdS0EgEViwuKsw5tiJQo9UdQdUJYuB+Mf6HxtJSPN35vez1hlrNb1KajvKWF5Sa35j17+rW1ECEO9iNrIXbNg==
 84 | 
 85 | "@esbuild/netbsd-x64@0.17.15":
 86 |   version "0.17.15"
 87 |   resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.17.15.tgz#8da299b3ac6875836ca8cdc1925826498069ac65"
 88 |   integrity sha512-R6fKjtUysYGym6uXf6qyNephVUQAGtf3n2RCsOST/neIwPqRWcnc3ogcielOd6pT+J0RDR1RGcy0ZY7d3uHVLA==
 89 | 
 90 | "@esbuild/openbsd-x64@0.17.15":
 91 |   version "0.17.15"
 92 |   resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.17.15.tgz#04a1ec3d4e919714dba68dcf09eeb1228ad0d20c"
 93 |   integrity sha512-mVD4PGc26b8PI60QaPUltYKeSX0wxuy0AltC+WCTFwvKCq2+OgLP4+fFd+hZXzO2xW1HPKcytZBdjqL6FQFa7w==
 94 | 
 95 | "@esbuild/sunos-x64@0.17.15":
 96 |   version "0.17.15"
 97 |   resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.17.15.tgz#6694ebe4e16e5cd7dab6505ff7c28f9c1c695ce5"
 98 |   integrity sha512-U6tYPovOkw3459t2CBwGcFYfFRjivcJJc1WC8Q3funIwX8x4fP+R6xL/QuTPNGOblbq/EUDxj9GU+dWKX0oWlQ==
 99 | 
100 | "@esbuild/win32-arm64@0.17.15":
101 |   version "0.17.15"
102 |   resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.17.15.tgz#1f95b2564193c8d1fee8f8129a0609728171d500"
103 |   integrity sha512-W+Z5F++wgKAleDABemiyXVnzXgvRFs+GVKThSI+mGgleLWluv0D7Diz4oQpgdpNzh4i2nNDzQtWbjJiqutRp6Q==
104 | 
105 | "@esbuild/win32-ia32@0.17.15":
106 |   version "0.17.15"
107 |   resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.17.15.tgz#c362b88b3df21916ed7bcf75c6d09c6bf3ae354a"
108 |   integrity sha512-Muz/+uGgheShKGqSVS1KsHtCyEzcdOn/W/Xbh6H91Etm+wiIfwZaBn1W58MeGtfI8WA961YMHFYTthBdQs4t+w==
109 | 
110 | "@esbuild/win32-x64@0.17.15":
111 |   version "0.17.15"
112 |   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.15.tgz#c2e737f3a201ebff8e2ac2b8e9f246b397ad19b8"
113 |   integrity sha512-DjDa9ywLUUmjhV2Y9wUTIF+1XsmuFGvZoCmOWkli1XcNAh5t25cc7fgsCx4Zi/Uurep3TTLyDiKATgGEg61pkA==
114 | 
115 | "@jridgewell/sourcemap-codec@^1.4.13":
116 |   version "1.4.15"
117 |   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
118 |   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
119 | 
120 | "@sveltejs/vite-plugin-svelte@2.0.3":
121 |   version "2.0.3"
122 |   resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.0.3.tgz#3d276eab341638dd58691a3de610774e155a7578"
123 |   integrity sha512-o+cguBFdwIGtRbNkYOyqTM7KvRUffxh5bfK4oJsWKG2obu+v/cbpT03tJrGl58C7tRXo/aEC0/axN5FVHBj0nA==
124 |   dependencies:
125 |     debug "^4.3.4"
126 |     deepmerge "^4.3.0"
127 |     kleur "^4.1.5"
128 |     magic-string "^0.29.0"
129 |     svelte-hmr "^0.15.1"
130 |     vitefu "^0.2.4"
131 | 
132 | debug@^4.3.4:
133 |   version "4.3.4"
134 |   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
135 |   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
136 |   dependencies:
137 |     ms "2.1.2"
138 | 
139 | deepmerge@^4.3.0:
140 |   version "4.3.1"
141 |   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
142 |   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
143 | 
144 | esbuild@^0.17.5:
145 |   version "0.17.15"
146 |   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.15.tgz#209ebc87cb671ffb79574db93494b10ffaf43cbc"
147 |   integrity sha512-LBUV2VsUIc/iD9ME75qhT4aJj0r75abCVS0jakhFzOtR7TQsqQA5w0tZ+KTKnwl3kXE0MhskNdHDh/I5aCR1Zw==
148 |   optionalDependencies:
149 |     "@esbuild/android-arm" "0.17.15"
150 |     "@esbuild/android-arm64" "0.17.15"
151 |     "@esbuild/android-x64" "0.17.15"
152 |     "@esbuild/darwin-arm64" "0.17.15"
153 |     "@esbuild/darwin-x64" "0.17.15"
154 |     "@esbuild/freebsd-arm64" "0.17.15"
155 |     "@esbuild/freebsd-x64" "0.17.15"
156 |     "@esbuild/linux-arm" "0.17.15"
157 |     "@esbuild/linux-arm64" "0.17.15"
158 |     "@esbuild/linux-ia32" "0.17.15"
159 |     "@esbuild/linux-loong64" "0.17.15"
160 |     "@esbuild/linux-mips64el" "0.17.15"
161 |     "@esbuild/linux-ppc64" "0.17.15"
162 |     "@esbuild/linux-riscv64" "0.17.15"
163 |     "@esbuild/linux-s390x" "0.17.15"
164 |     "@esbuild/linux-x64" "0.17.15"
165 |     "@esbuild/netbsd-x64" "0.17.15"
166 |     "@esbuild/openbsd-x64" "0.17.15"
167 |     "@esbuild/sunos-x64" "0.17.15"
168 |     "@esbuild/win32-arm64" "0.17.15"
169 |     "@esbuild/win32-ia32" "0.17.15"
170 |     "@esbuild/win32-x64" "0.17.15"
171 | 
172 | fsevents@~2.3.2:
173 |   version "2.3.2"
174 |   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
175 |   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
176 | 
177 | function-bind@^1.1.1:
178 |   version "1.1.1"
179 |   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
180 |   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
181 | 
182 | has@^1.0.3:
183 |   version "1.0.3"
184 |   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
185 |   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
186 |   dependencies:
187 |     function-bind "^1.1.1"
188 | 
189 | is-core-module@^2.11.0:
190 |   version "2.11.0"
191 |   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
192 |   integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
193 |   dependencies:
194 |     has "^1.0.3"
195 | 
196 | kleur@^4.1.5:
197 |   version "4.1.5"
198 |   resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
199 |   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
200 | 
201 | magic-string@^0.29.0:
202 |   version "0.29.0"
203 |   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.29.0.tgz#f034f79f8c43dba4ae1730ffb5e8c4e084b16cf3"
204 |   integrity sha512-WcfidHrDjMY+eLjlU+8OvwREqHwpgCeKVBUpQ3OhYYuvfaYCUgcbuBzappNzZvg/v8onU3oQj+BYpkOJe9Iw4Q==
205 |   dependencies:
206 |     "@jridgewell/sourcemap-codec" "^1.4.13"
207 | 
208 | medium-zoom@1.0.8:
209 |   version "1.0.8"
210 |   resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.0.8.tgz#2bd1fbcf2961fa7b0e318fe284462aa9b8608ed2"
211 |   integrity sha512-CjFVuFq/IfrdqesAXfg+hzlDKu6A2n80ZIq0Kl9kWjoHh9j1N9Uvk5X0/MmN0hOfm5F9YBswlClhcwnmtwz7gA==
212 | 
213 | ms@2.1.2:
214 |   version "2.1.2"
215 |   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
216 |   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
217 | 
218 | nanoid@^3.3.4:
219 |   version "3.3.6"
220 |   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
221 |   integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
222 | 
223 | path-parse@^1.0.7:
224 |   version "1.0.7"
225 |   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
226 |   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
227 | 
228 | picocolors@^1.0.0:
229 |   version "1.0.0"
230 |   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
231 |   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
232 | 
233 | postcss@^8.4.21:
234 |   version "8.4.21"
235 |   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
236 |   integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
237 |   dependencies:
238 |     nanoid "^3.3.4"
239 |     picocolors "^1.0.0"
240 |     source-map-js "^1.0.2"
241 | 
242 | resolve@^1.22.1:
243 |   version "1.22.2"
244 |   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
245 |   integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
246 |   dependencies:
247 |     is-core-module "^2.11.0"
248 |     path-parse "^1.0.7"
249 |     supports-preserve-symlinks-flag "^1.0.0"
250 | 
251 | rollup@^3.18.0:
252 |   version "3.20.2"
253 |   resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.20.2.tgz#f798c600317f216de2e4ad9f4d9ab30a89b690ff"
254 |   integrity sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==
255 |   optionalDependencies:
256 |     fsevents "~2.3.2"
257 | 
258 | source-map-js@^1.0.2:
259 |   version "1.0.2"
260 |   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
261 |   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
262 | 
263 | supports-preserve-symlinks-flag@^1.0.0:
264 |   version "1.0.0"
265 |   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
266 |   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
267 | 
268 | svelte-hmr@^0.15.1:
269 |   version "0.15.1"
270 |   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.15.1.tgz#d11d878a0bbb12ec1cba030f580cd2049f4ec86b"
271 |   integrity sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==
272 | 
273 | svelte@3.55.1:
274 |   version "3.55.1"
275 |   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.55.1.tgz#6f93b153e5248039906ce5fe196efdb9e05dfce8"
276 |   integrity sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==
277 | 
278 | vite@4.2.0:
279 |   version "4.2.0"
280 |   resolved "https://registry.yarnpkg.com/vite/-/vite-4.2.0.tgz#d4e6eafbc034f3faf0ab376bd5b76ac15775eb99"
281 |   integrity sha512-AbDTyzzwuKoRtMIRLGNxhLRuv1FpRgdIw+1y6AQG73Q5+vtecmvzKo/yk8X/vrHDpETRTx01ABijqUHIzBXi0g==
282 |   dependencies:
283 |     esbuild "^0.17.5"
284 |     postcss "^8.4.21"
285 |     resolve "^1.22.1"
286 |     rollup "^3.18.0"
287 |   optionalDependencies:
288 |     fsevents "~2.3.2"
289 | 
290 | vitefu@^0.2.4:
291 |   version "0.2.4"
292 |   resolved "https://registry.yarnpkg.com/vitefu/-/vitefu-0.2.4.tgz#212dc1a9d0254afe65e579351bed4e25d81e0b35"
293 |   integrity sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==
294 | 


--------------------------------------------------------------------------------
/examples/vanilla/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .cache
4 | 


--------------------------------------------------------------------------------
/examples/vanilla/README.md:
--------------------------------------------------------------------------------
1 | # Medium Zoom Vanilla JavaScript Example
2 | 
3 | [![Edit JavaScript Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/vanilla?file=/src/index.js)
4 | 
5 | ## Usage
6 | 
7 | - Install dependencies: `yarn`
8 | - Run: `yarn dev`
9 | 


--------------------------------------------------------------------------------
/examples/vanilla/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <meta name="theme-color" content="#00ab6c" />
 7 | 
 8 |     <link href="src/reset.css" rel="stylesheet" />
 9 |     <link href="src/style.css" rel="stylesheet" />
10 | 
11 |     <title>Medium Zoom | Vanilla JavaScript demo</title>
12 |   </head>
13 | 
14 |   <body>
15 |     <article class="container">
16 |       <h1>Vanilla JavaScript demo</h1>
17 | 
18 |       <img src="src/images/image-1.jpg" alt="Zoom 1" />
19 | 
20 |       <p>
21 |         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora
22 |         praesentium cupiditate fugit voluptas, rem eligendi, voluptatem
23 |         molestias pariatur atque amet, dicta, similique beatae optio quos! Hic
24 |         necessitatibus dicta magni, tempore.
25 |       </p>
26 | 
27 |       <img src="src/images/image-2.jpg" alt="Zoom 2" />
28 |     </article>
29 | 
30 |     <script src="src/index.js"></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/examples/vanilla/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@medium-zoom/vanilla-example",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "main": "index.html",
 6 |   "scripts": {
 7 |     "start": "parcel index.html --open",
 8 |     "build": "parcel build index.html --public-url ./"
 9 |   },
10 |   "dependencies": {
11 |     "medium-zoom": "1.0.8"
12 |   },
13 |   "devDependencies": {
14 |     "parcel-bundler": "1.12.4"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/vanilla/src/images/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/vanilla/src/images/image-1.jpg


--------------------------------------------------------------------------------
/examples/vanilla/src/images/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/vanilla/src/images/image-2.jpg


--------------------------------------------------------------------------------
/examples/vanilla/src/index.js:
--------------------------------------------------------------------------------
1 | import mediumZoom from 'medium-zoom'
2 | 
3 | mediumZoom('.container img')
4 | 


--------------------------------------------------------------------------------
/examples/vanilla/src/reset.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 |   margin: 0;
20 |   padding: 0;
21 |   border: 0;
22 |   font-size: 100%;
23 |   font: inherit;
24 |   vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 |   display: block;
30 | }
31 | body {
32 |   line-height: 1;
33 | }
34 | ol, ul {
35 |   list-style: none;
36 | }
37 | blockquote, q {
38 |   quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 |   content: '';
43 |   content: none;
44 | }
45 | table {
46 |   border-collapse: collapse;
47 |   border-spacing: 0;
48 | }
49 | 


--------------------------------------------------------------------------------
/examples/vanilla/src/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   font-family: 'AtlasGrotesk-dmc', -apple-system, BlinkMacSystemFont, 'Segoe UI',
 7 |     Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 8 |   font-size: 20px;
 9 |   color: #212121;
10 |   background-color: #fff;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | h1 {
17 |   font-size: 2em;
18 |   margin-bottom: 2em;
19 | }
20 | 
21 | p {
22 |   line-height: 1.5;
23 |   margin: 2em 0;
24 | }
25 | 
26 | img {
27 |   max-width: 100%;
28 |   height: auto;
29 | }
30 | 
31 | .container {
32 |   width: 100%;
33 |   max-width: 768px;
34 |   margin: 48px auto;
35 |   padding: 16px;
36 | }
37 | 


--------------------------------------------------------------------------------
/examples/vue/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/examples/vue/README.md:
--------------------------------------------------------------------------------
 1 | # Medium Zoom Vue Example
 2 | 
 3 | This example creates an `<ImageZoom>` component that attaches the zoom to the image.
 4 | 
 5 | [![Edit Vue Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/vue?file=/src/App.vue)
 6 | 
 7 | ## Usage
 8 | 
 9 | - Install dependencies: `yarn`
10 | - Run: `yarn dev`
11 | 


--------------------------------------------------------------------------------
/examples/vue/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta
 6 |       name="viewport"
 7 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 8 |     />
 9 |     <meta name="theme-color" content="#000" />
10 |     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
11 |     <title>Medium Zoom | Vue Demo</title>
12 |   </head>
13 |   <body>
14 |     <div id="app"></div>
15 |     <script type="module" src="/src/main.ts"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/examples/vue/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@medium-zoom/vue-example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vue-tsc && vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "medium-zoom": "1.0.8",
13 |     "vue": "3.2.47"
14 |   },
15 |   "devDependencies": {
16 |     "@vitejs/plugin-vue": "4.1.0",
17 |     "typescript": "4.9.3",
18 |     "vite": "4.2.0",
19 |     "vue-tsc": "1.2.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/examples/vue/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/vue/public/favicon.ico


--------------------------------------------------------------------------------
/examples/vue/public/images/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/vue/public/images/image-1.jpg


--------------------------------------------------------------------------------
/examples/vue/public/images/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/vue/public/images/image-2.jpg


--------------------------------------------------------------------------------
/examples/vue/public/images/image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/examples/vue/public/images/image-3.jpg


--------------------------------------------------------------------------------
/examples/vue/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import ImageZoom from './components/ImageZoom.vue'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <article class="container">
 7 |     <h1>Medium Zoom Vue demo</h1>
 8 | 
 9 |     <ImageZoom src="images/image-1.jpg" alt="Zoom 1" />
10 | 
11 |     <p>
12 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora
13 |       praesentium cupiditate fugit voluptas, rem eligendi, voluptatem molestias.
14 |       Doloremque sit voluptatum odio maiores provident consequuntur accusantium
15 |       saepe.
16 |     </p>
17 | 
18 |     <ImageZoom src="images/image-2.jpg" alt="Zoom 2" />
19 | 
20 |     <p>
21 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolores
22 |       quaerat, quis modi nostrum sequi adipisci ratione esse blanditiis error
23 |       beatae vel non vero dolor nemo. Animi nemo quisquam ducimus!
24 |     </p>
25 | 
26 |     <ImageZoom
27 |       src="images/image-3.jpg"
28 |       alt="Zoom 3"
29 |       :options="{ background: 'black' }"
30 |     />
31 |   </article>
32 | </template>
33 | 


--------------------------------------------------------------------------------
/examples/vue/src/components/ImageZoom.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { watch, type ImgHTMLAttributes, type ComponentPublicInstance } from 'vue'
 3 | import mediumZoom, { type Zoom, type ZoomOptions } from 'medium-zoom'
 4 | 
 5 | interface Props extends ImgHTMLAttributes {
 6 |   options?: ZoomOptions
 7 | }
 8 | 
 9 | const props = defineProps<Props>()
10 | 
11 | let zoom: Zoom | null = null
12 | 
13 | function getZoom() {
14 |   if (zoom === null) {
15 |     zoom = mediumZoom(props.options)
16 |   }
17 | 
18 |   return zoom
19 | }
20 | 
21 | function attachZoom(ref: Element | ComponentPublicInstance | null) {
22 |   const image = ref as HTMLImageElement | null
23 |   const zoom = getZoom()
24 | 
25 |   if (image) {
26 |     zoom.attach(image)
27 |   } else {
28 |     zoom.detach()
29 |   }
30 | }
31 | 
32 | watch(() => props.options, (options) => {
33 |   const zoom = getZoom()
34 |   zoom.update(options || {})
35 | })
36 | </script>
37 | 
38 | <template>
39 |   <img :ref="attachZoom" />
40 | </template>
41 | 


--------------------------------------------------------------------------------
/examples/vue/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | 
3 | import App from './App.vue'
4 | 
5 | import './reset.css'
6 | import './style.css'
7 | 
8 | createApp(App).mount('#app')
9 | 


--------------------------------------------------------------------------------
/examples/vue/src/reset.css:
--------------------------------------------------------------------------------
  1 | /* http://meyerweb.com/eric/tools/css/reset/
  2 |    v2.0 | 20110126
  3 |    License: none (public domain)
  4 | */
  5 | 
  6 | html,
  7 | body,
  8 | div,
  9 | span,
 10 | applet,
 11 | object,
 12 | iframe,
 13 | h1,
 14 | h2,
 15 | h3,
 16 | h4,
 17 | h5,
 18 | h6,
 19 | p,
 20 | blockquote,
 21 | pre,
 22 | a,
 23 | abbr,
 24 | acronym,
 25 | address,
 26 | big,
 27 | cite,
 28 | code,
 29 | del,
 30 | dfn,
 31 | em,
 32 | img,
 33 | ins,
 34 | kbd,
 35 | q,
 36 | s,
 37 | samp,
 38 | small,
 39 | strike,
 40 | strong,
 41 | sub,
 42 | sup,
 43 | tt,
 44 | var,
 45 | b,
 46 | u,
 47 | i,
 48 | center,
 49 | dl,
 50 | dt,
 51 | dd,
 52 | ol,
 53 | ul,
 54 | li,
 55 | fieldset,
 56 | form,
 57 | label,
 58 | legend,
 59 | table,
 60 | caption,
 61 | tbody,
 62 | tfoot,
 63 | thead,
 64 | tr,
 65 | th,
 66 | td,
 67 | article,
 68 | aside,
 69 | canvas,
 70 | details,
 71 | embed,
 72 | figure,
 73 | figcaption,
 74 | footer,
 75 | header,
 76 | hgroup,
 77 | menu,
 78 | nav,
 79 | output,
 80 | ruby,
 81 | section,
 82 | summary,
 83 | time,
 84 | mark,
 85 | audio,
 86 | video {
 87 |   margin: 0;
 88 |   padding: 0;
 89 |   border: 0;
 90 |   font-size: 100%;
 91 |   font: inherit;
 92 |   vertical-align: baseline;
 93 | }
 94 | /* HTML5 display-role reset for older browsers */
 95 | article,
 96 | aside,
 97 | details,
 98 | figcaption,
 99 | figure,
100 | footer,
101 | header,
102 | hgroup,
103 | menu,
104 | nav,
105 | section {
106 |   display: block;
107 | }
108 | body {
109 |   line-height: 1;
110 | }
111 | ol,
112 | ul {
113 |   list-style: none;
114 | }
115 | blockquote,
116 | q {
117 |   quotes: none;
118 | }
119 | blockquote:before,
120 | blockquote:after,
121 | q:before,
122 | q:after {
123 |   content: '';
124 |   content: none;
125 | }
126 | table {
127 |   border-collapse: collapse;
128 |   border-spacing: 0;
129 | }
130 | 


--------------------------------------------------------------------------------
/examples/vue/src/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   font-family: 'AtlasGrotesk-dmc', -apple-system, BlinkMacSystemFont, 'Segoe UI',
 7 |     Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 8 |   font-size: 20px;
 9 |   color: #212121;
10 |   background-color: #fff;
11 |   text-rendering: optimizeLegibility;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 | }
15 | 
16 | h1 {
17 |   font-size: 2em;
18 |   margin-bottom: 2em;
19 | }
20 | 
21 | p {
22 |   line-height: 1.5;
23 |   margin: 2em 0;
24 | }
25 | 
26 | img {
27 |   max-width: 100%;
28 |   height: auto;
29 | }
30 | 
31 | .container {
32 |   width: 100%;
33 |   max-width: 768px;
34 |   margin: 48px auto;
35 |   padding: 16px;
36 | }
37 | 


--------------------------------------------------------------------------------
/examples/vue/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/examples/vue/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "Node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "resolveJsonModule": true,
10 |     "isolatedModules": true,
11 |     "esModuleInterop": true,
12 |     "lib": ["ESNext", "DOM"],
13 |     "skipLibCheck": true,
14 |     "noEmit": true
15 |   },
16 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
17 |   "references": [{ "path": "./tsconfig.node.json" }]
18 | }
19 | 


--------------------------------------------------------------------------------
/examples/vue/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/examples/vue/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import vue from '@vitejs/plugin-vue'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [vue()],
7 | })
8 | 


--------------------------------------------------------------------------------
/husky.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   hooks: {
3 |     'pre-commit': 'pretty-quick --staged',
4 |   },
5 | }
6 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   rootDir: process.cwd(),
 3 |   testRegex: 'src/(__tests__/.*|(\\.|/)(test|spec))\\.jsx?$',
 4 |   collectCoverageFrom: ['src/**/*.js'],
 5 |   globals: {
 6 |     __TEST__: true,
 7 |   },
 8 |   timers: 'fake',
 9 |   moduleNameMapper: {
10 |     '\\.css$': '<rootDir>/src/__mocks__/styleMock.js',
11 |   },
12 | }
13 | 


--------------------------------------------------------------------------------
/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
2 |   <g fill="none" fill-rule="evenodd">
3 |     <polygon fill="#00E56B" points="160 160 0 160 0 0"/>
4 |     <polygon fill="#00AB6C" points="160 0 160 160 0 160"/>
5 |   </g>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command="yarn run build:website"
3 |   publish="website/dist"
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "medium-zoom",
  3 |   "version": "1.1.0",
  4 |   "description": "A JavaScript library for zooming images like Medium",
  5 |   "license": "MIT",
  6 |   "repository": "francoischalifour/medium-zoom",
  7 |   "author": {
  8 |     "name": "Francois Chalifour",
  9 |     "email": "francois.chalifour@gmail.com",
 10 |     "url": "https://francoischalifour.com"
 11 |   },
 12 |   "main": "dist/medium-zoom.min.js",
 13 |   "module": "dist/medium-zoom.esm.js",
 14 |   "types": "dist/medium-zoom.d.ts",
 15 |   "sideEffects": false,
 16 |   "scripts": {
 17 |     "start": "yarn run dev",
 18 |     "dev": "rollup --config --watch",
 19 |     "prebuild": "yarn run clean",
 20 |     "build": "rollup --config",
 21 |     "postbuild": "cp ./src/medium-zoom.d.ts ./dist && cp ./src/medium-zoom.d.ts ./dist/pure/index.d.ts",
 22 |     "prepublishOnly": "npm run build",
 23 |     "lint": "eslint .",
 24 |     "format": "prettier --write *.{js,json,css,md} && yarn run lint --fix",
 25 |     "test": "jest",
 26 |     "test:cypress:run": "cypress run",
 27 |     "test:cypress:open": "cypress open",
 28 |     "test:cypress:update": "cypress run --env updateSnapshots=true",
 29 |     "test:cypress": "npm-run-all --parallel --race storybook test:cypress:run",
 30 |     "test:cypress:record": "npm-run-all --parallel --race storybook 'test:cypress:run -- --record --key {1}' --",
 31 |     "test:size": "bundlesize",
 32 |     "clean": "rimraf ./dist",
 33 |     "build:storybook": "build-storybook -o ./website/dist/storybook -c ./stories/config -s ./dist,./stories/images",
 34 |     "storybook": "start-storybook -p 9001 -c ./stories/config -s ./dist,./stories/images",
 35 |     "build:website": "(cd website && yarn && yarn run build) && yarn run build && yarn run build:storybook",
 36 |     "changelog:update": "conventional-changelog -p angular -i CHANGELOG.md -s",
 37 |     "release": "release-it",
 38 |     "release:next": "release-it --preRelease=next",
 39 |     "release:examples": "./scripts/release-examples.sh"
 40 |   },
 41 |   "files": [
 42 |     "dist"
 43 |   ],
 44 |   "keywords": [
 45 |     "medium",
 46 |     "image",
 47 |     "zoom",
 48 |     "picture",
 49 |     "lightbox",
 50 |     "click",
 51 |     "scroll",
 52 |     "pure",
 53 |     "plain",
 54 |     "vanilla",
 55 |     "javascript",
 56 |     "ux",
 57 |     "performance",
 58 |     "event",
 59 |     "medium-zoom",
 60 |     "zoomable"
 61 |   ],
 62 |   "devDependencies": {
 63 |     "@storybook/addon-notes": "4.0.0-alpha.14",
 64 |     "@storybook/addon-options": "4.0.0-alpha.14",
 65 |     "@storybook/addon-storysource": "4.0.0-alpha.14",
 66 |     "@storybook/html": "4.0.0-alpha.14",
 67 |     "babel-core": "6.26.3",
 68 |     "babel-eslint": "10.0.3",
 69 |     "babel-plugin-external-helpers": "6.22.0",
 70 |     "babel-plugin-require-context-hook": "1.0.0",
 71 |     "babel-plugin-transform-object-rest-spread": "6.26.0",
 72 |     "babel-preset-env": "1.7.0",
 73 |     "bundlesize": "0.18.0",
 74 |     "conventional-changelog-cli": "2.0.28",
 75 |     "cssnano": "4.1.10",
 76 |     "cypress": "3.7.0",
 77 |     "cypress-image-snapshot": "3.1.1",
 78 |     "eslint": "5.12.1",
 79 |     "eslint-config-airbnb-base": "13.1.0",
 80 |     "eslint-config-prettier": "3.6.0",
 81 |     "eslint-plugin-cypress": "2.7.0",
 82 |     "eslint-plugin-import": "2.18.2",
 83 |     "husky": "3.1.0",
 84 |     "jest": "23.6.0",
 85 |     "npm-run-all": "4.1.5",
 86 |     "prettier": "1.19.1",
 87 |     "pretty-quick": "1.10.0",
 88 |     "release-it": "10.4.5",
 89 |     "rimraf": "3.0.0",
 90 |     "rollup": "1.27.8",
 91 |     "rollup-plugin-babel": "3.0.7",
 92 |     "rollup-plugin-filesize": "6.2.1",
 93 |     "rollup-plugin-license": "0.13.0",
 94 |     "rollup-plugin-postcss": "2.0.3",
 95 |     "rollup-plugin-replace": "2.2.0",
 96 |     "rollup-plugin-terser": "5.1.2",
 97 |     "rollup-plugin-uglify": "4.0.0",
 98 |     "rollup-watch": "4.3.1"
 99 |   }
100 | }
101 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
  1 | import babel from 'rollup-plugin-babel'
  2 | import { terser } from 'rollup-plugin-terser'
  3 | import license from 'rollup-plugin-license'
  4 | import replace from 'rollup-plugin-replace'
  5 | import { uglify } from 'rollup-plugin-uglify'
  6 | import postcss from 'rollup-plugin-postcss'
  7 | import filesize from 'rollup-plugin-filesize'
  8 | import cssnano from 'cssnano'
  9 | 
 10 | import pkg from './package.json'
 11 | 
 12 | const banner = `/*! ${pkg.name} ${pkg.version} | ${pkg.license} License | https://github.com/${pkg.repository} */`
 13 | 
 14 | const sharedPlugins = [
 15 |   postcss({
 16 |     extensions: ['.css'],
 17 |     plugins: [cssnano()],
 18 |   }),
 19 |   replace({
 20 |     __TEST__: process.env.NODE_ENV === 'test' ? 'true' : 'false',
 21 |   }),
 22 |   babel({
 23 |     exclude: 'node_modules/**',
 24 |     plugins: ['external-helpers', 'transform-object-rest-spread'],
 25 |   }),
 26 |   filesize({
 27 |     showMinifiedSize: false,
 28 |     showGzippedSize: true,
 29 |   }),
 30 | ]
 31 | const prettifyPlugin = uglify({
 32 |   compress: false,
 33 |   mangle: false,
 34 |   output: {
 35 |     beautify: true,
 36 |     indent_level: 2,
 37 |     preamble: banner,
 38 |   },
 39 | })
 40 | 
 41 | export default [
 42 |   {
 43 |     input: 'src/index.js',
 44 |     output: {
 45 |       file: pkg.module,
 46 |       format: 'es',
 47 |     },
 48 |     plugins: [...sharedPlugins, license({ banner })],
 49 |   },
 50 |   {
 51 |     input: 'src/index.js',
 52 |     output: {
 53 |       name: 'mediumZoom',
 54 |       file: pkg.main.replace('.min', ''),
 55 |       format: 'umd',
 56 |     },
 57 |     plugins: [...sharedPlugins, prettifyPlugin],
 58 |   },
 59 |   {
 60 |     input: 'src/index.js',
 61 |     output: {
 62 |       name: 'mediumZoom',
 63 |       file: pkg.main,
 64 |       format: 'umd',
 65 |     },
 66 |     plugins: [...sharedPlugins, terser(), license({ banner })],
 67 |   },
 68 |   // pure
 69 |   {
 70 |     input: 'src/medium-zoom.js',
 71 |     output: {
 72 |       file: 'dist/pure/index.js',
 73 |       format: 'es',
 74 |     },
 75 |     plugins: [...sharedPlugins, license({ banner })],
 76 |   },
 77 |   {
 78 |     input: 'src/medium-zoom.js',
 79 |     output: {
 80 |       name: 'mediumZoom',
 81 |       file: 'dist/pure/medium-zoom.umd.js',
 82 |       format: 'umd',
 83 |     },
 84 |     plugins: [...sharedPlugins, prettifyPlugin],
 85 |   },
 86 |   {
 87 |     input: 'src/medium-zoom.js',
 88 |     output: {
 89 |       name: 'mediumZoom',
 90 |       file: 'dist/pure/medium-zoom.min.umd.js',
 91 |       format: 'umd',
 92 |     },
 93 |     plugins: [...sharedPlugins, terser(), license({ banner })],
 94 |   },
 95 |   // style
 96 |   {
 97 |     input: 'src/medium-zoom.css',
 98 |     output: {
 99 |       file: 'dist/style.css',
100 |       format: 'es',
101 |     },
102 |     plugins: [
103 |       postcss({
104 |         extract: true,
105 |         minimize: true,
106 |       }),
107 |       license({ banner }),
108 |     ],
109 |   },
110 | ]
111 | 


--------------------------------------------------------------------------------
/scripts/release-examples.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | 
 3 | set -e
 4 | 
 5 | printf "\nUpdating 'medium-zoom' dependency in examples...\n"
 6 | 
 7 | node ./scripts/update-examples
 8 | 
 9 | git add examples
10 | git commit -m "chore(examples): update medium-zoom dependency"
11 | git push origin master
12 | 


--------------------------------------------------------------------------------
/scripts/update-examples.js:
--------------------------------------------------------------------------------
 1 | const { readdirSync, statSync } = require('fs')
 2 | const { join } = require('path')
 3 | const { execSync } = require('child_process')
 4 | const { version } = require('../package.json')
 5 | 
 6 | const examples = readdirSync('examples')
 7 |   .map(file => join('examples', file))
 8 |   .filter(file => statSync(file).isDirectory())
 9 | 
10 | examples.forEach(path => {
11 |   execSync(`cd ${path} && yarn upgrade medium-zoom@${version}`, {
12 |     stdio: 'inherit',
13 |   })
14 | })
15 | 


--------------------------------------------------------------------------------
/src/__mocks__/styleMock.js:
--------------------------------------------------------------------------------
1 | module.exports = {}
2 | 


--------------------------------------------------------------------------------
/src/__tests__/__snapshots__/medium-zoom.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`attach() attach("") throws error 1`] = `
  4 | "The provided selector is invalid.
  5 | Expects a CSS selector, a Node element, a NodeList or an array.
  6 | See: https://github.com/francoischalifour/medium-zoom"
  7 | `;
  8 | 
  9 | exports[`browser events closes on escape 1`] = `
 10 | <body
 11 |   class=""
 12 | >
 13 |   <img
 14 |     class="medium-zoom-image"
 15 |   />
 16 | </body>
 17 | `;
 18 | 
 19 | exports[`browser events closes zoom on click on the overlay 1`] = `
 20 | <body
 21 |   class=""
 22 | >
 23 |   <img
 24 |     class="medium-zoom-image"
 25 |   />
 26 | </body>
 27 | `;
 28 | 
 29 | exports[`browser events does not close on other keys 1`] = `
 30 | <body
 31 |   class="medium-zoom--opened"
 32 | >
 33 |   <img
 34 |     class="medium-zoom-image medium-zoom-image--hidden"
 35 |   />
 36 |   <div
 37 |     class="medium-zoom-overlay"
 38 |     style="background: rgb(255, 255, 255);"
 39 |   />
 40 |   <img
 41 |     class="medium-zoom-image medium-zoom-image--opened"
 42 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
 43 |   />
 44 | </body>
 45 | `;
 46 | 
 47 | exports[`browser events opens zoom on click on the image 1`] = `
 48 | <body
 49 |   class="medium-zoom--opened"
 50 | >
 51 |   <img
 52 |     class="medium-zoom-image medium-zoom-image--hidden"
 53 |   />
 54 |   <div
 55 |     class="medium-zoom-overlay"
 56 |     style="background: rgb(255, 255, 255);"
 57 |   />
 58 |   <img
 59 |     class="medium-zoom-image medium-zoom-image--opened"
 60 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
 61 |   />
 62 | </body>
 63 | `;
 64 | 
 65 | exports[`close() close() twice does not throw and renders correctly 1`] = `
 66 | <body
 67 |   class=""
 68 | >
 69 |   <img
 70 |     class="medium-zoom-image"
 71 |   />
 72 | </body>
 73 | `;
 74 | 
 75 | exports[`close() close() with \`data-zoom-src\` renders correctly 1`] = `
 76 | <body
 77 |   class=""
 78 | >
 79 |   <img
 80 |     class="medium-zoom-image"
 81 |     data-zoom-src="image-hd.jpg"
 82 |   />
 83 | </body>
 84 | `;
 85 | 
 86 | exports[`close() mediumZoom({ template }).close() renders correctly 1`] = `
 87 | <body
 88 |   class=""
 89 | >
 90 |   <template />
 91 |   <img
 92 |     class="medium-zoom-image"
 93 |   />
 94 | </body>
 95 | `;
 96 | 
 97 | exports[`close() mediumZoom(Node).close() renders correctly 1`] = `
 98 | <body
 99 |   class=""
100 | >
101 |   <img
102 |     class="medium-zoom-image"
103 |   />
104 | </body>
105 | `;
106 | 
107 | exports[`close() mediumZoom(String).close() renders correctly 1`] = `
108 | <body
109 |   class=""
110 | >
111 |   <img
112 |     class="medium-zoom-image"
113 |   />
114 |   <img
115 |     class="medium-zoom-image"
116 |   />
117 | </body>
118 | `;
119 | 
120 | exports[`detach() detach() an opened zoom closes the zoom and detaches images 1`] = `
121 | <body
122 |   class=""
123 | >
124 |   <img
125 |     class=""
126 |   />
127 | </body>
128 | `;
129 | 
130 | exports[`mediumZoom() mediumZoom(selector) selector mediumZoom("") throws 1`] = `
131 | "The provided selector is invalid.
132 | Expects a CSS selector, a Node element, a NodeList or an array.
133 | See: https://github.com/francoischalifour/medium-zoom"
134 | `;
135 | 
136 | exports[`open() mediumZoom({ background }).open() renders correctly 1`] = `
137 | <body
138 |   class="medium-zoom--opened"
139 | >
140 |   <img
141 |     class="medium-zoom-image medium-zoom-image--hidden"
142 |   />
143 |   <div
144 |     class="medium-zoom-overlay"
145 |     style="background: rgb(186, 218, 85);"
146 |   />
147 |   <img
148 |     class="medium-zoom-image medium-zoom-image--opened"
149 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
150 |   />
151 | </body>
152 | `;
153 | 
154 | exports[`open() mediumZoom({ container: Node }).open() renders correctly 1`] = `
155 | <body
156 |   class="medium-zoom--opened"
157 | >
158 |   <div />
159 |   <img
160 |     class="medium-zoom-image medium-zoom-image--hidden"
161 |   />
162 |   <div
163 |     class="medium-zoom-overlay"
164 |     style="background: rgb(255, 255, 255);"
165 |   />
166 |   <img
167 |     class="medium-zoom-image medium-zoom-image--opened"
168 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
169 |   />
170 | </body>
171 | `;
172 | 
173 | exports[`open() mediumZoom({ container: Object }).open() renders correctly 1`] = `
174 | <body
175 |   class="medium-zoom--opened"
176 | >
177 |   <img
178 |     class="medium-zoom-image medium-zoom-image--hidden"
179 |   />
180 |   <div
181 |     class="medium-zoom-overlay"
182 |     style="background: rgb(255, 255, 255);"
183 |   />
184 |   <img
185 |     class="medium-zoom-image medium-zoom-image--opened"
186 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
187 |   />
188 | </body>
189 | `;
190 | 
191 | exports[`open() mediumZoom({ container: String }).open() renders correctly 1`] = `
192 | <body
193 |   class="medium-zoom--opened"
194 | >
195 |   <div />
196 |   <img
197 |     class="medium-zoom-image medium-zoom-image--hidden"
198 |   />
199 |   <div
200 |     class="medium-zoom-overlay"
201 |     style="background: rgb(255, 255, 255);"
202 |   />
203 |   <img
204 |     class="medium-zoom-image medium-zoom-image--opened"
205 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
206 |   />
207 | </body>
208 | `;
209 | 
210 | exports[`open() mediumZoom({ template: Node }).open() renders correctly 1`] = `
211 | <body
212 |   class="medium-zoom--opened"
213 | >
214 |   <template />
215 |   <img
216 |     class="medium-zoom-image medium-zoom-image--hidden"
217 |   />
218 |   <div
219 |     class="medium-zoom-overlay"
220 |     style="background: rgb(255, 255, 255);"
221 |   />
222 |   <div />
223 |   <img
224 |     class="medium-zoom-image medium-zoom-image--opened"
225 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
226 |   />
227 | </body>
228 | `;
229 | 
230 | exports[`open() mediumZoom({ template: String }).open() renders correctly 1`] = `
231 | <body
232 |   class="medium-zoom--opened"
233 | >
234 |   <template />
235 |   <img
236 |     class="medium-zoom-image medium-zoom-image--hidden"
237 |   />
238 |   <div
239 |     class="medium-zoom-overlay"
240 |     style="background: rgb(255, 255, 255);"
241 |   />
242 |   <div />
243 |   <img
244 |     class="medium-zoom-image medium-zoom-image--opened"
245 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
246 |   />
247 | </body>
248 | `;
249 | 
250 | exports[`open() open() a SVG renders correctly 1`] = `
251 | <body
252 |   class="medium-zoom--opened"
253 | >
254 |   <img
255 |     class="medium-zoom-image medium-zoom-image--hidden"
256 |     src="vector.svg"
257 |   />
258 |   <div
259 |     class="medium-zoom-overlay"
260 |     style="background: rgb(255, 255, 255);"
261 |   />
262 |   <img
263 |     class="medium-zoom-image medium-zoom-image--opened"
264 |     src="vector.svg"
265 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
266 |   />
267 | </body>
268 | `;
269 | 
270 | exports[`open() open() renders correctly 1`] = `
271 | <body
272 |   class="medium-zoom--opened"
273 | >
274 |   <img
275 |     class="medium-zoom-image medium-zoom-image--hidden"
276 |   />
277 |   <img
278 |     class="medium-zoom-image"
279 |   />
280 |   <div
281 |     class="medium-zoom-overlay"
282 |     style="background: rgb(255, 255, 255);"
283 |   />
284 |   <img
285 |     class="medium-zoom-image medium-zoom-image--opened"
286 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
287 |   />
288 | </body>
289 | `;
290 | 
291 | exports[`open() open() twice does not zoom twice 1`] = `
292 | <body
293 |   class="medium-zoom--opened"
294 | >
295 |   <img
296 |     class="medium-zoom-image medium-zoom-image--hidden"
297 |   />
298 |   <div
299 |     class="medium-zoom-overlay"
300 |     style="background: rgb(255, 255, 255);"
301 |   />
302 |   <img
303 |     class="medium-zoom-image medium-zoom-image--opened"
304 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
305 |   />
306 | </body>
307 | `;
308 | 
309 | exports[`open() open() with \`<picture>\` renders correctly 1`] = `
310 | <body
311 |   class="medium-zoom--opened"
312 | >
313 |   <picture>
314 |     <source
315 |       srcset="image-300x200.jpg 300w"
316 |     />
317 |     <img
318 |       class="medium-zoom-image medium-zoom-image--hidden"
319 |     />
320 |   </picture>
321 |   <div
322 |     class="medium-zoom-overlay"
323 |     style="background: rgb(255, 255, 255);"
324 |   />
325 |   <img
326 |     class="medium-zoom-image medium-zoom-image--opened"
327 |     src="http://localhost/mock-src.png"
328 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
329 |   />
330 | </body>
331 | `;
332 | 
333 | exports[`open() open() with \`data-zoom-src\` renders correctly 1`] = `
334 | <body
335 |   class="medium-zoom--opened"
336 | >
337 |   <img
338 |     class="medium-zoom-image medium-zoom-image--hidden"
339 |     data-zoom-src="image-hd.jpg"
340 |     src="image.jpg"
341 |   />
342 |   <div
343 |     class="medium-zoom-overlay"
344 |     style="background: rgb(255, 255, 255);"
345 |   />
346 |   <img
347 |     class="medium-zoom-image medium-zoom-image--opened"
348 |     data-zoom-src="image-hd.jpg"
349 |     src="image.jpg"
350 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
351 |   />
352 |   <img
353 |     class="medium-zoom-image medium-zoom-image--opened"
354 |     data-zoom-src="image-hd.jpg"
355 |     src="image-hd.jpg"
356 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
357 |   />
358 | </body>
359 | `;
360 | 
361 | exports[`open() open() with \`srcset\` renders correctly 1`] = `
362 | <body
363 |   class="medium-zoom--opened"
364 | >
365 |   <img
366 |     class="medium-zoom-image medium-zoom-image--hidden"
367 |     src="image.jpg"
368 |     srcset="image-300x200.jpg 300w, image-600x400.jpg 600w, image-800x500.jpg 800w, image-1000x650.jpg 1000w, image-1200x800.jpg 1200w"
369 |   />
370 |   <div
371 |     class="medium-zoom-overlay"
372 |     style="background: rgb(255, 255, 255);"
373 |   />
374 |   <img
375 |     class="medium-zoom-image medium-zoom-image--opened"
376 |     src="image.jpg"
377 |     srcset="image-300x200.jpg 300w, image-600x400.jpg 600w, image-800x500.jpg 800w, image-1000x650.jpg 1000w, image-1200x800.jpg 1200w"
378 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
379 |   />
380 | </body>
381 | `;
382 | 
383 | exports[`toggle() toggle() once renders correctly 1`] = `
384 | <body
385 |   class="medium-zoom--opened"
386 | >
387 |   <img
388 |     class="medium-zoom-image medium-zoom-image--hidden"
389 |   />
390 |   <div
391 |     class="medium-zoom-overlay"
392 |     style="background: rgb(255, 255, 255);"
393 |   />
394 |   <img
395 |     class="medium-zoom-image medium-zoom-image--opened"
396 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
397 |   />
398 | </body>
399 | `;
400 | 
401 | exports[`toggle() toggle() twice renders correctly: closed 1`] = `
402 | <body
403 |   class=""
404 | >
405 |   <img
406 |     class="medium-zoom-image"
407 |   />
408 | </body>
409 | `;
410 | 
411 | exports[`toggle() toggle() twice renders correctly: opened 1`] = `
412 | <body
413 |   class="medium-zoom--opened"
414 | >
415 |   <img
416 |     class="medium-zoom-image medium-zoom-image--hidden"
417 |   />
418 |   <div
419 |     class="medium-zoom-overlay"
420 |     style="background: rgb(255, 255, 255);"
421 |   />
422 |   <img
423 |     class="medium-zoom-image medium-zoom-image--opened"
424 |     style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"
425 |   />
426 | </body>
427 | `;
428 | 


--------------------------------------------------------------------------------
/src/__tests__/index.test.js:
--------------------------------------------------------------------------------
1 | import module from '..'
2 | 
3 | test('module is defined', () => {
4 |   expect(module).toBeDefined()
5 | })
6 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import mediumZoom from './medium-zoom'
2 | import './medium-zoom.css'
3 | 
4 | export default mediumZoom
5 | 


--------------------------------------------------------------------------------
/src/medium-zoom.css:
--------------------------------------------------------------------------------
 1 | .medium-zoom-overlay {
 2 |   position: fixed;
 3 |   top: 0;
 4 |   right: 0;
 5 |   bottom: 0;
 6 |   left: 0;
 7 |   opacity: 0;
 8 |   transition: opacity 300ms;
 9 |   will-change: opacity;
10 | }
11 | 
12 | .medium-zoom--opened .medium-zoom-overlay {
13 |   cursor: pointer;
14 |   cursor: zoom-out;
15 |   opacity: 1;
16 | }
17 | 
18 | .medium-zoom-image {
19 |   cursor: pointer;
20 |   cursor: zoom-in;
21 |   /*
22 |     The `transition` is marked as "!important" for the animation to happen
23 |     even though it's overriden by another inline `transition` style attribute.
24 | 
25 |     This is problematic with frameworks that generate inline styles on their
26 |     images (e.g. Gatsby).
27 | 
28 |     See https://github.com/francoischalifour/medium-zoom/issues/110
29 |    */
30 |   transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
31 | }
32 | 
33 | .medium-zoom-image--hidden {
34 |   visibility: hidden;
35 | }
36 | 
37 | .medium-zoom-image--opened {
38 |   position: relative;
39 |   cursor: pointer;
40 |   cursor: zoom-out;
41 |   will-change: transform;
42 | }
43 | 


--------------------------------------------------------------------------------
/src/medium-zoom.d.ts:
--------------------------------------------------------------------------------
  1 | export type ZoomSelector = string | HTMLElement | HTMLElement[] | NodeList
  2 | 
  3 | export interface ZoomOptions {
  4 |   /**
  5 |    * The space outside the zoomed image.
  6 |    *
  7 |    * @default 0
  8 |    */
  9 |   margin?: number
 10 | 
 11 |   /**
 12 |    * The background of the overlay.
 13 |    *
 14 |    * @default '#fff'
 15 |    */
 16 |   background?: string
 17 | 
 18 |   /**
 19 |    * The number of pixels to scroll to close the zoom.
 20 |    *
 21 |    * @default 40
 22 |    */
 23 |   scrollOffset?: number
 24 | 
 25 |   /**
 26 |    * The viewport to render the zoom in.
 27 |    *
 28 |    * @default null
 29 |    */
 30 |   container?: string | HTMLElement | ZoomContainer
 31 | 
 32 |   /**
 33 |    * The template element to display on zoom.
 34 |    *
 35 |    * @default null
 36 |    */
 37 |   template?: string | HTMLTemplateElement
 38 | }
 39 | 
 40 | export interface ZoomContainer {
 41 |   width?: number
 42 |   height?: number
 43 |   top?: number
 44 |   bottom?: number
 45 |   right?: number
 46 |   left?: number
 47 | }
 48 | 
 49 | export interface ZoomOpenOptions {
 50 |   /**
 51 |    * The target of the zoom.
 52 |    *
 53 |    * If not specified, the target is the first image of the zoom.
 54 |    *
 55 |    * @default null
 56 |    */
 57 |   target?: HTMLElement
 58 | }
 59 | 
 60 | export interface Zoom {
 61 |   /**
 62 |    * Opens the zoom.
 63 |    *
 64 |    * @param options
 65 |    * @returns A promise resolving with the zoom.
 66 |    */
 67 |   open(options?: ZoomOpenOptions): Promise<Zoom>
 68 | 
 69 |   /**
 70 |    * Closes the zoom.
 71 |    *
 72 |    * @returns A promise resolving with the zoom.
 73 |    */
 74 |   close(): Promise<Zoom>
 75 | 
 76 |   /**
 77 |    * Toggles the zoom.
 78 |    *
 79 |    * @param options
 80 |    * @returns A promise resolving with the zoom.
 81 |    */
 82 |   toggle(options?: ZoomOpenOptions): Promise<Zoom>
 83 | 
 84 |   /**
 85 |    * Attaches the images to the zoom.
 86 |    *
 87 |    * @param selectors - The selectors describing the images.
 88 |    * @returns The zoom.
 89 |    */
 90 |   attach(...selectors: ZoomSelector[]): Zoom
 91 | 
 92 |   /**
 93 |    * Releases the images from the zoom.
 94 |    *
 95 |    * @param selectors - The selectors describing the images.
 96 |    * @returns The zoom.
 97 |    */
 98 |   detach(...selectors: ZoomSelector[]): Zoom
 99 | 
100 |   /**
101 |    * Updates the options.
102 |    *
103 |    * @param options
104 |    * @returns The zoom.
105 |    */
106 |   update(options: ZoomOptions): Zoom
107 | 
108 |   /**
109 |    * Extends the zoom with the provided options merged with the current ones.
110 |    *
111 |    * @param options
112 |    * @returns The zoom.
113 |    */
114 |   clone(options?: ZoomOptions): Zoom
115 | 
116 |   /**
117 |    * Registers an event handler on each target of the zoom.
118 |    *
119 |    * @param type - The event type to listen for.
120 |    * @param listener - The function to execute when the event is triggered.
121 |    * @param options - The event listener options (same as [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters))
122 |    * @returns The zoom.
123 |    */
124 |   on(
125 |     type: string,
126 |     listener: EventListenerOrEventListenerObject,
127 |     options?: boolean | AddEventListenerOptions
128 |   ): Zoom
129 | 
130 |   /**
131 |    * Unregisters an event handler.
132 |    *
133 |    * @param type - The event type to unregister.
134 |    * @param listener - The function to remove from the event target.
135 |    * @param options - The event listener options (same as [`removeEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#Parameters))
136 |    * @returns The zoom.
137 |    */
138 |   off(
139 |     type: string,
140 |     listener: EventListenerOrEventListenerObject,
141 |     options?: boolean | AddEventListenerOptions
142 |   ): Zoom
143 | 
144 |   /**
145 |    * Returns the zoom options.
146 |    *
147 |    * @returns The zoom options.
148 |    */
149 |   getOptions(): ZoomOptions
150 | 
151 |   /**
152 |    * Returns the zoom images.
153 |    *
154 |    * @returns The zoom images.
155 |    */
156 |   getImages(): HTMLElement[]
157 | 
158 |   /**
159 |    * Returns the current zoomed image.
160 |    *
161 |    * @returns The current zoomed image.
162 |    */
163 |   getZoomedImage(): HTMLElement
164 | }
165 | 
166 | /**
167 |  * Attaches a zoom effect on a selection of images.
168 |  *
169 |  * @param selector The selector to target the images.
170 |  * @param options The options of the zoom.
171 |  * @returns The zoom.
172 |  */
173 | declare function mediumZoom(
174 |   selector?: ZoomSelector,
175 |   options?: ZoomOptions
176 | ): Zoom
177 | 
178 | /**
179 |  * Attaches a zoom effect on a selection of images.
180 |  *
181 |  * @param options The options of the zoom.
182 |  * @returns The zoom.
183 |  */
184 | declare function mediumZoom(options?: ZoomOptions): Zoom
185 | 
186 | export default mediumZoom
187 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
  1 | export const isSupported = node => node.tagName === 'IMG'
  2 | 
  3 | /* eslint-disable-next-line no-prototype-builtins */
  4 | export const isNodeList = selector => NodeList.prototype.isPrototypeOf(selector)
  5 | 
  6 | export const isNode = selector => selector && selector.nodeType === 1
  7 | 
  8 | export const isSvg = image => {
  9 |   const source = image.currentSrc || image.src
 10 |   return source.substr(-4).toLowerCase() === '.svg'
 11 | }
 12 | 
 13 | export const getImagesFromSelector = selector => {
 14 |   try {
 15 |     if (Array.isArray(selector)) {
 16 |       return selector.filter(isSupported)
 17 |     }
 18 | 
 19 |     if (isNodeList(selector)) {
 20 |       // Do not use spread operator or Array.from() for IE support
 21 |       return [].slice.call(selector).filter(isSupported)
 22 |     }
 23 | 
 24 |     if (isNode(selector)) {
 25 |       return [selector].filter(isSupported)
 26 |     }
 27 | 
 28 |     if (typeof selector === 'string') {
 29 |       // Do not use spread operator or Array.from() for IE support
 30 |       return [].slice
 31 |         .call(document.querySelectorAll(selector))
 32 |         .filter(isSupported)
 33 |     }
 34 | 
 35 |     return []
 36 |   } catch (err) {
 37 |     throw new TypeError(
 38 |       'The provided selector is invalid.\n' +
 39 |         'Expects a CSS selector, a Node element, a NodeList or an array.\n' +
 40 |         'See: https://github.com/francoischalifour/medium-zoom'
 41 |     )
 42 |   }
 43 | }
 44 | 
 45 | export const createOverlay = background => {
 46 |   const overlay = document.createElement('div')
 47 |   overlay.classList.add('medium-zoom-overlay')
 48 |   overlay.style.background = background
 49 | 
 50 |   return overlay
 51 | }
 52 | 
 53 | export const cloneTarget = template => {
 54 |   const { top, left, width, height } = template.getBoundingClientRect()
 55 |   const clone = template.cloneNode()
 56 |   const scrollTop =
 57 |     window.pageYOffset ||
 58 |     document.documentElement.scrollTop ||
 59 |     document.body.scrollTop ||
 60 |     0
 61 |   const scrollLeft =
 62 |     window.pageXOffset ||
 63 |     document.documentElement.scrollLeft ||
 64 |     document.body.scrollLeft ||
 65 |     0
 66 | 
 67 |   clone.removeAttribute('id')
 68 |   clone.style.position = 'absolute'
 69 |   clone.style.top = `${top + scrollTop}px`
 70 |   clone.style.left = `${left + scrollLeft}px`
 71 |   clone.style.width = `${width}px`
 72 |   clone.style.height = `${height}px`
 73 |   clone.style.transform = ''
 74 | 
 75 |   return clone
 76 | }
 77 | 
 78 | export const createCustomEvent = (type, params) => {
 79 |   const eventParams = {
 80 |     bubbles: false,
 81 |     cancelable: false,
 82 |     detail: undefined,
 83 |     ...params,
 84 |   }
 85 | 
 86 |   if (typeof window.CustomEvent === 'function') {
 87 |     return new CustomEvent(type, eventParams)
 88 |   }
 89 | 
 90 |   const customEvent = document.createEvent('CustomEvent')
 91 |   customEvent.initCustomEvent(
 92 |     type,
 93 |     eventParams.bubbles,
 94 |     eventParams.cancelable,
 95 |     eventParams.detail
 96 |   )
 97 | 
 98 |   return customEvent
 99 | }
100 | 


--------------------------------------------------------------------------------
/stories/attach.stories.js:
--------------------------------------------------------------------------------
 1 | import { storiesOf } from '@storybook/html'
 2 | 
 3 | storiesOf('attach()', module)
 4 |   .add(
 5 |     'with string selector',
 6 |     () =>
 7 |       `
 8 |       <div>
 9 |         <img id="image-1" src="image-3.jpg">
10 |       </div>
11 | 
12 |       <div>
13 |         <img id="image-2" src="image-4.jpg">
14 |       </div>
15 | 
16 |       <script>
17 |         const zoom = mediumZoom();
18 |         zoom.attach('img');
19 |       </script>
20 |     `,
21 |     {
22 |       notes: {
23 |         markdown: `Attaches the zoom with a string selector.`,
24 |       },
25 |     }
26 |   )
27 |   .add(
28 |     'with Node selector',
29 |     () =>
30 |       `
31 |       <div>
32 |         <img src="image-3.jpg">
33 |       </div>
34 | 
35 |       <script>
36 |         const zoom = mediumZoom();
37 |         zoom.attach(document.querySelector('img'));
38 |       </script>
39 |     `,
40 |     {
41 |       notes: {
42 |         markdown: `Attaches the zoom with a Node selector.`,
43 |       },
44 |     }
45 |   )
46 |   .add(
47 |     'with multiple selectors',
48 |     () =>
49 |       `
50 |       <div>
51 |         <img id="image-1" src="image-3.jpg">
52 |       </div>
53 | 
54 |       <div>
55 |         <img id="image-2" src="image-4.jpg">
56 |       </div>
57 | 
58 |       <script>
59 |         const zoom = mediumZoom();
60 |         zoom.attach('#image-1', '#image-2');
61 |       </script>
62 |     `,
63 |     {
64 |       notes: {
65 |         markdown: `Attaches the zoom with multiple selectors.`,
66 |       },
67 |     }
68 |   )
69 | 


--------------------------------------------------------------------------------
/stories/attributes.stories.js:
--------------------------------------------------------------------------------
  1 | import { storiesOf } from '@storybook/html'
  2 | 
  3 | storiesOf('attributes', module)
  4 |   .add(
  5 |     'data-zoom-src',
  6 |     () => `
  7 |       <img
  8 |         src="image-1.thumbnail.jpg"
  9 |         data-zoom-src="image-1.jpg"
 10 |       >
 11 | 
 12 |       <script>
 13 |         const zoom = mediumZoom('img');
 14 |       </script>
 15 |   `,
 16 |     {
 17 |       notes: {
 18 |         markdown: `Zoom on an image having a \`data-zoom-src\` attribute.`,
 19 |       },
 20 |     }
 21 |   )
 22 |   .add(
 23 |     'srcset',
 24 |     () => `
 25 |     <img
 26 |       srcset="
 27 |         image-1x300.jpg 300w,
 28 |         image-1x600.jpg 600w,
 29 |         image-1x800.jpg 800w,
 30 |         image-1x1000.jpg 1000w,
 31 |         image-1x1200.jpg 1200w
 32 |       "
 33 |     >
 34 | 
 35 |     <script>
 36 |       const zoom = mediumZoom('img');
 37 |     </script>
 38 | `,
 39 |     {
 40 |       notes: {
 41 |         markdown: `
 42 | Zoom on an image having \`srcset\` attributes.
 43 |     `,
 44 |       },
 45 |     }
 46 |   )
 47 |   .add(
 48 |     'srcset and data-zoom-src',
 49 |     () => `
 50 |     <img
 51 |       src="image-1x300.jpg"
 52 |       srcset="
 53 |         image-1x300.jpg 300w,
 54 |         image-1x600.jpg 600w,
 55 |       "
 56 |       sizes="(max-width: 400px) 100vw, 400px"
 57 |       data-zoom-src="image-1.jpg"
 58 |     >
 59 | 
 60 |     <script>
 61 |       const zoom = mediumZoom('img');
 62 |     </script>
 63 | `,
 64 |     {
 65 |       notes: `Zoom with srcset and data-zoom-src defined (zoom-target wins).`,
 66 |     }
 67 |   )
 68 |   .add(
 69 |     'SVG',
 70 |     () => `
 71 |       <img src="crab.svg">
 72 | 
 73 |       <script>
 74 |         const zoom = mediumZoom('img');
 75 |       </script>
 76 |     `,
 77 |     {
 78 |       notes: `
 79 |         Zoom on a SVG.
 80 |         The image fills the entire container.
 81 | 
 82 |         <em>Icon made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></em>
 83 |       `,
 84 |     }
 85 |   )
 86 |   .add(
 87 |     '<picture> tag',
 88 |     () => `
 89 |       <picture>
 90 |         <source type="image/jpeg" srcset="image-1x300.jpg 300w, image-1x600.jpg 600w"></source>
 91 |         <img>
 92 |       </picture>
 93 | 
 94 |       <script>
 95 |         const zoom = mediumZoom('img');
 96 |       </script>
 97 |     `,
 98 |     {
 99 |       notes: `
100 |         Zoom on an image inside a &lt;picture&gt; tag.
101 |         The cloned image mirrors the picture structure and resizes the same as a usual image tag.
102 |       `,
103 |     }
104 |   )
105 |   .add(
106 |     '<picture> tag and data-zoom-src',
107 |     () => `
108 |       <picture>
109 |         <source type="image/jpeg" srcset="image-1x300.jpg 300w, image-1x600.jpg 600w"></source>
110 |         <img data-zoom-src="image-1.jpg">
111 |       </picture>
112 | 
113 |       <script>
114 |         const zoom = mediumZoom('img');
115 |       </script>
116 |     `,
117 |     {
118 |       notes: `
119 |         Zoom on an image inside a &lt;picture&gt; tag.
120 |         The cloned image mirrors the picture structure and resizes the same as a usual image tag, which then uses the data-zoom-src value once loaded.
121 |       `,
122 |     }
123 |   )
124 | 


--------------------------------------------------------------------------------
/stories/clone.stories.js:
--------------------------------------------------------------------------------
 1 | import { storiesOf } from '@storybook/html'
 2 | 
 3 | storiesOf('clone()', module).add(
 4 |   'with margin',
 5 |   () => `
 6 |     <img src="image-2.jpg">
 7 | 
 8 |     <script>
 9 |       const zoom = mediumZoom({ background: '#000' });
10 |       const clonedZoom = zoom.clone({ margin: 100 })
11 |       clonedZoom.attach('img')
12 |     </script>
13 |   `,
14 |   {
15 |     notes: {
16 |       markdown: `This zoom clones an existing zoom and add margins.`,
17 |     },
18 |   }
19 | )
20 | 


--------------------------------------------------------------------------------
/stories/close.stories.js:
--------------------------------------------------------------------------------
 1 | import { storiesOf } from '@storybook/html'
 2 | 
 3 | storiesOf('close()', module).add(
 4 |   'default',
 5 |   () =>
 6 |     `
 7 |       <div>
 8 |         <img id="image-1" src="image-3.jpg">
 9 |       </div>
10 | 
11 |       <div>
12 |         <img id="image-2" src="image-4.jpg">
13 |       </div>
14 | 
15 |       <script>
16 |         const zoom = mediumZoom('img');
17 |         zoom
18 |           .open()
19 |           .then(zoom => zoom.close());
20 |       </script>
21 |     `,
22 |   {
23 |     notes: {
24 |       markdown: `Opens and closes the zoom.`,
25 |     },
26 |   }
27 | )
28 | 


--------------------------------------------------------------------------------
/stories/config/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-notes/register'
2 | import '@storybook/addon-options/register'
3 | import '@storybook/addon-storysource/register'
4 | 


--------------------------------------------------------------------------------
/stories/config/config.js:
--------------------------------------------------------------------------------
 1 | import { configure, addDecorator, getStorybook } from '@storybook/html'
 2 | import { setOptions } from '@storybook/addon-options'
 3 | import { withNotes } from '@storybook/addon-notes'
 4 | 
 5 | import { withPreview } from './decorators'
 6 | import './style.css'
 7 | 
 8 | setOptions({
 9 |   name: 'medium-zoom',
10 |   url: 'https://github.com/francoischalifour/medium-zoom',
11 | })
12 | 
13 | addDecorator(withNotes)
14 | addDecorator(withPreview)
15 | 
16 | const req = require.context('..', true, /\.stories\.js$/)
17 | 
18 | function loadStories() {
19 |   req.keys().forEach(filename => req(filename))
20 | }
21 | 
22 | configure(loadStories, module)
23 | 


--------------------------------------------------------------------------------
/stories/config/decorators.js:
--------------------------------------------------------------------------------
 1 | export function withPreview(story) {
 2 |   const activeZoom = window.zoom
 3 | 
 4 |   if (activeZoom) {
 5 |     activeZoom.detach()
 6 |   }
 7 | 
 8 |   const wrapper = document.createElement('div')
 9 |   const dom = document.createElement('div')
10 |   const storyHtml = story()
11 | 
12 |   wrapper.innerHTML = storyHtml
13 | 
14 |   Array.from(wrapper.childNodes).forEach(node => {
15 |     if (node.tagName === 'SCRIPT') {
16 |       const script = document.createElement('script')
17 |       script.innerHTML = `
18 |           setTimeout(() => {
19 | 
20 |             ${node.innerHTML}
21 | 
22 |             if (zoom) {
23 |               // Attach the zoom to the window to detach the zoom
24 |               // when the user goes to another story.
25 |               window.zoom = zoom;
26 |             }
27 |           }, 100);
28 |         `
29 |       dom.appendChild(script)
30 |       return
31 |     }
32 | 
33 |     dom.appendChild(node)
34 |   })
35 | 
36 |   dom.id = 'wrapper'
37 | 
38 |   return dom
39 | }
40 | 


--------------------------------------------------------------------------------
/stories/config/preview-head.html:
--------------------------------------------------------------------------------
1 | <!-- Scripts are copied from `/dist/` when running Storybook -->
2 | <script src="medium-zoom.js"></script>
3 | 


--------------------------------------------------------------------------------
/stories/config/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 3 |     'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
 4 |     'Segoe UI Symbol';
 5 | }
 6 | 
 7 | #wrapper {
 8 |   position: relative;
 9 |   min-height: 150vh;
10 |   text-align: center;
11 | }
12 | 
13 | img {
14 |   max-width: 500px;
15 | }
16 | 
17 | button {
18 |   outline: none;
19 |   margin: 24px;
20 |   cursor: pointer;
21 |   background: #fff;
22 |   border: 1px solid rgba(0, 0, 0, 0.1);
23 |   border-radius: 4px;
24 |   padding: 12px 24px;
25 |   font: inherit;
26 | }
27 | 


--------------------------------------------------------------------------------
/stories/config/webpack.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = (_baseConfig, _env, defaultConfig) => {
 2 |   defaultConfig.module.rules.push({
 3 |     test: /\.stories\.js$/,
 4 |     loaders: [
 5 |       {
 6 |         loader: require.resolve('@storybook/addon-storysource/loader'),
 7 |       },
 8 |     ],
 9 |     enforce: 'pre',
10 |   })
11 | 
12 |   return defaultConfig
13 | }
14 | 


--------------------------------------------------------------------------------
/stories/detach.stories.js:
--------------------------------------------------------------------------------
 1 | import { storiesOf } from '@storybook/html'
 2 | 
 3 | storiesOf('detach()', module)
 4 |   .add(
 5 |     'with string selector',
 6 |     () =>
 7 |       `
 8 |       <div>
 9 |         <img id="image-1" src="image-3.jpg">
10 |       </div>
11 | 
12 |       <div>
13 |         <img id="image-2" src="image-4.jpg">
14 |       </div>
15 | 
16 |       <script>
17 |         const zoom = mediumZoom('img');
18 |         zoom.detach('#image-1');
19 |       </script>
20 |     `,
21 |     {
22 |       notes: {
23 |         markdown: `Detaches the first image from the zoom with a string selector.`,
24 |       },
25 |     }
26 |   )
27 |   .add(
28 |     'with Node selector',
29 |     () =>
30 |       `
31 |       <div>
32 |         <img id="image-1" src="image-3.jpg">
33 |       </div>
34 | 
35 |       <div>
36 |         <img id="image-2" src="image-4.jpg">
37 |       </div>
38 | 
39 |       <script>
40 |         const zoom = mediumZoom('img');
41 |         zoom.detach(document.querySelector('#image-1'));
42 |       </script>
43 |     `,
44 |     {
45 |       notes: {
46 |         markdown: `Detaches the first image from the zoom with a Node selector.`,
47 |       },
48 |     }
49 |   )
50 |   .add(
51 |     'with multiple selectors',
52 |     () =>
53 |       `
54 |       <div>
55 |         <img id="image-1" src="image-3.jpg">
56 |       </div>
57 | 
58 |       <div>
59 |         <img id="image-2" src="image-4.jpg">
60 |       </div>
61 | 
62 |       <script>
63 |         const zoom = mediumZoom('img');
64 |         zoom.detach('#image-1', '#image-2');
65 |       </script>
66 |     `,
67 |     {
68 |       notes: {
69 |         markdown: `Detaches the images from the zoom with a multiple selectors.`,
70 |       },
71 |     }
72 |   )
73 |   .add(
74 |     'all',
75 |     () =>
76 |       `
77 |       <div>
78 |         <img id="image-1" src="image-3.jpg">
79 |       </div>
80 | 
81 |       <div>
82 |         <img id="image-2" src="image-4.jpg">
83 |       </div>
84 | 
85 |       <script>
86 |         const zoom = mediumZoom('img');
87 |         zoom.detach();
88 |       </script>
89 |     `,
90 |     {
91 |       notes: {
92 |         markdown: `Detaches all images from the zoom without selectors.`,
93 |       },
94 |     }
95 |   )
96 | 


--------------------------------------------------------------------------------
/stories/getImages.stories.js:
--------------------------------------------------------------------------------
 1 | import { storiesOf } from '@storybook/html'
 2 | 
 3 | storiesOf('getImages()', module).add(
 4 |   'default',
 5 |   () => `
 6 |     <div>
 7 |       <img src="image-3.jpg">
 8 |     </div>
 9 | 
10 |     <div>
11 |       <img src="image-4.jpg">
12 |     </div>
13 | 
14 |     <script>
15 |       const zoom = mediumZoom('img');
16 | 
17 |       console.group('getImages()');
18 |       console.log(zoom.getImages());
19 |       console.groupEnd();
20 |     </script>
21 |   `,
22 |   {
23 |     notes: {
24 |       markdown: `
25 | Returns the zoom images.
26 | 
27 | _Check the console._`,
28 |     },
29 |   }
30 | )
31 | 


--------------------------------------------------------------------------------
/stories/getOptions.stories.js:
--------------------------------------------------------------------------------
 1 | import { storiesOf } from '@storybook/html'
 2 | 
 3 | storiesOf('getOptions()', module).add(
 4 |   'default',
 5 |   () => `
 6 |     <img src="image-2.jpg">
 7 | 
 8 |     <script>
 9 |       const zoom = mediumZoom({ background: '#000', margin: 48 });
10 | 
11 |       console.group('getOptions()');
12 |       console.log(zoom.getOptions());
13 |       console.groupEnd();
14 |     </script>
15 |   `,
16 |   {
17 |     notes: {
18 |       markdown: `
19 | Returns the zoom options.
20 | 
21 | _Check the console._`,
22 |     },
23 |   }
24 | )
25 | 


--------------------------------------------------------------------------------
/stories/getZoomedImage.stories.js:
--------------------------------------------------------------------------------
 1 | import { storiesOf } from '@storybook/html'
 2 | 
 3 | storiesOf('getZoomedImage()', module).add(
 4 |   'default',
 5 |   () => `
 6 |     <img src="image-2.jpg">
 7 | 
 8 |     <script>
 9 |       const zoom = mediumZoom('img');
10 | 
11 |       console.group('getZoomedImage()');
12 |       console.log(zoom.getZoomedImage());
13 |       zoom.on('open', () => console.log(zoom.getZoomedImage()))
14 |       console.groupEnd();
15 |     </script>
16 |   `,
17 |   {
18 |     notes: {
19 |       markdown: `
20 | Returns the zoom active target.
21 | 
22 | _Check the console._`,
23 |     },
24 |   }
25 | )
26 | 


--------------------------------------------------------------------------------
/stories/images/crab.svg:
--------------------------------------------------------------------------------
1 | <svg enable-background="new 0 0 136.394 136.394" viewBox="0 0 136.394 136.394" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill-rule="evenodd"><g fill="#cc4428"><path d="m106.796 78.378c2.753-4.492 8.627-5.903 13.118-3.149 4.492 2.753 5.902 8.625 3.15 13.118"/><path d="m100.892 95.112c3.721-3.731 9.761-3.739 13.491-.02 3.73 3.722 3.738 9.761.018 13.492"/><path d="m88.089 106.11c4.731-2.316 10.445-.359 12.763 4.373 2.317 4.732.358 10.445-4.372 12.763"/><path d="m30.072 78.378c-2.753-4.492-8.626-5.903-13.118-3.149-4.492 2.753-5.901 8.625-3.149 13.118"/><path d="m37.529 95.112c-3.72-3.731-9.761-3.739-13.491-.02-3.73 3.722-3.738 9.761-.018 13.492"/><path d="m50.331 106.11c-4.731-2.316-10.445-.359-12.763 4.373-2.316 4.732-.358 10.445 4.373 12.763"/><path d="m115.488 48.326-11.818 17.458c-1.598 2.429-3.709 1.17-5.75-.176-2.042-1.345 2.372-10.309 3.972-12.737l6.2-9.414"/></g><path d="m132.772 26.126c5.275 5.956 4.724 15.061-1.23 20.335-5.957 5.275-15.061 4.722-20.336-1.232" fill="#e4552c"/><path d="m129.043 15.65c-8.301-4.982-19.068-2.294-24.052 6.008-4.982 8.3-2.291 19.066 6.009 24.05" fill="#e4552c"/><path d="m20.906 48.326 11.816 17.458c1.6 2.429 3.709 1.17 5.751-.176 2.042-1.345-2.373-10.309-3.971-12.737l-6.201-9.414" fill="#cc4428"/><g fill="#e4552c"><path d="m3.623 26.126c-5.276 5.956-4.725 15.061 1.228 20.335 5.957 5.275 15.06 4.722 20.336-1.232"/><path d="m7.351 15.65c8.302-4.982 19.069-2.294 24.051 6.008 4.983 8.3 2.291 19.066-6.008 24.05"/><path d="m100.349 48.483c5.444 6.944 8.689 15.693 8.689 25.201 0 22.573-18.299 40.874-40.873 40.874s-40.874-18.301-40.874-40.874c0-9.91 3.526-18.997 9.393-26.072"/><path d="m57.826 56.442c0 2.508-2.034 4.543-4.543 4.543h-1.328c-2.508 0-4.541-2.035-4.541-4.543v-17.662c0-2.509 2.033-4.541 4.541-4.541h1.328c2.509 0 4.543 2.032 4.543 4.541z"/><path d="m89.836 56.442c0 2.508-2.032 4.543-4.541 4.543h-1.328c-2.508 0-4.541-2.035-4.541-4.543v-17.662c0-2.509 2.033-4.541 4.541-4.541h1.328c2.509 0 4.541 2.032 4.541 4.541z"/></g><circle cx="84.632" cy="39.953" fill="#434849" r="3.514"/><path d="m84.632 39.276c0-.735.592-1.331 1.326-1.331.735 0 1.328.596 1.328 1.331 0 .731-.593 1.328-1.328 1.328-.734.001-1.326-.596-1.326-1.328z" fill="#fff"/><circle cx="52.62" cy="39.953" fill="#434849" r="3.514"/><path d="m52.62 39.276c0-.735.593-1.331 1.326-1.331.736 0 1.328.596 1.328 1.331 0 .731-.592 1.328-1.328 1.328-.733.001-1.326-.596-1.326-1.328z" fill="#fff"/></g></svg>


--------------------------------------------------------------------------------
/stories/images/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-1.jpg


--------------------------------------------------------------------------------
/stories/images/image-1.thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-1.thumbnail.jpg


--------------------------------------------------------------------------------
/stories/images/image-1x1000.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-1x1000.jpg


--------------------------------------------------------------------------------
/stories/images/image-1x1200.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-1x1200.jpg


--------------------------------------------------------------------------------
/stories/images/image-1x300.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-1x300.jpg


--------------------------------------------------------------------------------
/stories/images/image-1x600.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-1x600.jpg


--------------------------------------------------------------------------------
/stories/images/image-1x800.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-1x800.jpg


--------------------------------------------------------------------------------
/stories/images/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-2.jpg


--------------------------------------------------------------------------------
/stories/images/image-2.thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-2.thumbnail.jpg


--------------------------------------------------------------------------------
/stories/images/image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-3.jpg


--------------------------------------------------------------------------------
/stories/images/image-3.thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-3.thumbnail.jpg


--------------------------------------------------------------------------------
/stories/images/image-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-4.jpg


--------------------------------------------------------------------------------
/stories/images/image-4.thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-4.thumbnail.jpg


--------------------------------------------------------------------------------
/stories/images/image-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-5.jpg


--------------------------------------------------------------------------------
/stories/images/image-5.thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-5.thumbnail.jpg


--------------------------------------------------------------------------------
/stories/images/image-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-6.jpg


--------------------------------------------------------------------------------
/stories/images/image-6.thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-6.thumbnail.jpg


--------------------------------------------------------------------------------
/stories/images/image-7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-7.jpg


--------------------------------------------------------------------------------
/stories/images/image-7.thumbnail.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/stories/images/image-7.thumbnail.jpg


--------------------------------------------------------------------------------
/stories/off.stories.js:
--------------------------------------------------------------------------------
  1 | import { storiesOf } from '@storybook/html'
  2 | 
  3 | storiesOf('off()', module)
  4 |   .add(
  5 |     'open',
  6 |     () => `
  7 |       <img src="image-2.jpg">
  8 | 
  9 |       <script>
 10 |         const zoom = mediumZoom('img');
 11 |         const onOpen = () => alert('open')
 12 | 
 13 |         zoom.on('open', onOpen);
 14 |         zoom.off('open', onOpen);
 15 |       </script>
 16 |     `,
 17 |     {
 18 |       notes: {
 19 |         markdown: 'Listens and removes the listener on `open`.',
 20 |       },
 21 |     }
 22 |   )
 23 |   .add(
 24 |     'opened',
 25 |     () => `
 26 |       <img src="image-2.jpg">
 27 | 
 28 |       <script>
 29 |         const zoom = mediumZoom('img');
 30 |         const onOpened = () => alert('opened')
 31 | 
 32 |         zoom.on('opened', onOpened);
 33 |         zoom.off('opened', onOpened);
 34 |       </script>
 35 |     `,
 36 |     {
 37 |       notes: {
 38 |         markdown: 'Listens and removes the listener on `opened`.',
 39 |       },
 40 |     }
 41 |   )
 42 |   .add(
 43 |     'close',
 44 |     () => `
 45 |       <img src="image-2.jpg">
 46 | 
 47 |       <script>
 48 |         const zoom = mediumZoom('img');
 49 |         const onClose = () => alert('close')
 50 | 
 51 |         zoom.on('close', onClose);
 52 |         zoom.off('close', onClose);
 53 |       </script>
 54 |     `,
 55 |     {
 56 |       notes: {
 57 |         markdown: 'Listens and removes the listener on `close`.',
 58 |       },
 59 |     }
 60 |   )
 61 |   .add(
 62 |     'closed',
 63 |     () => `
 64 |       <img src="image-2.jpg">
 65 | 
 66 |       <script>
 67 |         const zoom = mediumZoom('img');
 68 |         const onClosed = () => alert('closed')
 69 | 
 70 |         zoom.on('closed', onClosed);
 71 |         zoom.off('closed', onClosed);
 72 |       </script>
 73 |     `,
 74 |     {
 75 |       notes: {
 76 |         markdown: 'Listens and removes the listener on `closed`.',
 77 |       },
 78 |     }
 79 |   )
 80 |   .add(
 81 |     'detach',
 82 |     () => `
 83 |       <img src="image-2.jpg">
 84 | 
 85 |       <script>
 86 |         const zoom = mediumZoom('img');
 87 |         const onDetach = () => alert('detach')
 88 | 
 89 |         zoom.on('detach', onDetach);
 90 |         zoom.off('detach', onDetach);
 91 | 
 92 |         zoom.detach();
 93 |       </script>
 94 |     `,
 95 |     {
 96 |       notes: {
 97 |         markdown: 'Listens and removes the listener on `detach`.',
 98 |       },
 99 |     }
100 |   )
101 | 


--------------------------------------------------------------------------------
/stories/on.stories.js:
--------------------------------------------------------------------------------
  1 | import { storiesOf } from '@storybook/html'
  2 | 
  3 | storiesOf('on()', module)
  4 |   .add(
  5 |     'open',
  6 |     () => `
  7 |       <img src="image-2.jpg">
  8 | 
  9 |       <script>
 10 |         const zoom = mediumZoom('img');
 11 | 
 12 |         zoom.on('open', () => alert('open'));
 13 |       </script>
 14 |     `,
 15 |     {
 16 |       notes: {
 17 |         markdown:
 18 |           'The `open` event fires immediately when the open method is called.',
 19 |       },
 20 |     }
 21 |   )
 22 |   .add(
 23 |     'opened',
 24 |     () => `
 25 |       <img src="image-2.jpg">
 26 | 
 27 |       <script>
 28 |         const zoom = mediumZoom('img');
 29 | 
 30 |         zoom.on('opened', () => alert('opened'));
 31 |       </script>
 32 |     `,
 33 |     {
 34 |       notes: {
 35 |         markdown:
 36 |           'The `opened` event fires when the zoom has finished being animated.',
 37 |       },
 38 |     }
 39 |   )
 40 |   .add(
 41 |     'close',
 42 |     () => `
 43 |       <img src="image-2.jpg">
 44 | 
 45 |       <script>
 46 |         const zoom = mediumZoom('img');
 47 | 
 48 |         zoom.on('close', () => alert('close'));
 49 |       </script>
 50 |     `,
 51 |     {
 52 |       notes: {
 53 |         markdown:
 54 |           'The `close` event fires immediately when the `close` instance method is called.',
 55 |       },
 56 |     }
 57 |   )
 58 |   .add(
 59 |     'closed',
 60 |     () => `
 61 |       <img src="image-2.jpg">
 62 | 
 63 |       <script>
 64 |         const zoom = mediumZoom('img');
 65 | 
 66 |         zoom.on('closed', () => alert('closed'));
 67 |       </script>
 68 |     `,
 69 |     {
 70 |       notes: {
 71 |         markdown:
 72 |           'The `closed` event fires when the zoom out has finished being animated.',
 73 |       },
 74 |     }
 75 |   )
 76 |   .add(
 77 |     'detach',
 78 |     () => `
 79 |       <img src="image-2.jpg">
 80 | 
 81 |       <div>
 82 |         <button id="detach">Detach</button>
 83 |       </div>
 84 | 
 85 |       <script>
 86 |         const zoom = mediumZoom('img');
 87 |         const button = document.querySelector('#detach');
 88 | 
 89 |         button.addEventListener('click', () => zoom.detach());
 90 |         zoom.on('detach', () => alert('detach'), { once: true });
 91 |       </script>
 92 |     `,
 93 |     {
 94 |       notes: {
 95 |         markdown: `The \`detach\` event fires when the \`detach\` instance method is called.
 96 |           Once detached, the image is not part of the zoom anymore.`,
 97 |       },
 98 |     }
 99 |   )
100 |   .add(
101 |     'open only once',
102 |     () => `
103 |       <img src="image-2.jpg">
104 | 
105 |       <script>
106 |         const zoom = mediumZoom('img');
107 | 
108 |         zoom.on('open', () => alert('open'), { once: true });
109 |       </script>
110 |     `,
111 |     {
112 |       notes: {
113 |         markdown:
114 |           'The `open` event fires immediately and only once when the open method is called.',
115 |       },
116 |     }
117 |   )
118 | 


--------------------------------------------------------------------------------
/stories/open.stories.js:
--------------------------------------------------------------------------------
 1 | import { storiesOf } from '@storybook/html'
 2 | 
 3 | storiesOf('open()', module)
 4 |   .add(
 5 |     'default',
 6 |     () =>
 7 |       `
 8 |       <div>
 9 |         <img id="image-1" src="image-3.jpg">
10 |       </div>
11 | 
12 |       <div>
13 |         <img id="image-2" src="image-4.jpg">
14 |       </div>
15 | 
16 |       <script>
17 |         const zoom = mediumZoom('img');
18 |         zoom.open();
19 |       </script>
20 |     `,
21 |     {
22 |       notes: {
23 |         markdown: `Opens the zoom with the default target.`,
24 |       },
25 |     }
26 |   )
27 |   .add(
28 |     'with target',
29 |     () =>
30 |       `
31 |       <div>
32 |         <img id="image-1" src="image-3.jpg">
33 |       </div>
34 | 
35 |       <div>
36 |         <img id="image-2" src="image-4.jpg">
37 |       </div>
38 | 
39 | 
40 |       <script>
41 |         const zoom = mediumZoom('img');
42 |         zoom.open({ target: document.querySelector('#image-2') });
43 |       </script>
44 |     `,
45 |     {
46 |       notes: {
47 |         markdown: `Opens the zoom with the specified target`,
48 |       },
49 |     }
50 |   )
51 | 


--------------------------------------------------------------------------------
/stories/options.stories.js:
--------------------------------------------------------------------------------
  1 | import { storiesOf } from '@storybook/html'
  2 | 
  3 | storiesOf('options', module)
  4 |   .add(
  5 |     'default',
  6 |     () => `
  7 |       <img src="image-1.jpg">
  8 | 
  9 |       <script>
 10 |         const zoom = mediumZoom('img');
 11 |       </script>
 12 |     `,
 13 |     {
 14 |       notes: `
 15 |         This is the default zoom.
 16 |       `,
 17 |     }
 18 |   )
 19 |   .add(
 20 |     'background (dark)',
 21 |     () =>
 22 |       `
 23 |       <img src="image-3.jpg">
 24 | 
 25 |       <script>
 26 |         const zoom = mediumZoom('img', {
 27 |           background: '#212530',
 28 |         });
 29 |       </script>
 30 |     `,
 31 |     {
 32 |       notes: `
 33 |         This is a zoom with a dark background.
 34 |       `,
 35 |     }
 36 |   )
 37 |   .add(
 38 |     'background (transparent)',
 39 |     () =>
 40 |       `
 41 |       <img src="image-4.jpg">
 42 | 
 43 |       <script>
 44 |         const zoom = mediumZoom('img', {
 45 |           background: 'rgba(25, 18, 25, .5)',
 46 |         });
 47 |       </script>
 48 | 
 49 |       <style>
 50 |         #wrapper::before {
 51 |           content: '';
 52 |           width: 100%;
 53 |           height: 100%;
 54 |           background-image: url(image-4.jpg);
 55 |           background-size: cover;
 56 |           background-position: center center;
 57 |           filter: blur(5px);
 58 |           transform: scale(2);
 59 |           position: absolute;
 60 |           z-index: -1;
 61 |         }
 62 |       </style>
 63 |     `,
 64 |     {
 65 |       notes: `
 66 |         This is a zoom with a transparent background.
 67 |       `,
 68 |     }
 69 |   )
 70 |   .add(
 71 |     'margin',
 72 |     () => `
 73 |       <img src="image-2.jpg">
 74 | 
 75 |       <script>
 76 |         const zoom = mediumZoom('img', {
 77 |           margin: 80,
 78 |         });
 79 |       </script>
 80 |       `,
 81 |     {
 82 |       notes: `
 83 |           This is a zoom with a margin of 80px.
 84 |         `,
 85 |     }
 86 |   )
 87 |   .add(
 88 |     'scrollOffset',
 89 |     () => `
 90 |       <img src="image-1.jpg">
 91 | 
 92 |       <script>
 93 |         const zoom = mediumZoom('img', {
 94 |           scrollOffset: 0,
 95 |         });
 96 |       </script>
 97 |     `,
 98 |     {
 99 |       notes: `
100 |         This is a zoom without scroll offset.
101 |         It closes as soon as you start scrolling.
102 |       `,
103 |     }
104 |   )
105 |   .add(
106 |     'container (DOM element)',
107 |     () => `
108 |       <img src="image-1.jpg">
109 | 
110 |       <div id="zoom-container"></div>
111 | 
112 |       <script>
113 |         const zoom = mediumZoom('img', {
114 |           container: '#zoom-container',
115 |           background: 'transparent',
116 |         });
117 |       </script>
118 | 
119 |       <style>
120 |         #zoom-container {
121 |           position: absolute;
122 |           top: 0;
123 |           right: 0;
124 |           height: 300px;
125 |           width: 500px;
126 |           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16);
127 |           background: rgba(0, 0, 0, 0.1);
128 |         }
129 | 
130 |         #zoom-container::before {
131 |           content: 'container';
132 |           height: 100%;
133 |           margin: auto;
134 |           display: flex;
135 |           justify-content: center;
136 |           align-items: center;
137 |           font-size: 2rem;
138 |           color: #fff;
139 |         }
140 |       </style>
141 |     `,
142 |     {
143 |       notes: `
144 |         This is a zoom in a container specified as a DOM element.
145 |       `,
146 |     }
147 |   )
148 |   .add(
149 |     'container (coordinates object)',
150 |     () => `
151 |       <img src="image-1.jpg">
152 | 
153 |       <script>
154 |         const zoom = mediumZoom('img', {
155 |           container: {
156 |             width: 500,
157 |             height: 300,
158 |             top: 0,
159 |           }
160 |         });
161 |       </script>
162 |     `,
163 |     {
164 |       notes: `
165 |         This is a zoom in a container specified as coordinates.
166 |       `,
167 |     }
168 |   )
169 |   .add(
170 |     'template (Dropbox Paper)',
171 |     () => `
172 |       <template id="template-dropbox-paper">
173 |         <div class="paper-wrapper">
174 |           <section class="paper-main" data-zoom-close>
175 |             <header class="paper-header">
176 |               <svg class="paper-close" data-zoom-close viewBox="0 0 24 24">
177 |                 <path d="M8.817 7.403a1 1 0 0 0-1.414 1.414L10.586 12l-3.183 3.183a1 1 0 0 0 1.414 1.415L12 13.415l3.183 3.183a1 1 0 0 0 1.415-1.415L13.415 12l3.183-3.183a1 1 0 0 0-1.415-1.414L12 10.586 8.817 7.403z"
178 |                   fill-rule="evenodd"></path>
179 |               </svg>
180 |             </header>
181 |             <div class="paper-container" data-zoom-container></div>
182 |           </section>
183 |           <aside class="paper-sidebar">
184 |             <header class="paper-sidebar__header">
185 |               <textarea class="paper-sidebar__textarea" rows="1" placeholder="Write a caption"></textarea>
186 |             </header>
187 |             <section class="paper-sidebar__content">
188 |               <textarea class="paper-sidebar__textarea paper-sidebar__textarea_comment" rows="1" placeholder="New comment"></textarea>
189 |             </section>
190 |           </aside>
191 |         </div>
192 |       </template>
193 | 
194 |       <img src="image-1.jpg">
195 | 
196 |       <script>
197 |         const zoom = mediumZoom('img', {
198 |           background: 'rgba(247, 249, 250, 0.97)',
199 |           margin: 16,
200 |           template: '#template-dropbox-paper',
201 |           container: '[data-zoom-container]',
202 |         });
203 | 
204 |         // You can start manipulating the DOM after the \`opened\` event has been triggered
205 |         zoom.on('opened', () => {
206 |           const closeButton = document.querySelector('[data-zoom-close]');
207 |           closeButton.addEventListener('click', () => zoom.close());
208 |         });
209 | 
210 |         // Block scroll on zoom
211 |         zoom.on('open', () => {
212 |           document.body.style.overflow = 'hidden';
213 |         });
214 |         zoom.on('close', () => {
215 |           document.body.style.overflow = '';
216 |         });
217 |       </script>
218 | 
219 |       <style>
220 |         body {
221 |           font-family: 'AtlasGrotesk-dmc', -apple-system, BlinkMacSystemFont, 'Segoe UI',
222 |             Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
223 |           font-size: 20px;
224 |           color: #212121;
225 |           background-color: #fff;
226 |         }
227 | 
228 |         img {
229 |           max-width: 100%;
230 |           height: auto;
231 |         }
232 | 
233 |         .container {
234 |           width: 100%;
235 |           max-width: 768px;
236 |           margin: 48px auto;
237 |           padding: 16px;
238 |         }
239 | 
240 |         .paper-wrapper {
241 |           position: fixed;
242 |           display: flex;
243 |           top: 0;
244 |           left: 0;
245 |           width: 100%;
246 |           height: 100vh;
247 |         }
248 | 
249 |         .paper-container {
250 |           width: 100%;
251 |           height: calc(100% - 64px);
252 |           margin: 0 auto;
253 |         }
254 | 
255 |         .paper-header {
256 |           display: flex;
257 |           align-items: center;
258 |           height: 64px;
259 |           padding: 16px;
260 |         }
261 | 
262 |         .paper-main {
263 |           flex: 1;
264 |           height: 100%;
265 |         }
266 | 
267 |         .paper-close {
268 |           width: 24px;
269 |           cursor: pointer;
270 |           fill: #637282;
271 |         }
272 | 
273 |         .paper-sidebar {
274 |           width: 290px;
275 |           border-left: 1px solid #e6e8eb;
276 |           background-color: #fff;
277 |           padding: 32px 0 16px 0;
278 |         }
279 | 
280 |         @media (max-width: 800px) {
281 |           .paper-sidebar {
282 |             display: none;
283 |           }
284 |         }
285 | 
286 |         .paper-sidebar__header,
287 |         .paper-sidebar__content {
288 |           padding: 16px;
289 |         }
290 | 
291 |         .paper-sidebar__header {
292 |           border-bottom: 1px solid #e6e8eb;
293 |         }
294 | 
295 |         .paper-sidebar__textarea {
296 |           outline: none;
297 |           width: 100%;
298 |           border: none;
299 |           background: none;
300 |           font: inherit;
301 |           font-size: 0.9rem;
302 |           color: #637282;
303 |         }
304 | 
305 |         .paper-sidebar__textarea::placeholder {
306 |           color: #c1c7cd;
307 |         }
308 | 
309 |         .paper-sidebar__textarea_comment {
310 |           width: 100%;
311 |           padding: 16px;
312 |           border-radius: 5px;
313 |           border: 1px solid rgba(99, 114, 130, 0.4);
314 |         }
315 |       </style>
316 |     `,
317 |     {
318 |       notes: `
319 |         This is a template themed like Dropbox Paper.
320 |       `,
321 |     }
322 |   )
323 |   .add(
324 |     'template (Facebook)',
325 |     () => `
326 |       <template id="template-facebook">
327 |         <div class="facebook-wrapper">
328 |           <svg class="facebook-close" data-zoom-close viewBox="0 0 24 24">
329 |             <path d="M8.817 7.403a1 1 0 0 0-1.414 1.414L10.586 12l-3.183 3.183a1 1 0 0 0 1.414 1.415L12 13.415l3.183 3.183a1 1 0 0 0 1.415-1.415L13.415 12l3.183-3.183a1 1 0 0 0-1.415-1.414L12 10.586 8.817 7.403z"
330 |             fill-rule="evenodd"></path>
331 |           </svg>
332 |           <section class="facebook-main" data-zoom-container></section>
333 |           <aside class="facebook-sidebar"></aside>
334 |         </div>
335 |       </template>
336 | 
337 |       <article class="container">
338 |         <img src="image-1.jpg">
339 |       </article>
340 | 
341 |       <script>
342 |         const zoom = mediumZoom('.container img', {
343 |           background: 'rgba(0, 0, 0, 0.9)',
344 |           template: '#template-facebook',
345 |           container: '[data-zoom-container]',
346 |         });
347 | 
348 |         // You can start manipulating the DOM after the \`opened\` event has been triggered
349 |         zoom.on('opened', () => {
350 |           const closeButton = document.querySelector('[data-zoom-close]');
351 |           closeButton.addEventListener('click', () => zoom.close());
352 |         });
353 | 
354 |         // Block scroll on zoom
355 |         zoom.on('open', () => {
356 |           document.body.style.overflow = 'hidden';
357 |         });
358 | 
359 |         zoom.on('close', () => {
360 |           document.body.style.overflow = '';
361 |         });
362 |       </script>
363 | 
364 |       <style>
365 |         body {
366 |           font-family: 'AtlasGrotesk-dmc', -apple-system, BlinkMacSystemFont, 'Segoe UI',
367 |             Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
368 |           font-size: 20px;
369 |           color: #212121;
370 |           background-color: #fff;
371 |         }
372 | 
373 |         img {
374 |           max-width: 100%;
375 |           height: auto;
376 |         }
377 | 
378 |         .container {
379 |           width: 100%;
380 |           max-width: 768px;
381 |           margin: 48px auto;
382 |           padding: 16px;
383 |         }
384 | 
385 |         .facebook-wrapper {
386 |           position: fixed;
387 |           display: flex;
388 |           top: 0;
389 |           height: 520px;
390 |           top: 0;
391 |           bottom: 0;
392 |           left: 4rem;
393 |           right: 4rem;
394 |           margin: auto;
395 |           box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
396 |         }
397 | 
398 |         .facebook-main {
399 |           flex: 1;
400 |           height: 100%;
401 |           background-color: #000;
402 |         }
403 | 
404 |         .facebook-sidebar {
405 |           width: 360px;
406 |           background-color: #fff;
407 |           padding: 32px 0 16px 0;
408 |         }
409 | 
410 |         @media (max-width: 800px) {
411 |           .facebook-sidebar {
412 |             display: none;
413 |           }
414 |         }
415 | 
416 |         .facebook-close {
417 |           position: fixed;
418 |           top: 8px;
419 |           right: 8px;
420 |           width: 32px;
421 |           cursor: pointer;
422 |           fill: #ddd;
423 |         }
424 |       </style>
425 |     `,
426 |     {
427 |       notes: `
428 |         This is a template themed like Facebook.
429 |       `,
430 |     }
431 |   )
432 | 


--------------------------------------------------------------------------------
/stories/toggle.stories.js:
--------------------------------------------------------------------------------
 1 | import { storiesOf } from '@storybook/html'
 2 | 
 3 | storiesOf('toggle()', module)
 4 |   .add(
 5 |     'default',
 6 |     () =>
 7 |       `
 8 |       <div>
 9 |         <img id="image-1" src="image-3.jpg">
10 |       </div>
11 | 
12 |       <div>
13 |         <img id="image-2" src="image-4.jpg">
14 |       </div>
15 | 
16 |       <script>
17 |         const zoom = mediumZoom('img');
18 |         zoom
19 |           .toggle()
20 |           .then(zoom => zoom.toggle());
21 |       </script>
22 |     `,
23 |     {
24 |       notes: {
25 |         markdown: `Toggles the zoom twice.`,
26 |       },
27 |     }
28 |   )
29 |   .add(
30 |     'with target',
31 |     () =>
32 |       `
33 |       <div>
34 |         <img id="image-1" src="image-3.jpg">
35 |       </div>
36 | 
37 |       <div>
38 |         <img id="image-2" src="image-4.jpg">
39 |       </div>
40 | 
41 | 
42 |       <script>
43 |         const zoom = mediumZoom('img');
44 |         zoom
45 |           .toggle({ target: document.querySelector('#image-2') })
46 |           .then(zoom => zoom.toggle());
47 |       </script>
48 |     `,
49 |     {
50 |       notes: {
51 |         markdown: `Toggles the zoom twice with the specified target.`,
52 |       },
53 |     }
54 |   )
55 | 


--------------------------------------------------------------------------------
/stories/update.stories.js:
--------------------------------------------------------------------------------
 1 | import { storiesOf } from '@storybook/html'
 2 | 
 3 | storiesOf('update()', module).add(
 4 |   'multiple options',
 5 |   () => `
 6 |     <img src="image-2.jpg">
 7 | 
 8 |     <div>
 9 |       <button id="update">Update options</button>
10 |     </div>
11 | 
12 |     <script>
13 |       const zoom = mediumZoom('img');
14 |       const button = document.querySelector('#update');
15 | 
16 |       button.addEventListener('click', () => zoom.update({
17 |         margin: 100,
18 |         background: 'yellow',
19 |         scrollOffset: 0,
20 |       }));
21 |     </script>
22 |   `,
23 |   {
24 |     notes: {
25 |       markdown: `Click on the button the update the options and zoom again.`,
26 |     },
27 |   }
28 | )
29 | 


--------------------------------------------------------------------------------
/website/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 


--------------------------------------------------------------------------------
/website/.eslintignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /dist
3 | /.cache
4 | *.log
5 | 


--------------------------------------------------------------------------------
/website/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: ['eslint:recommended', 'airbnb-base', 'prettier'],
 3 |   parser: 'babel-eslint',
 4 |   env: {
 5 |     es6: true,
 6 |     browser: true,
 7 |   },
 8 |   rules: {
 9 |     'no-console': ['error', { allow: ['warn', 'error'] }],
10 |   },
11 | }
12 | 


--------------------------------------------------------------------------------
/website/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /dist
3 | /.cache
4 | 


--------------------------------------------------------------------------------
/website/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "semi": false,
4 |   "trailingComma": "es5"
5 | }
6 | 


--------------------------------------------------------------------------------
/website/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016-present François Chalifour
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/website/README.md:
--------------------------------------------------------------------------------
 1 | # Medium Zoom website
 2 | 
 3 | > Source code for the [Medium Zoom website](https://medium-zoom.francoischalifour.com).
 4 | 
 5 | [![Preview](https://user-images.githubusercontent.com/6137112/32421106-dddf0566-c262-11e7-9917-a164d992384c.png)](https://medium-zoom.francoischalifour.com)
 6 | 
 7 | ## Storybook
 8 | 
 9 | 📚 The storybook is available at [medium-zoom.francoischalifour.com/storybook](https://medium-zoom.francoischalifour.com/storybook).
10 | 
11 | ## Dev
12 | 
13 | * Install dependencies: `yarn`
14 | * Run the website: `yarn start`
15 | 
16 | ## License
17 | 
18 | MIT © [François Chalifour](https://francoischalifour.com)
19 | 


--------------------------------------------------------------------------------
/website/icons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/website/icons/favicon.ico


--------------------------------------------------------------------------------
/website/icons/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/website/icons/favicon.png


--------------------------------------------------------------------------------
/website/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  6 | 
  7 |     <title>Medium Zoom - A JavaScript library for zooming images like Medium</title>
  8 | 
  9 |     <meta name="theme-color" content="#00ab6c">
 10 |     <meta name="description" content="A JavaScript library for zooming images like Medium">
 11 | 
 12 |     <link href="src/reset.css" rel="stylesheet">
 13 |     <link href="src/style.css" rel="stylesheet">
 14 |     <link href="https://fonts.googleapis.com/css?family=Varela+Round|Work+Sans" rel="stylesheet">
 15 | 
 16 |     <link rel="shortcut icon" href="icons/favicon.ico">
 17 |     <link rel="manifest" href="manifest.webmanifest">
 18 |   </head>
 19 | 
 20 |   <body>
 21 |     <header class="header">
 22 |       <h1 class="header__title">Medium Zoom</h1>
 23 |       <p class="header__subtitle">A JavaScript library for zooming images like Medium</p>
 24 | 
 25 |       <div class="header__info">
 26 |         <a href="https://github.com/francoischalifour/medium-zoom" class="button">View on GitHub</a>
 27 |         <a href="https://francoischalifour.com/lab/medium-image-zoom" class="button">Read the article</a>
 28 |       </div>
 29 |     </header>
 30 | 
 31 |     <main>
 32 |       <article class="container">
 33 |         <figure>
 34 |           <img
 35 |             id="zoom-default"
 36 |             src="src/images/image-1.jpg"
 37 |             alt="Zoom with default options"
 38 |           >
 39 |           <figcaption>Zoom with default options</figcaption>
 40 |         </figure>
 41 | 
 42 |         <p class="placeholder">
 43 |           Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 44 |           Tempora praesentium cupiditate fugit voluptas, rem eligendi, voluptatem molestias pariatur atque amet,
 45 |           dicta, similique beatae optio quos! Hic necessitatibus dicta magni, tempore.
 46 |           Atque illo voluptatibus fugiat id pariatur cum quasi vel ut repellendus iure quaerat,
 47 |           doloremque sit voluptatum odio maiores provident consequuntur accusantium saepe.
 48 |         </p>
 49 | 
 50 |         <figure>
 51 |           <img
 52 |             id="zoom-margin"
 53 |             src="src/images/image-2.jpg"
 54 |             alt="Zoom with margin"
 55 |           >
 56 |           <figcaption>Zoom with margin</figcaption>
 57 |         </figure>
 58 | 
 59 |         <p class="placeholder">
 60 |           Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 61 |           Ea dolores quaerat, quis modi nostrum sequi adipisci ratione esse
 62 |           blanditiis error beatae vel non vero dolor nemo. Animi nemo quisquam ducimus!
 63 |         </p>
 64 | 
 65 |         <figure>
 66 |           <img
 67 |             id="zoom-background"
 68 |             src="src/images/image-3.jpg"
 69 |             alt="Zoom with background color"
 70 |           >
 71 |           <figcaption>Zoom with background color</figcaption>
 72 |         </figure>
 73 | 
 74 |         <p class="placeholder">
 75 |           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos magnam illo,
 76 |           quam iusto, autem ratione commodi deleniti vero magni fuga consectetur expedita,
 77 |           voluptatum enim quidem? Rem, minima laboriosam hic! Id.
 78 |         </p>
 79 | 
 80 |         <figure class="pull-right">
 81 |           <img
 82 |             id="zoom-scrollOffset"
 83 |             src="src/images/image-4.jpg"
 84 |             alt="Zoom without scroll effect"
 85 |           >
 86 |           <figcaption>Zoom without scroll offset</figcaption>
 87 |         </figure>
 88 | 
 89 |         <p class="placeholder">
 90 |           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cum nulla
 91 |           eligendi recusandae at quae odio, harum nesciunt ut temporibus vitae, laudantium minus.
 92 |           Iste officia aliquid, laborum ratione maxime beatae.
 93 |         </p>
 94 | 
 95 |         <p class="placeholder">
 96 |           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim asperiores totam fugiat
 97 |           repellendus laboriosam accusantium, possimus similique quos repellat molestias excepturi
 98 |           ad perspiciatis beatae! Qui repellat numquam incidunt, accusamus autem.
 99 |         </p>
100 | 
101 |         <p class="placeholder">
102 |           Lorem ipsum dolor sit amet, consectetur adipisicing elit.
103 |           Corrupti provident sunt recusandae enim commodi ab dolorem ipsum dolor magni
104 |           reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
105 |         </p>
106 | 
107 |         <p class="placeholder">
108 |           Lorem ipsum dolor sit amet, consectetur adipisicing elit.
109 |           Accusamus cum nulla eligendi recusandae at quae odio, harum nesciunt ut
110 |           temporibus vitae, laudantium minus. Iste officia aliquid, laborum ratione maxime beatae,
111 |           tenetur impedit repudiandae quos.
112 |         </p>
113 | 
114 |         <figure>
115 |           <img
116 |             id="zoom-trigger"
117 |             src="src/images/image-6.jpg"
118 |             alt="Zoom to trigger"
119 |           >
120 |           <figcaption>
121 |             <figcaption>Zoom triggered with another element</figcaption>
122 |             <button id="button-trigger" class="button">Trigger zoom</button>
123 |           </figcaption>
124 |         </figure>
125 | 
126 |         <p class="placeholder">
127 |           Lorem ipsum dolor sit amet, consectetur adipisicing elit.
128 |           Corrupti provident sunt recusandae enim commodi ab dolorem ipsum dolor magni
129 |           reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
130 |         </p>
131 | 
132 |         <figure>
133 |           <img
134 |             id="zoom-detach"
135 |             src="src/images/image-7.jpg"
136 |             alt="Zoom detached after being zoomed once"
137 |           >
138 |           <figcaption>Zoom detached after having been zoomed once</figcaption>
139 |         </figure>
140 | 
141 |         <h2>History</h2>
142 | 
143 |         <blockquote>
144 |           <p>Interactions with the images are logged here.</p>
145 | 
146 |           <ol id="history"></ol>
147 |         </blockquote>
148 | 
149 |         <aside>
150 |           <h2>Getting started</h2>
151 | 
152 |           <pre><code>npm install medium-zoom</code></pre>
153 | 
154 |           <p class="text-center">
155 |             <a href="https://github.com/francoischalifour/medium-zoom#usage" class="button button--action">Learn how to use the library →</a>
156 |           </p>
157 |         </aside>
158 | 
159 |       </article>
160 |     </main>
161 | 
162 |     <footer class="footer">
163 |       <div class="footer__links">
164 |         <a href="https://github.com/francoischalifour/medium-zoom" class="button">View on GitHub</a>
165 |         <a href="http://francoischalifour.com/lab/medium-image-zoom" class="button">Read the article</a>
166 |       </div>
167 | 
168 |       <div class="footer__copyright">
169 |         Made by <a href="https://francoischalifour.com">François Chalifour</a>
170 |       </div>
171 | 
172 |       <p><a href="#">Back to top</a></p>
173 |     </footer>
174 | 
175 |     <script src="src/placeholders.js" defer></script>
176 |     <script src="src/index.js" defer></script>
177 |   </body>
178 | </html>
179 | 


--------------------------------------------------------------------------------
/website/manifest.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "medium-zoom",
 3 |   "name": "Medium Zoom Website",
 4 |   "description": "A JavaScript library for zooming images like Medium",
 5 |   "start_url": "index.html",
 6 |   "display": "standalone",
 7 |   "theme_color": "#00ab6c",
 8 |   "background_color": "#ffffff",
 9 |   "icons": [
10 |     {
11 |       "src": "icons/favicon.png",
12 |       "sizes": "512x512",
13 |       "type": "image/png"
14 |     }
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "medium-zoom-website",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "main": "index.html",
 6 |   "scripts": {
 7 |     "start": "parcel index.html --open",
 8 |     "build": "parcel build index.html",
 9 |     "lint": "eslint ."
10 |   },
11 |   "dependencies": {
12 |     "medium-zoom": "1.0.3"
13 |   },
14 |   "devDependencies": {
15 |     "babel-core": "6.26.3",
16 |     "eslint": "5.12.1",
17 |     "eslint-config-airbnb-base": "13.1.0",
18 |     "eslint-config-prettier": "3.6.0",
19 |     "eslint-plugin-import": "2.14.0",
20 |     "parcel-bundler": "1.11.0"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/website/src/images/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/website/src/images/image-1.jpg


--------------------------------------------------------------------------------
/website/src/images/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/website/src/images/image-2.jpg


--------------------------------------------------------------------------------
/website/src/images/image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/website/src/images/image-3.jpg


--------------------------------------------------------------------------------
/website/src/images/image-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/website/src/images/image-4.jpg


--------------------------------------------------------------------------------
/website/src/images/image-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/website/src/images/image-5.jpg


--------------------------------------------------------------------------------
/website/src/images/image-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/website/src/images/image-6.jpg


--------------------------------------------------------------------------------
/website/src/images/image-7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/francoischalifour/medium-zoom/35b519fbdef97df69cc1d7daf46988effef0860b/website/src/images/image-7.jpg


--------------------------------------------------------------------------------
/website/src/index.js:
--------------------------------------------------------------------------------
 1 | import mediumZoom from 'medium-zoom'
 2 | 
 3 | const zoomDefault = mediumZoom('#zoom-default')
 4 | const zoomMargin = mediumZoom('#zoom-margin', { margin: 48 })
 5 | const zoomBackground = mediumZoom('#zoom-background', { background: '#212530' })
 6 | const zoomScrollOffset = mediumZoom('#zoom-scrollOffset', {
 7 |   scrollOffset: 0,
 8 |   background: 'rgba(25, 18, 25, .9)',
 9 | })
10 | 
11 | // Trigger the zoom when the button is clicked
12 | const zoomToTrigger = mediumZoom('#zoom-trigger')
13 | const button = document.querySelector('#button-trigger')
14 | button.addEventListener('click', () => zoomToTrigger.open())
15 | 
16 | // Detach the zoom after having been zoomed once
17 | const zoomToDetach = mediumZoom('#zoom-detach')
18 | zoomToDetach.on('closed', () => zoomToDetach.detach())
19 | 
20 | // Observe zooms to write the history
21 | const observedZooms = [
22 |   zoomDefault,
23 |   zoomMargin,
24 |   zoomBackground,
25 |   zoomScrollOffset,
26 |   zoomToTrigger,
27 |   zoomToDetach,
28 | ]
29 | 
30 | // Log all interactions in the history
31 | const history = document.querySelector('#history')
32 | 
33 | observedZooms.forEach(zoom => {
34 |   zoom.on('open', event => {
35 |     const time = new Date().toLocaleTimeString()
36 |     history.innerHTML += `<li>Image "<em>${
37 |       event.target.alt
38 |     }</em>" was zoomed at ${time}</li>`
39 |   })
40 | 
41 |   zoom.on('detach', event => {
42 |     const time = new Date().toLocaleTimeString()
43 |     history.innerHTML += `<li>Image <em>"${
44 |       event.target.alt
45 |     }"</em> was detached at ${time}</li>`
46 |   })
47 | })
48 | 


--------------------------------------------------------------------------------
/website/src/placeholders.js:
--------------------------------------------------------------------------------
 1 | // Show placeholders for paragraphs
 2 | const paragraphs = [].slice.call(document.querySelectorAll('p.placeholder'))
 3 | 
 4 | paragraphs.forEach(paragraph => {
 5 |   // eslint-disable-next-line no-param-reassign
 6 |   paragraph.innerHTML = paragraph.textContent
 7 |     .split(' ')
 8 |     .filter(text => text.length > 4)
 9 |     .map(text => `<span class="placeholder__word">${text}</span>`)
10 |     .join(' ')
11 | })
12 | 


--------------------------------------------------------------------------------
/website/src/reset.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 |   margin: 0;
20 |   padding: 0;
21 |   border: 0;
22 |   font-size: 100%;
23 |   font: inherit;
24 |   vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 |   display: block;
30 | }
31 | body {
32 |   line-height: 1;
33 | }
34 | ol, ul {
35 |   list-style: none;
36 | }
37 | blockquote, q {
38 |   quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 |   content: '';
43 |   content: none;
44 | }
45 | table {
46 |   border-collapse: collapse;
47 |   border-spacing: 0;
48 | }
49 | 


--------------------------------------------------------------------------------
/website/src/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | body {
  6 |   font-family: 'Work Sans', sans-serif;
  7 |   font-display: swap;
  8 |   font-size: 18px;
  9 |   color: #212121;
 10 |   background-color: #fff;
 11 |   text-rendering: optimizeLegibility;
 12 |   -webkit-font-smoothing: antialiased;
 13 |   -moz-osx-font-smoothing: grayscale;
 14 | }
 15 | 
 16 | h1,
 17 | h2 {
 18 |   font-family: 'Varela Round';
 19 | }
 20 | 
 21 | h1 {
 22 |   font-size: 4rem;
 23 |   margin-bottom: 2rem;
 24 | }
 25 | 
 26 | h2 {
 27 |   font-size: 2rem;
 28 |   margin: 2rem 0 1rem 0;
 29 | }
 30 | 
 31 | a {
 32 |   text-decoration: none;
 33 | }
 34 | 
 35 | em {
 36 |   font-style: italic;
 37 | }
 38 | 
 39 | .placeholder {
 40 |   font-family: sans-serif;
 41 |   text-align: justify;
 42 |   pointer-events: none;
 43 |   user-select: none;
 44 |   max-width: 740px;
 45 |   margin: 24px auto;
 46 | }
 47 | 
 48 | .placeholder__word {
 49 |   color: #eee;
 50 |   background: #eee;
 51 |   border-radius: 3px;
 52 |   letter-spacing: 0.2rem;
 53 |   font-size: 0.9rem;
 54 | }
 55 | 
 56 | .header,
 57 | .footer {
 58 |   overflow: hidden;
 59 |   position: relative;
 60 |   display: flex;
 61 |   flex-direction: column;
 62 |   padding: 92px 24px;
 63 |   text-align: center;
 64 |   color: #fff;
 65 |   background: #00ab6c;
 66 |   background: linear-gradient(to bottom, #00ab6c 0%, #13cc69 100%);
 67 |   align-items: center;
 68 |   justify-content: center;
 69 | }
 70 | 
 71 | .header::before {
 72 |   content: '';
 73 |   position: absolute;
 74 |   top: calc(100% - 16px);
 75 |   left: 0;
 76 |   right: 0;
 77 |   background-color: rgba(255, 255, 255, 0.3);
 78 |   height: 92px;
 79 |   transform: skewY(2deg);
 80 | }
 81 | 
 82 | .header::after {
 83 |   content: '';
 84 |   position: absolute;
 85 |   top: calc(100% - 16px);
 86 |   width: 100%;
 87 |   background-color: rgba(255, 255, 255, 0.5);
 88 |   height: 92px;
 89 |   transform: skewY(-4deg);
 90 | }
 91 | 
 92 | .header__title {
 93 |   font-size: 4rem;
 94 |   margin-bottom: 2rem;
 95 | }
 96 | 
 97 | .header__subtitle {
 98 |   font-size: 1.4rem;
 99 |   line-height: 1.5rem;
100 |   letter-spacing: -0.02rem;
101 |   color: rgba(255, 255, 255, 0.95);
102 | }
103 | 
104 | .header__info {
105 |   font-size: 1rem;
106 |   margin: 2rem;
107 | }
108 | 
109 | .footer__copyright {
110 |   margin: 2rem 0;
111 |   color: rgba(255, 255, 255, 0.95);
112 | }
113 | 
114 | .footer a {
115 |   color: #fff;
116 | }
117 | 
118 | .container {
119 |   width: 100%;
120 |   max-width: 1000px;
121 |   margin: 48px auto;
122 |   padding: 16px;
123 | }
124 | 
125 | .container p {
126 |   line-height: 1.6;
127 | }
128 | 
129 | .text-center {
130 |   text-align: center;
131 | }
132 | 
133 | button.button,
134 | .button {
135 |   display: inline-block;
136 |   margin: 4px;
137 |   padding: 16px 32px;
138 |   transition: all 0.16s;
139 |   font: inherit;
140 |   cursor: pointer;
141 |   outline: none;
142 |   font-weight: bold;
143 |   border: none;
144 |   border-radius: 32px;
145 |   font-size: 1rem;
146 |   color: #fff;
147 |   background: #00ab6c;
148 |   background: linear-gradient(#13cc69 0%, #00ab6c 100%);
149 |   box-shadow: 0 2px 6px 0 rgba(0, 171, 108, 0.32);
150 |   transition: all 300ms;
151 | }
152 | 
153 | .button:hover,
154 | button.button:hover {
155 |   box-shadow: 0 2px 8px 0 rgba(0, 171, 108, 0.64);
156 | }
157 | 
158 | .button.button--action {
159 |   background: #7c4dff;
160 |   background: linear-gradient(#7c4dff 0%, #6200ea 100%);
161 |   box-shadow: 0 2px 6px 0 rgba(98, 0, 234, 0.32);
162 | }
163 | 
164 | .button.button--action:hover {
165 |   box-shadow: 0 2px 8px 0 rgba(98, 0, 234, 0.64);
166 | }
167 | 
168 | .header .button,
169 | .footer .button {
170 |   color: #fff;
171 |   border: 2px solid #fff;
172 |   background: transparent;
173 | }
174 | 
175 | .header .button:hover,
176 | .footer .button:hover {
177 |   color: #00ab6c;
178 |   background-color: #fff;
179 | }
180 | 
181 | img {
182 |   max-width: 100%;
183 |   height: auto;
184 | }
185 | 
186 | figure {
187 |   margin: 3rem -16px;
188 |   text-align: center;
189 | }
190 | 
191 | figcaption {
192 |   font-size: 1rem;
193 |   font-weight: 300;
194 |   margin: 1rem;
195 |   text-align: center;
196 |   line-height: 1.5rem;
197 |   color: #666;
198 | }
199 | 
200 | blockquote {
201 |   display: block;
202 |   padding: 24px;
203 |   color: #666;
204 |   border-radius: 4px;
205 |   background-color: #f7f7f7;
206 | }
207 | 
208 | blockquote li {
209 |   padding-top: 16px;
210 | }
211 | 
212 | blockquote li::before {
213 |   content: '▹ ';
214 | }
215 | 
216 | pre {
217 |   font-family: Monaco, Consolas, Menlo, monospace;
218 |   font-size: 1rem;
219 |   padding: 24px;
220 |   margin: 2rem 0;
221 |   color: #fff;
222 |   border-radius: 4px;
223 |   background-color: #222;
224 | }
225 | 
226 | @media (min-width: 1000px) {
227 |   .pull-left,
228 |   .pull-right {
229 |     width: 400px;
230 |     margin: 3rem;
231 |   }
232 | 
233 |   .pull-right {
234 |     float: right;
235 |     margin-right: -16px;
236 |   }
237 | 
238 |   .pull-left {
239 |     float: left;
240 |     margin-left: -16px;
241 |   }
242 | }
243 | 


--------------------------------------------------------------------------------