Trigger

Ask a question

Summary

The trigger is a generic interactive element, which matches the ID specified in the <aria-controls> atribute. For example, from an AUI button to an AUI Inline Dialog.

Examples

Associate a button that acts as the inline dialog's trigger (aui-trigger attribute) to the inline dialog (<aui-inline-dialog>) by setting the trigger's aria-controls attribute to the id of the inline dialog.

Example
AخA
 
<button class="aui-button" data-aui-trigger aria-controls="inline-dialog-example">
  Click me
</button>
<aui-inline-dialog id="inline-dialog-example">
    <p>Lorem ipsum.</p>
</aui-inline-dialog>

To receive messages from an aui trigger add a message function. The trigger will respond to the following events:

  • click
  • mouseenter
  • mouseleave
  • focus
  • leave
Example
Trigger Enabled
​x
 
var trigger = document.querySelector('[data-aui-trigger]');
var enablingButton = document.querySelector('#enabling-button');
var messageDiv = document.querySelector('#message-box');
​
var messageHandler = function(message) {
  if(message.type === 'mouseenter') {
    this.innerHTML = 'Hovering!';
  }
  else if (message.type === 'mouseleave') {
    this.innerHTML = 'Not hovering';
  }
  //ignore focus, blur and click
};
​
var toggleEnabled = function() {
  if(trigger.isEnabled()) {
    trigger.disable();
    messageDiv.innerHTML = 'Trigger disabled';
    this.innerHTML = 'Enable Trigger';
  }
  else {
    trigger.enable();
    messageDiv.innerHTML = 'Trigger enabled';
    this.innerHTML = 'Disable Trigger';
  }
};
​
//.message will receive messages from our trigger
messageDiv.message = messageHandler;
enablingButton.addEventListener("click", toggleEnabled);

API reference

Methods

Function Arguments Description Example Usage
disable Disables the trigger.
 
trigger.disable();
enabled Enables the trigger.
 
trigger.enabled();
isEnabled Checks whether the trigger is enabled.
 
trigger.isEnabled();