Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

atlastk

0.3.3 • Public • Published

Binding for Node.js of the Atlas toolkit

Node.js logo

The Atlas toolkit is a library which facilitates the prototyping of web applications.

Hello, World!

Little demonstration

const atlas = require( 'atlastk' );
 
// Content of 'Head.html'.
const head = `
    <title>"Hello, World !" example</title>
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUEAvyEhsxERuS8urQsKuycnsRkYtzc2qwUFvRUVtysrrx0ctTs6qTMyrSUksQ0NuyciPBdAAABHklEQVR42mNgwAa8zlxjDd2A4POfOXPmzZkFCAH2M8fNzyALzDlzg2ENssCbMwkMOsgCa858YOjBKxBzRoHhD7LAHiBH5swCT9HQ6A9ggZ4zp7YCrV0DdM6pBpAAG5Blc2aBDZA68wCsZPuZU0BDH07xvHOmAGKKvgMP2NA/Zw7ADIYJXGDgLQeBBSCBFu0aoAPYQUadMQAJAE29zwAVWMCWpgB08ZnDQGsbGhpsgCqBQHNfzRkDEIPlzFmo0T5nzoMovjPHoAK8Zw5BnA5yDosDSAVYQOYMKIDZzkoDzagAsjhqzjRAfXTmzAQgi/vMQZA6pjtAvhEk0E+ATWRRm6YBZuScCUCNN5szH1D4TGdOoSrggtiNAH3vBBjwAQCglIrSZkf1MQAAAABJRU5ErkJggg==" />
    <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>
`;
 
// Content of 'Main.html'.
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>
      </fieldset>
     </div>
    </div>
`;
 
const callbacks = {
 "Connect": (dom, id) => 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, head);

or go to https://npm.runkit.com/atlastk.

What's next ?

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

TodoMVC

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

install

npm i atlastk

Downloadsweekly downloads

137

version

0.3.3

license

AGPL-3.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability