Supercharge.js v0.3

Supercharge.js is a lightweight, low-abstraction JavaScript frontend framework. It simplifies creating DOM structures and helps managing them in an object-oriented fashion.

Basic usage

<script src="https://cdn.jsdelivr.net/gh/pointermess/[email protected]/src/Supercharge.js"></script>

class Button extends Supercharge
{
    private value;

    constructor(value) {
        super('button', value.toString());
        this.value = value;
    }

    public onClick(e): void {
        console.debug(`Button with value "${this.value}" pressed.`);
    }
}

Hello World

Supercharge comes with a factory class which helps building the structure of an application. We can build a basic Hello World application using the SuperchargeFactory.build function and passing an object.

let app = SuperchargeFactory.build({
    'tag': 'div',
    'body': 'Hello World from Supercharge.js!',
    'onClick': function (e) {
        alert('Mouse Coordinates: ' + e.clientX + ' , ' + e.clientY);
    }
});

Mounting our application

Before our application appear on the site, we have to mount it first. Supercharge.js provides ways to mount and unmount our application.

// mounting the application
app.mount(document.body);

// unmounting the application
app.unmount();

Events

Using Supercharge class

class Button extends Supercharge {
    onClick(e) {
        alert('Button clicked!');
    }
}

Using factory

let app = SuperchargeFactory.build({
    ...
    'onClick': function (e) {
        alert('Mouse Coordinates: ' + e.clientX + ' , ' + e.clientY);
    }
    ...
});

Functions

It is possible to assign functions to factory built objects.

let factory = SuperchargeFactory.build({
    'tag': 'div',
    'body': [
        {
            'tag': 'div',
            'body': 'Hello world from Supercharge.js Factory'
        },
        {
            'tag': 'button',
            'body': 'Click me',
            'onClick': function () {
                this.SayHi('button');
            }
        },
    ],
    'functions': {
        SayHi: function(sender) {
            alert(`Hi from "${sender}"!`);
        }
    }
});

Viewer

Setup up the viewer

// setup viewer
// the passed argument has to be a Supercharge object or a html node element
let viewer = new SuperchargeViewer(this);

Setting the view

viewer.setView(SuperchargeFactory.build({
  tag: 'div',
  body: 'This is a test view.',
}));

Events and Transitions

// setup events for view transitions
viewer.onChangeView = function (continueFn) {
    this.addClass('TransitionAnimation');
    setTimeout(function () {
        continueFn();
    }.bind(this), 400);
}.bind(this);

viewer.onViewChanged = function () {
    this.removeClass('TransitionAnimation');
}.bind(this);

Credits

This framework was heavily inspired by Igniter from Nicothin.

License

This usage of this framework falls under the MIT License.