Gallery

The Gallery class provides a gallery widget.

author: Julien Ramboz version: 1.0 usage: Gallery examples requires: Carousel, Slideshow

AMD loader

Try loading as AMD module or fall back to default loading

((widget) -> if typeof define is "function" and define.amd define ["jslib","core","widget","carousel","slideshow","dialog"], widget else widget @$, _, _.AbstractWidget, _.Carousel, _.Slideshow, _.Dialog ) gallery = ($, _, AbstractWidget, Carousel, Slideshow, Dialog) -> "use strict"

The actual widget class

class Gallery extends AbstractWidget

Default options for the widget

@defaultOptions:

carousel: the selector for the carousel

carousel: "[data-widget='carousel'],[data-role='carousel']"

slideshow: the selector for the slideshow

slideshow: "[data-widget='slideshow'],[data-role='slideshow']"

overlay: whether to display the gallery in an overlay

overlay: false

Initialisation

Initializer function.

initialize: (options) -> super options @carousel = @findCarousel() @slideshow = @findSlideshow() if @options.overlay is "true" or @options.overlay is true @dialog = @createDialog() @slideshow.wrap(@dialog) @dialog["#{_.namespace}dialog"]({overlay: "true"}) @carousel.find("[role='option']") .attr("aria-controls", @dialog.attr("id"))["#{_.namespace}toggle"]()

Accessibility markup

Event handling

Attach evenets to the widget

bindEvents: () -> $carouselInst = _.getInstance(@carousel, "carousel") $slideshowInst = _.getInstance(@slideshow, "slideshow") @carousel.on "click", "[role='option']", (e) -> if e.target.getAttribute("aria-disabled") is "true" return e.preventDefault() $item = $(e.target) index = $carouselInst.items.index($item) $slideshowInst.selectItem($slideshowInst.items.eq(index)) @slideshow.on "afterSelect", (e, o) -> index = $slideshowInst.items.index(o.item) $carouselInst.selectItem($carouselInst.items.eq(index))

Structure discovery

Find the widget structure using the specified configuration

Carousel

Find the carousel that shows the thumbnails, specified using the carousel option

findCarousel: () -> $(@options.carousel, @element)

Slideshow

Find the slideshow that shows the actual items, specified using the slideshow option

findSlideshow: () -> $(@options.slideshow, @element)

Structure creation

Create elements required by the structure if they are not present

Dialog element

createDialog: () -> $(document.createElement("div"))

Key handling

Cleanup

Cleanup the widget and remove remaining references

destructor: () -> super() @carousel = null @slideshow = null

Installation

Install the widget into the JS library

Gallery.install("Gallery", () -> $("[data-widget='gallery']")["#{_.namespace}gallery"]() )