Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ottiker/flow-view
A HTML renderer for flow.
https://github.com/ottiker/flow-view
Last synced: about 1 month ago
JSON representation
A HTML renderer for flow.
- Host: GitHub
- URL: https://github.com/ottiker/flow-view
- Owner: ottiker
- License: mit
- Created: 2015-01-20T14:24:12.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-10-24T15:35:27.000Z (over 7 years ago)
- Last Synced: 2024-11-07T10:53:01.190Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 497 KB
- Stars: 0
- Watchers: 4
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# view
A HTML renderer for jillix/engine.
#### Config example
```json
{
"template": {
"name": {
"to": "#css",
"css": ["/path/file.css"],
"httpClient": "http_client",
"html": "/path/file.html",
"title": "Document title",
"position:" "beforebegin|afterbegin|beforeend|afterend"
"clear": false,
"leaveKeys": true,
"dontEscape": false,
"events": {
"listener": [
{
"on": "event",
"sel": "#css",
"elm": "elmName",
"dontPrevent": true
}
]
}
}
},
"states": {
"stateA": [
{
"sel": "#css",
"element": "elmName",
"states": ["stateB"],
"rm": ["className"],
"add": ["className"],
"toggle": ["className"]
}
]
}
}
```
# WARNING! The docs below are outdated.
#### HTML data attribute
The `element` flow option searches for elements that have a `data-element` attribute with that value.
```html
```
#### Public mehtods
* `render` (render data to a template)
* `state` (activate a state)
# Implementing standard configurations
This section covers "how to do" general configurations.
#### Navbars
The navbar will be an instance of the view module.
Practical example:
The composition file of the navbar `nav_layout`:
```json
{
"client": {
"config": {
"templates": {
"layout": {
"to": ".one-container",
"html": "/nav.html",
"render": true
}
},
"defaultTemplate": "layout",
"states": {
"resetNav": [{
"sel": ".navbar li",
"rm": ["active"]
}],
"nav": [{
"states": ["resetNav"],
"add": ["active"]
}]
},
"domEvents": [{
"on": "click",
"selector": "li",
"flow": "itemClick"
}]
},
"flow": [
[
"itemClick",
[":ALTR", {"data": {"url": "{event.target.href}"}}],
":public_router/route"
]
],
"markup": [
"/nav.html"
]
},
"name": "nav_layout",
"module": "view",
"roles": {
"*": true
}
}
```
The states are for adding the active class to the active `li`.
The 'domEvents' triggers the 'itemClick' event on item click.
Html navbar example `nav.html`:
```html
```
To use the navbar in a view module instance it must be loaded:
```json
{
"client": {
"load": [
"nav_layout",
],
"config": {
},
"markup": [
]
},
"roles": {
"*": true
},
"module": "view",
"name": "public_layout"
}
```
#### Footer visibility on certain pages
The footer will be a module view instance
```json
{
"client": {
"config": {
"templates": {
"layout": {
"to": "footer",
"html": "/any_footer.html",
"render": true
}
},
"defaultTemplate": "layout",
},
"markup": [
"/any_footer.html"
]
},
"name": "footer_layout",
"module": "view",
"roles": {
"*": true
}
}
```
The main html file which contains and empty footer:
```html
```
In the main composition, for ex. `private_layout.json`, `footer_layout` can be loaded and states can be used to control the footer visibility:
```
{
"client": {
"load": [
"footer_private_layout"
]
......
"states": {
"showFooter": [{
"sel": "footer",
"rm": ["hide"]
}],
"hideFooter": [{
"sel": "footer",
"add": ["hide"]
}]
}
```
In a view module instance composition in which the footer must be shown or hidden, the following flow configuration can be used:
```json
"flow": [
[
"renderedDOM",
[":private_layout/state", "showFooter"],
]
]
```
or
```json
"flow": [
[
"renderedDOM",
[":private_layout/state", "hideFooter"],
]
]
```
#### Loader for loading pages
For page loader implementation the states can be used to control the loader visibility
In the main html file the loader must be present and `hide` must be the default class for the pages container:
```html
```
In the main composition, for ex. 'private_layout.json', states can be defined to control the loader visibility:
```json
{
"showLoader": [{
"sel": ".page-loader",
"rm": ["hide"]
}],
"hideLoader": [{
"sel": ".page-loader",
"add": ["hide"]
}],
"showContainer": [{
"sel": "._container",
"rm": ["hide"]
}],
"hideContainer": [{
"sel": "._container",
"add": ["hide"]
}],
"displayLoader": [{
"states": [
"showLoader",
"hideContainer"
]
}],
"displayContainer": [{
"states": [
"showContainer",
"hideLoader"
]
}]
}
```
In the compositions in which the loader is needed, the flow configuration can be used to manipulate the loader state:
```json
"flow": [
[
"renderedDOM",
[":private_layout/state", "displayContainer"]
]
]
```
In special cases (ex. service builder, service file editor) the `renderedDOM` event will not be the right event to be used for manipulating the loader states and thus a custom event will be needed.
```json
"flow": [
[
"renderedGraph",
[":private_layout/state", "displayContainer"]
]
]
```
#### Pages inside a certain container
If a section which contains multiple pages must be added to `container` class, states can be used to show/hide pages
```html
```
A section added to `container` can be similar to the following:
```html
```
A view module instance composition file `app_options_layout.json` can be used for the section configuration.
The `app_dashboard`, `app_editor`, `app_terminal` events from the flow configuration come from an engine-ruut module instance.
```json
"states": {
"hide-all": [{
"sel": ".app-options > div",
"add": ["hide"]
}],
"app_dashboard": [{
"sel": ".app-options > .app-dashboard",
"rm": ["hide"]
}],
"app_editor": [{
"sel": ".app-options > .app-editor",
"rm": ["hide"]
}],
"app_terminal": [{
"sel": ".app-options > .app-terminal",
"rm": ["hide"]
}]
}
```
```json
"flow": [
[
"renderedDOM",
["LOAD", ["nav_app_layout"]]
],
[
"app_dashboard",
["LOAD", ["app_dashboard_layout"]],
[":state", "hide-all"],
[":state", "app_dashboard"],
],
[
"app_editor",
["LOAD", ["app_editor_layout"]],
[":state", "hide-all"],
[":state", "app_editor"]
],
[
"app_terminal",
["LOAD", ["app_terminal_layout"]],
[":state", "hide-all"],
[":state", "app_terminal"],
]
]
```