Div Inplace edit demo

by mark69_fnd

HTML

<div id='wrapper'>
</div>

CSS

#wrapper {
    overflow-y: auto;
    height: 500px;
}

JavaScript

YUI().use('node', function (Y) {
    var i, children = [], inputDiv, inputNode, targetDiv;
    
    for (i = 0; i < 1000; i += 1) {
        children.push(['<div class="target" id="i', i, '">', i, '</div>'].join(''));
    }
    Y.one('#wrapper').set('innerHTML', children.join(''));

    function commit() {
        var pos;
        if (targetDiv) {
            pos = Number(targetDiv.get('id').substr(1));
            targetDiv.set('innerHTML', inputNode.get('value'));
            inputDiv.replace(targetDiv);
            targetDiv = null;
        }
        return pos;
    }

    function start(node) {
        targetDiv = node;
        inputNode.set('value', targetDiv.getHTML());
        targetDiv.replace(inputDiv);
        inputNode.select();
    }

    inputDiv = Y.Node.create('<div><input type="text"/></div>');
    inputNode = inputDiv.one('input');
    inputNode.on('keydown', function (e) {
        var pos;
        switch (e.keyCode) {
        case 38:  // up
            pos = commit() - 1;
            if (!isNaN(pos) && pos < 0) {
                pos = 999;
            }
            break;
        case 40:  // down
            pos = commit() + 1;
            if (!isNaN(pos) && pos === 1000) {
                pos = 0;
            }
            break;
        }
        if (!isNaN(pos)) {
            start(Y.one('#i' + pos)); 
            e.preventDefault();
        }
    });
    
    Y.one('#wrapper').on('click', function (e){
        if (e.target.hasClass('target')) {
            commit();
            start(e.target);
        }
    });
});