Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/littlstar/chasma
Application Screen Management
https://github.com/littlstar/chasma
Last synced: about 1 month ago
JSON representation
Application Screen Management
- Host: GitHub
- URL: https://github.com/littlstar/chasma
- Owner: littlstar
- License: mit
- Created: 2015-10-15T00:50:24.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2015-10-28T20:50:49.000Z (about 9 years ago)
- Last Synced: 2023-05-29T11:01:17.981Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 158 KB
- Stars: 3
- Watchers: 10
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# chasma
Basic application screen management
*chasma* helps you structure your views.
## install
With npm:
```sh
$ npm install chasma --save
```
With duo:
```js
import * as chasma from 'littlstar/chasma';
```
## usage
*chasma* offers a `Screen` class that can be subclassed.
A screen may have children. A screen may also have a parent. A screen
can listen for and dispatch arbitrary events.
```js
class MyView extends chasma.Screen { }
```
## example
In this example we'll crean a base view screen class and extend it for
subclass views. Our base view class will be responsible for wrapping a
DOM element and knowning how to render it to a given screen instance.
We've also overloaded the `chasma.Screen` class's `appendChild()` and
`removeChild()` methods for DOM manipulation.
Our base class could look like this:
```js
class BaseScreen extends chasma.Screen {
constructor (domElement = null) {
super();
this.domElement = domElement || document.createElement('div');
}
appendChild (child, ...args) {
this.domElement.appendChild(child.domElement);
return super.appendChild(child, ...args);
}
appendChild (child, ...args) {
this.domElement.removeChild(child.domElement);
return super.removeChild(child, ...args);
}
}
```
We can now subclass and create a DOM element and pass it to the super
class constructor. We will also define an `add()` method for creating
menu items. Our menu items will also be subclasses of `BaseScreen`.
Our menu item screen class could look like this:
```js
class MenuItem extends BaseScreen {
constructor (opts = {}) {
super(createDom(`
${opts.content}
`));
}
}
```
and our menu class would look like this:
```js
class Menu extends BaseScreen {
constructor () {
super(createDom('