A.ImageViewer Class
A class for A.ImageViewer, providing:
- Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)
- Displays an image in a Overlay
- Keyboard navigation support
Check the live demo.
Constructor
A.ImageViewer
-
config
Parameters:
-
configObjectObject literal specifying widget configuration properties.
Index
Methods
- _addShimResizeHandlers
- _addStdModContent
- _afterAlignChange
- _afterAlignOnChange
- _afterBodyChange
- _afterCloseClicked
- _afterConstrainChange
- _afterCssClassChange
- _afterCurrentIndexChange
- _afterFillHeight
- _afterFillHeightChange
- _afterFocusOnChange
- _afterFooterChange
- _afterHeaderChange
- _afterHostVisibleChangeModal
- _afterHostZIndexChangeModal
- _afterIndexChange
- _afterPreloadAllImagesChange
- _afterResponsive
- _afterResponsiveSwipe
- _afterShimChange
- _afterShowControlsChange
- _afterSlideshowBindUI
- _afterSlideshowCurrentIndexChange
- _afterSlideshowIntervalTimeChange
- _afterSlideshowPlayingChange
- _afterSlideshowRenderUI
- _afterSlideshowShowPlayerChange
- _afterSlideshowUISetVisible
- _afterSourcesChange
- _afterThumbnailsConfigChange
- _afterThumbnailsIndexChange
- _afterUISetVisible
- _afterWidgetUISetVisible
- _afterXYChange
- _afterZIndexChange
- _applyStdModParsedConfig
- _attachLinkEvent
- _attachLinkEvents
- _attachPosAlignUIHandles
- _attachSwipeEvents
- _attachUIHandlesModal
- _bindControls
- _bindPlayer
- _bindThumbnails
- _bindUIModal
- _bindUIPosAlign
- _bindUIPosConstrained
- _bindUIPosition
- _bindUIStack
- _bindUIStdMod
- _blockIFrameFocus
- _blur
- _calculateOriginalDimensions
- _canChangeHeight
- _canChangeWidth
- _clearIntervalRotationTask
- _constrain
- _constrainOnXYChange
- _createIntervalRotationTask
- _defAnimateFn
- _defResponsiveFn
- _destroyShim
- _detachLinkEvent
- _detachPosAlignUIHandles
- _detachStackHandles
- _detachSwipeEvents
- _detachUIHandlesModal
- _disableScrollView
- _doAlign
- _enableConstraints
- _enableScrollView
- _eraseStdMod
- _fillHeight
- _findStdModSection
- _focus
- _getAlignedXY
- _getAlignToXY
- _getCurrentImage
- _getCurrentImageContainer
- _getImageContainer
- _getImageContainerAtIndex
- _getInfoTemplate
- _getMaskNode
- _getPreciseHeight
- _getRegion
- _getShimTemplate
- _getStdModContent
- _getStdModTemplate
- _getThumbnailImageSources
- _getThumbnailsConfig
- _getX
- _getY
- _handleResponsive
- _insertStdModSection
- _loadImage
- _onClickControl
- _onClickLinks
- _onCurrentImageReady
- _onImageLoad
- _onKeydown
- _onPlayerClick
- _onResponsive
- _onResponsiveSwipe
- _parseStdModHTML
- _parseZIndex
- _plugPaginator
- _preloadAll
- _preventOverlap
- _renderControls
- _renderFooter
- _renderImage
- _renderImageContainers
- _renderImageListNode
- _renderImages
- _renderImagesForFirstTime
- _renderPlayer
- _renderPlayer
- _renderShim
- _renderShimDeferred
- _renderStdMod
- _renderThumbnailsWidget
- _renderUIModal
- _renderUIPosition
- _renderUIStack
- _renderUIStdMod
- _repositionMask
- _resyncMask
- _scrollToCurrentIndex
- _setAlignCenter
- _setConstrain
- _setCurrentIndex
- _setImageAnim
- _setLinks
- _setSwipe
- _setX
- _setY
- _setZIndex
- _showCurrentImage
- _syncAriaCurrentImageUI
- _syncCaptionUI
- _syncControlsUI
- _syncInfoUI
- _syncPlaying
- _syncScrollUI
- _syncShowPlayer
- _syncThumbnails
- _syncTimers
- _syncUIModal
- _syncUIPosAlign
- _syncUIPosition
- _syncUIStack
- _syncUIStdMod
- _uiSetAlign
- _uiSetCssClass
- _uiSetFillHeight
- _uiSetHostVisibleModal
- _uiSetHostZIndexModal
- _uiSetShim
- _uiSetStdMod
- _uiSetSwipe
- _uiSetVisiblePosAlign
- _uiSetXY
- _uiSetZIndex
- _unblockIFrameFocus
- _updateCurrentImageCSS
- _validateFillHeight
- _validateXY
- align
- bindUI
- centered
- constrain
- destructor
- destructor
- fillHeight
- getConstrainedXY
- getLink
- getStdModNode
- hasNext
- hasPrev
- initializer
- isNested
- move
- next
- pause
- play
- prev
- renderUI
- setStdModContent
- sizeShim
- syncXY
- toggle
- updateDimensions
- updateDimensionsWithNewRatio
Properties
- _posAlignUIHandles
- ATTRS static
- CSS_PREFIX static
- STACK
Attributes
- align
- alignOn
- bodyContent
- caption
- captionFromTitle
- centered
- circular
- constrain
- controlNext
- controlPrevious
- cssClass
- currentIndex
- fillHeight
- focusOn
- footerContent
- gutter
- headerContent
- height
- imageAnim
- infoTemplate
- intervalTime
- links
- maskNode
- maxHeight
- maxWidth
- modal
- playing
- preloadAllImages
- preserveRatio
- preventOverlap
- role
- shim
- showControls
- showPlayer
- sources
- swipe
- thumbnailsConfig
- useARIA
- useScrollViewPaginator
- visible
- width
- x
- xy
- y
- zIndex
Events
Methods
_addShimResizeHandlers
()
private
Sets up event listeners to resize the shim when the size of the Widget changes. <p> NOTE: This method is only used for IE6 currently, since IE6 doesn't support a way to resize the shim purely through CSS, when the Widget does not have an explicit width/height set. </p>
_addStdModContent
-
node -
children -
where
Helper method to add content to a StdMod section node. The content is added either before, after or replaces the existing node content based on the value of the <code>where</code> argument.
Parameters:
-
nodeNode<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The section Node to be updated.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
childrenNode | NodeList | String<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The new content Node, NodeList or String to be added to section Node provided.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
whereString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>Optional. Either WidgetStdMod.AFTER, WidgetStdMod.BEFORE or WidgetStdMod.REPLACE. If not provided, the content will replace existing content in the Node.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_afterAlignChange
-
e
Handles alignChange events by updating the UI in response to align
Attribute changes.
Parameters:
_afterAlignOnChange
-
e
Handles alignOnChange events by updating the alignment-syncing event
handlers.
Parameters:
_afterBodyChange
-
e
Default attribute change listener for the bodyContent attribute, responsible for updating the UI, in response to attribute changes.
Parameters:
-
eEventFacade<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The event facade for the attribute change</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_afterCloseClicked
()
protected
Fired after the close button is clicked.
_afterConstrainChange
-
e
After change listener for the "constrain" attribute, responsible for updating the UI, in response to attribute changes.
Parameters:
-
eEventFacade<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The event facade</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_afterCssClassChange
-
event
Fires after the value of the cssClass attribute change.
Parameters:
-
eventEventFacade
_afterCurrentIndexChange
-
event
<p>Fired after the <code>currentIndex</code> attribute is set.</p>
Parameters:
-
eventEventFacade
_afterFillHeight
()
protected
Fired after fillHeight function is called. Updates the line-height
of the fillHeight node to be equal to its height, so the images can
be vertically centered.
_afterFillHeightChange
-
e
Default attribute change listener for the fillHeight attribute, responsible for updating the UI, in response to attribute changes.
Parameters:
-
eEventFacade<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The event facade for the attribute change</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_afterFocusOnChange
()
Default function called when focusOn Attribute is changed. Remove existing listeners and create new listeners.
_afterHeaderChange
-
e
Default attribute change listener for the headerContent attribute, responsible for updating the UI, in response to attribute changes.
Parameters:
-
eEventFacade<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The event facade for the attribute change</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_afterHostVisibleChangeModal
-
e
Default function that is called when visibility is changed on the widget.
Parameters:
-
eEventFacadeThe event facade of the change
_afterHostZIndexChangeModal
-
e
Default function that is called when z-index is changed on the widget.
Parameters:
-
eEventFacadeThe event facade of the change
_afterIndexChange
-
event
Fired after the scrollview's index attribute is changed. Will update
the widget's index accordingly.
Parameters:
-
eventEventFacade
_afterPreloadAllImagesChange
()
protected
<p>Fired after the <code>preloadAllImages</code> attribute is changed.</p>
_afterResponsive
()
protected
Fired after the responsive event.
_afterResponsiveSwipe
()
protected
Fired after the widget's responsive event. This adds back the swipe css
class that was removed by _onResponsiveSwipe and then syncs the scroll UI.
_afterShimChange
-
e
Default attribute change listener for the shim attribute, responsible for updating the UI, in response to attribute changes.
Parameters:
-
eEventFacade<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The event facade for the attribute change</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_afterShowControlsChange
()
protected
<p>Fired after the <code>showControls</code> attribute is changed.</p>
_afterSlideshowBindUI
()
protected
Fired after the bindUI method runs.
_afterSlideshowCurrentIndexChange
()
protected
Fired after the currentIndex attribute changes.
_afterSlideshowIntervalTimeChange
()
protected
Fired after the intervalTime attribute changes.
_afterSlideshowPlayingChange
()
protected
Fired after the playing attribute changes.
_afterSlideshowRenderUI
()
protected
Fired after the renderUI method runs.
_afterSlideshowShowPlayerChange
()
protected
Fired after the showPlayer attribute changes.
_afterSlideshowUISetVisible
()
protected
Fired after the _uiSetVisible method runs.
_afterSourcesChange
()
protected
<p>Fired after the <code>sources</code> attribute is changed.</p>
_afterThumbnailsConfigChange
-
event
Fired after the thumbnailsConfig attribute changes.
Parameters:
-
eventEventFacade
_afterThumbnailsIndexChange
()
protected
Fired after the current thumbnail index changes.
_afterUISetVisible
()
protected
Shows the A.ImageViewer UI.
_afterWidgetUISetVisible
()
protected
Fired after the widget's _uiSetVisible function is called. It prepares the swipe funcionality for use.
_afterXYChange
-
e
Default attribute change listener for the xy attribute, responsible for updating the UI, in response to attribute changes.
Parameters:
-
eEventFacade<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The event facade for the attribute change</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_afterZIndexChange
-
e
Default attribute change listener for the zIndex attribute, responsible for updating the UI, in response to attribute changes.
Parameters:
-
eEventFacade<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The event facade for the attribute change</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_applyStdModParsedConfig
()
private
This method is injected before the _applyParsedConfig step in the application of HTML_PARSER, and sets up the state to identify whether or not we should remove the current DOM content or not, based on whether or not the current content attribute value was extracted from the DOM, or provided by the user configuration
_attachLinkEvent
()
protected
Attaches the click event for the image links.
_attachLinkEvents
()
protected
Fired after the link attribute is changed. It will render the
referenced images and attach click events to those links.
_attachPosAlignUIHandles
()
protected
Attaches the alignment-syncing event handlers.
_attachSwipeEvents
()
protected
Listens to the necessary events for the swipe funcionality to work correctly.
_attachUIHandlesModal
()
Attaches UI Listeners for "clickoutside" and "focusoutside" on the widget. When these events occur, and the widget is modal, focus is shifted back onto the widget.
_bindControls
()
protected
Binds the events related to the viewer's controls.
_bindPlayer
()
protected
Binds the necessary events for the behavior of the play button.
_bindThumbnails
()
protected
Binds the events related to the thumbnails.
_bindUIModal
()
protected
Hooks up methods to be executed when the widget's visibility or z-index changes <p> This method in invoked after bindUI is invoked for the Widget class using YUI's aop infrastructure. </p>
_bindUIPosAlign
()
protected
Bind event listeners responsible for updating the UI state in response to the widget's position-align related state changes.
This method is invoked after bindUI has been invoked for the Widget
class using the AOP infrastructure.
_bindUIPosConstrained
()
protected
Binds event listeners responsible for updating the UI state in response to Widget constrained positioning related state changes. <p> This method is invoked after bindUI is invoked for the Widget class using YUI's aop infrastructure. </p>
_bindUIPosition
()
protected
Binds event listeners responsible for updating the UI state in response to Widget position related state changes. <p> This method in invoked after bindUI is invoked for the Widget class using YUI's aop infrastructure. </p>
_bindUIStack
()
protected
Binds event listeners responsible for updating the UI state in response to Widget stack related state changes. <p> This method is invoked after bindUI is invoked for the Widget class using YUI's aop infrastructure. </p>
_bindUIStdMod
()
protected
Binds event listeners responsible for updating the UI state in response to Widget standard module related state changes. <p> This method is invoked after bindUI is invoked for the Widget class using YUI's aop infrastructure. </p>
_blockIFrameFocus
()
protected
Blocks iframes on the page from getting focused by setting their tabIndex attribute to -1. The previous value of tabIndex is saved so it can be restored later.
_blur
()
Blurs the widget.
_calculateOriginalDimensions
()
Object
protected
Calculates the original width and height of the widget, which will be used when changing its dimensions to preserve its ratio.
Returns:
<p><p><p>An object with the original dimensions</p></p></p>
_canChangeHeight
()
Boolean
Checks if the height can be manually changed.
Returns:
_canChangeWidth
()
Boolean
Checks if the width can be manually changed.
Returns:
_clearIntervalRotationTask
()
protected
Clear the rotation task interval.
_constrain
-
val -
axis -
nodeRegion -
constrainingRegion
The method which performs the actual constrain calculations for a given axis ("x" or "y") based on the regions provided.
Parameters:
-
valNumber<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The value to constrain</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
axisString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The axis to use for constrainment</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
nodeRegionRegion<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The region of the node to constrain</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
constrainingRegionRegion<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The region of the node (or viewport) to constrain to</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The constrained value</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_constrainOnXYChange
-
e
The on change listener for the "xy" attribute. Modifies the event facade's newVal property with the constrained XY value.
Parameters:
-
eEventFacade<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The event facade for the attribute change</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_createIntervalRotationTask
()
protected
Create an timer for the rotation task.
_defAnimateFn
()
protected
<p>Default behavior for animating the current image in the viewer.</p>
_defResponsiveFn
-
event
Default behavior for the responsive event. It updates the dimensions of
the widget so it will respect the preserveRatio, maxHeight and maxWidth
attributes.
Parameters:
-
eventEventFacade
_destroyShim
()
private
Removes the shim from the DOM, and detaches any related event listeners.
_detachLinkEvent
()
protected
Detaches the click event for the image links, if one was attached earlier.
_detachPosAlignUIHandles
()
protected
Detaches the alignment-syncing event handlers.
_detachStackHandles
-
String
Detaches any handles stored for the provided key
Parameters:
-
StringObject<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>handleKey The key defining the group of handles which should be detached</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_detachSwipeEvents
()
protected
Detaches all events related to the swipe funcionality.
_detachUIHandlesModal
()
Detaches all UI Listeners that were set in _attachUIHandlesModal from the widget.
_disableScrollView
()
protected
Disables the scroll view, removing the swipe funcionality.
_doAlign
-
xy
Helper method, used to align the given point on the widget, with the XY page coordinates provided.
Parameters:
-
xyArray<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>XY page coordinates to align to.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_enableConstraints
-
enable
Updates the UI if enabling constraints, and sets up the xyChange event listeners to constrain whenever the widget is moved. Disabling constraints removes the listeners.
Parameters:
-
enableBoolean<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>Enable or disable constraints</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_enableScrollView
()
protected
Enables the scroll view, adding the swipe funcionality.
_eraseStdMod
-
section
Removes the DOM node for the given section.
Parameters:
-
sectionString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The section to remove. Either WidgetStdMod.HEADER, WidgetStdMod.BODY or WidgetStdMod.FOOTER.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_fillHeight
()
private
Updates the rendered UI, to resize the current section specified by the fillHeight attribute, so that the standard module fills out the Widget height. If a height has not been set on Widget, the section is not resized (height is set to "auto").
_findStdModSection
-
section
Helper method to to find the rendered node for the given section, if it exists.
Parameters:
-
sectionString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The section for which the render Node is to be found. Either WidgetStdMod.HEADER, WidgetStdMod.BODY or WidgetStdMod.FOOTER.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The rendered node for the given section, or null if not found.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_focus
()
Provides mouse and tab focus to the widget's bounding box.
_getAlignedXY
-
[node] -
points
Returns Widget alignment coordinates realative to the given Node.
Parameters:
-
[node]Node | String | Null optional<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The node to align to, or null to indicate the viewport.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
pointsArray<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The alignment points.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>the coordinates.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_getAlignToXY
-
'Node' -
[point] -
'Node' -
'Node'
Returns coordinates realative to the passed Node alignment.
Parameters:
-
'Node'Node<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The node to align to.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
[point]Array optional<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The node alignment points.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
'Node'Number<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>x coordinate.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
'Node'Number<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>y coordinate.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>the coordinates.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_getCurrentImageContainer
()
protected
<p>Returns the container node for the current image.</p>
_getImageContainer
()
protected
<p>Returns the image container node.</p>
_getImageContainerAtIndex
-
index
<p>Returns the container node at the requested index.</p>
Parameters:
-
indexNumber
_getInfoTemplate
-
v
Gets the info template.
Parameters:
-
vStringtemplate
Returns:
Parsed string.
_getMaskNode
()
Node
Returns the Y.Node instance of the maskNode
Returns:
The Y.Node instance of the mask, as returned from WidgetModal._GET_MASK
_getPreciseHeight
-
node
Helper method to obtain the precise height of the node provided, including padding and border. The height could be a sub-pixel value for certain browsers, such as Firefox 3.
Parameters:
-
nodeNode<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The node for which the precise height is required.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The height of the Node including borders and padding, possibly a float.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_getRegion
-
[node]
Returns the region of the passed-in Node, or the viewport region if
calling with passing in a Node.
Parameters:
-
[node]Node optional<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The node to get the region of.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The node's region.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_getShimTemplate
()
Node
private
Creates a cloned shim node, using the SHIM_TEMPLATE html template, for use on a new instance.
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>node A new shim Node instance.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_getStdModContent
-
section
Retrieves the child nodes (content) of a standard module section
Parameters:
-
sectionString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The standard module section whose child nodes are to be retrieved. Either WidgetStdMod.HEADER, WidgetStdMod.BODY or WidgetStdMod.FOOTER.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The child node collection of the standard module section.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_getStdModTemplate
-
section
Gets a new Node reference for the given standard module section, by cloning the stored template node.
Parameters:
-
sectionString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The section to create a new node for. Either WidgetStdMod.HEADER, WidgetStdMod.BODY or WidgetStdMod.FOOTER.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The new Node instance for the section</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_getThumbnailImageSources
()
protected
Returns an array with the sources of the images to be used as the
viewer's thumbnails. They should be the images included inside the
elements given as the links attributes or, if there isn't one,
the respective item in the sources attribute.
_getThumbnailsConfig
-
val
Gets thumbnailsConfig attribute.
Parameters:
-
valBoolean | Object
_getX
()
Number
protected
Default getter for the X attribute. The value is retrieved from the XY attribute, which is the sole store for the XY state.
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The X page co-ordinate value</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_getY
()
Number
protected
Default getter for the Y attribute. The value is retrieved from the XY attribute, which is the sole store for the XY state.
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The Y page co-ordinate value</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_handleResponsive
()
protected
Fires the responsive event.
_insertStdModSection
-
contentBox -
section -
sectionNode
Helper method to insert the Node for the given section into the correct location in the contentBox.
Parameters:
-
contentBoxNode<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>A reference to the Widgets content box.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
sectionString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The section to create/render. Either WidgetStdMod.HEADER, WidgetStdMod.BODY or WidgetStdMod.FOOTER.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
sectionNodeNode<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The Node for the section.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_loadImage
-
index
<p>Fires the necessary events to load the requested image.</p>
Parameters:
-
indexNumber<p><p><p>The index of the image to load.</p></p></p>
_onClickControl
-
event
<p>Fired when one of the viewer's controls is clicked.</p>
Parameters:
-
eventEventFacade
_onClickLinks
-
event
Fired when the nodes in the links attribute are clicked.
Parameters:
-
eventEventFacade
_onCurrentImageReady
()
protected
<p>This should be called when the current image is ready to be displayed.</p>
_onImageLoad
()
protected
<p>Fired when an image has finished loading.</p>
_onKeydown
-
event
Fired when the user presses a key on the keyboard.
Parameters:
-
eventEventFacade
_onPlayerClick
()
protected
Fired when the play button is clicked.
_onResponsive
()
protected
Fired on the responsive event.
_onResponsiveSwipe
()
protected
Fired on the widget's responsive event. This removes the swipe css class,
so the responsive code can correctly calculate the widget's size. The css
class will be added back by _afterResponsiveSwipe.
_parseStdModHTML
-
section
Utility method, used by WidgetStdMods HTML_PARSER implementation to extract data for each section from markup.
Parameters:
-
sectionString
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>Inner HTML string with the contents of the section</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_parseZIndex
-
srcNode
Parses a zIndex attribute value from this widget's srcNode.
Parameters:
-
srcNodeNode<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The node to parse a <code>zIndex</code> value from.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The parsed <code>zIndex</code> value.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_plugPaginator
()
protected
Plugs ScrollViewPaginator if the useScrollViewPaginator is true.
_preloadAll
()
protected
<p>Preloads all the images if the <code>preloadAllImages</code> attribute is true.</p>
_preventOverlap
-
val -
axis -
nodeRegion -
constrainingRegion
The method which performs the preventOverlap calculations for a given axis ("x" or "y") based on the value and regions provided.
Parameters:
-
valNumber<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The value being constrain</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
axisString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The axis to being constrained</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
nodeRegionRegion<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The region of the node being constrained</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
constrainingRegionRegion<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The region of the node (or viewport) we need to constrain to</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The constrained value</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_renderControls
()
protected
Renders the viewer controsl (next/prev/close).
_renderImage
-
index -
container
<p>Renders the requested image and registers it to be loaded when used.</p>
_renderImageContainers
()
Array
protected
<p>Renders all image containers and returns them in an array.</p>
Returns:
<p><p><p>list of image containers</p></p></p>
_renderImageListNode
()
protected
Overrides this method from ImageViewerBase so that the image list will be rendered inside the body node, instead of directly in the content box.
_renderImages
()
protected
<p>Renders the images indicated in the <code>sources</code> attribute.</p>
_renderImagesForFirstTime
()
protected
<p>Renders the images indicated in the <code>sources</code> attribute for the first time. If the images were already present before the widget is rendered, we'll mark these images as having already been loaded.</p>
_renderPlayer
()
protected
Renders the player button.
_renderPlayer
()
protected
Renders the player button.
_renderShim
()
private
Creates the shim element and adds it to the DOM
_renderShimDeferred
()
private
Sets up change handlers for the visible attribute, to defer shim creation/rendering until the Widget is made visible.
_renderStdMod
-
section
Creates the DOM node for the given section, and inserts it into the correct location in the contentBox.
Parameters:
-
sectionString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The section to create/render. Either WidgetStdMod.HEADER, WidgetStdMod.BODY or WidgetStdMod.FOOTER.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>A reference to the added section node</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_renderThumbnailsWidget
()
protected
Renders the thumbnails widget.
_renderUIModal
()
protected
Adds modal class to the bounding box of the widget <p> This method in invoked after renderUI is invoked for the Widget class using YUI's aop infrastructure. </p>
_renderUIPosition
()
protected
Creates/Initializes the DOM to support xy page positioning. <p> This method in invoked after renderUI is invoked for the Widget class using YUI's aop infrastructure. </p>
_renderUIStack
()
protected
Creates/Initializes the DOM to support stackability. <p> This method in invoked after renderUI is invoked for the Widget class using YUI's aop infrastructure. </p>
_renderUIStdMod
()
protected
Creates/Initializes the DOM for standard module support. <p> This method is invoked after renderUI is invoked for the Widget class using YUI's aop infrastructure. </p>
_repositionMask
-
nextElem
Repositions the mask in the DOM for nested modality cases.
Parameters:
-
nextElemWidgetThe Y.Widget instance that will be visible in the stack once the current widget is closed.
_resyncMask
-
nextElem
Resyncs the mask in the viewport for browsers that don't support fixed positioning
Parameters:
-
nextElemY.WidgetThe Y.Widget instance that will be visible in the stack once the current widget is closed.
_scrollToCurrentIndex
()
protected
Scrolls to the widget's current index.
_setAlignCenter
-
val
Default setter for center Attribute changes. Sets up the appropriate
value, and passes it through the to the align attribute.
Parameters:
-
valBoolean | Node<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The Attribute value being set.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>the value passed in.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_setConstrain
-
val
The setter implementation for the "constrain" attribute.
Parameters:
-
valNode | boolean<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The attribute value</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_setCurrentIndex
-
val
<p>Sets <code>currentIndex</code> attribute.</p>
Parameters:
-
valNumber | String
_setImageAnim
-
val
<p>Sets <code>imageAnim</code> attribute.</p>
Parameters:
-
valObject
_setSwipe
()
protected
Sets swipe attribute.
_setX
-
val
Default setter for the X attribute. The setter passes the X value through to the XY attribute, which is the sole store for the XY state.
Parameters:
-
valNumber<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The X page co-ordinate value</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_setY
-
val
Default setter for the Y attribute. The setter passes the Y value through to the XY attribute, which is the sole store for the XY state.
Parameters:
-
valNumber<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The Y page co-ordinate value</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_setZIndex
-
zIndex
Default setter for zIndex attribute changes. Normalizes zIndex values to numbers, converting non-numerical values to 0.
Parameters:
-
zIndexString | Number
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>Normalized zIndex</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_showCurrentImage
()
protected
Loads the image specified at currentIndex and shows it.
_syncAriaCurrentImageUI
()
protected
<p>Update the aria attributes for image.</p>
_syncCaptionUI
()
protected
Updates the caption.
_syncControlsUI
()
protected
<p>Updates the controls, showing or hiding them as necessary.</p>
_syncInfoUI
()
protected
Updates the info node.
_syncPlaying
()
protected
Updates the player according to the value of the playing attribute.
_syncScrollUI
()
protected
This method updates the scroll view with new dimensions and makes sure it's at the correct position.
_syncShowPlayer
()
protected
Updates the player according to the value of the showPlayer attribute.
_syncThumbnails
()
protected
Updates the thumbnails node.
_syncTimers
()
protected
Updates the timers according to the value of the playing attribute.
_syncUIModal
()
protected
Syncs the mask with the widget's current state, namely the visibility and z-index of the widget <p> This method in invoked after syncUI is invoked for the Widget class using YUI's aop infrastructure. </p>
_syncUIPosAlign
()
protected
Synchronizes the current align Attribute value to the DOM.
This method is invoked after syncUI has been invoked for the Widget
class using the AOP infrastructure.
_syncUIPosition
()
protected
Synchronizes the UI to match the Widgets xy page position state. <p> This method in invoked after syncUI is invoked for the Widget class using YUI's aop infrastructure. </p>
_syncUIStack
()
protected
Synchronizes the UI to match the Widgets stack state. This method in invoked after syncUI is invoked for the Widget class using YUI's aop infrastructure.
_syncUIStdMod
()
protected
Synchronizes the UI to match the Widgets standard module state. <p> This method is invoked after syncUI is invoked for the Widget class using YUI's aop infrastructure. </p>
_uiSetAlign
-
[node] -
points
Updates the UI to reflect the align value passed in.
Note: See the align Attribute documentation, for the Object structure
expected.
Parameters:
-
[node]Node | String | Null optional<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The node to align to, or null to indicate the viewport.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
pointsArray<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The alignment points.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_uiSetCssClass
-
newVal -
prevVal
Applies the CSS classes to the boundingBox and contentBox.
Parameters:
-
newValString -
prevValString
_uiSetFillHeight
-
fillSection
Updates the rendered UI, to resize the provided section so that the standard module fills out the specified widget height. Note: This method does not check whether or not a height is set on the Widget.
Parameters:
-
fillSectionString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>A valid section specifier - one of WidgetStdMod.HEADER, WidgetStdMod.BODY or WidgetStdMod.FOOTER</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_uiSetHostVisibleModal
-
Whether
Performs events attaching/detaching, stack shifting and mask repositioning based on the visibility of the widget
Parameters:
-
WhetherBooleanthe widget is visible or not
_uiSetHostZIndexModal
-
Z-Index
Sets the z-index of the mask node.
Parameters:
-
Z-IndexNumberof the widget
_uiSetShim
-
enable
Updates the UI to enable/disable the shim. If the widget is not currently visible, creation of the shim is deferred until it is made visible, for performance reasons.
Parameters:
-
enableBoolean<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>If true, creates/renders the shim, if false, removes it.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_uiSetStdMod
-
section -
content -
where
Updates the rendered UI, adding the provided content (either an HTML string, or node reference), to the specified section. The content is either added before, after or replaces existing content in the section, based on the value of the <code>where</code> argument.
Parameters:
-
sectionString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The section to be updated. Either WidgetStdMod.HEADER, WidgetStdMod.BODY or WidgetStdMod.FOOTER.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
contentString | Node<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The new content (either as an HTML string, or Node reference) to add to the section</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
whereString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>Optional. Either WidgetStdMod.AFTER, WidgetStdMod.BEFORE or WidgetStdMod.REPLACE. If not provided, the content will replace existing content in the section.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_uiSetSwipe
()
protected
Updates the UI according to the current value of swipe.
_uiSetVisiblePosAlign
-
visible
Attaches or detaches alignment-syncing event handlers based on the widget's
visible Attribute state.
Parameters:
-
visibleBoolean<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The current value of the widget's <code>visible</code> Attribute.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_uiSetXY
-
val
Updates the UI to reflect the XY page co-ordinates passed in.
Parameters:
-
valString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The XY page co-ordinates value to be reflected in the UI</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_uiSetZIndex
-
zIndex
Updates the UI to reflect the zIndex value passed in.
Parameters:
-
zIndexNumber<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The zindex to be reflected in the UI</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_unblockIFrameFocus
()
protected
Unblocks focus for the iframes on the page by restoring their original tabIndex attributes (see the _blockIFrameFocus method).
_updateCurrentImageCSS
()
protected
<p>Sets the CSS class that indicates the current image.</p>
_validateFillHeight
-
val
Default validator for the fillHeight attribute. Verifies that the value set is a valid section specifier - one of WidgetStdMod.HEADER, WidgetStdMod.BODY or WidgetStdMod.FOOTER, or a falsey value if fillHeight is to be disabled.
Parameters:
-
valString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The section which should be setup to fill height, or false/null to disable fillHeight</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>true if valid, false if not</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
_validateXY
-
val
Default validator for the XY attribute
Parameters:
-
valArray<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The XY page co-ordinate value which is being set.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>true if valid, false if not.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
align
-
[node] -
[points]
Aligns this widget to the provided Node (or viewport) using the provided
points. This method can be invoked with no arguments which will cause the
widget's current align Attribute value to be synced to the DOM.
Parameters:
-
[node]Node | String | Null optional<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>A reference (or selector String) for the <code>Node</code> which with the widget is to be aligned. If null is passed in, the widget will be aligned with the viewport.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
[points]Array2 optional<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>A two item array specifying the points on the widget and <code>Node</code>/viewport which will to be aligned. The first entry is the point on the widget, and the second entry is the point on the <code>Node</code>/viewport. Valid point references are defined as static constants on the <code>WidgetPositionAlign</code> extension.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Example:
Aligning to the top-left corner of the <body>:
myWidget.align('body',
[Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.TR]);bindUI
()
protected
Bind the events for the A.ImageViewer UI. Lifecycle.
centered
-
[node]
Centers the widget in the viewport, or if a Node is passed in, it will
be centered to that Node.
Parameters:
-
[node]Node | String optional<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>A <code>Node</code> reference or selector String defining the <code>Node</code> which the widget should be centered. If a <code>Node</code> is not passed in, then the widget will be centered to the viewport.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
constrain
-
xy -
node
Constrains the widget's bounding box to a node (or the viewport). If xy or node are not passed in, the current position and the value of "constrain" will be used respectively.
The widget's position will be changed to the constrained position.
Parameters:
-
xyArray<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>Optional. The xy values to constrain</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
nodeNode | boolean<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>Optional. The node to constrain to, or true for the viewport</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
destructor
()
protected
Destructor implementation. Lifecycle.
destructor
()
protected
Destructor lifecycle implementation for the A.ImageViewer class.
fillHeight
-
node
Sets the height on the provided header, body or footer element to fill out the height of the Widget. It determines the height of the widgets bounding box, based on it's configured height value, and sets the height of the provided section to fill out any space remaining after the other standard module section heights have been accounted for.
<p><strong>NOTE:</strong> This method is not designed to work if an explicit height has not been set on the Widget, since for an "auto" height Widget, the heights of the header/body/footer will drive the height of the Widget.</p>
Parameters:
-
nodeNode<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The node which should be resized to fill out the height of the Widget bounding box. Should be a standard module section node which belongs to the widget.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
getConstrainedXY
-
xy -
node
Calculates the constrained positions for the XY positions provided, using the provided node argument is passed in. If no node value is passed in, the value of the "constrain" attribute is used.
Parameters:
-
xyArray<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The xy values to constrain</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
nodeNode | boolean<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>Optional. The node to constrain to, or true for the viewport</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The constrained xy values</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
getLink
-
index
Gets the Node reference to the index element from the
links.
Parameters:
-
indexObject
Returns:
getStdModNode
-
section -
forceCreate
Returns the node reference for the specified section.
Note: The DOM is not queried for the node reference. The reference
stored by the widget instance is returned if it was set. Passing a
truthy for forceCreate will create the section node if it does not
already exist.
Parameters:
-
sectionString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The section whose node reference is required. Either <code>WidgetStdMod.HEADER</code>, <code>WidgetStdMod.BODY</code>, or <code>WidgetStdMod.FOOTER</code>.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
forceCreateBoolean<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>Whether the section node should be created if it does not already exist.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
Returns:
<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The node reference for the <code>section</code>, or null if not set.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
hasNext
()
Boolean
<p>Checks if there is a next element to navigate.</p>
Returns:
hasPrev
()
Boolean
<p>Checks if there is a previous element to navigate.</p>
Returns:
initializer
()
protected
Construction logic executed during instantiation. Lifecycle.
isNested
()
public
Returns a boolean representing whether the current widget is in a "nested modality" state. This is done by checking the number of widgets currently on the stack.
move
-
x -
[y]
Moves the Widget to the specified page xy co-ordinate position.
Parameters:
-
xNumber | Number[]<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The new x position or [x, y] values passed as an array to support simple pass through of Node.getXY results</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
[y]Number optional<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The new y position</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
next
()
<p>Loads the next image.</p>
pause
()
Pauses the slideshow.
play
()
Resumes the slideshow.
prev
()
<p>Loads the previous image.</p>
renderUI
()
protected
Create the DOM structure for the A.ImageViewer. Lifecycle.
setStdModContent
-
section -
content -
where
Updates the body section of the standard module with the content provided (either an HTML string, or node reference). <p> This method can be used instead of the corresponding section content attribute if you'd like to retain the current content of the section, and insert content before or after it, by specifying the <code>where</code> argument. </p>
Parameters:
-
sectionString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The standard module section whose content is to be updated. Either WidgetStdMod.HEADER, WidgetStdMod.BODY or WidgetStdMod.FOOTER.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
contentString | Node<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>The content to be added, either an HTML string or a Node reference.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
-
whereString<p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p><p>Optional. Either WidgetStdMod.AFTER, WidgetStdMod.BEFORE or WidgetStdMod.REPLACE. If not provided, the content will replace existing content in the section.</p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p></p>
sizeShim
()
For IE6, synchronizes the size and position of iframe shim to that of Widget bounding box which it is protecting. For all other browsers, this method does not do anything.
syncXY
()
Synchronizes the Panel's "xy", "x", and "y" properties with the Widget's position in the DOM.
toggle
-
visible
Toggles widget visibility.
Parameters:
-
visibleBoolean<p><p><p><p><p><p><p><p><p><p><p><p>Force the widget to be visible.</p></p></p></p></p></p></p></p></p></p></p></p>
updateDimensions
()
Updates the widget's dimensions so that it will fit the page better.
updateDimensionsWithNewRatio
()
Updates the widget's dimensions like the updateDimensions method, but
also recalculates the ratio to be preserved. Useful if the visible content
of the widget has changed causing the ratio to change as well.
Properties
_posAlignUIHandles
Array
protected
Holds the alignment-syncing event handles.
Default: null
ATTRS
Object
static
Static property used to define the default attribute configuration
for the A.ImageViewer.
CSS_PREFIX
String
static
Static property provides a string to identify the CSS prefix.
STACK
Unknown
A stack of Y.Widget objects representing the current hierarchy of modal widgets presently displayed on the screen
Attributes
align
Object
The alignment configuration for this widget.
The align attribute is used to align a reference point on the widget, with
the reference point on another Node, or the viewport. The object which
align expects has the following properties:
-
__
node__: TheNodeto which the widget is to be aligned. If set tonull, or not provided, the widget is aligned to the viewport. -
__
points__: A two element Array, defining the two points on the widget andNode/viewport which are to be aligned. The first element is the point on the widget, and the second element is the point on theNode/viewport. Supported alignment points are defined as static properties onWidgetPositionAlign.
Default: null
Example:
Aligns the top-right corner of the widget with the top-left corner of the viewport:
myWidget.set('align', {
points: [Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.TL]
});alignOn
Array
An Array of Objects corresponding to the Nodes and events that will cause
the alignment of this widget to be synced to the DOM.
The alignOn Attribute is expected to be an Array of Objects with the
following properties:
-
__
eventName__: The String event name to listen for. -
__
node__: The optionalNodethat will fire the event, it can be aNodereference or a selector String. This will default to the widget'sboundingBox.
Default: []
Example:
Sync this widget's alignment on window resize:
myWidget.set('alignOn', [
{
node : Y.one('win'),
eventName: 'resize'
}
]);bodyContent
HTML
The content to be added to the body section. This will replace any existing content in the body. If you want to append, or insert new content, use the <a href="#method_setStdModContent">setStdModContent</a> method.
Default: undefined
captionFromTitle
Boolean
If true the caption will be
pulled from the title DOM attribute.
Default: true
centered
Boolean
If true the Overlay with the image will be positioned on the
center of the viewport.
Default: true
constrain
Boolean | Node
The node to constrain the widget's bounding box to, when setting xy. Can also be set to true, to constrain to the viewport.
Default: null
fillHeight
String
The section (WidgetStdMod.HEADER, WidgetStdMod.BODY or WidgetStdMod.FOOTER) which should be resized to fill the height of the standard module, when a height is set on the Widget. If a height is not set on the widget, then all sections are sized based on their content.
Default: WidgetStdMod.BODY
focusOn
Array
An array of objects corresponding to the nodes and events that will trigger a re-focus back on the widget. The implementer can supply an array of objects, with each object having the following properties: <p>eventName: (string, required): The eventName to listen to.</p> <p>node: (Y.Node, optional): The Y.Node that will fire the event (defaults to the boundingBox of the widget)</p> <p>By default, this attribute consists of two objects which will cause the widget to re-focus if anything outside the widget is clicked on or focussed upon.</p>
gutter
Array
Vertical and horizontal values in pixels that should not be counted when preserving the widget's ratio. widget.
Default: [0, 0]
headerContent
HTML
The content to be added to the header section. This will replace any existing content in the header. If you want to append, or insert new content, use the <a href="#method_setStdModContent">setStdModContent</a> method.
Default: undefined
imageAnim
Boolean | Object
<p>Configuration attributes passed to the <a href="Anim.html">Anim</a> class, or false if there should be no animation.</p>
Default: Predefined [Anim](Anim.html) configuration.
infoTemplate
String
String template used to display the information.
Default: 'Image {current} of {total}'
links
String | NodeList
Selector or NodeList containing the links where the
A.ImageViewer extracts the information to generate the
thumbnails.
preloadAllImages
Boolean
<p>Preloads all images listed in the <code>sources</code> attribute.</p>
Default: false
preventOverlap
Boolean
If set to true, and WidgetPositionAlign is also added to the Widget, constrained positioning will attempt to prevent the widget's bounding box from overlapping the element to which it has been aligned, by flipping the orientation of the alignment for corner based alignments
shim
Boolean
Boolean flag to indicate whether or not a shim should be added to the Widgets boundingBox, to protect it from select box bleedthrough.
Default: false, for all browsers other than IE6, for which a shim is enabled by default.
thumbnailsConfig
Boolean | Object
Configuration options for the thumbnails widget (ImageViewerMultiple).
Default: {}
useARIA
Boolean
<p>Boolean indicating if use of the WAI-ARIA Roles and States should be enabled.</p>
Default: true
useScrollViewPaginator
Boolean
Flag indicating if ScrollViewPaginator should be plugged.
Default: true
x
Number
Page X co-ordinate for the widget. This attribute acts as a facade for the xy attribute. Changes in position can be monitored by listening for xyChange events.
Default: 0
y
Number
Page Y co-ordinate for the widget. This attribute acts as a facade for the xy attribute. Changes in position can be monitored by listening for xyChange events.
Default: 0
zIndex
Number
The z-index to apply to the Widgets boundingBox. Non-numerical values for zIndex will be converted to 0
Default: 0
Events
animate
<p>Fired when the current image will be animated in.</p>
responsive
Fired when the widget will be updated to be responsive.