event/synthetic/detach.html

	detach.html revision 7f83404c6ad2c3e1f2b57720d25998da265f4d1e
<!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', 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) {
        Y.log("init " + this.type + ": " + node.get('text'));
        node.setData('testHandle', node.on('click', function (e) {
            notifier.fire("alpha");
            //notifier.fire();
        }));
    },

    processArgs: function (args) {
        var extra = args[4];
        args.splice(4,1);

        return extra;
    },

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

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

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

    fireFilter: function (sub, fireArgs, thisObj, ce) {
        return fireArgs[1] && sub._extra !== fireArgs[1];
    }
});

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

function notify(e) {
    //console.log('Fired', this, arguments);
    Y.log('fired ' + e.type + ' from ' + this.get('text'));
}

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, null, "alpha"); break;
        case 2: Y.all('.go').on('test', notify); break;
        case 3: Y.on('test', notify, '.go');
    }
});

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');
    }
});

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');
    }
});

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');
    }
});

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');
    }
});

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|*');
    }
});

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

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