Documentation

Zoom

Description

The Zoom module allows to zoom in on a lesson page (.ic_page element) and interact with modules while zoomed in.

If the lesson page does not fit on the screen then note that the zoomed in area will also not fit on the page. However, using the scroll, it will be possible to get to the specified area. For this reason, it is recommended to test if the set width and height of the addon for the mobile layout is sufficient so that the user does not have to scroll too much.

Addons embedded in the header and footer that need scale information (like Ordering module) will work incorrectly when zoomed in by the Zoom addon (even if neither header nor footer is zoomed in).

Addon must not be placed in the header or footer to work properly.

Requirements

If the content of the player is scaled then to make addon work, it is necessary to set the scale information using the player.setScaleInformation command. Learn more about scale information by visiting the Scale Information section.

Properties

The list starts with the common properties, learn more about them by visiting the Modules description section.

Property name Description
Mode
Mode name Description
Targeted area Zooms the area within the size of the addon. It is required that the addon is within the boundaries of the page (`.ic_page` element).

This mode is chosen by default.
Area around a clicked point Zooms twice in on the area around the point clicked by the user.

Supported commands

Command name Params Description
show --- Show the addon.
hide --- Hide the addon.
zoomIn xPosition, yPosition Zoom twice in at position relative to page. If page is already zoomed in, use the `zoomOut` command first.
For more information about page, see documentation.

Command is available regardless of the chosen `mode`.
The command will execute, even if values are specified by the user that would make the zoom not inside the page border. For such a situation, the zoom will execute, but the addon will modify the user-specified values to ones where the zoomed area will be inside the page boundary.
zoomInArea xCenterPosition, yCenterPosition, areaWidth, areaHeight Zoom in on the area relative to page. If page is already zoomed in, use the `zoomOut` command first.
For more information about page, see documentation.

Command is available regardless of the chosen `mode`.
The command will execute, even if values are specified by the user that would make the zoom not inside the page border. For such a situation, the zoom will execute, but the addon will modify the user-specified values to ones where the zoomed area will be inside the page boundary.
zoomOut --- Zoom out.

Events

This module does not send events.

CSS classes

Class name Description
.zoom-wrapper Addon's main class for zoom in elements.
.zoom-wrapper.targeted-area Indicates the style that applies to addon's zoom wrapper when `Targeted area` mode is chosen.
.zoom-wrapper.area-around-clicked-point Indicates the style that applies to addon's zoom wrapper when `Area around a clicked point` mode is chosen.
.zoom-wrapper.zoom-wrapper-highlight Indicates the style that applies to addon's zoom wrapper while mouse if over the zoom in button.

Available when `Targeted area` mode is chosen.
.zoom-wrapper .zoom-button-container Indicates the style that applies to container of zoom in button.
.zoom-wrapper .zoom-button-container .zoom-button Indicates the style that applies to zoom in button.
.zoom-wrapper .zoom-button-container .zoom-button.selected Indicates the style that applies to selected zoom in button.
.zoomed-area-container Indicates the style that applies to fixed div element created in body of document when zoomed in. Position and size are calculated to match visible content of player.
.zoomed-area-container .zoom-out-button-container Indicates the style that applies to container of zoom out button.
.zoomed-area-container .zoom-out-button-container .zoom-out-button Indicates the style that applies to zoom out button.
.ic_page.zoom-cursor-zoom-in Indicates the style that applies to page when next click on page will zoom in to the selected position.
.ic_page.zoom-zoomed-in Indicates the style that applies to page when it has been zoomed in by a Zoom addon.

Keyboard navigation

  • Esc – Zoom out.

Addons and functionalities without support or partial support for zoomed in area by Zoom addon

  • IWB Toolbar
  • Slider
  • PieChart
  • Points and Lines
  • Editable Window
  • File Sender
  • Glossary
  • Open Popup Button
  • Command showPopup
  • mAuthor and mCourser "Full screen" and "Fit full page" options

Demo presentation

Demo presentation contains examples on how to use the Zoom addon.