CustomElement.js

CustomElement.js

var Generate = require('generate-js'),
    events = require('events'),
    Bars = require('bars'),
    bars = new Bars();

function removeEmptyObjects(data) {
    for (var key in data) {
        if (data[key]) {
            if (typeof data[key] === 'object') {
                if (data[key] instanceof Array) {

                } else if (!Object.keys(data[key]).length) {
                    delete data[key];
                } else {
                    removeEmptyObjects(data[key]);
                }
            }
        }
    }
}

var CustomElement = Generate.generateFrom(events.EventEmitter, function CustomElement(config, options) {
    var _ = this,
        interactions = config.interactions,
        partials = config.partials,
        transforms = config.transforms,
        template = config.template,
        data = options.data || {},
        $ = options.$ || window.jQuery.noConflict(),
        $element = $(options.$element || '<div>');

    delete config.interactions;
    delete config.partials;
    delete config.transforms;
    delete config.template;
    delete options.$;
    delete options.$element;
    delete options.data;

    _.defineProperties({
        $element: $element,
        $: $
    });

    _.defineProperties({
        writable: true
    }, {
        _data: data
    });

    _.registerInteractions(interactions);
    _.registerTransforms(transforms);
    _.registerPartials(partials);
    _.registerTemplate(template);
});

CustomElement.definePrototype({
    update: function update() {
        var _ = this;
        _.dom.update(_._data);
    },

    render: function render() {
        var _ = this;

        _.$element.html('');
        _.dom.update(_._data);
        _.dom.appendTo(_.$element[0]);
    }
});

CustomElement.definePrototype({
    set: function set(key, value) {
        this._data = typeof this._data === 'object' ? this._data : {};

        var _ = this,
            splat = key.split(/\/|\./),
            lastKey = splat.pop(),
            obj = _._data;

        for (var i = 0; i < splat.length; i++) {
            if (typeof obj[splat[i]] !== 'object') {
                obj[splat[i]] = {};
            }

            obj = obj[splat[i]];
        }

        obj[lastKey] = value;
        _.update();

        return value;
    },

    unset: function unset(key) {
        this._data = typeof this._data === 'object' ? this._data : {};

        var _ = this,
            splat = key.split(/\/|\./),
            lastKey = splat.pop(),
            obj = _._data;

        for (var i = 0; i < splat.length; i++) {
            if (typeof obj[splat[i]] !== 'object') {
                obj[splat[i]] = {};
            }

            obj = obj[splat[i]];
        }

        delete obj[lastKey];

        removeEmptyObjects(_._data);

        _.update();
    },

    get: function get(key) {
        var _ = this,
            splat = key.split(/\/|\./),
            lastKey = splat.pop(),
            obj = _._data;

        for (var i = 0; i < splat.length; i++) {
            obj = obj[splat[i]];
            if (!obj) return;
        }

        return obj[lastKey];
    }
});

CustomElement.definePrototype({
    registerTemplate: function registerTemplate(template) {
        var _ = this;
        _.dom = bars.compile(template);
        _.render();
    },

    registerInteractions: function registerInteractions(interactions) {
        var _ = this,
            $element = _.$element,
            interaction, key;

        for (key in interactions) {
            interaction = interactions[key];

            if (interaction.target) {
                $element.on(interaction.event, interaction.target, _.__eventAction(interaction));
            } else {
                $element.on(interaction.event, _.__eventAction(interaction));
            }
        }
    },

    registerPartials: function registerPartials(partials) {
        var _ = this,
            key;

        for (key in partials) {
            bars.registerPartial(key, bars.compile(partials[key]));
        }
    },

    registerTransforms: function registerTransforms(transforms) {
        var _ = this,
            key;

        for (key in transforms) {
            bars.registerTransform(key, transforms[key]);
        }
    }
})

CustomElement.definePrototype({
    __eventAction: function __eventAction(interaction) {
        var _ = this;

        return function action(event) {
            return interaction.action.call(_, event, _.$(this));
        };
    }
})

module.exports = CustomElement;