Adobe Scene7 BasicZoomViewer: How to reset zoom

Question

Question

I'm working with Adobe Scene7 BasicZoomViewer and I'm looking for a way to tell the ZoomViewer to reset the zoom so that the user is no longer zoomed in on an image but instead will show the default "zoom" level.

What I've found

The closest thing I found to what I need is this reset property ZoomView.reset which "Resets the viewport when the frame (image) changes. If set to 0 it preserves the current viewport with the best possible fit while preserving the aspect ratio of the newly set image".

This looks close to something I need but it states that it will reset or preserve the aspect ratio when a new image has been inserted but I am not inserting new images.

Demo from Adobe

There is a button on the image that the API inserts into the page that resets the zoom level. Adobe provides a demo page that shows what I'm working with. If you look at the bottom left, the right-most button is the reset button. When clicked, it has to make some kind of API call and I need to figure out which one it is.

Edit

I've been able to find a minified version of the BasicZoomViewer and I am currently attempting to make sense of the code.

There is an event listener placed on the "Zoom Reset Button" that just simply calls a reset() method on line 274 in the uglified version of the file. Currently, I am trying to make sense of the file and figure out how to access this method.

c.zoomResetButton.addEventListener("click", function () {
  c.zoomView.zoomReset()
});

score 0 · Accepted Answer · answered May 03 '19 at 21:01

I will be answering my own question. If someone finds a better way please feel free to answer as well.

tldr;

Create a variable to hold the instance of your s7viewers.BasicZoomViewer() and inside of that you can access the event handlers and much more.

Example of calling the reset zoom handler

// instantiate the s7viewers class and save it in a variable
var s7BasicZoomViewer = new s7viewers.BasicZoomViewer({
  containerId: 's7viewer',
  params: {
    asset: assetUrl,
    serverurl: serverUrl
})

// example of how to call the "zoomReset()" method
s7BasicZoomViewer.zoomResetButton.component.events.click[0].handler()

Explanation

After digging through the minified code that was uglified I found an event listener on the s7zoomresetbutton DOM class name, or perhaps it's watching for the ID of that DOM element which is the same ID as the container div for your S7 BasicZoom Viewer plus some added text to make this ID unique. For example, if the container div is s7viewer then the reset zoom button will have an ID of s7viewer_zoomresetbutton.

Now, going through the code I found this event listener which let me know there must be some way to call the zoomReset() method.

c.zoomResetButton.addEventListener("click", function () {
  c.zoomView.zoomReset()
});

In the code above, the value of c is this or in other words it's the instance of your S7 BasicViewerZoom and in my case I have multiple depending on how many images I need to zoom on.

When instantiating the s7viewers class you can then reference that instance later and access the event handlers on each button and other properties and methods.

From there it was just looking through the object returned from the instance and calling the handler for the reset button.