Collapse

The Collapse class provides a multi-purpose content collapse widget.

author: Julien Ramboz version: 1.0 references: WAI-ARIA button role, AOL's Button style guide usage: Collapse examples requires: Toggle

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", "toggle"], widget else widget @$, _, _.AbstractWidget, _.Toggle ) collapse = ($, _, AbstractWidget, Toggle) -> "use strict"

The actual widget class

class Collapse extends Toggle

Default options for the widget

@defaultOptions:

event: the event to react to

event: "click"

target: the target to use, specified as a jQuery selector

target: ""

labelledby: the element to use as the label, if the toggle has no actual text

labelledby: ""

toggleHiddenClass: the class added to the hidden toggle

toggleHiddenClass: "toggle-collapsed"

toggleVisibleClass: the class added to the visible toggle

toggleVisibleClass: "toggle-expanded"

paneHiddenClass: the class added to the hidden content

paneHiddenClass: "toggle-collapsed"

paneVisibleClass: the class added to the visible content

paneVisibleClass: "toggle-expanded"

overlay: whether or not the targets are toggled in an overlay

overlay: false

Initialisation

Initializer function.

initialize: (options) -> super options @show() if @element.get(0).getAttribute("aria-expanded") is "true"

Accessibility markup

Add aria attributes

aria: () -> super() if not @element.attr("id") @element.attr("id", _.getGUID("toggle-")) @element.attr "aria-expanded": @element.get(0).getAttribute("aria-expanded") is "true" if @options.labelledby @element.attr("aria-labelledby", @options.labelledby.id) @targets.attr "aria-expanded": @element.get(0).getAttribute("aria-expanded") is "true" "aria-labelledby": if @options.labelledby then @options.labelledby.id else @element.attr("id")

Event handling

Attach evenets to the widget

bindEvents: () -> super @element.on "afterToggle.#{_.namespace}collapse", (e, options) => return if @element.get(0).getAttribute("aria-disabled") is "true" expand = @element.hasClass(@options.toggleVisibleClass) @element.attr("aria-expanded", expand) @targets .attr("aria-expanded", expand) .attr("tabindex", if expand is true then "" else "-1")

Structure discovery

Find the widget structure using the specified configuration

Key handling

Cleanup

Cleanup the widget and remove remaining references

destructor: () -> @element.removeAttr("role tabindex aria-expanded") @element.removeAttr("id") if @element.attr("id").match(/toggle-(\d+)/) super() @targets .removeAttr("aria-expanded aria-labelledby") .each (i, target) -> $(target).removeAttr("id") if target.id.match(/toggle-pane-(\d+)/) @targets = null

Installation

Install the widget into JS library

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