Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cogizmo/sajax-content
Custom Element that transcludes a document (in whole or part) into the current document at its current location.
https://github.com/cogizmo/sajax-content
ajax custom-element native-web-component segmented-ajax transclude-html web-component
Last synced: 26 days ago
JSON representation
Custom Element that transcludes a document (in whole or part) into the current document at its current location.
- Host: GitHub
- URL: https://github.com/cogizmo/sajax-content
- Owner: cogizmo
- License: isc
- Created: 2019-01-25T07:09:45.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-06T13:43:30.000Z (almost 6 years ago)
- Last Synced: 2024-12-18T13:49:52.636Z (about 1 month ago)
- Topics: ajax, custom-element, native-web-component, segmented-ajax, transclude-html, web-component
- Language: JavaScript
- Homepage:
- Size: 86.9 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ``
Transcludes HTML content from an external HTML resource.
## Usage
Fetch the HTML document and replace itself with the HTML body contents.
```html
```
## Installation
`` is available on [NPM](https://www.npmjs.com/package/@cogizmo/sajax-content) and may be installed as a dependency.
```
> npm install @cogizmo/sajax-content
```
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)
### `auto` attribute
`Boolean`
When true, will fetch the external HTML when a valid [src attribute](#src-attribute). When false, will wait until [`auto` attribute](#auto-attribute) is true or [transclude](#transclude()) is called.
`True`:
```html
```
`False`:
```html
```
### `select` attribute
`String` = `"*"`
Determines which elements are transcluded from the external HTML document's ``. Valid values are any selector that can be used as an argument for `HTMLElement.querySelectorAll()`. The following gets all `
`s that are children of elements with `class="container"`.
```html
```
### `src` attribute
`String` - *Required*
URL pointing to the desired external HTML document. URLs are calculated in relation to the current document.
```html
```
## Imperative API (JS/ES)
### `element.auto`
Returns `Boolean` - *ReadOnly*
When true, will fetch the external HTML when a valid [src attribute](#src-attribute). When false, will wait until [`auto` attribute](#auto-attribute) is true or [transclude](#transclude()) is called.
### `element.select`
Returns `String` = `"*"`
Determines which elements are transcluded from the external HTML document's ``. Valid values are any selector that can be used as an argument for `HTMLElement.querySelectorAll()`. The following gets all `
`s that are children of elements with `class="container"`.
### `element.src`
Returns `String` - *ReadOnly*
URL pointing to the desired external HTML document. URLs are calculated in relation to the current document.
### `element.transclude()`
Gets an external HTML document from [`src` attribute](), queries the document for the elements using the [`select` attribute](#select), and imports them into the current HTML document.
## DOM Events
`` events try to behave as close to native DOM as possible. This means that you may cancel ``s default behavior without having to worry about order of listeners or hierarchy. There is a single limitation to maintain defaultable and cancelable behavior. do not add an event listener to `` events on the `window/global` object.
### response
Fires when `transclude()` has retrieved a URL successfully.
Detail: The [`response` object](https://developer.mozilla.org/en-US/docs/Web/API/Response) containing the data retrieved by the URL.
### sajax-success
Fires when the transclusion process has successfully retrieved elements from an HTML document.
Detail: The `NodeList` query results from the external HTML document. *The nodes are not yet imported.*
### sajax-import
Fires when the transclusion process has imported the `NodeList` results.
Detail: An `Array` containing the imported nodes.
### sajax-attach
Fires when the transclusion process has attached the imported nodes from the external HTML document.
Detail: An `Array` containing the attached nodes.