zoom.js
A cross-browser Javascript Library to zoom in and out
Importing
Using NPM
Locally
zoom.js
is available on npm
To install it, run:
npm install @saiansh2525/zoom.js
Online
Reference the unpkg
URL inside your HTML:
<script src="https://unpkg.com/@saiansh2525/zoom.js/index.js"></script>
Without NPM
Online
To import the zoom.js
inside your application, include the following code in your HTML file:
<script src="https://yash-singh1.github.io/zoom.js/index.js"></script>
To view the raw code go to => https://yash-singh1.github.io/zoom.js/index.js.
Locally
To use zoom.js
locally, run:
curl -s -o- https://yash-singh1.github.io/zoom.js/index.js > zoom.js
Now you can import the library using:
<script src="zoom.js"></script>
Architecture
Variables
zoom.js
edits the following variables:
document.body.style.zoom
document.body.style["-moz-transform-origin"]
document.body.style["-moz-transform"]
Here are the variables browser support:
-
document.body.style.zoom
is a variable used byChrome
,Opera
,Safari
, and more. -
document.body.style["-moz-transform-origin"]
is used to set the origin of the transform before starting to scale. -
document.body.style["-moz-transform"]
is the scale onFirefox
and otherMozilla
browsers.
File Layout
The following is the current file layout of the codebase:
root/
|_____ jsdoc/
| |_____ fonts/
| |_____ scripts/
| |_____ styles/
| |_____ global.html
| |_____ index.html
| |_____ zoom.js.html
|_____ test/
| |_____ .gitignore
| |_____ auto.html
| |_____ auto.js
| |_____ docs-preview.js
| |_____ interactive.html
| |_____ interactive.js
| |_____ test.js
|_____ .gitignore
|_____ generateJsdoc.py
|_____ index.js
|_____ LICENSE
|_____ package.json
|_____ README.md
The index.js
file is the main source code. generateJsdoc.py
generates documentations in the jsdoc/
directory. The test/
directory contains tests.
Source
To view the repository, go to: https://github.com/Yash-Singh1/zoom.js
To view the source code of the index.js
, go to: https://yash-singh1.github.io/zoom.js/jsdoc/zoom.js.html
Documentation
zoom.js
allows you to control the zoom through the zoom
object. Let's take a look at the zoom
object:
Strings
-
name
- The name is the name of this library:
zoom.js
- The name is the name of this library:
-
version
- The version key contains the current version of
zoom.js
- The version key contains the current version of
-
license
- The license key contains the license type:
MIT
- The license key contains the license type:
Functions
The documentation for zoom.js
is at: https://yash-singh1.github.io/zoom.js/jsdoc/global.html.
It was built using jsdoc
.
Testing
Graphical Mode
Note: This assumes that you have NodeJS
installed
To run tests for zoom.js
:
- Run
git clone https://github.com/Yash-Singh1/zoom.js.git
to clone the repository - Go to the root of the repositiory:
cd zoom.js/
- Run the npm
test
script:npm run test
- Now you can go to:
localhost:1073/test/interactive.html
to run the tests interactively, andlocalhost:1073/test/auto.html
to run the tests automatically - To run the tests, open up the console and run
test()
and there will be a series of zooming and confirm messages in interactive mode, and everything will automatically run in auto mode. Set the start query parameter to true to immediately start testing
To run the tests without NodeJS
, you can go to: https://yash-singh1.github.io/zoom.js/test/interactive.html
for interactive and https://yash-singh1.github.io/zoom.js/test/auto.html for auto.
Headless Mode
To run tests in headless mode for zoom.js
:
- Run
git clone https://github.com/Yash-Singh1/zoom.js.git
to clone the repository - Go to the root of the repositiory:
cd zoom.js/
- Install
firefox-geckodriver
, on Ubuntu that is:sudo apt install firefox-geckodriver
- Install
chromedriver
, here is a gist - Make sure you have
firefox
andgoogle-chrome
installed up to date with the drivers - Run
npm run headless
to run the headless scripts - The logs will appear
Building Docs
To build the documentation, you must have python
, jsdoc
, and prettier
installed.
The build:docs
script from npm
will build the documentation using jsdoc
:
npm run build:docs
Testing Docs
To test the documentation:
- Run
git clone https://github.com/Yash-Singh1/zoom.js.git
to clone the source - Go to the root of the repository:
cd zoom.js/
- Run the npm
docs
script:npm run docs
- Now you can go to:
localhost:1079/index.html
to preview the documentation
Docs are available on: https://yash-singh1.github.io/zoom.js/jsdoc/ for the current live Github Pages.
Contributing
Contributions are welcome! You can do anything from adding a new feature to formatting the codebase. Any proper updates are accepted. When creating an issue, make sure that you ran the tests and describe how it is different in other browsers.
Not rendering properly? View on Github