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

atlastk

0.5.0 • Public • Published

Node.js version of the Atlas toolkit

Node.js logo

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

Hello, World!

Little demonstration

Online demonstration: http://q37.info/runkit/Hello.

Source code:

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,
  () => dom.focus("input")),
 "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);

To install and run this example on your computer:

What's next ?

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

TodoMVC

Online demonstration: http://q37.info/runkit/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

6

version

0.5.0

license

AGPL-3.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability