1 files changed, 253 insertions, 0 deletions

diff --git a/node_modules/montage-user/ui/scroller.reel/scroller.js b/node_modules/montage-user/ui/scroller.reel/scroller.js
new file mode 100644
index 00000000..32df2906
--- /dev/null
+++ b/node_modules/montage-user/ui/scroller.reel/scroller.js
@@ -0,0 +1,253 @@
+var Montage = require("montage").Montage,
+    Component = require("ui/component").Component
+    TranslateComposer = require("ui/composer/translate-composer").TranslateComposer;
+
+exports.Scroller = Montage.create(Component, {
+
+    _scrollX: {
+        enumerable: false,
+        value: 0
+    },
+
+    scrollX: {
+        get: function () {
+            return this._scrollX;
+        },
+        set: function (value) {
+            this._scrollX = value;
+            this.needsDraw = true;
+        }
+    },
+
+    _scrollY: {
+        enumerable: false,
+        value: 0
+    },
+
+    scrollY: {
+        get: function () {
+            return this._scrollY;
+        },
+        set: function (value) {
+            this._scrollY = value;
+            this.needsDraw = true;
+        }
+    },
+
+    _maxTranslateX: {
+        value: 0
+    },
+
+    _maxTranslateY: {
+        value: 0
+    },
+
+    _axis: {
+        enumerable: false,
+        value: "auto"
+    },
+
+    axis: {
+        get: function () {
+            return this._axis;
+        },
+        set: function (value) {
+            this._axis = value;
+            this.needsDraw = true;
+        }
+    },
+
+    _displayScrollbars: {
+        enumerable: false,
+        value: "auto"
+    },
+
+    displayScrollbars: {
+        get: function () {
+            return this._displayScrollbars;
+        },
+        set: function (value) {
+            switch (value) {
+                case "vertical":
+                case "horizontal":
+                case "both":
+                case "auto":
+                    this._displayScrollbars = value;
+                    break;
+                default:
+                    this._displayScrollbars = "none";
+                    break;
+            }
+            this.needsDraw = true;
+        }
+    },
+
+    _hasMomentum: {
+        enumerable: false,
+        value: true
+    },
+
+    hasMomentum: {
+        get: function () {
+            return this._hasMomentum;
+        },
+        set: function (value) {
+            this._hasMomentum = value;
+        }
+    },
+
+    _hasBouncing: {
+        enumerable: false,
+        value: true
+    },
+
+    hasBouncing: {
+        get: function () {
+            return this._hasBouncing;
+        },
+        set: function (value) {
+            this._hasBouncing = value;
+        }
+    },
+
+    _momentumDuration: {
+        enumerable: false,
+        value: 650
+    },
+
+    momentumDuration: {
+        get: function () {
+            return this._momentumDuration;
+        },
+        set: function (value) {
+            this._momentumDuration = value;
+        }
+    },
+
+    _bouncingDuration: {
+        enumerable: false,
+        value: 750
+    },
+
+    bouncingDuration: {
+        get: function () {
+            return this._bouncingDuration;
+        },
+        set: function (value) {
+            this._bouncingDuration = value;
+        }
+    },
+
+    _content: {
+        enumerable: false,
+        value: null
+    },
+
+    templateDidLoad: {
+        value: function () {
+            var orphanedFragment,
+                currentContentRange = this.element.ownerDocument.createRange();
+
+            currentContentRange.selectNodeContents(this.element);
+            orphanedFragment = currentContentRange.extractContents();
+            this._content.appendChild(orphanedFragment);
+        }
+    },
+
+    handleTranslateStart: {
+        value: function(event) {
+            this._scrollBars.opacity = .5;
+        }
+    },
+
+    handleTranslateEnd: {
+        value: function(event) {
+            this._scrollBars.opacity = 0;
+        }
+    },
+
+    willDraw: {
+        enumerable: false,
+        value: function () {
+            this._left = this._element.offsetLeft;
+            this._top = this._element.offsetTop;
+            this._width = this._element.offsetWidth;
+            this._height = this._element.offsetHeight;
+            this._maxTranslateX = this._content.scrollWidth - this._width;
+            if (this._maxTranslateX < 0) {
+                this._.maxTranslateX = 0;
+            }
+            this._maxTranslateY = this._content.offsetHeight - this._height;
+            if (this._maxTranslateY < 0) {
+                this._maxTranslateY = 0;
+            }
+            var delegateValue = this.callDelegateMethod("didSetMaxScroll", {x: this._maxTranslateX, y: this._maxTranslateY});
+            if (delegateValue) {
+                this._maxTranslateX = delegateValue.x;
+                this._maxTranslateY = delegateValue.y;
+            }
+            switch (this._displayScrollbars) {
+                case "horizontal":
+                    this._scrollBars.displayHorizontal = true;
+                    this._scrollBars.displayVertical = false;
+                    break;
+                case "vertical":
+                    this._scrollBars.displayHorizontal = false;
+                    this._scrollBars.displayVertical = true;
+                    break;
+                case "both":
+                    this._scrollBars.displayHorizontal = true;
+                    this._scrollBars.displayVertical = true;
+                    break;
+                case "auto":
+                    if (this._maxTranslateX && this._maxTranslateY) {
+                        this._scrollBars.displayHorizontal = true;
+                        this._scrollBars.displayVertical = true;
+                    } else {
+                        if (this._maxTranslateX) {
+                            this._scrollBars.displayHorizontal = true;
+                            this._scrollBars.displayVertical = false;
+                        } else {
+                            if (this._maxTranslateY) {
+                                this._scrollBars.displayHorizontal = false;
+                                this._scrollBars.displayVertical = true;
+                            } else {
+                                this._scrollBars.displayHorizontal = false;
+                                this._scrollBars.displayVertical = false;
+                            }
+                        }
+                    }
+                    break;
+                case "none":
+                    this._scrollBars.displayHorizontal = false;
+                    this._scrollBars.displayVertical = false;
+                    break;