Aspect.js
Aspect.js adds "before", "after" and "instead" filters to existing classes and objects. Say draggable behaviour to photo, or ajax loading to tabs. Works fine with class inheritance.
Example: // class skeleton Photo = Class.create({ initialize: function(element) { this.element = $(element); this.element.observe('mousedown', function(e) { this.dragStart([e.pointerX(), e.pointerY()]); DraggableController.start(this); }.bindAsEventListener(this)); },
dragStart: function(pointer) {},
dragEnd: function(pointer) {},
drag: function(pointer) {}
});
// draggable behaviour
Aspect.add(Photo.prototype, 'moving', {
"after dragStart": function(pointer) {
var position = this.element.positionedOffset();
this.mouseOffset = [pointer[0] - position[0], pointer[1] - position[1]];
this.element.absolutize();
},
"after dragEnd": function(pointer) {
var style = this.element.style;
style.position = style.top = style.left = style.bottom = style.right = '';
},
"after drag": function(pointer) {
this.calculatePosition(pointer);
this.element.style.left = this.position[0] + 'px';
this.element.style.top = this.position[1] + 'px';
},
calculatePosition: function(pointer) {
this.position = [pointer[0] - this.mouseOffset[0], pointer[1] - this.mouseOffset[1]];
}
});
var photo = new Photo($('.photo'))
// selectable behaviuor for concrete photo
Aspect.add(photo, 'selectable', {
"after dragStart": function(e) {
this.element.addClassName('selected');
}
});
Released under the MIT License