JS Event-Manager

 

The Event-Manager handles simple, event-based JavaScript logic which can be directly defined in HTML withouth the need to include any additional JS files.

 

An HTML element of any tag can be given the CSS class celOnEvent, which marks the element relevant for the EventManager. It will then look for the specific data attribute data-cel-event.

Syntax

The attribute data-cel-event value is expected to be in the following syntax in order the define the logic:


event+cssClassName:cssSelector?jsCondition

 

  • event on which will be observed for the element the attribute is defined at, e.g. click
  • + the action that will be executed upon event firing. can be extended, currently there are three actions available:
    • + addClassName
    • - removeClassName
    • % toggleClassName
  • cssClassName which will be added/removed on the target elements
  • cssSelector defines the target elements on which the class will be added/removed. prefixing the selector with ^ will match up the DOM.
  • jsCondition optional JavaScript condition evaluated for every target element if provided. only upon evaluation to true will the action be executed. to ensure the execution of only a single statement, no whitespace or semicolon is permitted here. the following variables are available:
    • me references the (current) target element
    • origin references the origin element (since 4.3).

 

Multiple definitions with this syntax can be added to a data attribute by separating them with the character ’&’:

 

data-cel-event="def1&def2&..."


Events

  • celEM:init is fired on the source element right after it has been initialized by the EventManager. It is the earliest possible event which can be defined in the data attribute.


Examples

 Toggle Navigation Menu on a button click:

<div class="menuIcon celOnEvent" data-cel-event="click%openNavigation:#navigation">

 

Hide empty elements upon load (with JS condition):
<div class="celOnEvent" data-cel-event="load+hide:.pageDependentContent>img?me.innerText.trim().empty()"></div>


Debugging

On successful initialization the EventManager will add celOnEventInit to the element. If it is missing, check the console log for an exception. More info on the process is logged on debug level if required.