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 |
|
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.