Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cogizmo/fluid-triggered-method
Custom element that uses event listeners to invoke element methods.
https://github.com/cogizmo/fluid-triggered-method
custom-element dom-events native-web-component web-component
Last synced: 7 days ago
JSON representation
Custom element that uses event listeners to invoke element methods.
- Host: GitHub
- URL: https://github.com/cogizmo/fluid-triggered-method
- Owner: cogizmo
- License: isc
- Created: 2019-01-25T07:13:14.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-08T21:11:35.000Z (almost 6 years ago)
- Last Synced: 2024-11-03T18:36:03.315Z (12 days ago)
- Topics: custom-element, dom-events, native-web-component, web-component
- Language: JavaScript
- Homepage:
- Size: 202 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ``
Listens for an event on one or more subjects and calls a method on one or more
targets when that event is handled.
## Usage
Invoke the `remote` method on the parent element every time a `trigger` event is received by the `window`.
```html
```
## Installation
`` is available on [NPM](https://www.npmjs.com/package/@cogizmo/fluid-triggered-method) and may be installed as a dependency.
```
> npm install @cogizmo/fluid-triggered-method
```
1. Place the files on your server.
2. Install the appropriate [cogizmo/Cogizmo](https://github.com/cogizmo/cogizmo).
* From npm
```
> npm install @cogizmo/cogizmo
```
* From github
3. Add Cogizmo to your document ``.
```html
```
4. Add `` element to your document.
```html
```
6. Use element whereever you want to transclude html.
```html
```
## Declarative API (HTML)
### `handle` attribute
`String`
The event that the proxy handler listens for to trigger the method call. Will listen for `'trigger'`, unless specified.
```html
```
### `listens` attribute
`String`
Will trigger the method for each element returned by a valid CSS query
selector. If omitted, `` will listen on the `window` or
`global` object.
```html
```
### `method` attribute
`String` *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.
```
```
### `targets` attribute
`String`
Array of element nodes to invoke the method on when the event is handled. If
omitted, `` will invoke the method on it's `host` or
it's `parentElement`.
```html
```
### `cancel` attribute
`Boolean`
Event behaves as if `preventDefault()` has been called on it.
```html
```
### `stop` attribute
`Boolean`
Calls `stopPropagation()` on the event when it is handled.
```html
```
### `immediate` attribute
`Boolean`
If [`stop` attribute](#stopattribute) is `true`, then when the event is handled, `stopImmediatePropagation()` will be called on it, preventing further bubbling.
```html
```
## Imperative API (JS/ES)
### `element.handle`
Returns `String`
The name of the event that `` is listening for.
Changing the event will remove all listeners for the previous event name and
add new listeners for the new name.
### `element.listensSelector`
Returns `String`
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.listens`
Returns `Array` - *ReadOnly*
An Array of element nodes that listeners will be added to.
### `element.targetSelector`
Returns `String`
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.targets`
Returns `Array` - *ReadOnly*
An Array of element nodes that the method will be `call`ed on.
### `element.cancel`
Returns `Boolean`
Whether to call `preventDefault()` on the handled event.
### `element.stop`
Returns `Boolean`
Whether to call `stopPropagation()` on the handled event.
### `element.immediate`
Returns `Boolean`
Whether to call `stopImmediatePropagation()` on the handled event.
## DOM Events
`` is intended as a method proxy that is triggerd when events are handled. It does not currently dispatch its own events.