voloko / aspectjs

Aspects for javascript

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