modularity-rails 0.6.0 → 0.6.1

data/.gitignore

@@ -1,13 +1,15 @@
-*.gem
-*.rbc
 .bundle
 .config
+.DS_Store
 .yardoc
-Gemfile.lock
-InstalledFiles
-_yardoc
+*.gem
+*.rbc
+*.swp
+*.swo
 coverage
 doc/
+Gemfile.lock
+InstalledFiles
 lib/bundler/man
 pkg
 rdoc
@@ -15,3 +17,4 @@ spec/reports
 test/tmp
 test/version_tmp
 tmp
+_yardoc

data/Guardfile

@@ -0,0 +1,9 @@
+# A sample Guardfile
+# More info at https://github.com/guard/guard#readme
+
+guard 'livereload' do
+  watch(%r{spec/javascripts/.+})
+  watch(%r{vendor/assets/javascripts/.+})
+  # Rails Assets Pipeline
+  # watch(%r{(app|vendor)/assets/\w+/(.+\.(css|js|html)).*})  { |m| "/assets/#{m[2]}" }
+end

data/README.md

@@ -3,8 +3,12 @@
 Makes the [Modularity CoffeeScript](http://github.com/kevgo/modularity-coffeescript) library available to 
 Rails 3.1 applications. 
 
+Modularity is a pattern and framework for lightweight object-oriented JavaScript 
+that allows to compose functionally rich web pages in a clean and testable way 
+out of well structured and reusable components.
 
-## Installation
+
+# Installation
 
 Add this line to your application's Gemfile:
                          
@@ -19,25 +23,39 @@ $ bundle
 ```
 
 Finally, you have to load the modularity file into your application's javascript.
-The easiest way is to add it to `application.js`:
+The easiest way is to add it to `application.coffee`:
 
-```javascript
-/**                   
- *= require jquery
- *= require modularity
- */
+```coffeescript
+ # require jquery
+ # require modularity
 ```
 
 
-## Usage
+# Usage
+
+Modularity is a lightweight framework for building powerful AJAX applications.
+Modularity avoids magic and heavyness. It focusses on providing a pragmatic and interoperable foundation 
+for clean hand-written code bases. 
+Modularity provides practices to create code bases of incredible complexity that are still 
+nicely manageable and perform very well. 
+
+
+# Modules
+
+Modules are native CoffeeScript classes that are specialized for doing what most JavaScript running in browsers does: 
+managing a UI consisting of DOM elements, reacting to events that happen within that section, 
+representing application logic specific to that section, and providing high-level APIs for others to interact with the section.
+
+Each module has a container. The container is the outermost DOM element of a section. 
+Everything the module does must happen inside this container. 
+The module is responsible for managing the inner DOM-structure of the container.
 
-See [http://github.com/kevgo/modularity-coffeescript].
 
 ## Mixins
 
 Similar to Ruby mixins, mixins in Modularity allow to include orthogonal functional aspects defined in separate objects into a class.
-```coffeescript
 
+```coffeescript
 myMixin =
 
   # This will be called when an instance of a class that includes this mixin is created.
@@ -57,10 +75,28 @@ class MyModule extends Module
     super
 
     # ...
-
 ```
 
 
+## Reusable example modules and mixins.
+
+Modularity comes bundled with a bunch of example modules and mixins that can be used in production code.
+The example modules are located in `vendor/assets/javascripts/modules/` and _vendor/assets/javascripts/mixins_
+and must be explicitly required in your Rails files using the `require` commands of the asset pipeline.
+
+
+### Modules
+
+* __button.coffee__: A simple button. Fires the `clicked` event when anything inside the container is clicked. Uses the `clickable` mixin.  
+* __counter_button.coffee__: Similar to button, but includes the click count as data payload in the fired event.
+
+
+### Mixins
+
+* __clickable.coffee__: Including this mixins adds a 'clickable' aspect to your module, i.e. turns it into a button. Clicking anywhere inside the container makes it fire the 'clicked' event.
+* __closable.coffee__: Including this mixin makes a module closable. This means that when the user clicks on an embedded DOM element with the class 'CloseButton', a 'closing' event will be fired, and the whole module will be removed from the DOM.
+
+
 # Development
 
 ## Contributing
@@ -77,3 +113,16 @@ class MyModule extends Module
 ```bash
 $ evergreen run
 ```
+
+
+## Automatically refreshing the browser during development.
+
+Modularity-Rails comes with support for [LifeReload](https://github.com/mockko/livereload) via [Guard](https://github.com/guard/guard).
+
+* Install the LiveReload browser extension: [Chrome](https://chrome.google.com/webstore/detail/jnihajbhpnppcggbcgedagnkighmdlei)
+* Run the evergreen server: ```$ evergreen run```
+* Run the guard server: ``` $ bundle exec guard ```
+* Start the LiveReload plugin in Chrome (button in address bar).
+* Navigate to the test page that you want to observe.
+* Change and save code and see the browser reload.
+

data/lib/modularity-rails/version.rb

@@ -1,3 +1,3 @@
 module ModularityRails
-  VERSION = "0.6.0"
+  VERSION = "0.6.1"
 end

data/modularity-rails.gemspec

@@ -13,6 +13,8 @@ Gem::Specification.new do |s|
   s.add_dependency "rails", ">= 3.1.0"
   s.add_development_dependency "capybara-webkit"
   s.add_development_dependency "evergreen"
+  s.add_development_dependency "rb-fsevent" if RUBY_PLATFORM =~ /darwin/i
+  s.add_development_dependency "guard-livereload"
 
   s.files        = `git ls-files`.split("\n")
   s.executables  = `git ls-files`.split("\n").select{|f| f =~ /^bin/}

data/spec/javascripts/external/jasmine-jquery.js

@@ -0,0 +1,288 @@
+var readFixtures = function() {
+  return jasmine.getFixtures().proxyCallTo_('read', arguments);
+};
+
+var preloadFixtures = function() {
+  jasmine.getFixtures().proxyCallTo_('preload', arguments);
+};
+
+var loadFixtures = function() {
+  jasmine.getFixtures().proxyCallTo_('load', arguments);
+};
+
+var setFixtures = function(html) {
+  jasmine.getFixtures().set(html);
+};
+
+var sandbox = function(attributes) {
+  return jasmine.getFixtures().sandbox(attributes);
+};
+
+var spyOnEvent = function(selector, eventName) {
+  jasmine.JQuery.events.spyOn(selector, eventName);
+}
+
+jasmine.getFixtures = function() {
+  return jasmine.currentFixtures_ = jasmine.currentFixtures_ || new jasmine.Fixtures();
+};
+
+jasmine.Fixtures = function() {
+  this.containerId = 'jasmine-fixtures';
+  this.fixturesCache_ = {};
+  this.fixturesPath = 'spec/javascripts/fixtures';
+};
+
+jasmine.Fixtures.prototype.set = function(html) {
+  this.cleanUp();
+  this.createContainer_(html);
+};
+
+jasmine.Fixtures.prototype.preload = function() {
+  this.read.apply(this, arguments);
+};
+
+jasmine.Fixtures.prototype.load = function() {
+  this.cleanUp();
+  this.createContainer_(this.read.apply(this, arguments));
+};
+
+jasmine.Fixtures.prototype.read = function() {
+  var htmlChunks = [];
+
+  var fixtureUrls = arguments;
+  for(var urlCount = fixtureUrls.length, urlIndex = 0; urlIndex < urlCount; urlIndex++) {
+    htmlChunks.push(this.getFixtureHtml_(fixtureUrls[urlIndex]));
+  }
+
+  return htmlChunks.join('');
+};
+
+jasmine.Fixtures.prototype.clearCache = function() {
+  this.fixturesCache_ = {};
+};
+
+jasmine.Fixtures.prototype.cleanUp = function() {
+  jQuery('#' + this.containerId).remove();
+};
+
+jasmine.Fixtures.prototype.sandbox = function(attributes) {
+  var attributesToSet = attributes || {};
+  return jQuery('<div id="sandbox" />').attr(attributesToSet);
+};
+
+jasmine.Fixtures.prototype.createContainer_ = function(html) {
+  var container;
+  if(html instanceof jQuery) {
+    container = jQuery('<div id="' + this.containerId + '" />');
+    container.html(html);
+  } else {
+    container = '<div id="' + this.containerId + '">' + html + '</div>'
+  }
+  jQuery('body').append(container);
+};
+
+jasmine.Fixtures.prototype.getFixtureHtml_ = function(url) {  
+  if (typeof this.fixturesCache_[url] == 'undefined') {
+    this.loadFixtureIntoCache_(url);
+  }
+  return this.fixturesCache_[url];
+};
+
+jasmine.Fixtures.prototype.loadFixtureIntoCache_ = function(relativeUrl) {
+  var self = this;
+  var url = this.fixturesPath.match('/$') ? this.fixturesPath + relativeUrl : this.fixturesPath + '/' + relativeUrl;
+  jQuery.ajax({
+    async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
+    cache: false,
+    dataType: 'html',
+    url: url,
+    success: function(data) {
+      self.fixturesCache_[relativeUrl] = data;
+    },
+    error: function(jqXHR, status, errorThrown) {
+        throw Error('Fixture could not be loaded: ' + url + ' (status: ' + status + ', message: ' + errorThrown.message + ')');
+    }
+  });
+};
+
+jasmine.Fixtures.prototype.proxyCallTo_ = function(methodName, passedArguments) {
+  return this[methodName].apply(this, passedArguments);
+};
+
+
+jasmine.JQuery = function() {};
+
+jasmine.JQuery.browserTagCaseIndependentHtml = function(html) {
+  return jQuery('<div/>').append(html).html();
+};
+
+jasmine.JQuery.elementToString = function(element) {
+  return jQuery('<div />').append(element.clone()).html();
+};
+
+jasmine.JQuery.matchersClass = {};
+
+(function(namespace) {
+  var data = {
+    spiedEvents: {},
+    handlers:    []
+  };
+
+  namespace.events = {
+    spyOn: function(selector, eventName) {
+      var handler = function(e) {
+        data.spiedEvents[[selector, eventName]] = e;
+      };
+      jQuery(selector).bind(eventName, handler);
+      data.handlers.push(handler);
+    },
+
+    wasTriggered: function(selector, eventName) {
+      return !!(data.spiedEvents[[selector, eventName]]);
+    },
+
+    cleanUp: function() {
+      data.spiedEvents = {};
+      data.handlers    = [];
+    }
+  }
+})(jasmine.JQuery);
+
+(function(){
+  var jQueryMatchers = {
+    toHaveClass: function(className) {
+      return this.actual.hasClass(className);
+    },
+
+    toBeVisible: function() {
+      return this.actual.is(':visible');
+    },
+
+    toBeHidden: function() {
+      return this.actual.is(':hidden');
+    },
+
+    toBeSelected: function() {
+      return this.actual.is(':selected');
+    },
+
+    toBeChecked: function() {
+      return this.actual.is(':checked');
+    },
+
+    toBeEmpty: function() {
+      return this.actual.is(':empty');
+    },
+
+    toExist: function() {
+      return this.actual.size() > 0;
+    },
+
+    toHaveAttr: function(attributeName, expectedAttributeValue) {
+      return hasProperty(this.actual.attr(attributeName), expectedAttributeValue);
+    },
+
+    toHaveId: function(id) {
+      return this.actual.attr('id') == id;
+    },
+
+    toHaveHtml: function(html) {
+      return this.actual.html() == jasmine.JQuery.browserTagCaseIndependentHtml(html);
+    },
+
+    toHaveText: function(text) {
+      if (text && jQuery.isFunction(text.test)) {
+        return text.test(this.actual.text());
+      } else {
+        return this.actual.text() == text;
+      }
+    },
+
+    toHaveValue: function(value) {
+      return this.actual.val() == value;
+    },
+
+    toHaveData: function(key, expectedValue) {
+      return hasProperty(this.actual.data(key), expectedValue);
+    },
+
+    toBe: function(selector) {
+      return this.actual.is(selector);
+    },
+
+    toContain: function(selector) {
+      return this.actual.find(selector).size() > 0;
+    },
+
+    toBeDisabled: function(selector){
+      return this.actual.is(':disabled');
+    },
+
+    // tests the existence of a specific event binding
+    toHandle: function(eventName) {
+      var events = this.actual.data("events");
+      return events && events[eventName].length > 0;
+    },
+    
+    // tests the existence of a specific event binding + handler
+    toHandleWith: function(eventName, eventHandler) {
+      var stack = this.actual.data("events")[eventName];
+      var i;
+      for (i = 0; i < stack.length; i++) {
+        if (stack[i].handler == eventHandler) {
+          return true;
+        }
+      }
+      return false;
+    }
+  };
+
+  var hasProperty = function(actualValue, expectedValue) {
+    if (expectedValue === undefined) {
+      return actualValue !== undefined;
+    }
+    return actualValue == expectedValue;
+  };
+
+  var bindMatcher = function(methodName) {
+    var builtInMatcher = jasmine.Matchers.prototype[methodName];
+
+    jasmine.JQuery.matchersClass[methodName] = function() {
+      if (this.actual instanceof jQuery) {
+        var result = jQueryMatchers[methodName].apply(this, arguments);
+        this.actual = jasmine.JQuery.elementToString(this.actual);
+        return result;
+      }
+
+      if (builtInMatcher) {
+        return builtInMatcher.apply(this, arguments);
+      }
+
+      return false;
+    };
+  };
+
+  for(var methodName in jQueryMatchers) {
+    bindMatcher(methodName);
+  }
+})();
+
+beforeEach(function() {
+  this.addMatchers(jasmine.JQuery.matchersClass);
+  this.addMatchers({
+    toHaveBeenTriggeredOn: function(selector) {
+      this.message = function() {
+        return [
+          "Expected event " + this.actual + " to have been triggered on" + selector,
+          "Expected event " + this.actual + " not to have been triggered on" + selector
+        ];
+      };
+      return jasmine.JQuery.events.wasTriggered(selector, this.actual);
+    }
+  })
+});
+
+afterEach(function() {
+  jasmine.getFixtures().cleanUp();
+  jasmine.JQuery.events.cleanUp();
+});

data/spec/javascripts/mixins/closable_spec.coffee

@@ -0,0 +1,41 @@
+#= require spec_helper
+
+describe 'test environment setup', ->
+
+  it 'loading libraries', ->
+    load_modularity()
+    loadCS "/vendor/assets/javascripts/mixins/closable.coffee"
+
+    class window.ClosableModuleStandard extends Module
+      @mixin closable
+
+
+describe 'Closable', ->
+  template 'closable.html'
+
+  beforeEach ->
+    
+  describe 'embedded close button', ->
+    it 'finds the close button div automatically', ->
+      new ClosableModuleStandard('#test #closable1')
+      $('#test #closable1 .CloseButton').click()
+
+      expect($('#test #closable1').length).toEqual(0)
+
+
+  describe 'when clicking the close button', ->
+    it 'removes the container', ->
+      new ClosableModuleStandard('#test #closable1')
+      $('#test #closable1 .CloseButton').click()
+
+      expect($('#test #closable1').length).toEqual(0)
+      
+    
+    it "fires the 'closed' event", ->
+      closable_module = new ClosableModuleStandard('#test #closable1')
+      closable_module.bind_event('closed', (spy = jasmine.createSpy()))
+
+      $('#test #closable1 .CloseButton').click()
+
+      expect(spy).toHaveBeenCalled()
+      expect(spy.callCount).toEqual(1)

data/spec/javascripts/modularity_spec.coffee

@@ -1,21 +1,12 @@
-require('/spec/javascripts/external/jquery.min.js')
-require('/spec/javascripts/external/coffee-script.js')
-
-# Helper method to circumvent that Evergreen doesn't load CoffeeScript files.
-loadCS = (url, callback) ->
-  $.ajax
-    url: url
-    async: false
-    success: (data) ->
-      eval CoffeeScript.compile data
-      callback() if callback
-
-# Helper method to load the modularity library before the tests.
-describe 'modularity loader', ->
-  it 'loading Modularity library ...', ->
-    loadCS '/vendor/assets/javascripts/modularity.js.coffee?'+(new Date()).getTime()
-
-    # Test class.
+#= require spec_helper
+
+describe 'setting up test environment', ->
+
+  it 'loading libraries', ->
+    load_modularity()
+
+  it 'defining test classes', ->
+
     class window.TestModule extends Module
       constructor: (container) ->
         super
@@ -38,7 +29,7 @@ describe 'modularity', ->
       expect(alert).toHaveBeenCalled()
 
     it 'tries to load the DOM if the given container is a string', ->
-      new TestModule('#module_container')
+      new TestModule('#test #module_container')
       expect(alert).not.toHaveBeenCalled()
 
     it 'shows an error if the container is not a jQuery object', ->
@@ -46,11 +37,11 @@ describe 'modularity', ->
       expect(alert).toHaveBeenCalled()
 
     it 'shows an error if the container is an empty jQuery object', ->
-      new TestModule($('.zonk'))
+      new TestModule($('#test .zonk'))
       expect(alert).toHaveBeenCalled()
 
     it 'shows an error if the container has more than one elements', ->
-      new TestModule($('.double'))
+      new TestModule($('#test .double'))
       expect(alert).toHaveBeenCalled()
 
     it "allows to provide 'testing' in tests", ->
@@ -100,11 +91,11 @@ describe 'modularity', ->
       spyOn window, 'alert'
 
     it 'works', ->
-      $('#module_container').module(TestModule)
+      $('#test #module_container').module(TestModule)
       expect(alert).not.toHaveBeenCalled()
 
     it 'returns the created instance', ->
-      result = $('#module_container').module(Module)
+      result = $('#test #module_container').module(Module)
       expect(result).toBeDefined()
       expect(typeof result).toEqual('object')
 
@@ -113,7 +104,7 @@ describe 'modularity', ->
       expect(alert).toHaveBeenCalled()
 
     it 'returns an error if the jQuery object is empty.', ->
-      $('#zonk').module(Module)
+      $('#test #zonk').module(Module)
       expect(alert).toHaveBeenCalled()
 
 
@@ -124,7 +115,7 @@ describe 'modularity', ->
     mockContainer = null
 
     beforeEach ->
-      mockContainer = $('#module_container')
+      mockContainer = $('#test #module_container')
       module = new TestModule(mockContainer)
       spyOn window, 'alert'
 
@@ -203,7 +194,7 @@ describe 'modularity', ->
       mockGlobalContainer = null
 
       beforeEach ->
-        mockGlobalContainer = $('#module_container')
+        mockGlobalContainer = $('#test #module_container')
         spyOn(Module, 'global_event_container').andReturn(mockGlobalContainer)
 
       describe 'bind_global_event', ->

data/spec/javascripts/modules/button_spec.coffee

@@ -0,0 +1,45 @@
+#= require spec_helper
+
+describe 'test environment setup', ->
+
+  it 'loading libraries', ->
+    load_modularity()
+    loadCS "/vendor/assets/javascripts/mixins/clickable.coffee"
+    loadCS "/vendor/assets/javascripts/modules/button.coffee"
+
+
+describe 'Button', ->
+  template 'button.html'
+  
+  describe 'manual clicks', ->
+
+    it 'fires when clicking on the container directly', ->
+      button = new window.Button($('#test #button1'))
+      button.bind_event('clicked', (spy = jasmine.createSpy()))
+
+      button.container.click()
+
+      expect(spy).toHaveBeenCalled()
+      expect(spy.callCount).toEqual(1)
+
+
+    it 'fires when clicking embedded elements of the button', ->
+      button = new window.Button($('#test #button2'))
+      button.bind_event('clicked', (spy = jasmine.createSpy()))
+
+      button.container.find('.embedded').click()
+
+      expect(spy).toHaveBeenCalled()
+      expect(spy.callCount).toEqual(1)
+
+
+  describe 'programmatic clicks', ->
+
+    it 'programmatically clicks the button', ->
+      button = new window.Button($('#test #button2'))
+      spy = jasmine.createSpy()
+      button.bind_event('clicked', spy)
+
+      button.click()
+
+      expect(spy).toHaveBeenCalled()

data/spec/javascripts/modules/counter_button_spec.coffee

@@ -0,0 +1,64 @@
+#= require spec_helper
+
+describe 'test environment setup', ->
+
+  it 'loading libraries', ->
+    load_modularity()
+    loadCS "/vendor/assets/javascripts/mixins/clickable.coffee"
+    loadCS "/vendor/assets/javascripts/modules/button.coffee"
+    loadCS "/vendor/assets/javascripts/modules/counter_button.coffee"
+
+
+describe 'CounterButton', ->
+  template 'button.html'
+
+  describe 'standard button functionality', ->
+
+    describe 'manual clicks', ->
+
+      it 'fires when clicking on the container directly', ->
+        button = new window.CounterButton('#test #button1')
+        button.bind_event('clicked', (spy = jasmine.createSpy()))
+
+        button.container.click()
+
+        expect(spy).toHaveBeenCalled()
+        expect(spy.callCount).toEqual(1)
+
+
+      it 'fires when clicking embedded elements of the button', ->
+        button = new window.CounterButton('#test #button2')
+        button.bind_event('clicked', (spy = jasmine.createSpy()))
+
+        button.container.find('.embedded').click()
+
+        expect(spy).toHaveBeenCalled()
+        expect(spy.callCount).toEqual(1)
+
+    describe 'programmatic clicks', ->
+
+      it 'programmatically clicks the button', ->
+        button = new window.CounterButton('#test #button2')
+        spy = jasmine.createSpy()
+        button.bind_event('clicked', spy)
+
+        button.click()
+
+        expect(spy).toHaveBeenCalled()
+        
+  describe 'CounterButton specific functionality', ->
+
+    it 'provides the click counter as the event payload', ->
+      button = new window.CounterButton('#test #button1')
+      button.bind_event('clicked', (spy = jasmine.createSpy()))
+
+      button.container.click()
+      button.container.click()
+      button.container.click()
+
+      expect(spy.callCount).toEqual(3)
+      expect(spy.argsForCall[0][1]).toEqual(1)
+      expect(spy.argsForCall[1][1]).toEqual(2)
+      expect(spy.argsForCall[2][1]).toEqual(3)
+
+

data/spec/javascripts/spec_helper.coffee

@@ -0,0 +1,22 @@
+require('/spec/javascripts/external/jquery.min.js')
+require('/spec/javascripts/external/jasmine-jquery.js')
+require('/spec/javascripts/external/coffee-script.js')
+
+# Helper method to circumvent that Evergreen doesn't load CoffeeScript files.
+window.loadCS = (url, callback) ->
+  $.ajax
+    url: url
+    async: false
+    success: (data) ->
+      eval CoffeeScript.compile data
+      callback() if callback
+
+
+window.load_modularity = ->
+  loadCS "/vendor/assets/javascripts/modularity.js.coffee?#{(new Date()).getTime()}"
+
+
+beforeEach ->
+  @addMatchers
+    toHaveLength: (expected) ->
+      this.length == expected

data/spec/javascripts/templates/button.html

@@ -0,0 +1,3 @@
+<div id="button1">A normal button.</div>
+<div id="button2">A button with <span class="embedded"></span> elements.</div>
+

data/spec/javascripts/templates/closable.html

@@ -0,0 +1,10 @@
+<div id="closable1">
+  A closable section.
+  <div class="CloseButton"></div>
+</div>
+
+<div id="closable2">
+  A closable section with a custom close button.
+  <div class="CustomCloseButton"></div>
+</div>
+

data/vendor/assets/javascripts/mixins/clickable.coffee

@@ -0,0 +1,21 @@
+# This mixin adds a 'clickable' aspect to modules.
+# This means clicking anywhere on the module fires the 'clicked' event.
+window.clickable =
+
+  constructor: ->
+    @container.click @container_clicked
+
+
+  # Events that are fired by this mixin.
+  events:
+    clicked: 'clicked'
+
+  
+  # Programmatically click this clickable element.
+  # For testing and scripting.
+  click: -> @container.click()
+
+
+  # Event handler for clicks on this clickable element. 
+  container_clicked: -> @fire_event clickable.events.clicked
+

data/vendor/assets/javascripts/mixins/closable.coffee

@@ -0,0 +1,18 @@
+window.closable =
+
+  constructor: (container, close_button = undefined) ->
+    console.log close_button
+    close_button ||= @container.find('.CloseButton')
+    # TODO: add alert if no close button found.
+    close_button.click @close_button_clicked
+
+
+  # The events that can be fired by closable objects.
+  events:
+    closed: 'closed'
+
+
+  # Called when the button got clicked by the user or programmatically.
+  close_button_clicked: ->
+    @fire_event 'closed'
+    @container.remove()

data/vendor/assets/javascripts/modularity.js.coffee

@@ -19,14 +19,15 @@ class window.Module
 
 
     if @mixins?
-      for mixin in @mixins
+      for mixin_data in @mixins
         
         # Attach all properties from mixin to the prototype.
-        for methodName, method of mixin
-          @[methodName] = method
+        for methodName, method of mixin_data.mixin
+          unless @[methodName]
+            @[methodName] = => method.call(@, mixin_data.params)
 
         # Call constructor function from mixin.
-        mixin.constructor.apply @, arguments
+        mixin_data.mixin.constructor.apply @, arguments
 
 
   # Checks whether the given condition is true.
@@ -53,9 +54,10 @@ class window.Module
 
   # mixin = constructor of Draggable
   # self = Card
-  @mixin: (mixin) ->
-    @prototype.mixins = [] unless @prototype.mixins?
-    @prototype.mixins.push mixin
+  @mixin: (mixin, p...) ->
+    @prototype.mixins or= []
+    console.log p
+    @prototype.mixins.push({mixin: mixin, params: p})
 
 
   # GLOBAL EVENTS.

data/vendor/assets/javascripts/modules/button.coffee

@@ -0,0 +1,6 @@
+# A button module.
+# Responds to clicks on the container element.
+# The container element is expected to already be populated.
+class window.Button extends Module
+  @mixin clickable
+

data/vendor/assets/javascripts/modules/counter_button.coffee

@@ -0,0 +1,15 @@
+# A button that counts how often it is clicked.
+# This is implemented as a subclass of Button, 
+# to take advantage of the already existing functionality there.
+class window.CounterButton extends Button
+
+  constructor: ->
+    super
+
+    # Counts how often this button has been clicked so far.
+    @click_count = 0
+
+
+  # We override the event handler for the 'clicked' event here.
+  container_clicked: =>
+    @fire_event 'clicked', ++@click_count

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: modularity-rails
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.6.1
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-04-24 00:00:00.000000000 Z
+date: 2012-04-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
-  requirement: &70150578537300 !ruby/object:Gem::Requirement
+  requirement: &70322603498400 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,10 +21,10 @@ dependencies:
         version: 3.1.0
   type: :runtime
   prerelease: false
-  version_requirements: *70150578537300
+  version_requirements: *70322603498400
 - !ruby/object:Gem::Dependency
   name: capybara-webkit
-  requirement: &70150578536860 !ruby/object:Gem::Requirement
+  requirement: &70322603497980 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -32,10 +32,10 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *70150578536860
+  version_requirements: *70322603497980
 - !ruby/object:Gem::Dependency
   name: evergreen
-  requirement: &70150578536380 !ruby/object:Gem::Requirement
+  requirement: &70322603497520 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -43,7 +43,29 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *70150578536380
+  version_requirements: *70322603497520
+- !ruby/object:Gem::Dependency
+  name: rb-fsevent
+  requirement: &70322603497060 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: *70322603497060
+- !ruby/object:Gem::Dependency
+  name: guard-livereload
+  requirement: &70322603496640 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: *70322603496640
 description: Description of ModularityRails.
 email:
 - kevin.goslar@gmail.com
@@ -55,6 +77,7 @@ files:
 - .gitignore
 - .travis.yml
 - Gemfile
+- Guardfile
 - LICENSE
 - README.md
 - Rakefile
@@ -63,10 +86,21 @@ files:
 - lib/modularity-rails/version.rb
 - modularity-rails.gemspec
 - spec/javascripts/external/coffee-script.js
+- spec/javascripts/external/jasmine-jquery.js
 - spec/javascripts/external/jquery.min.js
+- spec/javascripts/mixins/closable_spec.coffee
 - spec/javascripts/modularity_spec.coffee
+- spec/javascripts/modules/button_spec.coffee
+- spec/javascripts/modules/counter_button_spec.coffee
+- spec/javascripts/spec_helper.coffee
+- spec/javascripts/templates/button.html
+- spec/javascripts/templates/closable.html
 - spec/javascripts/templates/test.html
+- vendor/assets/javascripts/mixins/clickable.coffee
+- vendor/assets/javascripts/mixins/closable.coffee
 - vendor/assets/javascripts/modularity.js.coffee
+- vendor/assets/javascripts/modules/button.coffee
+- vendor/assets/javascripts/modules/counter_button.coffee
 homepage: http://github.com/kevgo/modularity-rails
 licenses: []
 post_install_message: