cloak.animate

cloak.animate

Cloak.js is a collection of modules for building modern web applications. Each module is designed to work with the others, but are decoupled to allow you pick and choose which ones you need. Want views but don't need to deal with models or a complex router? You can do that! First, make sure you have cloak.core which contains some basic utilities for each module. Then, install the modules you want.

$ npm install --save cloak.core
$ npm install --save cloak.view

Then, in your JavaScript, just start using the components. Cloak is designed to work in a CommonJS environment, so any tools that do so will work (like common.js or browserify).

var View = require('cloak.view');

var MyView = module.exports = View.extend({
    
    template: 'views/myview/myview.hbs',

    draw: function() {
        this.elem.innerHTML = this.render();
    }

});

Cloak modules

• cloak.core - The cloak core: tiny, but used by all the cloak modules
• cloak.view - Provides the View class
• cloak.model - Provides the Model and Collection classes for handling data
• cloak.router - Provides the Router class for all you app routing needs
• cloak.controller - Provides a super-minimal Controller class for transitioning displaying views
• cloak.xhr - Provides an easy interface for making HTTP requests by XMLHttpRequest; Also provides an interface to define XHR methods on the Model and Controller classes
• cloak.localstorage - Provides an easy interface for storing data in local storage; Also provides an interface to use local storage as your main app storage for Model and Collection classes
• cloak.i18n - Provides a simple internationalization interface for storing translated phrases and determining a client's language
• cloak.socketio - Provides a socket.io interface for models based on the dagger.js websocket api
• cloak.animate - Provides animaion methods for controllers and views
• cloak.forms - Provides an extension to cloak.view for easier handling of forms

Usage

$ npm install --save cloak.core cloak.animate

ViewAnimation

var View           = require('cloak.view');
var ViewAnimation  = require('cloak.animate').ViewAnimation;

//
// The ViewAnimation mixin adds the `animate` method, as well as some shortcut
// methods for common animations like `fadeIn`. These all effect the View::elem
// property.
//
var FancyView = module.exports = View.extend(ViewAnimation, {

    //...

    fadeInOut: function() {
        return this.fadeOut()
            .then(this.animate.wait(500))
            .then(this.fadeIn.bind(this));
    },

    customAnimation: function() {
        return this.animate(
            { opacity: 0.5, background: '#fff' },
            { duration: 1500 }
        );
    }

});

ControllerAnimation

var Controller           = require('cloak.controller');
var ControllerAnimation  = require('cloak.animate').ControllerAnimation;

//
// Like above, the ControllerAnimation mixin adds all of the same methods,
// except that the controller version target the Controller::scope property
// as the element to animate.
//
var FancyController = module.exports = Controller.extend(ControllerAnimation, {

    //...

    fadeInOut: function() {
        return this.fadeOut()
            .then(this.animate.wait(500))
            .then(this.fadeIn.bind(this));
    },

    customAnimation: function() {
        return this.animate(
            { opacity: 0.5, background: '#fff' },
            { duration: 1500 }
        );
    }

});

Core Animate Method

var animate = require('cloak.animate').animate;

//
// You can also use the base `animate` method to animate any element in the
// same basic fashion
//
var para = document.querySelector('p');

animate(para, { color: '#a00' }, { duration: 200 })
    .then(animate.wait(500))
    .then(function() {
        return animate(para, { color: '#000' }, { duration: 200 });
    });