AlphaJS

Website: http://ralys.github.io/AlphaJS/

Dependencies: jQuery

Download AlphaJS Download AlphaJS (minified)

What's AlphaJS, dude?

AlphaJS is a JavaScript library that allows you to easily create class, providing you a different way to manage models. This library also cares about user interface and experience. Alpha.ui contains classes and builders for graphical components.

Thanks to Alpha.ui.Element, you can easily create your own component or you can use the ones already present in Alpha.ui: Button, ModalBox, SideBox, SearchWidget and a bunch of effects. Those effects are mostly provided by the stylesheet: animate.css, created by Daneden. You should really check it out: http://daneden.github.io/animate.css/, it's pretty awesome.

Alpha.createClass

var MyClass = Alpha.createClass({
    name: ...,
    parents: [...],
    properties: ...,
    strict: true,
    init: function() {
        ...
    }
});

You can easily create a class by giving the following information :

Every generated class contains the following methods:

  1. get returns one or several attributes (excepting methods). It can be useful when you want to exchange JSON data;
  2. set modifies one or several attributes (including methods);
  3. clone returns a copy of the current instance.

Here is an example:

var Liger = Alpha.createClass({
    name: 'Liger',
    parents: [Lion, Tiger],
    properties: {
        color: 'orange',
        representation: 'http://bigcathabitat.org/wp-content/uploads/2011/08/Brutus.jpg',

        roar: function() {
            alert('Grrr!');
        }
    }
});

As you can see, AlphaJS handles multi-inheritence by passing an array of constructors into the property parents. properties contains the attributes and methods of the class. For a matter of performance, the methods will be put in the prototype of the class.

Now, let's see how to instanciate and manipulate a Liger.

var myLiger = new Liger({
    name: 'Felix',
    roar: function() {
        alert("Grrrr, I'm different dude, I'm " + this.name + "!");
    }
});

myLiger.set('name', 'awesome');
myLiger.set({
    color: 'yellow',
    name: 'extra awesome'
});

var color = myLiger.get('color');
var infos = myLiger.get(['name', 'representation']);

Alpha.createObject

If you want to use the get, set and clone methods without creating a class, you can use the constructor Alpha.createObject.

var human = Alpha.createObject({
    name: 'Marc',
    age: 26
});

var name = human.get('name');

Alpha.ui.Element

All the graphical components extended the class Alpha.ui.Element. This class contains useful attributes and methods for DOM manipulation, such as $container and $el. The default $container is the body of the page.

var element = new Alpha.ui.Element({
    $container: ...,
    $el: ...,

    render: function() {
        ...
    },

    show: function() {
        ...
    },

    onShow_effect: function() {
        ...
    },

    onHide_effect: function() {
        ...
    },
});

When you use the method set on an object inheriting Alpha.ui.Element, you change in real time the value of the attribute in the DOM but the name of CSS class has to be the same of the name of the attribute.

Example:

var character = new Alpha.ui.Element({
    name: 'James',
    $container: '#ui_element',

    render: function() {
        return '<div id="character" style="text-align:center;color:red;">' +
                    '<div class="name">' + this.name + '</div>' +
               '</div>';
    },

    show: function() {
        this.$container = $(this.$container);
        this.$container.append(this.render());

        this.$el = this.$container.find("#character");
    }
});

character.show();

Now, you can change the name of this character just by using the following input:

Alpha.ui.loadCSS

If you want to use the different Alpha.ui components, you can load dynamically a stylesheet by using the method Alpha.ui.loadCSS. The stylesheets contains the work of Daneden called animate.css. This method calls another named: Alpha.ui.loadStylesheet which you can use to dynamically load CSS files.

Alpha.ui.loadCSS();
Alpha.ui.loadStylesheet('http://rawgit.com/daneden/animate.css/master/animate.css');

Alpha.ui.effects

If you want to apply an effect on an element, you can use Alpha.ui.effects.css or Alpha.ui.effects.js. You just have to pass the name of the effect, then the jQuery element and optionnaly a function that is triggered when the effect is done. You can check all the effects available with Alpha.ui.effects.css.all and Alpha.ui.effects.js.all.

Example: Put the mouse over the following code sample

$('#shaker').on('mouseenter', function() {
    Alpha.ui.effects.css('shake', $(this), function() {
        $(this).removeClass('shake').removeClass('animated');
    });
});

Alpha.ui.Button

Buttons are very important in a web application. So, it's very understandable to have an easy way to manage them. AlphaJS provides this way with Alpha.ui.Button

var button = new Alpha.ui.Button({
    $container: '#buttons',
    type: 'button',
    'class': 'blue radius-corner',
    content: '#YOLO Button',
    onClick: function() {
        alert("I'm a blue button! #YOLO")
    }
});

button.show();

Alpha.ui.ModalBox

Are you tired of making modal box over and over? Here is a little something for you that will spare you some time. All you have to do is to give a title and a content.

var modal1 = new Alpha.ui.ModalBox({
    title: 'Modal 1',
    content: 'Modal box for container 1'
});

If you want to add buttons, there is the method addButton() for that:

modal1.addButton(new Alpha.ui.Button({
    type: 'button',
    'class': 'green',
    content: 'Say hi',

    onClick: function() {
        alert('Hi!');
    }
}));

These modalboxes are totally responsives. Check those two for instance:

1
2

Alpha.ui.SideBox

Sideboxes are boxes showing on the sides of the screen when a certain selector appear at sight. After creating all of the sideboxes you need, do not forget to use the method Alpha.ui.SideBox.showAll. Theses boxes can be used to add complementary information when a certain text, picture or video is at sight.

var sidebox = new Alpha.ui.SideBox({
    $appearOn: '#selector',
    direction: 'right',
    title: "I'm a SideBox",
    content: "Hello friend! :)"
});

Alpha.ui.SideBox.showAll();

Alpha.ui.SearchWidget

This is a specific component that implements a search process. By ticking a result, you will add it to the guests list.

Here is how it works: you provide the data, the way to compare items from data, the way to render results and the way to get results (your personal algorithm search, for instance) and here it goes.

You can also set options. Options are the different categories your results can belong to. For example, you want to filter your results by gender. To set the options, you can use the method getOptions and pass the array of categories into the callback.

var search_widget = new Alpha.ui.SearchWidget({
    $container: '#search-widget',

    getOptions: function(callback) {
        callback(['All', 'Male', 'Female']);
    },

    compareResults: function(r1, r2) {
        return r1.username == r2.username;
    },

    renderResult: function(result) {
        return '<img src="' + result.picture.thumbnail + '" alt="">'+
               '<div class="description">' +
                    result.name.first +
               '</div>';
    },

    getResults: function(callback, value, category) {
        var results = [];

        users.forEach(function(user) {
            if(startsWith(value, user.name.first)) {
                if(category.toUpperCase() == 'ALL') 
                    results.push(user);
                else {
                    if(user.gender.toUpperCase() == category.toUpperCase())
                        results.push(user);
                }
            }
        });

        callback(results);
    }
});