voloko/aspect_test.html

## aspect_test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Aspect test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="../lib/prototype.js" type="text/javascript"></script>
  <script src="../lib/aspect.js" type="text/javascript"></script>
  <style type="text/css" media="screen">
    .x
    {
        background: red;
    }

    .y
    {
        color: white;
    }
  </style>
</head>
<body>
<h1>Aspect test</h1>

<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[

function log() {
    if (window.console) console.log.apply(console,arguments);
}

var X = Class.create({
    initialize: function(e) {
        this.e = $(e);
    },

    select: function() {
        this.e.addClassName('x');
    },

    deselect: function() {
        this.e.removeClassName('x');
    }
});

Aspect.add(X.prototype, "logging", {
   "after initialize": function(e) {
       log("initialzing with " + e);
   },

   // defaults to before
   "select": function() {
       log("  selecting: '" + this.e.className + "'");
   },

   "after select": function() {
       log("   selected: '" + this.e.className + "'");
   },

   "before deselect": function() {
       log("deselecting: '" + this.e.className + "'");
   },

   "after deselect": function() {
       log(" deselected: '" + this.e.className + "'");
   }
});

Event.observe(document, 'dom:loaded', function() {
    var x = new X($('e'));

    Aspect.add(x, 'fontColor', {
        select: function() {
            this.e.addClassName('y');
        },

        deselect: function() {
            this.e.removeClassName('y')
        }
    })
    x.select();
    x.deselect();

    Aspect.remove(x, 'fontColor')
    log("Removed fontColor aspect");
    x.select();
    x.deselect();

    Aspect.remove(X.prototype, 'logging')
    log("Removed logging aspect");
    x.select();
});

// ]]>
</script>

<div id="e">Div with content</div>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<title>Aspect test</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<script src="../lib/prototype.js" type="text/javascript"></script>
	<script src="../lib/aspect.js" type="text/javascript"></script>
	<style type="text/css" media="screen">
	.x
	{
	background: red;
	}

	.y
	{
	color: white;
	}
	</style>
	</head>
	<body>
	<h1>Aspect test</h1>

	<!-- Tests follow -->
	<script type="text/javascript" language="javascript" charset="utf-8">
	// <![CDATA[

	function log() {
	if (window.console) console.log.apply(console,arguments);
	}

	var X = Class.create({
	initialize: function(e) {
	this.e = $(e);
	},

	select: function() {
	this.e.addClassName('x');
	},

	deselect: function() {
	this.e.removeClassName('x');
	}
	});

	Aspect.add(X.prototype, "logging", {
	"after initialize": function(e) {
	log("initialzing with " + e);
	},

	// defaults to before
	"select": function() {
	log(" selecting: '" + this.e.className + "'");
	},

	"after select": function() {
	log(" selected: '" + this.e.className + "'");
	},

	"before deselect": function() {
	log("deselecting: '" + this.e.className + "'");
	},

	"after deselect": function() {
	log(" deselected: '" + this.e.className + "'");
	}
	});

	Event.observe(document, 'dom:loaded', function() {
	var x = new X($('e'));

	Aspect.add(x, 'fontColor', {
	select: function() {
	this.e.addClassName('y');
	},

	deselect: function() {
	this.e.removeClassName('y')
	}
	})
	x.select();
	x.deselect();

	Aspect.remove(x, 'fontColor')
	log("Removed fontColor aspect");
	x.select();
	x.deselect();

	Aspect.remove(X.prototype, 'logging')
	log("Removed logging aspect");
	x.select();
	});

	// ]]>
	</script>

	<div id="e">Div with content</div>
	</body>
	</html>