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.