Class: imageViewer

jQuery.fn. imageViewer

new imageViewer()

imageViewer - This is is a jQuery plugin and as such uses an Immediately Invoked Function Expression (IIFE)
Source:

Methods

<static> displayLegend()

Public method to display the legend modal dialog box as an overlay.
Source:

<static> hideLegend()

Public method to hide the modal dialog box
Source:

<static> print()

Will load all images currently in the images variable and loads them in a new tab. Once in a new tab will open the print dialog box for printing. Images will each be printed separated by a page break. Closes new tab when print dialog is dismissed (by printing or by cancelling)
Source:

<static> rotate(increment)

Rotates current image by increment to the right
Parameters:
Name Type Description
increment integer Angle to be rotated by. Given the integer 90 will rotate current image by 90 degrees to the right.
Source:

<static> rotate_all(increment)

Rotates all images currently in the images var
Parameters:
Name Type Description
increment integer Angle to be rotated by. Given the integer 90 will rotate current image by 90 degrees to the right.
Source:

<static> scroll(left, top)

Public method for manipulating the top and left dimensions of an image. This is used to move the image up/left/right/down. See tests for examples
Parameters:
Name Type Description
left integer Desired left position of current image.
top integer Desired top position of current image.
Source:

<static> scrollPage(increment)

Method by which the next or previous image is retrieved and set to the current image (from the initial sequence of images)
Parameters:
Name Type Description
increment integer Usually 1 or -1 for next and previous page, but can be any integer.
Source:

<static> settings(str)

Essentially just an public accessor for getting information about the internal settings variable.
Parameters:
Name Type Description
str string String of setting you'd like to view.
Source:

<static> setupKeyBindings()

Public method to setup keybindings via the setupKeyBindings() method
Source:

<static> teardownKeyBindings()

Public method to remove keybindings. Especially useful when displaying multiple image_viewers on a single page.
Source:

<static> zoom(increment, increment, zoomDirection)

Public method for inreasing the width dimension of the current image.
Parameters:
Name Type Description
increment integer Increment you'd like to increase by. If specified as an integer will increase current increment
increment string if Increment is given as a string suffixed by the percent sign (%) will set that percentage absolutely.
zoomDirection string Defaults to 'width' if specified as 'height' will change the height percentage instead of width.
Source:

<private, inner> addGlyphIcon(glyph)

builds an i tag with a class of glyph
Parameters:
Name Type Description
glyph string name of glyph class from css. View image_viewer_rails.css.scss to see options.
Source:

<private, inner> addKeyToKeyMaster(keyString, keyScope, func)

