node/sandbox/nodelist.html

	nodelist.html revision 0bf15ed0fdb50227faf47dd071dc50852157f8af
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<html>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<head>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<title>FIXME</title>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<script type="text/javascript" src="/build/yui/yui.js"></script>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<script type="text/javascript" src="/build/event-custom/event-custom.js"></script>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<script type="text/javascript" src="/build/event-simulate/event-simulate.js"></script>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<script type="text/javascript" src="/build/event/event.js"></script>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<script type="text/javascript" src="/build/oop/oop.js"></script>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<script type="text/javascript" src="/build/base/base.js"></script>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<script type="text/javascript" src="/build/attribute/attribute.js"></script>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<script type="text/javascript" src="/build/dom/dom-debug.js"></script>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<script type="text/javascript" src="/build/node/node-debug.js"></script>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<style type="text/css">
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk</style>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk</head>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<body>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<div id="demo" class="foo">
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk    <p id="lorem">lorem</p>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk    <p title="ipsum">ipsum</p>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk    <p>dolor</p>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk    <p>sit</p>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk</div>
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk<script type="text/javascript">
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenkYUI().use('*', function(Y) {
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk    var a = ['foo', 'bar', 'baz:', 'fool'],
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk        b = ['foo', 'baz', 'boo', 'bool'];
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk    nodelist = Y.all('p');
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk    //nodelist.set('style.color', 'red');
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk    node = Y.get('p[title]');
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk    nodelist.on('click', function(e) {
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk        alert(e);
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk    });
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk    Y.on('click', function(e) {
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk        //alert(e);
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk    }, 'p[title]');
5b64d5d44892834ba97f003080f3467299b7c5c5jeff.schenk
/*
1. set title on all nodes
   store initial value === prevVal
2. provide prevVal array in handler
3. fire node titleChange
4. fire nodelist titleChange
*/

    node.on('innerHTMLChange', function(e) {
        e.preventDefault();
        e.newVal = 'hijacked val';
        this._defAttrChangeFn(e);
        console.log('Node: ' + e.type + ': ' + e.target._yuid);
    });
    //node.set('innerHTML', 'new content from Node');


    //node.setStyle('color', 'red');
    nodelist.setStyle('color', 'red');

    console.log(Y.all('body').get('firstChild.nodeName'));
/*
    console.log(Y.get('body').get('firstChild.nodeName'));

    Y.get('body').on('firstChildChange', function(e) {
        console.log(e);
        e.preventDefault();
    });
    console.log(Y.get('body').set('firstChild.nextSibling.innerHTML', 'foo'));

    node.after('innerHTMLChange', function(e) {
        console.log('Node: afterInnerHTMLChange');
    });

    nodelist.on('innerHTMLChange', function(e) {
        //console.log('NodeList: ' + e.type + ': ' + e.target);
    });

    var onClick = function(e) {
        //e.preventDefault();
        console.log('node click');
    };
    nodelist.on('click', onClick);

    Y.get('#demo').addNode('<p>injected content</p>');

    nodelist.on('refresh', function(e) {
        e.added.on('click', onClick);

    });
    nodelist.refresh();
    nodelist.set('innerHTML', 'new content from NodeList');

    console.log(Y.get('#demo').get('children').set('innerHTML', 'foo'));
    console.log(Y.get('#demo').hasClass('foo'));
    console.log(Y.get('#demo').addClass('bar'));
    console.log(Y.get('#demo').hasClass('bar'));
    console.log(nodelist.item(0).get('id'));
    nodelist.each(function(n) {
        n.set('innerHTML', 'set by nodelist.each()');
    });
    */
});
</script>
</body>
</html>