PMA.UI Documentation by Pathomation

Gallery

Gallery

Represents a UI component that shows image thumbnails. Provides events to handle click and multiple selection, as well as built-in lazy loading functionality.

Constructor

Source:
Tutorials:
  • Tutorial: 03-gallery
  • Tutorial: 04-tree
Parameters:
Name Type Description
context Context
options object Configuration options
Properties
Name Type Attributes Default Description
element string | HTMLElement The element that hosts the gallery. It can be either a valid CSS selector or an HTMLElement instance.
thumbnailWidth Number The desired width of the displayed thumbnails.
thumbnailHeight Number The desired height of the displayed thumbnails.
mode string <optional>
 "horizontal" "horizontal", "vertical" or "grid"
filenameCallback Gallery~callback <optional>
 Callback to override the displayed name of each image.
additionalHtmlCallback Gallery~additionalHtmlCallback <optional>
 Callback to provide additional HTML to render on top of the thumbnail.
showFileName boolean <optional>
 false Whether or not to print each image's name
renderOptions GalleryRenderOptions <optional>
 PMA.UI.Components.GalleryRenderOptions.All Whether to render thumbnail only, barcode only or both
barcodeRotation Number <optional>
 0 Rotation of the barcode in steps of 90 degrees
multiSelect boolean <optional>
 false Whether or not to allow multiple files to be selected
Fires:
  • PMA.UI.Components.Events#event:SlideInfoError
  • PMA.UI.Components.Events#event:SlideSelected
  • PMA.UI.Components.Events#event:SlideDeSelected
  • PMA.UI.Components.Events#event:Dropped

Classes

Gallery

Methods

getSelectedSlide() → {Gallery~slide}

Source:
Returns the first of the currently selected slides, or null
Returns:
Type
Gallery~slide

getSelectedSlides() → {Array.<Gallery~slide>}

Source:
Returns the currently selected slides, or null
Returns:
Type
Array.<Gallery~slide>

getSlides() → {Array.<Gallery~slide>}

Source:
Returns all the currently loaded slides
Returns:
Type
Array.<Gallery~slide>

highlightSlide(index, highlight)

Source:
Highlights or unhighlights a slide
Parameters:
Name Type Description
index Number The index of the slide to highlight
highlight boolean True to highlight, otherwise false

listen(eventName, callback)

Source:
Attaches an event listener
Parameters:
Name Type Description
eventName PMA.UI.Components.Events The name of the event to listen to
callback function The function to call when the event occurs

loadDirectory(serverUrl, directory, doneCbopt)

Source:
Loads the thumbnails of all the images found directly under a given directory
Parameters:
Name Type Attributes Description
serverUrl string The URL of the PMA.core server to get images from
directory string The path of a directory to load images from
doneCb function <optional>
 Called when image loading is complete

loadSlides(images, doneCb)

Source:
Loads the thumbnails of all the provided images
Parameters:
Name Type Description
images Array.<Object> An array of image objects containing the path, rotation and server url for each image to load
Properties
Name Type Description
serverUrl string The URL of the PMA.core server to load this image from
path string The path of the image to load
rotation string The rotation of the image in degrees
doneCb function Called when image loading is complete

selectSlide(index)

Source:
Selects or deselects a slide
Parameters:
Name Type Description
index Number The index of the slide to select
Fires:
  • PMA.UI.Components.Events#event:SlideSelected
  • PMA.UI.Components.Events#event:SlideDeSelected

setMode(mode)

Source:
Toggles the mode of the gallery
Parameters:
Name Type Description
mode String The mode to set, one of "horizontal", "vertical" or "grid"

setRenderOptions(option)

Source:
Sets the render options
Parameters:
Name Type Description
option PMA.UI.Components.GalleryRenderOptions The render option to set

Type Definitions

additionalHtmlCallback(image) → {string}

Source:
Function that returns a string to be displayed on below a thumbnail
Parameters:
Name Type Description
image object The image object used to render this thumbnail
Returns:
Type
string

callback(serverUrl, filename) → {string}

Source:
Function that returns a string to be displayed on top of a thumbnail
Parameters:
Name Type Description
serverUrl string The serverUrl of the image
filename string The virtual path of the image
Returns:
Type
string

slide

Source:
Properties:
Name Type Description
server string The URL of the PMA.core server this slide has been loaded from
path string The path of the slide
index Number The index of the slide in the gallery
Slide information
Type:
  • Object