MO5.js

MO5 is a JavaScript library for building modular HTML5 and node.js apps. It features control flow helpers, observable objects, animation and timing facilities as well as intelligent data structures and a module loader.

MO5 makes heavy use of the EventBus, Observer and Promise patterns. All important objects are derived from MO5.CoreObject, which means they are observable and destroyable.

MO5's internal containers recognize when objects contained within them get destroyed and remove all references they own automatically so that the garbage collector can do its work.

Most modules work in the browser using the MO5 module loader or making them available under the "MO5" namespace object if the module loader is not available. In node.js, the default module system with require and exports is used instead.

Usage

By extending MO5.CoreObject, you can build objects that have "batteries included", that is, they have a unique ID among all MO5.CoreObject instances, can be observed via the subscribe(), unsubscribe(), trigger() and once() methods, can be connected to other MO5.CoreObject instances using the connect() method and can be marked to be deleted using the destroy() method, which causes MO5 data structures like MO5.Map or MO5.Queue to delete all their references to the object that should be deleted. MO5.CoreObject instances also have a flag feature to allow modules to mark objects for specific tasks without extending their interface.

You can extend from MO5.CoreObject like this:

using("MO5.CoreObject").run(function (CoreObject) {

    function MyObject () {

        CoreObject.apply(this, arguments);

        // ... whatever your constructor does
    }

    MyObject.prototype = new CoreObject();

    var obj = new MyObject();
});

Tweening:

using("MO5.transform").run(function (transform) {

    var element = document.getElementById("MyElement");

    // A function that takes a value and applies it to whatever needs
    // to be transformed:
    var fn = function (v) {
        element.style.left = v + "px";
    };

    // The transform function executes a function for a
    // specific duration and feeds it the current value from
    // a range, specified by the second and third parameter,
    // where the current value is calculated based on the time
    // passed since the start of the transform using an easing
    // function.
    var timer = transform(fn, 0, 200, { duration: 500 });

    // The timer can then be used to obtain information about
    // the transformation and to pause or cancel it:
    timer.elapsed(); // Number of milliseconds since the start
    timer.pause(); // Pauses the transformation
    timer.resume(); // Resumes the transformation
    timer.stop(); // Abruptly ends the transformation with the "to" value.
    timer.cancel(); // Abruptly ends the transformation with whatever the current value is.

    // There are multiple ways to chain transformations, e.g. using the Timer's event bus:
    timer.once("stopped", function () { console.log("Timer has been stopped."); });

    // Or you can use promises:
    timer.promise().then(func1).then(func2).then(funcEnd, funcError);

    // A Timer's promise is fulfilled when the Timer has been stopped.
    // The promise is broken when the Timer has been canceled or destroyed.
    // The value passed to the callback in then is a reference to the Timer itself.
});

Animations:

using("MO5.transform", "MO5.TimerWatcher", "MO5.Animation").
run(function (transform, TimerWatcher, Animation) {

    var anim = new Animation();

    anim
    .addStep(function () {
        return new TimerWatcher()
        .addTimer(transform(fn, 0, 200))
        .addTimer(transform(fn2, 100, 400));
    })
    .addStep(function () {
        // rectangle is some MO5.dom.Element or MO5.canvas.CanvasElement;
        // move returns a TimerWatcher, not a Timer, because it uses a transformation
        // for each dimension.
        return rectangle.move(300, 100);
    })
    .addStep(function () {
        return new TimerWatcher()
        .addTimer(transform(fn, 200, 0))
        .addTimer(transform(fn2, 400, 100));
    })
    .addStep(function () {
        return rectangle.move(-300, -100);
    });

    anim.start(); // Starts the animation; after the last step, starts at the first step again.
    anim.stop(); // Stops the animation after the last step has been executed.
    anim.cancel(); // Cancels the animation immediately, ignoring any remaining steps in the current queue.
    anim.pause(); // Pauses the animation.
    anim.resume(); // Resumes the animation from where it was paused.

    // An MO5.Animation can be chained the same way Timer objects can be chained by either using the bus
    // or the promise() method. See the tweening section above for details.
});

Containers with weak references:

using("MO5.CoreObject", "MO5.Queue").
run(function (CoreObject, Queue) {

    var q = new Queue(), o = new CoreObject();

    q.length(); // 0
    q.add(o);
    q.length(); // 1
    o.destroy();
    q.length(); // 0
});

Project structure

MO5.js class diagram

License

BSD-style license. See LICENSE file for full license text.

Documents

