Methods & Properties

After initialize Zoomist, you can access methods and properties in initialized instance.

For example:

const zoomist = new Zoomist('.zoomist-container')

// method
zoomist.zoom(0.1)
// property
console.log(zoomist.transform)

Methods

All available methods (take zoomist variable in example above):

Method	Args Type	Description
`zoomist.zoom(scale)`	`scale: number`	Zoom `.zoomist-image` with a relative scale. Use positive numbers to zoom in, negative numbers to zoom out.
`zoomist.zoomTo(scale)`	`scale: number`	Zoom `.zoomist-image` to a specific number. This number must be between `minScale` and `maxScale`.
`zoomist.move(translate)`	`translate: {x: number, y: number}`	Translate `.zoomist-image` with relative `x` and `y`.
`zoomist.moveTo(translate)`	`translate: {x: number, y: number}`	Translate `.zoomist-image` to specific `x` and `y`. You can set `x` to keyword `left`, `right`, `center`. And set `y` to keyword `top`, `bottom`, `center`
`zoomist.slideTo(value)`	`value: number`	Set the slider to a specific value between 0 and 100. And `.zoomist-image` will scale to the corresponding size automatically.
`zoomist.reset()`		Set `.zoomist-image` to initial state.
`zoomist.destroy(cleanStyle)`	`cleanStyle: boolean`	Destroy Zoomist and remove all event listeners. If set `cleanStyle` to `true` will remove styles on `.zoomist-image`.
`zoomist.destroySlider()`		Destroy Zoomist slider.
`zoomist.destroyZoomer()`		Destroy Zoomist zoomer.
`zoomist.destroyModules()`		Destroy both slider and zoomer.
`zoomist.update(options)`	`options: ZoomistOptions`	Update Zoomist. If pass new options, Zoomist will update with new options.
`zoomist.getContainerData()`		Get `.zoomist-container` data.
`zoomist.getImageData()`		Get `.zoomist-image` data.
`zoomist.getSliderValue()`		Get slider current value.
`zoomist.isOnBoundX()`		Check `.zoomist-image` is current on left or right bounds. Only works when `bounds` set to `true`.
`zoomist.isOnBoundY()`		Check `.zoomist-image` is current on top or bottom bounds. Only works when `bounds` set to `true`.
`zoomist.isOnBoundTop()`		Check `.zoomist-image` is current on top bound. Only works when `bounds` set to `true`.
`zoomist.isOnBoundBottom()`		Check `.zoomist-image` is current on bottom bound. Only works when `bounds` set to `true`.
`zoomist.isOnBoundLeft()`		Check `.zoomist-image` is current on left bound. Only works when `bounds` set to `true`.
`zoomist.isOnBoundRight()`		Check `.zoomist-image` is current on right bound. Only works when `bounds` set to `true`.
`zoomist.isOnMinScale()`		Check `.zoomist-image` scale is current on `minScale`
`zoomist.isOnMaxScale()`		Check `.zoomist-image` scale is current on `maxScale`
`zoomist.on(event, handler)`	`event: string, handler: function`	Add event handler. (Checkout all events)

With these useful methods, you can do a lot of extra things.

For example, making a centered-button:

<!-- centered-button -->
<button class="centered-button"></button>
<!-- zoomist -->
<div class="zoomist-container">
  <div class="zoomist-wrapper">
    <div class="zoomist-image">
      <!-- your content -->
    </div>
  </div>
</div>

const zoomist = new Zoomist('.zoomist-container')

document.querySelector('.centered-button').addEventListener('click', () => {
  zoomist.moveTo({ x: 0, y: 0 })
})

Properties

Porperty	Type	Description
`zoomist.element`	`HTMLElement`	`.zoomist-container` HTML element.
`zoomist.wrapper`	`HTMLElement`	`.zoomist-wrapper` HTML element.
`zoomist.image`	`HTMLElement`	`.zoomist-image` HTML element.
`zoomist.options`	`object`	Object with passed `ZoomistOptions`.
`zoomist.mounted`	`boolean`	`true` if Zoomist initialize completed.
`zoomist.states`	`object`	The states of `dragging`, `pinching`, `wheeling`.
`zoomist.transform`	`object`	Transform data of `.zoomist-image`.
`zoomist.data`	`object`	Data when Zoomist working.

You can get some useful data from these properties.

For example, getting your current scale:

const zoomist = new Zoomist('.zoomist-container')

document.querySelector('.get-scale-button').addEventListener('click', () => {
  const { scale } = zoomist.transform
  console.log(scale)
})