I broke all the things

Making scroll working for ListView, inheriting from ScrollView like iOS.

Gruntfile.js

@@ -18,7 +18,23 @@ module.exports = function(grunt) {
           'js/utils/**/*.js',
 
           // Views
-          'js/views/**/*.js',
+          'js/views/view.js',
+
+          'js/views/scrollView.js',
+
+          'js/views/actionSheetView.js',
+          'js/views/checkboxView.js',
+          'js/views/headerBarView.js',
+          'js/views/listView.js',
+          'js/views/ListViewScroll.js',
+          'js/views/loadingView.js',
+          'js/views/modalView.js',
+          'js/views/navBarView.js',
+          'js/views/popupView.js',
+          'js/views/sideMenuView.js',
+          'js/views/slideBox.js',
+          'js/views/tabBarView.js',
+          'js/views/toggleView.js',
 
           // Controllers
           'js/controllers/**/*.js'

js/utils/utils.js

@@ -1,22 +1,59 @@
 (function(ionic) {
   
   ionic.Utils = {
-    /**
-     * extend method,
-     * also used for cloning when dest is an empty object
-     * @param   {Object}    dest
-     * @param   {Object}    src
-     * @parm	{Boolean}	merge		do a merge
-     * @returns {Object}    dest
-     */
-    extend: function extend(dest, src, merge) {
-      for (var key in src) {
-        if(dest[key] !== undefined && merge) {
-          continue;
-        }
-        dest[key] = src[key];
+     // Borrowed from Backbone.js's extend
+     // Helper function to correctly set up the prototype chain, for subclasses.
+     // Similar to `goog.inherits`, but uses a hash of prototype properties and
+     // class properties to be extended.
+    inherit: function(protoProps, staticProps) {
+      var parent = this;
+      var child;
+
+      // The constructor function for the new subclass is either defined by you
+      // (the "constructor" property in your `extend` definition), or defaulted
+      // by us to simply call the parent's constructor.
+      if (protoProps && protoProps.hasOwnProperty('constructor')) {
+        child = protoProps.constructor;
+      } else {
+        child = function(){ return parent.apply(this, arguments); };
       }
-      return dest;
+
+      // Add static properties to the constructor function, if supplied.
+      ionic.extend(child, parent, staticProps);
+
+      // Set the prototype chain to inherit from `parent`, without calling
+      // `parent`'s constructor function.
+      var Surrogate = function(){ this.constructor = child; };
+      Surrogate.prototype = parent.prototype;
+      child.prototype = new Surrogate;
+
+      // Add prototype properties (instance properties) to the subclass,
+      // if supplied.
+      if (protoProps) ionic.extend(child.prototype, protoProps);
+
+      // Set a convenience property in case the parent's prototype is needed
+      // later.
+      child.__super__ = parent.prototype;
+
+      return child;
     },
+
+    // Extend adapted from Underscore.js
+    extend: function(obj) {
+       var args = Array.prototype.slice.call(arguments, 1);
+       for(var i = 0; i < args.length; i++) {
+         var source = args[i];
+         if (source) {
+           for (var prop in source) {
+             obj[prop] = source[prop];
+           }
+         }
+       }
+       return obj;
+    }
   };
+
+  ionic.inherit = ionic.Utils.inherit;
+  ionic.extend = ionic.Utils.extend;
+
 })(window.ionic);

js/views/scrollView.js

@@ -23,57 +23,53 @@
     toiletSeat: 'cubic-bezier(0.05, 0.60, 0.05, 0.60)'
   };
 
-  ionic.views.ScrollView = function(opts) {
-    var _this = this;
+  ionic.views.Scroll = ionic.views.View.inherit({
+    initialize: function(opts) {
+      var _this = this;
 
-    // Extend the options with our defaults
-    opts = ionic.Utils.extend({
-      decelerationRate: ionic.views.ScrollView.prototype.DECEL_RATE_NORMAL,
-      dragThreshold: 10,
-      resistance: 2,
-      scrollEventName: 'momentumScrolled',
-      scrollEndEventName: 'momentumScrollEnd',
-      intertialEventInterval: 50,
-      mouseWheelSpeed: 20,
-      invertWheel: false,
-      isVerticalEnabled: true,
-      isHorizontalEnabled: false,
-      bounceEasing: EASING_FUNCTIONS.bounce,
-      bounceTime: 600 //how long to take when bouncing back in a rubber band
-    }, opts);
+      // Extend the options with our defaults
+      opts = ionic.Utils.extend({
+        decelerationRate: ionic.views.Scroll.prototype.DECEL_RATE_NORMAL,
+        dragThreshold: 10,
+        resistance: 2,
+        scrollEventName: 'momentumScrolled',
+        scrollEndEventName: 'momentumScrollEnd',
+        intertialEventInterval: 50,
+        mouseWheelSpeed: 20,
+        invertWheel: false,
+        isVerticalEnabled: true,
+        isHorizontalEnabled: false,
+        bounceEasing: EASING_FUNCTIONS.bounce,
+        bounceTime: 600 //how long to take when bouncing back in a rubber band
+      }, opts);
 
-    ionic.Utils.extend(this, opts);
+      ionic.Utils.extend(this, opts);
 
-    this.el = opts.el;
+      this.el = opts.el;
 
-    this.y = 0;
-    this.x = 0;
+      this.y = 0;
+      this.x = 0;
 
-    // Listen for drag and release events
-    ionic.onGesture('drag', function(e) {
-      _this._handleDrag(e);
-    }, this.el);
-    ionic.onGesture('release', function(e) {
-      _this._handleEndDrag(e);
-    }, this.el);
-    ionic.on('mousewheel', function(e) {
-      _this._wheel(e);
-    }, this.el);
-		ionic.on('DOMMouseScroll', function(e) {
-      _this._wheel(e);
-    }, this.el);
-    ionic.on(this.scrollEndEventName, function(e) {
-      _this._onScrollEnd(e);
-    }, this.el);
-    ionic.on('webkitTransitionEnd', function(e) {
-      _this._onTransitionEnd(e);
-    });
-  };
-
-  ionic.views.ScrollView.prototype = {
-    DECEL_RATE_NORMAL: 0.998,
-    DECEL_RATE_FAST: 0.99,
-    DECEL_RATE_SLOW: 0.996,
+      // Listen for drag and release events
+      ionic.onGesture('drag', function(e) {
+        _this._handleDrag(e);
+      }, this.el);
+      ionic.onGesture('release', function(e) {
+        _this._handleEndDrag(e);
+      }, this.el);
+      ionic.on('mousewheel', function(e) {
+        _this._wheel(e);
+      }, this.el);
+      ionic.on('DOMMouseScroll', function(e) {
+        _this._wheel(e);
+      }, this.el);
+      ionic.on(this.scrollEndEventName, function(e) {
+        _this._onScrollEnd(e);
+      }, this.el);
+      ionic.on('webkitTransitionEnd', function(e) {
+        _this._onTransitionEnd(e);
+      });
+    },
 
     /**
      * Scroll to the given X and Y point, taking 
@@ -541,6 +537,10 @@
         }
       });
     }
-  };
+  }, {
+    DECEL_RATE_NORMAL: 0.998,
+    DECEL_RATE_FAST: 0.99,
+    DECEL_RATE_SLOW: 0.996,
+  });
 
 })(ionic);

js/views/view.js

@@ -0,0 +1,13 @@
+(function(ionic) {
+'use strict';
+  ionic.views.View = function() {
+    this.initialize.apply(this, arguments);
+  };
+
+  ionic.views.View.inherit = ionic.inherit;
+
+  ionic.extend(ionic.views.View.prototype, {
+    initialize: function() {}
+  });
+
+})(window.ionic);

test/scroll.html

@@ -43,7 +43,7 @@
         s.firstElementChild.appendChild(li);
       }
 
-      var scroll = new ionic.views.ScrollView({
+      var scroll = new ionic.views.Scroll({
         el: s
       });
     </script>