Expand all

Canvas

UI component that contains the multimedia element to be displayed. This first version assumes an image but it can be extended to other media types (video, sound, presentation, etc.).

Constructor

new Canvas($container, $imageWrapper, $mainWrapper) #

Parameters:

Name Type Description
$container jQuery

Canvas' container
$imageWrapper jQuery
$mainWrapper jQuery
Source:

Properties

$imageDiv #

Contains image.

Properties:

Type Description
jQuery
Source:
Contains image.

MAX_BLOWUP_FACTORstatic #

Maximum blowup factor tolerated

Properties:

Name Type Description
MAX_BLOWUP_FACTOR number
Source:
Maximum blowup factor tolerated

Methods

attach() #

Registers listeners.

Fires:

Source:
Registers listeners.

empty() #

Clears everything.

Source:
Clears everything.

getCurrentImageWidths() → {ThumbnailWidth} #

Gets the widths for the current lightbox image.

Returns:

Type
ThumbnailWidth
Source:
Gets the widths for the current lightbox image.

getDimensions() → {Object} #

Returns width and height of the canvas area (i.e. the space available for the image).

Returns:

Width and height in CSS pixels

Type
Object
Source:
Returns width and height of the canvas area (i.e.

getLightboxImageWidths(image) → {ThumbnailWidth} #

Gets the widths for a given lightbox image.

Parameters:

Name Type Description
image LightboxImage

Returns:

Type
ThumbnailWidth
Source:
Gets the widths for a given lightbox image.

handleDialogEvent(e) #

Handles a "dialog open/close" event from dialogs on the page.

Parameters:

Name Type Description
e jQuery.Event
Source:
Handles a "dialog open/close" event from dialogs on the page.

maybeDisplayPlaceholder(size, $imagePlaceholder, imageWidths) #

Sets page thumbnail for display if blowupFactor <= MAX_BLOWUP_FACTOR. Otherwise thumb is not set. We set SVG files to the maximum screen size available. Assumes set function called before.

Parameters:

Name Type Description
size Object
$imagePlaceholder jQuery

Image placeholder to be displayed while the real image loads.
imageWidths ThumbnailWidth
Source:

Sets page thumbnail for display if blowupFactor <= MAX_BLOWUP_FACTOR.

set(imageRawMetadata, $imageElement) #

Sets image on the canvas; does not resize it to fit. This is used to make the placeholder image available; it will be resized and displayed by #maybeDisplayPlaceholder(). FIXME maybeDisplayPlaceholder() receives the placeholder so it is very unclear why this is necessary at all (apart from setting the LightboxImage, which is used in size calculations).

Parameters:

Name Type Description
imageRawMetadata LightboxImage
$imageElement jQuery
Source:
Sets image on the canvas; does not resize it to fit.

setImageAndMaxDimensions(thumbnail, imageElement, imageWidths) #

Resizes image to the given dimensions and displays it on the canvas. This is used to display the actual image; it assumes set function was already called before.

Parameters:

Name Type Description
thumbnail Thumbnail

thumbnail information
imageElement HTMLImageElement
imageWidths ThumbnailWidth
Source:
Resizes image to the given dimensions and displays it on the canvas.

setUpImageClick() #

Registers click listener on the image.

Fires:

Source:
Registers click listener on the image.

showError(error) #

Displays a message and error icon when loading the image fails.

Parameters:

Name Type Description
error string

error message
Source:
Displays a message and error icon when loading the image fails.

unattach() #

Clears listeners.

Source:
Clears listeners.