Mojo.Widget.ImageView
Namespace Detail
Overview
This widget is designed to view an image full screen with support for zooming and panning, while optionally moving between additional images. You can use this for single images, or flick left and right through a series of images. You can assign handlers through the onLeftFunction
and onRightFunction
model properties and listen for mojo-imageViewChanged
; from the handlers, use the methods leftUrlProvided(url)
, rightUrlProvided(url)
, and centerUrlProvided(url)
to build a scrolling list of images.
Declaration
<div x-mojo-element="ImageView" id="ImageId" class="ImageClass" name="ImageName"></div>
Properties | Required | Value | Description |
---|---|---|---|
x-mojo-element | Required | ImageView | Declares the widget as type 'ImageView'. |
id | Required | Any String | Identifies the widget element for use when instantiating or rendering. |
class | Optional | Any String | Provide your own unique class and override the framework's styles. |
name | Optional | Any String | Adds a unique name to the ImageView widget; generally used in templates. |
Events
Mojo.Event.listen(this.controller.get("ImageId"), Mojo.Event.imageViewChanged, this.handleUpdate);
Event Type | Value | Event Handling |
---|---|---|
Mojo.Event.imageViewChanged | event.url | event fires when image in view changes |
Instantiation
this.controller.setupWidget("ImageId", this.attributes = { noExtractFS: true }, this.model = { onLeftFunction: this.onLeft.bind(this), onRightFunction: this.onRight.bind(this) } );
Attribute Properties
Attribute Property | Type | Required | Default | Description |
---|---|---|---|---|
highResolutionLoadTimeout | Number | Optional | 1.2 | Time to wait before switching photo to high res. |
extractfsParams | String | Optional | "800:800:3" | |
lowResExtractFSParams | String | Optional | "160:160:3" | |
noExtractFS | Boolean | Optional | false | Flag to prevent looking up a high res version. |
limitZoom | Boolean | Optional | false | Flag to prevent or limit zooming. |
panInsetX | Number | Optional | 0 | |
panInsetY | Number | Optional | 0 |
Model Properties
Model Property | Type | Required | Default | Description |
---|---|---|---|---|
onLeftFunction | Function | Optional | None | Called after a left transition. |
onRightFunction | Function | Optional | None | Called after a right transition. |
Methods
To invoke a method on a widget, use the scene controller's get
method for the desired widget, and append mojo
followed by the method.
Example:
this.controller.get('myWidget').mojo.getValue()
Method | Arguments | Description |
---|---|---|
getCurrentParams | None | Returns the current zoom level and focus [0,1]. |
manualSize | width, height | Manually sizes the widget. |
leftUrlProvided | filepath or url | Tells the widget to use this image as the left. |
rightUrlProvided | filepath or url | Tells the widget to use this image as the right. |
centerUrlProvided | filepath or url | Tells the widget to use this image as the center. |