Package Exports

atlastk

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (atlastk) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Binding for Node.js of the Atlas toolkit

The Atlas toolkit is a library for web and desktop UI. This is the binding of this toolkit for Node.js.

Hello, World!

source code

const atlas = require( 'atlastk' );

const head = [
    '<title>"Hello, World !" example</title>',
    '<style type="text/css">',
    ' html, body { height: 100%; padding: 0; margin: 0; }',
    ' .vcenter-out, .hcenter { display: table; height: 100%; margin: auto; }',
    ' .vcenter-in { display: table-cell; vertical-align: middle; }',
    '</style>',
].join('\n');

const body = [
    '<div class="vcenter-out">',
    ' <div class="vcenter-in">',
    '  <fieldset>',
    '   <label>Name:</label>',
    '   <input id="input" maxlength="20" placeholder="Enter a name here"',
    '		type="text" data-xdh-onevent="input|Typing"/>',
    '   <button data-xdh-onevent="Clear">Clear</button>',
    '   <hr/>',
    '   <h1>',
    '    <span>Hello </span>',
    '    <span style="font-style: italic;" id="name"></span>',
    '    <span>!</span>',
    '   </h1>',
    '  </filedset>',
    ' </div>',
    '</div>'].join('\n');

const callbacks = {
    "Connect": (dom, id) => dom.headUp(head, () => dom.setLayout("", body)),
    "Typing": (dom, id) => dom.getContent(id, (name) => dom.setContent("name", name)),
    "Clear": (dom, id) => dom.confirm("Are you sure ?",
        (answer) => { if (answer) dom.setContents({ "input": "", "name": "" }) }),
};

atlas.launch(() => new atlas.DOM(), "Connect", callbacks);

What's next ?

Here's how the Atlas toolkit version of the TodoMVC application looks like:

The source code of this application and more information about the Atlas toolkit can be found at http://atlastk.org/