Merge pull request #70 from hieuhuynh/master

Implement ability to augment uiActions in subclass
petermichaux · Nov 7, 2013 · e8ee292 · e8ee292
2 parents 92506f9 + 460d040
commit e8ee292
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 0 deletions.
diff --git a/src/ElementView.subclass.js b/src/ElementView.subclass.js
@@ -68,12 +68,39 @@ maria.ElementView.subclass(checkit, 'TodoView', {
     uiActions: {
     ...
 
+You can augment uiActions in your subclass by specifying the declarative
+moreUIActions property.
+
+    checkit.TodoView.subclass(checkit, 'ReminderView', {
+        moreUIActions: {
+            'click .reminder': 'onClickReminder'
+        },
+        properties: {
+            showReminder: function() {
+                this.find('.todo-reminder').style.display = 'block';
+            },
+            hideReminder: function() {
+                this.find('.todo-reminder').style.display = 'none';
+            }
+        }
+    });
+
+The ReminderView will inherit the properties defined in uiActions from
+TodoView and augment it with moreUIActions. The subclassing function
+will generate the equivalent of the following function.
+
+    checkit.TodoView.prototype.getUIActions = function () {
+        var uiActions = checkit.TodoView.superConstructor.prototype.getUIActions.call(this);
+        uiActions['click .reminder'] = 'onClickReminder';
+        return uiActions;
+    };
 */
 maria.ElementView.subclass = function(namespace, name, options) {
     options = options || {};
     var template = options.template;
     var templateName = options.templateName || name.replace(/(View|)$/, 'Template');
     var uiActions = options.uiActions;
+    var moreUIActions = options.moreUIActions;
     var properties = options.properties || (options.properties = {});
     if (!Object.prototype.hasOwnProperty.call(properties, 'getTemplate')) {
         if (template) {
@@ -92,12 +119,31 @@ maria.ElementView.subclass = function(namespace, name, options) {
             };
         }
     }
+    if (uiActions && moreUIActions) {
+        throw new Error('maria.ElementView.subclass: uiActions and moreUIActions cannot be defined in the same class. Please select only one.');
+    }
     if (uiActions) {
         if (!Object.prototype.hasOwnProperty.call(properties, 'getUIActions')) {
             properties.getUIActions = function() {
                 return uiActions;
             };
         }
+    }
+    if (moreUIActions) {
+        if (!Object.prototype.hasOwnProperty.call(properties, 'getUIActions')) {
+            properties.getUIActions = function() {
+                var uiActions = namespace[name].superConstructor.prototype.getUIActions.call(this);
+                for (var key in moreUIActions) {
+                    if (Object.prototype.hasOwnProperty.call(moreUIActions, key)) {
+                        uiActions[key] = moreUIActions[key];
+                    }
+                }
+                return uiActions;
+            };
+        }
+        uiActions = moreUIActions;
+    }
+    if (uiActions) {
         for (var key in uiActions) {
             if (Object.prototype.hasOwnProperty.call(uiActions, key)) {
                 var methodName = uiActions[key];

diff --git a/tst/ElementView.subclass-suite.js b/tst/ElementView.subclass-suite.js
@@ -118,6 +118,82 @@
             assert.same(uiActions0, app.Alpha.prototype.getUIActions());
         },
 
+        "test subclass UI actions sugar inherits superclass UI actions": function() {
+            var foo, bar,
+                app = {};
+
+            maria.ElementView.subclass(app, 'Alpha', {
+                uiActions: {
+                    'click div': 'onClickDiv',
+                    'mouseover div': 'onMouseoverDiv',
+                    'mousemove div': 'onMousemoveDiv'
+                }
+            });
+
+            app.Alpha.subclass(app, 'Beta', {
+                moreUIActions: {
+                    'dblclick div': 'onDblClickDiv',
+                    'mouseup div': 'onMouseupDiv',
+                    'mousemove div': 'onMousemoveOverwritten'
+                }
+            });
+
+            foo = new app.Alpha();
+            bar = new app.Beta();
+
+            assert.equals(foo.getUIActions(), {
+                'click div': 'onClickDiv',
+                'mouseover div': 'onMouseoverDiv',
+                'mousemove div': 'onMousemoveDiv'
+            });
+
+            assert.equals(bar.getUIActions(), {
+                'click div': 'onClickDiv',
+                'mouseover div': 'onMouseoverDiv',
+                'dblclick div': 'onDblClickDiv',
+                'mouseup div': 'onMouseupDiv',
+                'mousemove div': 'onMousemoveOverwritten'
+            });
+        },
+
+        "test dynamically changing superclass affect on subclass UI actions": function() {
+            var foo, bar,
+                app = {};
+
+            maria.ElementView.subclass(app, 'Alpha', {
+                uiActions: {
+                    'click div': 'onClickDiv'
+                }
+            });
+
+            app.Alpha.subclass(app, 'Beta', {
+                moreUIActions: {
+                    'dblclick div': 'onDblClickDiv'
+                }
+            });
+
+            foo = new app.Alpha();
+            bar = new app.Beta();
+
+            assert.equals(bar.getUIActions(), {
+                'click div': 'onClickDiv',
+                'dblclick div': 'onDblClickDiv'
+            });
+
+            app.Alpha.prototype.getUIActions = function () {
+                return {
+                    'click div': 'onClickOverwritten',
+                    'mouseover div': 'onMouseoverDiv'
+                };
+            };
+
+            assert.equals(bar.getUIActions(), {
+                'click div': 'onClickOverwritten',
+                'dblclick div': 'onDblClickDiv',
+                'mouseover div': 'onMouseoverDiv'
+            });
+        },
+
         "test subclass UI actions sugar creates handler functions": function() {
             var app = {};
             var uiActions = {