tests/manual/test.html

	test.html revision fa0dc2eee6aa0bb2be0232d98b593a4432a47c1a
<!doctype html>
<html>
<head>
    <title>Test Page</title>
    <style type="text/css">
        div {
            margin: 1em 0;
        }
    </style>
</head>
<body class="yui-skin-sam">
<div id="outer">
    <div id="inner">
        <button type="button" class="go">Button 1</button>
        <button type="button" class="go">Button 2</button>
        <button type="button" class="go">Button 3</button>
    </div>
</div>
<div>
    <button type="button" id="attach">attach</button>
    <button type="button" id="attach_handle">attach + handle</button>
    <button type="button" id="attach_cat">attach + category</button>
    <button type="button" id="detach">detach by signature</button>
    <button type="button" id="detach_handle">detach by handle</button>
    <button type="button" id="detach_cat">detach by category</button>
    <button type="button" id="detach_nofn">detach without fn</button>
    <button type="button" id="remove">remove buttons</button>
</div>
<ul id="output"></ul>

<script src="/build/yui/yui.js"></script>
<!--script src="js/synthetic.js"></script-->
<!--script src="/build/event/event-synthetic.js"></script-->
<script>
YUI({
    useBrowserConsole: false,
    filter: 'raw'
}).use('event-synthetic', 'event-custom', 'node', function (Y) {

Y.on('yui:log', function (e) {
    Y.one("#output").append("<li>" + e.msg + "</li>");
});

Y.Event.define('test', {
    //init: function (node, sub, notifier) {
    on: function (node, sub, notifier) {
        Y.log("on " + this.type + ": " + node.get('text'));
        sub.testHandle = node.on('click', function (e) {
            //notifier.fire(e);
            notifier.fire();
        });
    },

    detach: function (node, sub, notifier) {
        Y.log("detach " + this.type + ": " + node.get('text'));
        node.getData('testHandle').detach();
    },

    delegate: function (container, sub, notifier, filter) {
        Y.log("delegate " + this.type);
        sub.delegateHandle = container.delegate('click', function (e) {
            notifier.fire(e);
        }, filter);
    },

    detachDelegate: function (container, sub, notifier, filter) {
        Y.log("detachDelegate " + this.type);
        sub.delegateHandle.detach();
    }
});

var outer = Y.one('#outer'),
    inner = Y.one('#inner'),
    mode  = 1,
    handle;

function notify(e) {
    var ctText = e.currentTarget.get('text'),
        thisText = this.get('text');

    //console.log('Fired', this, arguments);
    Y.log('fired ' + e.type + ' from ' + ctText + ' (' + thisText + ')');
}

Y.one('#attach').on('click', function (e) {
    switch (mode) {
        case 1: Y.one('.go').on('test', notify); break;
        case 2: Y.all('.go').on('test', notify); break;
        case 3: Y.on('test', notify, '.go'); break;
        case 4: Y.delegate('test', notify, '#outer', '.go'); break;
    }
});

Y.one('#attach_handle').on('click', function (e) {
    switch(mode) {
        case 1: handle = Y.one('.go').on('test', notify); break;
        case 2: handle = Y.all('.go').on('test', notify); break;
        case 3: handle = Y.on('test', notify, '.go'); break;
        case 4: handle = Y.delegate('test', notify, '#outer', '.go'); break;
    }
});

Y.one('#attach_cat').on('click', function (e) {
    switch (mode) {
        case 1: Y.one('.go').on('foo|test', notify); break;
        case 2: Y.all('.go').on('foo|test', notify); break;
        case 3: Y.on('foo|test', notify, '.go'); break;
        case 4: Y.delegate('foo|test', notify, '#outer', '.go'); break;
    }
});

Y.one('#detach').on('click', function (e) {
    switch (mode) {
        case 1: Y.one('.go').detach('test', notify); break;
        case 2: Y.all('.go').detach('test', notify); break;
        case 3: Y.detach('test', notify, '.go'); break;
        case 4: Y.detach('test', notify, '#outer', '.go'); break;
    }
});

Y.one('#detach_handle').on('click', function (e) {
    handle.detach();
});

Y.one('#detach_cat').on('click', function (e) {
    switch (mode) {
        case 1: Y.one('.go').detach('foo|test'); break;
        case 2: Y.all('.go').detach('foo|test'); break;
        case 3: Y.detach('foo|test'); break;
        case 3: Y.one('#outer').detach('foo|test'); break;
    }
});

Y.one('#detach_nofn').on('click', function (e) {
    switch (mode) {
        case 1: Y.one('.go').detach('test'); break;
        case 2: Y.all('.go').detach('test'); break;
        case 3: Y.detach('foo|*'); break;
        case 1: Y.one('#outer').detach('test'); break;
    }
});

Y.one('#remove').on('click', function (e) {
    inner.remove(true);
    Y.log('Detached');
});

});
</script>
</body>
</html>