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"

Be notified about elements in or added to the DOM.

Examples:

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

Lightbox

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

• content HTML String
• options An hash with the following options
  • class: '' | 'no-closebutton'
• 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>');
              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: HTML String):void
• close():void
• getElement():jQuery Element
• getContainer():jQuery Element (of body)
• setLoadingState(value: Boolean):void show/hide a loading indicator

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

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(el, options)

• el DOM Element
• options An optional hash with the following options
  • align: 'top' | 'bottom'
  • marginTop: 0
  • marginBottom: 0
  • force: false | true

With this API - Function Scroll to a element.

ew.ui.focusFirstItem(el)

• el DOM Element

With this API - Function you can focus any element.