Custom element that uses event listeners to invoke element methods.
<fluid-triggered-method>Listens for an event on one or more subjects and calls a method on one or more
targets when that event is handled.
Invoke the remote method on the parent element every time a trigger event is received by the window.
<fluid-triggered-method handle="trigger" method="remote"></fluid-triggered-method>
<fluid-triggered-method> is available on @cogizmo/fluid-triggered-method">NPM and may be installed as a dependency.
> npm install @cogizmo/fluid-triggered-method
Place the files on your server.
Install the appropriate cogizmo/Cogizmo.
From npm
> npm install @cogizmo/cogizmo
From github
Add Cogizmo to your document <head>.
<script src="path/to/Cogizmo.js"></script>
Add <fluid-triggered-method> element to your document.
<script src="path/to/fluid-triggered-method.js"></script>
Use element whereever you want to transclude html.
<fluid-triggered-method></fluid-triggered-method>
handle attributeString<EventName>
The event that the proxy handler listens for to trigger the method call. Will listen for 'trigger', unless specified.
<fluid-triggered-method handle="my-event"></fluid-triggered-method>
listens attributeString<CSS Selector>
Will trigger the method for each element returned by a valid CSS query
selector. If omitted, <fluid-triggered-method> will listen on the window orglobal object.
<fluid-triggered-method handle="multi-event" listens=".Class"></fluid-triggered-method>
method attributeString<MethodName> Case-Sensitive
The method to call on the target element(s) when the event is handled. The
method must be publicly accessible on the element object, not an internal
or private API.
<fluid-triggered-method method="callMe"></fluid-triggered-method>
targets attributeString<CSS Selector>
Array of element nodes to invoke the method on when the event is handled. If
omitted, <fluid-triggered-method> will invoke the method on it’s host or
it’s parentElement.
<fluid-triggered-method targets=""></fluid-triggered-method>
cancel attributeBoolean
Event behaves as if preventDefault() has been called on it.
<fluid-triggered-method handle="cancelme" cancel></fluid-triggered-method>
stop attributeBoolean
Calls stopPropagation() on the event when it is handled.
<fluid-triggered-method handle="happening" stop></fluid-triggered-method>
immediate attributeBoolean
If stop attribute is true, then when the event is handled, stopImmediatePropagation() will be called on it, preventing further bubbling.
<fluid-triggered-method handle="trigger" stop immediate></fluid-triggered-method>
element.handleReturns String
The name of the event that <fluid-triggered-method> is listening for.
Changing the event will remove all listeners for the previous event name and
add new listeners for the new name.
element.listensSelectorReturns String<CSSSelector>
Gets or sets the selector on which to listen for the desired event on. Will
remove listeners and add new listeners when the selector is changed.
element.listensReturns Array - ReadOnly
An Array of element nodes that listeners will be added to.
element.targetSelectorReturns String<CSSSelector>
Gets or sets the selector on which to invoke the method and forward the event.
Will remove listeners and add new listeners when the selector is changed.
element.targetsReturns Array - ReadOnly
An Array of element nodes that the method will be called on.
element.cancelReturns Boolean
Whether to call preventDefault() on the handled event.
element.stopReturns Boolean
Whether to call stopPropagation() on the handled event.
element.immediateReturns Boolean
Whether to call stopImmediatePropagation() on the handled event.
<fluid-triggered-method> is intended as a method proxy that is triggerd when events are handled. It does not currently dispatch its own events.