Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juicy/juicy-html
A custom element that lets you load HTML partials into your Web page. Declarative way for client-side includes.
https://github.com/juicy/juicy-html
plain-js used-in-starcounter-app
Last synced: 11 days ago
JSON representation
A custom element that lets you load HTML partials into your Web page. Declarative way for client-side includes.
- Host: GitHub
- URL: https://github.com/juicy/juicy-html
- Owner: Juicy
- License: mit
- Created: 2013-11-18T10:38:52.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2020-03-29T12:32:02.000Z (over 4 years ago)
- Last Synced: 2024-11-06T08:43:20.333Z (14 days ago)
- Topics: plain-js, used-in-starcounter-app
- Language: HTML
- Homepage: http://juicy.github.io/juicy-html/
- Size: 2.68 MB
- Stars: 62
- Watchers: 11
- Forks: 12
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
<juicy-html> [](https://travis-ci.org/Juicy/juicy-html)
==============
> Declarative way for client-side includes
`` is a custom element that lets you load HTML partials from JS objects and external files into your DOM. It acts more or less, as `include` statement known in many other languages. It also provides a simple data binding, that works for native JS/HTML as well as for Polymer's `dom-bind`.
### External files
To load HTML from external file all you need is:
```html
```
### Markup provided by attribute
```html
```
### Data Binding
`juicy-html` may forward given model object to stamped elements.
```html
```
HTML may naturally be provided from external file, and `model` can be provided using Polymer's/or any other data-binding as real object (not a string)
## Demo
[Live examples](http://Juicy.github.io/juicy-html)
### Rationale
`juicy-html` provides a way to extend native [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)'s feature to be able to load content from outside (external file, data server, etc.).
It was started as an addition to [Polymer](http://www.polymer-project.org/)'s template binding, as there is no built-in way to insert a ``'s model variable as HTML (Polymer inserts every string as plain text), AngularJS has a way to do it ([ngBindHtml](http://docs.angularjs.org/api/ng.directive:ngBindHtml)) so we found it convenient to do so in Polymer.
Currently it plain JavaScript, library agnostic custom element, that should work fine with any kind of binding, or none - as simple way to include HTML content from outside.
### Features
Your HTML partials can contain:
- regular HTML
- inline scripts using `//JS code here`
- inline styles using `/*CSS code here*/`
- external stylesheets using ``, with `href` value relative to the document
- external scripts using ``
Of course, the 2-way data binding attached within your partials will work as desired.
Please note, that loaded `` and `<style>` will be executed every time HTML content is stamped to your document.
## Usage
1. Import Web Components' polyfill (if needed):
```html
<script src="bower_components/webcomponentsjs/webcomponents-lite.js">
```
2. Import Custom Element:
```html
```
3. Start using it!
Load HTML partial from a string:
```html
```
Load HTML partial from a URL:
```html
```
## Attributes
Attribute | Options | Default | Description
--- | --- | --- | ---
`html` | *String* | `""` | Safe HTML code to be stamped. Setting this one will skip any pending request for `href` and remove `href` attribute.
`href` | *String* | `""` | Path of a partial to be loaded. Setting this one will remove `html` attribute.
`model`(_optional_) | *Object/String* | `undefined` | Object (or `JSON.stringify`'ied Object) to be attached to every root node of loaded document
## Properties
Property | Type | Default | Description
--- | --- | --- | ---
`model` | *Object* | `undefined` | See [attributes](#Attributes), plays nice with Polymer data-binding
`html` | *String* | `""` | See [attributes](#Attributes)
`href` | *String* | `""` | See [attributes](#Attributes)
`pending` | *XMLHttpRequest* | | pending XHR if any
`stampedNodes` | *Array* | `[]` | Array of stamped nodes.
Please note, that properties are available after element is upgraded.
To provide a state before element is upgraded, please use attributes.
## Events
Name | details | Description
--- | --- | ---
`stamped` | *Array* of *Node* s | Trigger every time content is (re-)stamped, with array of stamped nodes in `event.detail`
## Methods
Name | Description
--- | ---
`skipStampingPendingFile` | Call to disregard currently pending request
### Dependencies
`` is framework agnostic custom element, so all you need is Web Components support.
However, it plays really nice with [Polymer](http://www.polymer-project.org/) [Auto-binding templates](https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind), or any other binding library, that sets HTML elements' properties and/or attributes. Check our demos and examples.
## Browser compatibility
Name | Support | Comments
-------------|------------|---------
Chrome 48 | yes |
Firefox 43 | yes |
Edge 25 | yes |
Safari 10-11 | yes |
Safari 9- | not tested |
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## History
For detailed changelog, check [Releases](https://github.com/Juicy/juicy-element/releases).
## License
MIT