Convenience method for adding keybindings to imageViewer through keymaster.js
Parameters:
Name Type Description
keyString string String of the key to be bound to func. Listing of keys can be found: https://github.com/madrobby/keymaster
keyScope string Scope for current keybinds. This scope can be deleted (and is with teardownKeyBindings().
func func function to be bound ot the keyString.
Source:
builds link tag with title of name, and the onclick function of call
Parameters:
Name Type Description
call string the imageViewer call that will be assigned to the onclick even of this link.
name string inserted directly into title text of link.
glyph string name of css class glyphicon (see addGlyphIcon)
Source:

<private, inner> createNavTable()

Builds the navLinks table. Each call to createNavLink creates an a tag with a contained icon tag. These link tags contain the onclick events
Source:

<private, inner> delayedRedirect()

Redirects window to root path
Source:

<inner> handleWindowResize()

call setupHeight() on resize
Source:

<private, inner> init(image_path_array, options)

initializes the image viewer's internal state. Any settings passed to options are merged into the default settings object. Calls a number of functions to initialize the viewer including setting up containers, listeners, et al
Parameters:
Name Type Description
image_path_array array Array of image paths. These paths will be inserted as the src attribute on img tags later, so ensure that these are valid paths.
options object options that will be merged into the default settings object.
Source:

<private, inner> reload()

resets settings object and reinitializes the image_viewer.
Source:

<private, inner> rotate(increment, imageIndex)

Calls jQuery.rotate.js's rotate function.
Parameters:
Name Type Description
increment integer number of degrees to rotate image.
imageIndex integer Set which image to rotate. Defaults to current image based of settings["imageIndex"]
Source:

<private, inner> setupContainers()

Clears mainDiv (which is _this_ upon initialization). Assigns width to mainDiv from settings var
Source:

<private, inner> setupHeight()

Calculates the height of the view port and sets the main div to fit.
Source:

<private, inner> setupImages(images)

Creates the img tags on the page and assigns them unique ids
Parameters:
Name Type Description
images array This function is called from init() and accepts the array of images passed there.
Source:

<private, inner> setupKeyBindings()

Assigns the various key combinations to their actual function calls.
Source:

<private, inner> setupLegend()

Builds and prepends the the legend dialog box to the #image-viewer-key-bindings.
Source:

<inner> teardownKeyBindings()

Removes keybindings from keymaster.
Source:

<private, inner> updateOverlay(commandMode)

Updates the nav-info to display both command mode toggle and "page of pages"
Parameters:
Name Type Description
commandMode bool Sets comand mode to true or false.
Source:

<private, inner> zoomAbsolute(zoomLevel)

Zooms image's 'height' or 'width' to a given percentage. Height or Width is decided by setting the zoomDirection setting var.
Parameters:
Name Type Description
zoomLevel integer Percentage you'd like the image to be sized to.
Source:

jQuery.fn. imageViewer

new imageViewer(method)

Main imageViewer namespace imageViewer - This is is a jQuery plugin and as such uses an Immediately Invoked Function Expression (IIFE)
Parameters:
Name Type Description
method object Usually init options such as the initial array of images
Source:

Methods

<static> displayLegend()

Public method to display the legend modal dialog box as an overlay.
Source:

<static> hideLegend()

Public method to hide the modal dialog box
Source:

<static> print()

Will load all images currently in the images variable and loads them in a new tab. Once in a new tab will open the print dialog box for printing. Images will each be printed separated by a page break. Closes new tab when print dialog is dismissed (by printing or by cancelling)
Source:

<static> rotate(increment)

Rotates current image by increment to the right
Parameters:
Name Type Description
increment integer Angle to be rotated by. Given the integer 90 will rotate current image by 90 degrees to the right.
Source:

<static> rotate_all(increment)

Rotates all images currently in the images var
Parameters:
Name Type Description
increment integer Angle to be rotated by. Given the integer 90 will rotate current image by 90 degrees to the right.
Source:

<static> scroll(left, top)

Public method for manipulating the top and left dimensions of an image. This is used to move the image up/left/right/down. See tests for examples
Parameters:
Name Type Description
left integer Desired left position of current image.
top integer Desired top position of current image.
Source:

<static> scrollPage(increment)

Method by which the next or previous image is retrieved and set to the current image (from the initial sequence of images)
Parameters:
Name Type Description
increment integer Usually 1 or -1 for next and previous page, but can be any integer.
Source:

<static> settings(str)

Essentially just an public accessor for getting information about the internal settings variable.
Parameters:
Name Type Description
str string String of setting you'd like to view.
Source:

<static> setupKeyBindings()

Public method to setup keybindings via the setupKeyBindings() method
Source:

<static> teardownKeyBindings()

Public method to remove keybindings. Especially useful when displaying multiple image_viewers on a single page.
Source:

<static> zoom(increment, increment, zoomDirection)

Public method for inreasing the width dimension of the current image.
Parameters:
Name Type Description
increment integer Increment you'd like to increase by. If specified as an integer will increase current increment
increment string if Increment is given as a string suffixed by the percent sign (%) will set that percentage absolutely.
zoomDirection string Defaults to 'width' if specified as 'height' will change the height percentage instead of width.
Source:

<private, inner> addGlyphIcon(glyph)

builds an i tag with a class of glyph
Parameters:
Name Type Description
glyph string name of glyph class from css. View image_viewer_rails.css.scss to see options.
Source:

<private, inner> addKeyToKeyMaster(keyString, keyScope, func)

Convenience method for adding keybindings to imageViewer through keymaster.js
Parameters:
Name Type Description
keyString string String of the key to be bound to func. Listing of keys can be found: https://github.com/madrobby/keymaster
keyScope string Scope for current keybinds. This scope can be deleted (and is with teardownKeyBindings().
func func function to be bound ot the keyString.
Source:
builds link tag with title of name, and the onclick function of call
Parameters:
Name Type Description
call string the imageViewer call that will be assigned to the onclick even of this link.
name string inserted directly into title text of link.
glyph string name of css class glyphicon (see addGlyphIcon)
Source:

<private, inner> createNavTable()

Builds the navLinks table. Each call to createNavLink creates an a tag with a contained icon tag. These link tags contain the onclick events
Source:

<private, inner> delayedRedirect()

Redirects window to root path
Source:

<inner> handleWindowResize()

call setupHeight() on resize
Source:

<private, inner> init(image_path_array, options)

initializes the image viewer's internal state. Any settings passed to options are merged into the default settings object. Calls a number of functions to initialize the viewer including setting up containers, listeners, et al
Parameters:
Name Type Description
image_path_array array Array of image paths. These paths will be inserted as the src attribute on img tags later, so ensure that these are valid paths.
options object options that will be merged into the default settings object.
Source:

<private, inner> reload()

resets settings object and reinitializes the image_viewer.
Source:

<private, inner> rotate(increment, imageIndex)

Calls jQuery.rotate.js's rotate function.
Parameters:
Name Type Description
increment integer number of degrees to rotate image.
imageIndex integer Set which image to rotate. Defaults to current image based of settings["imageIndex"]
Source:

<private, inner> setupContainers()

Clears mainDiv (which is _this_ upon initialization). Assigns width to mainDiv from settings var
Source:

<private, inner> setupHeight()

Calculates the height of the view port and sets the main div to fit.
Source:

<private, inner> setupImages(images)

Creates the img tags on the page and assigns them unique ids
Parameters:
Name Type Description
images array This function is called from init() and accepts the array of images passed there.
Source:

<private, inner> setupKeyBindings()

Assigns the various key combinations to their actual function calls.
Source:

<private, inner> setupLegend()

Builds and prepends the the legend dialog box to the #image-viewer-key-bindings.
Source:

<inner> teardownKeyBindings()

Removes keybindings from keymaster.
Source:

<private, inner> updateOverlay(commandMode)

Updates the nav-info to display both command mode toggle and "page of pages"
Parameters:
Name Type Description
commandMode bool Sets comand mode to true or false.
Source:

<private, inner> zoomAbsolute(zoomLevel)

Zooms image's 'height' or 'width' to a given percentage. Height or Width is decided by setting the zoomDirection setting var.
Parameters:
Name Type Description
zoomLevel integer Percentage you'd like the image to be sized to.
Source: