chasma v0.1.3

chasma

Basic application screen management

chasma helps you structure your views.

install

With npm:

$ npm install chasma --save

With duo:

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.

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:

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:

class MenuItem extends BaseScreen {
  constructor (opts = {}) {
    super(createDom(`
      <li class="item">
        <a href="${opts.href}">${opts.content}</a>
      </li>
    `));
  }
}

and our menu class would look like this:

class Menu extends BaseScreen {
  constructor () {
    super(createDom('<ul class="items"></ul'));
  }

  add (content) {
    this.appendChild(new MenuItem({content: content, href: '#'}));
    return this;
  }
}

We can make use of the BaseScreen class we just defined by creating a root view instance. We'll pass the document body as the dom element and create an instance. We will next create a menu and add a few items to it and call its render() method passing in the root view.

const root = new BaseScreen(document.body);
const menu = new Menu();

menu
.add('Food')
.add('Beer')
.add('Wine')
.add('Water');

root.appendChild(menu);

license

MIT