A simple view manager
Members
# static cachedNodes
Contains nodes temporarily detached from the DOM
# static viewControllers
Contains view controllers functions
# static viewMetas
Contains view meta informations for SEO
# static viewRenderers
Contains view renderers functions
# static views
Contains all the views that are already built
Methods
# static addView(config)
Add a view by storing its renderer function in the list of view renderers.
It does NOT store a view, but instead stores a view 'renderer' function that will generate the view later, and only when needed. The renderer function receives 2 parameters:
- the view id
- the view target: insertion point in the DOM to insert the view
Note: using this method is equivalent to using kiss.app.defineView({ id, renderer })
When using KissJS for building a SEO-friendly website, you can use meta configuration to help search engine understand your content. Meta information currently supported is:
- url
- locale
- site_name
- type: website | article | ...
- title
- description
- author
- image
- audio
- video
- other tags will generate a basic meta, like: <meta name="..." content="...">
KissJS is dispatching information properly so you don't have to repeat yourself. For example, if you enter a title, this will generate:
- a <title> tag
- an opengraph title
- a twitter title
If meta 'url' property has multiple languages set up, the first is canonical and other are alternate:
meta: {
url: {
en: "https://pickaform.fr/en",
fr: "https://pickaform.fr/fr"
}
}
// Will generate this in the header:
<link rel="canonical" href="https://pickaform.fr/en">
<link rel="alternate" hreflang="fr" href="https://pickaform.fr/fr">
Parameters:
| Name | Type | Description |
|---|---|---|
config |
object
|
|
id |
string
|
The id of the view to add |
renderer |
function
|
The function that will build the view when needed |
meta |
object
|
Meta informations injected in the HTML header. Can be localized or not. See example. |
Example
kiss.views.addView({
id: "myView",
renderer: function (id, target) {
let myView = ... // Must be an Html element or a KissJS component
myView.id = id // The view must have the passed id
myView.target = target // The view can optionaly have a target to be inserted at a specific point in the DOM
return myView
}
})
// Example of a view using meta informations
kiss.app.defineView({
id: "myProductPage",
meta: {
title: "CRM", // Meta without localization
// Meta with localization
description: {
en: "A useful CRM",
fr: "Un CRM utile"
}
},
renderer: function(id, target) {
// ...
}
})
// Example returning a KissJS panel
kiss.app.defineView({
id: "myPanel",
renderer: function (id, target) {
return createPanel({
id,
target,
title: "My panel",
icon: "fas fa-check",
width: 300,
height: 200,
align: "center",
verticalAlign: "center",
draggable: true,
modal: true,
closable: true,
expandable: true,
layout: "vertical", // => The content will be "display: flex" and "flex-flow: column"
items: [{
type: "html",
flex: 1, // Fill maximum space
html: `<h3>Title</h3>
<p>Hello world</p>
<br>`
},
{
type: "button",
text: "Say hello",
icon: "far fa-comment",
action: () => createNotification("Hello!")
}
]
})
}
})
// Display the view
kiss.views.show("myPanel")
// Display the view using the router
kiss.router.navigateTo("myPanel")
// ...or
kiss.router.navigateTo({
ui: "myPanel"
})# static addViewController(id, controller)
Adds a view controller
Parameters:
| Name | Type | Description |
|---|---|---|
id |
string
|
The view id which will receive the controller |
controller |
function
|
The view controller |
# static deleteCachedNode(id)
Deletes a node which is in cache to free memory
Parameters:
| Name | Type | Description |
|---|---|---|
id |
string
|
# static get(id) → {HTMLElement}
Get a view from its id
Parameters:
| Name | Type | Description |
|---|---|---|
id |
string
|
The id of the view |
The DOM node that represents the view
# static getCachedNode() → {HTMLElement}
Get a cached node
The DOM node actually cached, or null if not found
# static remove(id)
Remove a view OR any node from its id
- removes the view if it exists
- delete the node and its children
- unsubscribe the node and its children from PubSub to avoid memory leaks
Parameters:
| Name | Type | Description |
|---|---|---|
id |
string
|
The id of the view |
# static removeAndCacheNode(id) → {HTMLElement}
Remove a node from the DOM and keep it temporarily in cache for future use. It stores an object that keeps track of the parent and the index within its sibling nodes, like this:
{parentId: "abc", index: 4, node: theCachedNode}
Tech note:
- Removed elements are kept in a cache to not be garbage collected, so they can be used later.
- Compared to display:none, removed elements are not triggering their events anymore.
- When you have a huge number of hidden elements, preventing them from participating in the events and pubsub mechanism gives a massive performance boost.
Parameters:
| Name | Type | Description |
|---|---|---|
id |
string
|
The id of the node Element |
The DOM node Element that was removed and cached
# static replaceBy(id, targetopt) → {HTMLElement}
Show a view and replace other views in the same container.
All the replaced views are pushed into the cache (kiss.views.cachedNodes) for future use.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
id |
string
|
The id of the view |
|
target |
string
|
<optional> |
The DOM node where the view should be replaced |
The DOM node that represents the view
Example
kiss.views.show("view 1", "containerId") // Displays view 1
kiss.views.replaceBy("view 2", "containerId") // Replace view 2 inside the container. View 2 is pushed into kiss.views.cachedNodes# static reset(viewId)
Destroys a view and rebuild it
Parameters:
| Name | Type | Description |
|---|---|---|
viewId |
string
|
# static restoreCachedNode(id) → {HTMLElement}
Restore a node and inserts it at its previous position within its parent node
Parameters:
| Name | Type | Description |
|---|---|---|
id |
string
|
The id of the node Element to restore |
The DOM node Element that was restore into the DOM
# static show(id, targetopt, exclusiveopt) → {HTMLElement}
Show a view at a specific point of the DOM
If no target has been specified, the view is inserted into the document body.
When calling this method, the view is either built, or retrieved from the cache if it already exists.
If a view is displayed inside a non-empty container, there are 2 scenarii:
- by default, the view is appended to the container's children
- if the view is "exclusive", it will replace all other children of the container (that will be pushed into the cache for future use)
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
id |
string
|
The id of the view |
|
target |
string
|
<optional> |
The DOM node where the view should be inserted |
exclusive |
boolean
|
<optional> |
Indicates if the view must be shown exclusively to other sibling views within its parent container |
The DOM node that represents the view
Example
// Example 1:
kiss.views.show("view 1", "containerId") // Displays view 1
kiss.views.show("view 2", "containerId") // Append view 2 to the container
// Example 2:
kiss.views.show("view 1", "containerId") // Displays view 1
kiss.views.show("view 2", "containerId", true) // Replace view 2 inside the container. View 2 is pushed into kiss.views.cachedNodes
// Example 3:
kiss.views.show("view 1", "containerId") // Displays view 1
kiss.views.replaceBy("view 2", "containerId") // Equivalent to previous example