Sample JavaScript

sample.js

Namespace('sample.widget')
.use('sample.rect.ui createRectModel')
.define(function (ns) {
    var registerElement;

    registerElement = function (element, dataset) {
        var rectModel = ns.createRectModel(element, dataset.classOn, dataset.classOff);

        element.addEventListener('click', function (event) {
            rectModel.notify('toggle').run();
            rectModel.notify('move').run();
        });
    };

    ns.provide({
        registerElement : registerElement
    });
});

Namespace('sample.rect.ui')
.use('brook promise')
.use('brook.util mapper,through')
.use('brook.model createModel')
.define(function (ns) {
    var createModel,
        maxLeft = 200,
        maxTop  = 200,
        createToggleClassPromise,
        createMovePositionPromise,
        makeNewPosition
    ;

    createModel = function (element, onClass, offClass) {
        var model = ns.createModel();

        model.addMethod('toggle', ns.promise().bind(
            createToggleClassPromise(element, onClass, offClass)
        ));

        model.addMethod('move', ns.promise().bind(
            makeNewPosition,
            createMovePositionPromise(element)
        ));

        return model;
    };

    createToggleClassPromise = function (element, onClass, offClass) {
        return ns.through(function (v) {
            if (element.className === onClass) {
                element.className = offClass;
            }
            else {
                element.className = onClass;
            }
        });
    };

    createMovePositionPromise = function (element) {
        return ns.through(function (v) {
            element.style.left = v.left + 'px';
            element.style.top = v.top + 'px';
        });
    };

    makeNewPosition = ns.mapper(function (v) {
        return {
            left : Math.floor(Math.random() * maxLeft),
            top  : Math.floor(Math.random() * maxTop)
        };
    });

    ns.provide({
        createRectModel : createModel
    });
});