UI Javascript API

Util

ew.ui.addElementListener(selector, callback)

• selector Selector String
• callback Callback function(element)
• returns void

Be notified about elements in or added to the DOM.

Examples:

ew.ui.addElementListener('.js-react', function(element){
                  console.log('New react context', element);
              });
              

ew.ui.findResponsiveImage(sizes, width)

• sizes String or Array of sizes
  • String e.g. "500x300:/img/medium.jpg 1000x600:/img/large.jpg"
  • Object e.g. [{width:500,height:300,src:"/img/medium.jpg"}, {width:1000,height:600,src:"/img/large.jpg"}]
• width The width for which the best image shall be selected
• returns Selected image source, e.g. "/img/large.jpg"

Select the best image source for a given viewport width.

Examples:

ew.ui.findResponsiveImage('500x300:/img/medium.jpg 1000x600:/img/large.jpg', 900);
              // returns "/img/large.jpg"
              

Lightbox

ew.ui.lightbox.show(content, options, title)

• content HTML String, DOM Element, or jQuery Element
• options Optional hash:
  • class: extra CSS class (e.g. 'no-closebutton')
  • hideCloseButton: false | true – hide close button
  • defaultCloseButton: true | false – user can close via ESC or close button
  • closeCB: callback function on close
  • variant: e.g. 'alert' for alert-style lightbox
• title Optional HTML string for lightbox title
• returns Lightbox Instance

Opens a lightbox and adds content to its body.

Examples:

var lightbox = ew.ui.lightbox.show('<h2>Test</h2><p>Hello world</p>', {}, 'Title');
              lightbox.getElement().on('close', function(event){
                  alert("You closed a lightbox. I knew you could do it!");
              });
              

The lightbox instance provides the following methods:

• update(content, title):void
• close():void
• getElement():jQuery Element
• getContainer():jQuery Element (of body)
• setLoadingState(value: Boolean):void show/hide a loading indicator
• setTitle(html: String):void set/update the title

A jQuery event is triggered on the element when lightbox is being closed.

Dialogue

ew.ui.dialogue

Dialogue component for modal dialogs. See Dialogue component for usage.

Collapsible

ew.ui.getCollapsible(el)

• el DOM InputElement
• returns Collapsible Class

Collapisble provides these methods:

Collapsible.open(callback)

• callback function to be called when collapsible is open
• returns void

Collapsible.close(callback)

• callback function to be called when collapsible finished closing
• returns void

Examples:

var collapsible = ew.ui.getCollapsible(inputEl);
              collapsible.open(function(){
                  alert('opened');
              });
              

See Accordion component for a live example.

Loader

ew.ui.setLoader(el, options)

• el DOM Element
• options An hash with the following options
  • msg: 'Loading message ...'
  • variant: '' | 'overlay', 'form', 'overlay form'
• returns removeLoading Function

This are the loader-variants: * overlay - Loader is shown as a overlay on the specified element, background white * form - Sets the correct background for forms * overlay form - Loader is displayed as a form overlay

Examples:

// Adds the loader to the element with id 'myForm'
              
              var removeLoaderFn = ew.ui.setLoader(
                  document.getElementById("main-content"), 
                  {msg: "This is my message...", variant: "overlay form"}
              );
              
              // Removes the loader
              removeLoaderFn();
              

Accessibility

ew.ui.speak(message)

• message Message for ScreenReader Users String
• returns void

With this API - Function you can send a message to screen readers.

Focus & Scroll

ew.ui.scrollTo(selector, options)

• selector CSS selector string, DOM Element, or jQuery Element
• options Optional hash:
  • align: 'top' | 'bottom'
  • marginTop: 0
  • marginBottom: 0
  • force: false | true
  • animation: { duration: 250, delay: 0 }
• returns jQuery Promise

Scroll to an element.

ew.ui.focusFirstItem(el)

• el DOM Element

Focus the first focusable element within the given element.

Additional APIs

ew.ui.getSeatmapController(el)

• el DOM Element (within or on a .js-seatmap element)
• returns Seatmap controller instance

Get the seatmap controller for a seatmap element.

ew.ui.getController(el)

• el DOM Element with attached module
• returns Module instance (el._module)

ew.ui.openNextCollapsible(el)

• el DOM Element within a collapsible group

Opens the next collapsible in the group and focuses it.

ew.ui.openItemExpander(el)

• el DOM Element within an item expander

Expands the item expander.

ew.ui.closeItemExpander(el)

• el DOM Element within an item expander

Closes/collapses the item expander.

ew.ui.toggleDestinationSelectList(el)

• el DOM Element within a destination select

Opens the destination select menu.