docs/reference/elements/nametemplate.md
docs/reference/elements/stop.md
docs/development.md
docs/documentation.md
docs/downloads.md
docs/examples.md
docs/games.md
docs/index.md
docs/reference/elements/alert.md
docs/reference/elements/animation.md
docs/reference/elements/assets.md
docs/reference/elements/audio.md
docs/reference/elements/background.md
docs/reference/elements/break.md
docs/reference/elements/character.md
docs/reference/elements/choice.md
docs/reference/elements/clear.md
docs/reference/elements/composite.md
docs/reference/elements/conditionals.md
docs/reference/elements/confirm.md
docs/reference/elements/curtain.md
docs/reference/elements/displayname.md
docs/reference/elements/do.md
docs/reference/elements/easing_attribute.md
docs/reference/elements/else.md
docs/reference/elements/flash.md
docs/reference/elements/flicker.md
docs/reference/elements/fn.md
docs/reference/elements/global.md
docs/reference/elements/globalize.md
docs/reference/elements/goto.md
docs/reference/elements/group.md
docs/reference/elements/hide.md
docs/reference/elements/image.md
docs/reference/elements/imagepack.md
docs/reference/elements/line.md
docs/reference/elements/localize.md
docs/reference/elements/move.md
docs/community.md
docs/reference/elements/option.md
docs/reference/elements/pause.md
docs/reference/elements/play.md
docs/reference/elements/prompt.md
docs/reference/elements/restart.md
docs/reference/elements/scene.md
docs/reference/elements/scenes.md
docs/reference/elements/set.md
docs/reference/elements/set_vars.md
docs/reference/elements/settings.md
docs/reference/elements/shake.md
docs/reference/elements/show.md
docs/reference/elements/source.md
docs/reference/elements/stage.md
docs/reference/elements/start.md
docs/beginners-guide.md
docs/reference/elements/sub.md
docs/reference/elements/tag.md
docs/reference/elements/textbox.md
docs/reference/elements/track.md
docs/reference/elements/transform.md
docs/reference/elements/trigger.md
docs/reference/elements/trigger_command.md
docs/reference/elements/triggers.md
docs/reference/elements/var.md
docs/reference/elements/wait.md
docs/reference/elements/when.md
docs/reference/elements/while.md
docs/reference/elements/with.md
docs/reference/elements/ws.md
docs/reference/elements.md
docs/reference/language.md
docs/reference/structure.md
docs/reference/syntax.md
docs/web-servers.md
libs/MO5/README.md
libs/MO5/libs/using.js/README.md
libs/MO5/js/EventBus.js
libs/MO5/js/Animation.js
libs/MO5/js/CoreObject.js
libs/MO5/js/Exception.js
libs/MO5/js/List.js
libs/MO5/js/MO5.js
libs/MO5/js/Map.js
libs/MO5/js/Point.js
libs/MO5/js/Promise.js
libs/MO5/js/Queue.js
libs/MO5/js/Result.js
libs/MO5/js/Set.js
libs/MO5/js/Size.js
libs/MO5/js/Timer.js
libs/MO5/js/TimerWatcher.js
libs/MO5/js/ajax.js
libs/MO5/js/assert.js
libs/MO5/js/dom.Element.js
libs/MO5/js/dom.effects.typewriter.js
libs/MO5/js/dom.escape.js
libs/MO5/js/easing.js
libs/MO5/js/fail.js
libs/MO5/js/globals.document.js
libs/MO5/js/globals.window.js
libs/MO5/js/range.js
libs/MO5/js/tools.js
libs/MO5/js/transform.js
libs/MO5/js/types.js
libs/MO5/libs/using.js/tests/index.js
libs/MO5/libs/using.js/tests/module1.js
libs/MO5/libs/using.js/tests/module2.js
libs/MO5/libs/using.js/tests/module3.js
libs/MO5/libs/using.js/using.js
libs/MO5/tests/node/EventBus.test.js
libs/MO5/tests/node/Set.test.js
src/savegames.js
src/tools/reveal.js
src/tools/ui.js
src/loader.js
src/tools/tools.js
src/tools/compile.js
src/functions.js
src/DisplayObject.js
src/Game.js
src/Interpreter.js
src/Keys.js
src/LoadingScreen.js
src/Trigger.js
src/assets/Audio.js
src/assets/Background.js
src/assets/Character.js
src/assets/Composite.js
src/assets/Curtain.js
src/assets/Imagepack.js
src/assets/Textbox.js
src/assets.js
src/bus.js
src/commands/alert.js
src/commands/break.js
src/commands/choice.js
src/commands/confirm.js
src/commands/do.js
src/commands/fn.js
src/commands/global.js
src/commands/globalize.js
src/commands/goto.js
src/commands/line.js
src/commands/localize.js
src/commands/prompt.js
src/commands/restart.js
src/commands/set_vars.js
src/commands/sub.js
src/commands/trigger.js
src/commands/var.js
src/commands/wait.js
src/commands/while.js
src/commands/with.js
src/commands.js
src/dataSources/LocalStorage.js
src/dataSources.js
src/engine.js
src/extensions/button.js
src/extensions/colored-rectangle.js
src/extensions/get-backtrace.js
src/extensions/hello.js
src/extensions/side-images.js
CHANGELOG.md
LICENSE.md
README.md
build.js
index.js
index.md
package.js