Node.js library to handling web interfaces
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Atlas
Blank
Chatroom
Hello
Notes
TodoMVC
CHANGELOG.md
LICENSE
README.md
package.json

README.md

Node.js version of the Atlas toolkit

Node.js logo

The Atlas toolkit is a library to handle web interfaces.

NPM badge of the Atlas toolkit

Hello, World!

Here's how a Hello, World! type application made with the Atlas toolkit looks like:

Little demonstration

For a live demonstration: http://q37.info/runkit/Hello.

Source code:

const atlas = require( 'atlastk' );

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>
`;

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:

TodoMVC

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

TodoMVC

For a live demonstration: http://q37.info/runkit/TodoMVC.

To install and run this example on your computer:

Other examples

There are a total of 5 example source files, you can install and run on your computer, after a npm install atlastk:

In below described repository, the examples come with files they need to work. Above source files embed the content of this files.

Content of the repository

The Atlas directory contains the JavaScript source code for Node.js of the Atlas toolkit, which is not needed to run the examples.

The notes_modules directory (not provided by the repository, but will be created when launching npm install) contains the files that are needed in order to use the Atlas toolkit.

All other directories are examples.

To launch an example:

  • launch npm install (this have only to be do once),
  • launch node <Name>/main.js,

where <Name> is the name of the example (Blank, Chatroom…).

The Atlas toolkit is also available for:

For more information about the Atlas toolkit: http://atlastk.org/.