WuiText

[ronkorving]

What follows is a suggested draft implementation for WuiText. The idea is that text nodes become wrapped, just like DOM elements do. The wrapper object is very thin, but would allow us to attach logic to all text. An example of this (and implemented below) is to allow text to be a tome, in which case the binding to it (allowing changes to automatically be reflected on-screen without any code required) could be automatic.

WuiDom's setText function would instantiate WuiText out of the content passed to it. At the same time, when people want to instantiate their own text objects, they can do this and use the already existing APIs to deal with text the way they already deal with DOM elements. That is: append, insert, etc. The reason why this would work so easily is because most of those DOM APIs operate on Nodes rather than elements.

WuiText.js:

var handlers;

function WuiText(content) {
    this.rootElement = document.createTextNode('');
    this.set(content);
}

WuiText.addContentHandler = function (fn) {
    if (handlers) {
        handlers.push(fn);
    } else {
        handlers = [fn];
    }
};

WuiText.prototype.set = function (content) {
    if (content === undefined || content === null) {
        content = '';
    }

    if (handlers) {
        for (var i = 0; i < handlers.length; i += 1) {
            content = handlers[i].call(this, content);
        }
    }

    this.rootElement.nodeValue = content;
};

module.exports = WuiText;

Registering a tome text handler:

WuiText.addContentHandler(function (content) {
    var that = this;

    // hot path when change happens on a tome

    if (this.sourceTome === content) {
        return content.toString();
    }

    // slow path when creating the event listener for the first time

    if (Tome.isTome(content)) {
        if (this.sourceTome) {
            // a different tome is being set, so cleanup the previous one

            this.sourceTome.removeListener(this.tomeListener);
        }

        this.sourceTome = content;

        this.tomeListener = function () {
            that.set(this.value);
        };

        content.on('readable', this.tomeListener);

        return content.toString();
    }

    // not a tome

    return content;
});

Final goal:

title.setText('Welcome ', player.name, '!');

// player.name is a tome that might change
// the code above has now created 3 text nodes, the 2nd of which auto-updates with the tome.

Poke @micky2be @bjornstar