Overlay

The Overlay class provides a simple overlay mechanism.

author: Julien Ramboz version: 1.0 usage: Overlay examples

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

The actual widget class

class Overlay extends AbstractWidget

Default options for the widget

@defaultOptions:

wrapper: id of the wrapper element

wrapper: "overlay"

cssclass: the css class to use for the element

cssclass: "overlay"

Initialisation

Initializer function.

initialize: (options) -> super options @wrapper = @findWrapper()

Accessibility markup

Add aria attributes

aria: () -> @wrapper.attr "aria-hidden", "true"

Event handling

Attach evenets to the widget

bindEvents: () -> @wrapper.on "click", (e) => @hide(e)

Show the overlay

show: (event) -> @toggle true, event

Hide the overlay

hide: (event) -> @toggle false, event

Toggle the overlay

toggle: (status, event) -> @element.trigger "beforeOverlay", element: @element event: event status: status @wrapper.attr "aria-hidden", not status if status @element.css "z-index", parseInt(@wrapper.css("z-index"), 10) + 1 else @element.css "z-index", "initial" @element.trigger "afterOverlay", element: @element event: event status: status

Structure discovery

Find the widget structure using the specified configuration

Notifications wrapper

Find the wrapper for the notifications, using the selector specified using the wrapper option

findWrapper: () -> $wrapper = $("#"+@options.wrapper) if not $wrapper.length $wrapper = @createWrapper().appendTo($("body")) $wrapper

Structure creation

Create elements required by the structure if they are not present

Wrapper element

createWrapper: () -> $(document.createElement("div")).attr "id": @options.wrapper "class": @options.cssclass

Key handling

Handle escape key press

keyEscape: (e) -> @hide()

Cleanup

Cleanup the widget and remove remaining references

destructor: () -> super() @wrapper = null

Installation

Install the widget into the JS library

Overlay.install("Overlay")