customevent.html revision ad3e803b573f1ad93069380c0fa13ecac5ada5c5
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster<script type="text/javascript" src="/build/yui/yui.js"></script>
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster<p><input type="button" value="Run Tests" id="btnRun" disabled="true" /></p>
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster <a title="remove module" class="yui-remove"><em>x</em></a>
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster <p>This an example of what you can do with the YUI Animation Utility.</p>
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster <p><em>Follow the instructions above to see the animation in action.</em></p>
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster(function() {
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster var global_notified;
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster //YUI.add("selector-native", function(){});
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster filter: "debug",
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster onCSS: function(Y) {
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster Y.log('CSS is done loading', 'info', 'testcase');
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster logExclude: { get: true, Dom: true, Selector: true, Node: true, attribute: true, event: true, base: true, widget: true },
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster base: 'raw',
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster // dom: null,
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster attribute: 'min'
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster }).use("dump", "test", "anim", "console", function(Y) {
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster // Y.Global.on('yui:log', function(e) {
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster var button = Y.one('#btnRun');
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster // Set up the page
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster button.set("disabled", false);
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster Y.on("click", function() {
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster var myConsole = new Y.Console().render();
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster var testEventTarget = new Y.Test.Case({
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster name: "Custom event tests",
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster testAugment: function() {
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster var fired = false;
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster var O = function(id) {
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster Y.log('O constructor executed ' + id);
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster oOo: function(ok) {
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster // pass configuration info into EventTarget with the following
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster // construct
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster emitFacade: true
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster var o = new O(),
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster handle = o.on('testAugment', function(e, arg1, arg2) {
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster Y.Assert.isTrue(this instanceof O);
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster fired = true;
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster o.fire('testAugment', { foo: 'afoo' }, 1, 2);
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster // if the first argument is not an object, the
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster // event facade is moved in front of the args rather
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster // than overwriting existing object.
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster o.on('testAugment', function(e, arg1, arg2) {
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster o.fire('testAugment', 1, 2);
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster test_detach_by_signature: function() {
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster var anim = new Y.Anim({
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster node: '#demo',
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster to: { opacity: 0 }
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster tester = function() {
a688bcbb4bcff5398fdd29b86f83450257dc0df4Allan Foster Y.detach('foo', tester);
Y.on('foo', tester);
Y.fire('foo');
Y.fire('foo');
Y.Assert.areEqual(1, count);
// this.detach('anim:end', onEnd);
this.detach('end', onEnd);
easing: Y.Easing.bounceOut
this.run();
anim.on('end', onEnd);
anim.run();
anim.run();
Y.log('Base constructor executed');
arguments.callee.superclass.constructor.apply(this, arguments);
Y.log('all your base...');
b.on('testExtend', function(arg1, arg2) {
Y.Assert.isTrue(this instanceof Base);
Y.Assert.isTrue(arg1 === 1);
Y.Assert.isTrue(arg2 === 2);
b.fire('testExtend', 1, 2);
Y.Assert.isTrue(fired);
this.id = id;
Y.log('O constructor executed ' + id);
O.prototype = {
Y.log('oOo');
o.on('testPrefix', function(e, arg1, arg2) {
Y.Assert.isTrue(this instanceof O);
o.on('prefix:testPrefix', function(e, arg1, arg2) {
Y.Assert.isTrue(this instanceof O);
o.fire('testPrefix', { foo: 'afoo' }, 1, 2);
Y.Assert.isTrue(fired1);
// Y.Assert.isTrue(fired2);
o.fire('prefix:testPrefix', { foo: 'afoo' }, 1, 2);
Y.Assert.isTrue(fired1);
Y.Assert.isTrue(fired2);
Y.on('handle|test:event', function() {
Y.fire('test:event');
Y.Assert.isTrue(fired1);
Y.Assert.isFalse(fired2);
Y.detach('handle|test:event');
Y.on('handle|test:event', function() {
Y.fire('test:event');
Y.Assert.isFalse(fired1);
Y.Assert.isTrue(fired2);
Y.detach('handle|test:event');
Y.after('handle|test:event', function(arg1) {
Y.Assert.areEqual('orange', arg1);
Y.Assert.isTrue(fired1);
Y.on('handle|test:event', function(arg1) {
Y.Assert.areEqual('orange', arg1);
Y.Assert.isFalse(fired2);
Y.fire('test:event', 'orange');
var ret = Y.detach('handle|test:event');
Y.Assert.areEqual(Y, ret);
Y.fire('test:event', 'orange');
Y.Assert.isFalse(fired1);
Y.Assert.isFalse(fired2);
Y.after('handle|event2', function() {
Y.on('handle|event2', function() {
Y.detach('handle|*');
Y.fire('event2');
Y.Assert.isFalse(fired1, 'fired1, the after listener should not have fired.');
Y.Assert.isFalse(fired2, 'fired2, the on listener should not have fired.');
Y.Assert.isTrue(fired2);
Y.Assert.isFalse(fired1);
base:'/build/',
var o = new Y2.EventTarget({
// Y2.after('p:e', f1).on('p:e', f2).on('p:e2', f3).on('detach, p:e', f4).detach('detach, p:e').fire('p:e').fire('p:e2');
o.after('e', f1).on('foo:e', f2).on('foo:e2', f3).on('detach, e', f4).detach('detach,e').fire('foo:e').fire('e2').on('pre:e', f5).fire('pre:e');
Y.Assert.isTrue(fired2); // verifies chaining, on/after order, and accepting the prefix in the event name
Y.Assert.isTrue(fired3); // verifies no interaction between events, and prefix manipulation
Y.Assert.isFalse(fired4); // verifies detach works (regardless of spaces after comma)
Y.Assert.isTrue(fired5); // verifies custom prefix
Y.on({
Y.fire('y:click');
Y.fire('y:clack');
Y.Assert.isTrue(f1);
Y.Assert.isTrue(f2);
a = new Y.EventTarget(config),
b = new Y.EventTarget(config);
b.addTarget(a);
// b.publish('test:foo');
a.on('test:foo', function(e) {
ret = b.fire('test:foo', {}, b);
Y.Assert.areEqual(1, count);
Y.Assert.isTrue(ret);
b.on('test:foo', function(e) {
ret = b.fire('test:foo', {}, b);
Y.Assert.areEqual(1, count);
Y.Assert.isFalse(ret);
Y.publish('y:foo1', {
Y.Assert.isTrue(this instanceof YUI);
Y.on('y:foo1', function(e) {
Y.on('y:foo1', function(e) {
Y.fire('y:foo1');
Y.Assert.areEqual(1, count);
Y.publish('y:foo', {
Y.on('y:foo', function(e) {
handle = Y.on('y:foo', function(e) {
handle2 = Y.on('y:foo', function(e) {
Y.detach(handle);
Y.fire('y:foo');
Y.Assert.areEqual(1, count);
var handle3 = Y.on('y:click', function() {
Y.fire('y:click');
Y.fire('y:click');
var o = new Y.EventTarget();
o.on('foo', function(e) {
o.on('foo', function(e) {
o.detachAll();
o.fire('foo');
Y.Assert.areEqual(0, count);
var handle3 = Y.on('y:click', function() {
Y.detachAll();
Y.fire('y:click');
Y.Assert.areEqual(1, count);
var o = new Y.EventTarget(), s1, s2, s3, s4;
o.publish('y:foo2', {
Y.on('y:foo2', function() {
Y.log('Y foo2 executed');
Y.Global.on('y:foo2', function() {
Y.log('GLOBAL foo2 executed');
o.fire('y:foo2');
Y.Assert.areEqual(1, s1);
Y.Assert.areNotEqual(1, s2);
o.publish('y:bar', {
Y.on('y:bar', function() {
Y.log('Y bar executed');
Y.Global.on('y:bar', function() {
Y.log('GLOBAL bar executed');
o.fire('y:bar');
Y.Assert.areEqual(1, s3);
Y.Assert.areEqual(1, s4);
Y.Global.on('y:bar', function(e) {
Y.log('GLOBAL bar executed');
o.fire('y:bar');
o.fire('y:bar');
Y.publish('fireonce', {
Y.fire('fireonce', 'foo', 'bar');
Y.on('fireonce', function(arg1, arg2) {
Y.Assert.areEqual('foo', arg1, 'arg1 not correct for lazy fireOnce listener')
Y.Assert.areEqual('bar', arg2, 'arg2 not correct for lazy fireOnce listener')
Y.fire('fireonce', 'foo2', 'bar2');
Y.fire('fireonce', 'foo3', 'bar3');
Y.on('fireonce', function(arg1, arg2) {
Y.log('the notification is asynchronous, so I need to wait for this test');
Y.Assert.areEqual(1, notified, 'listener notified more than once.');
// Y.Assert.isFalse(global_notified, 'notification was not asynchronous');
Y.Assert.isTrue(global_notified, 'asynchronous notification did not seem to work.');
var node = Y.one('#adiv');
node.publish('foo1', {
node.on('foo1', function(e) {
Y.Assert.areEqual('foo1', e._type);
node.on('foo1', function(e) {
node.fire('foo1', {
Y.Assert.areEqual(1, preventCount);
Y.Assert.areEqual(2, heard);
called = this.name;
leaf = new Y.EventTarget(config),
branch = new Y.EventTarget(config),
root = new Y.EventTarget(config);
leaf.name = 'leaf';
branch.name = 'branch';
root.name = 'root';
leaf.addTarget(branch);
branch.addTarget(root);
leaf.publish('test:foo', { defaultFn: fn});
branch.publish('test:foo', { defaultFn: fn});
root.publish('test:foo', { defaultFn: fn});
leaf.on('test:foo', function(e) {
branch.on('test:foo', function() {
root.on('test:foo', function() {
root.after('test:foo', function() {
branch.after('test:foo', function() {
Y.Assert.areEqual('branch', called, 'branch.after should be executed after the branch default function');
leaf.after('test:foo', function(e) {
leaf.fire('test:foo', {}, leaf);
Y.Assert.areEqual(6, count);
called = this.name;
leaf = new Y.EventTarget(config),
branch = new Y.EventTarget(config),
root = new Y.EventTarget(config);
leaf.name = 'leaf';
branch.name = 'branch';
root.name = 'root';
leaf.addTarget(branch);
branch.addTarget(root);
leaf.publish('test:foo', { defaultFn: fn});
branch.publish('test:foo', { defaultFn: fn});
root.publish('test:foo', { defaultFn: fn});
leaf.on('test:foo', function(e) {
branch.on('test:foo', function() {
root.on('test:foo', function() {
leaf.after('test:foo', function(e) {
// Y.Assert.areEqual('root', called, 'leaf.after should be executed after the root default function');
branch.after('test:foo', function() {
// Y.Assert.areEqual('root', called, 'leaf.after should be executed after the root default function');
root.after('test:foo', function() {
// Y.Assert.areEqual('root', called, 'leaf.after should be executed after the root default function');
leaf.fire('test:foo', {}, leaf);
Y.Assert.areEqual(6, count, 'total subscriber count');
z = new Y.EventTarget(config),
a = new Y.EventTarget(config),
b = new Y.EventTarget(config);
b.addTarget(a);
a.addTarget(z);
z.on('*:foo', function(e) {
ret = b.fire('a:foo', {}, b);
Y.Assert.areEqual(1, count);
Y.Assert.isTrue(ret);
ret = b.fire('b:foo', {}, b);
Y.Assert.areEqual(2, count);
Y.Assert.isTrue(ret);
ret = b.fire('foo', {}, b);
Y.Assert.areEqual(3, count);
Y.Assert.isTrue(ret);
z = new Y.EventTarget(config),
a = new Y.EventTarget(config),
b = new Y.EventTarget(config);
b.addTarget(a);
a.addTarget(z);
z.after('*:foo', function(e) {
// e.preventDefault();
ret = b.fire('a:foo', {}, b);
Y.Assert.areEqual(0, count);
Y.once(['foo', 'bar'], function(e) {
Y.fire('foo', 'bar');
Y.fire('bar', 'bar');
Y.Assert.areEqual(2, count);
Y.fire('foo', 'bar');
Y.fire('bar', 'bar');
Y.Assert.areEqual(2, count);
var handle1 = Y.after(['foo', 'bar'], function(type) {
var handle2 = Y.on(['foo', 'bar'], function(type) {
Y.fire('foo', 'foo');
Y.fire('bar', 'bar');
Y.Assert.areEqual('onfooafterfooonbarafterbar', result);
Y.fire('foo', 'foo');
Y.fire('bar', 'bar');
Y.Assert.areEqual('onfooafterfooonbarafterbar', result);
var a = new Y.EventTarget(),
b = new Y.EventTarget(),
a.publish("foo", {
a.addTarget(b);
b.on("foo", function(e) {
result = (e instanceof Y.EventFacade);
a.fire("foo");
Y.Assert.isTrue(result);
Y.Test.Runner.add(testEventTarget);
// base: "/build/",