Nydus

by InfinitiesLoop

HTML

<div class='stuff' data-nydus-itemtemplate="{selector} - {item.html}">
    <h2>Nydus</h2>
    <ul class='nydus-items'>
    </ul>
</div>

<input type="text" placeholder="html here" class="itemhtml" />
<button class="add">Add Item</button>
<button class="remove">Remove Item</button>

CSS

ul.nydus-items {
    list-style-type:none;
    margin: 0;
    padding: 0;
}

ul.nydus-items > li {
}

JavaScript

(function () {
    "use strict";

    var Nydus = window.Nydus = function () {
        this._itemStore = null;
        this._eventsByName = {};
        this._has_init = false;
        this._id = ++Nydus._lastId;
        init(this);
    };
    Nydus._lastId = 0;
    Nydus.prototype = {
        add: function (item) {
            this.addAt(item, this._itemStore.items.length);
        },
        addAt: function (item, index) {
            var id = item.id,
                existing = this._itemStore.byId[id];
            if (existing) {
                remove(this, existing);
            }
            this._itemStore.items.splice(index, 0, item);
            this._itemStore.byId[id] = item;
            store(this);
            raise(this, 'changed');
        },
        remove: function (item) {
            remove(this, item, true);
            store(this);
        },
        removeAt: function (index) {
            removeAt(this, index, true);
            store(this);
        },
        getItems: function () {
            return this._itemStore.items;
        },
        save: function() {
            store(this);
            raise(this, 'changed');
        },
        on: function (eventName, handler) {
            var eventNames = eventName.split(' ');
            for (var i = 0, l = eventNames.length; i < l; i++) {
                eventName = eventNames[i];
                if (eventName === "init" && this._has_init) {
                    handler();
                    continue;
                }
    
                var list = this._eventsByName[eventName] || (this._eventsByName[eventName] = []);
                list.push(handler);
            }
        },
        off: function (eventName, handler) {
            var list = this._eventsByName[eventName] || (this._eventsByName[eventName] = []);
            for (var i = list.length - 1; i >= 0; i--) {
                var h = list[i];
                if (h === handler) {
                    list.splice(i, 1);
          ...