Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michaelbull/zoom.ts
A lightweight TypeScript library for image zooming, as seen on Medium.
https://github.com/michaelbull/zoom.ts
image medium typescript webpack zoom zooming
Last synced: about 1 month ago
JSON representation
A lightweight TypeScript library for image zooming, as seen on Medium.
- Host: GitHub
- URL: https://github.com/michaelbull/zoom.ts
- Owner: michaelbull
- License: isc
- Created: 2016-08-17T00:55:21.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-17T10:20:55.000Z (over 1 year ago)
- Last Synced: 2024-11-15T02:10:06.347Z (about 2 months ago)
- Topics: image, medium, typescript, webpack, zoom, zooming
- Language: TypeScript
- Homepage: https://michaelbull.github.io/zoom.ts
- Size: 47.3 MB
- Stars: 49
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A lightweight TypeScript library for image zooming, as seen on Medium.
## Installation
Install the package via [npm][npm]:
```
npm install --save zoom.ts
```
## Usage
The [example directory][example] contains the code used to [demonstrate][demo]
an application with `zoom.ts` installed.
### Static Site
To integrate `zoom.ts` into a static site, import the [UMD][umd] module and
interface with the library via the global `window.zoom`. The snippet below
demonstrates linking the bundle (`dist/zoom.js`) and the stylesheet
(`dist/zoom.css`). It then calls the [`listen`][listen] function to add an
event listener to the `document.body` when the page is [`ready`][ready].
```html
window.zoom.listen();
```
### Application
To integrate `zoom.ts` into a web application, follow the steps outlined below:
1. Detect and store the [`Features`][features] of the `document.body.style`
2. Locate the element you wish to make zoomable
3. Register a [`ZoomListener`][zoom-listener] on the target image
4. In the listener's callback, create and store a [`Zoom`][zoom] instance
5. Call `expand` on the `Zoom` instance to begin zooming the image
6. If the user navigates to a different page in the application, call [`destroy`][destroy] on the `Zoom` instance
The snippet below demonstrates finding the first element with the `zoom__image`
class and adding a `ZoomListener` to any `click` events it fires. When fired,
the event listener will create a `Zoom` instance and store it as a variable
named `zoom`, then immediately expand the image. After 5 seconds have passed,
the `zoom` will be forcefully removed via the call to `destroy`.
```javascript
import {
detectFeatures,
Zoom,
ZoomDOM,
ZoomListener
} from 'zoom.ts';
let features = detectFeatures(document.body.style); // (1)
let image = document.querySelector('.zoom__image'); // (2)
image.addEventListener('click', new ZoomListener(dom => { // (3)
let zoom = new Zoom(dom, features); // (4)
zoom.expand(); // (5)
setTimeout(() => {
zoom.destroy(); // (6)
}, 5000);
}));
```
## Contributing
Bug reports and pull requests are welcome on [GitHub][github].
## License
This project is available under the terms of the ISC license. See the
[`LICENSE`](LICENSE) file for the copyright information and licensing terms.
[npm]: https://www.npmjs.com/
[example]: https://github.com/michaelbull/zoom.ts/tree/master/example
[demo]: https://michaelbull.github.io/zoom.ts
[umd]: https://github.com/umdjs/umd
[listen]: https://github.com/michaelbull/zoom.ts/blob/master/src/index.ts#L15
[ready]: https://github.com/michaelbull/zoom.ts/blob/master/src/browser/document.ts#L25
[features]: https://github.com/michaelbull/zoom.ts/blob/master/src/browser/features.ts#L5
[zoom-listener]: https://github.com/michaelbull/zoom.ts/blob/master/src/event/zoom-listener.ts#L11
[zoom]: https://github.com/michaelbull/zoom.ts/blob/master/src/zoom.ts#L19
[destroy]: https://github.com/michaelbull/zoom.ts/blob/master/src/zoom.ts#L72
[github]: https://github.com/michaelbull/zoom.ts