famousWidgets · charles-tai · May 10, 2014
diff --git a/app/index.html b/app/index.html
@@ -6,25 +6,25 @@
         <meta name="mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-        
+
         <link rel="stylesheet" type="text/css" href="lib/famous/core/famous.css" />
-        
+
         <!-- build:css(app/) css/app.css -->
         <link rel="stylesheet" type="text/css" href="styles/app.css" />
         <!-- bower:css -->
         <!-- endbower -->
         <!-- endbuild -->
-        
+
         <!-- build:js(app/) src/polyfills.js -->
         <script type="text/javascript" src="lib/famous-polyfills/functionPrototypeBind.js"></script>
         <script type="text/javascript" src="lib/famous-polyfills/classList.js"></script>
         <script type="text/javascript" src="lib/famous-polyfills/requestAnimationFrame.js"></script>
         <!-- endbuild -->
-        
+
         <!-- process:remove:dev -->
         <script type="text/javascript" src="src/main.js"></script>
         <!-- /process -->
-        
+
         <!-- process:remove:dist -->
         <script type="text/javascript" src="lib/requirejs/require.js" data-main="src/requireConfig"></script>
         <!-- /process -->

diff --git a/app/src/main.js b/app/src/main.js
@@ -6,12 +6,14 @@ define(function(require, exports, module) {
     var StateModifier = require('famous/modifiers/StateModifier');
     var CarouselView = require('./views/CarouselView');
     var ScrollItemView = require('./views/ScrollItemView');
+    var OptionsView = require('./views/OptionsView');
+    var AppView = require('./views/AppView');
     var Utility = require('famous/utilities/Utility');
     var Transform = require('famous/core/Transform');
 
     var mainContext = Engine.createContext();
     var scrollItemViews = [];
-
+    var appView = new AppView();
     // DEMO SCENARIOS
 
     // 1) Background Surfaces
@@ -100,7 +102,7 @@ define(function(require, exports, module) {
     //     lowerBound: 0.25,
     //     upperBound: 0.5,
     //     endDepth: 200
-    // });
+    // });s
 
 
     // HR DEMO
@@ -113,7 +115,7 @@ define(function(require, exports, module) {
     // //         carousel.subscribe(scrollItemView);
     // //     }
     // // };
-    
+
     // // 2) Z index with hack reactor logo
     // var createScrollItemArray = function (num, size) {
     //     for (var i = 0; i < num; i += 1) {
@@ -133,30 +135,48 @@ define(function(require, exports, module) {
     var createScrollItemArray = function (num, size) {
         for (var i = 0; i < num; i += 1) {
             var scrollItemView = new Surface({
-                content: "<img src='../content/images/doge.jpeg' height='" + size + "' width='" + size + "'>",
+                content: "<img src='../content/images/picasso.jpeg' height='" + size + "' width='" + size + "'>",
                 size: [size, size]
             });
-            scrollItemView.on('click', function () {
-                alert('Hello Hack Reactor!');
-            });
             scrollItemViews.push(scrollItemView);
             carousel.subscribe(scrollItemView);
         }
     };
 
     // CONFIGURATIONS
     // 1) Fading colors with square views
-    var carousel = new CarouselView({
-        startFade: 0.1,
-        rotateRadian: null
-    });
-
-    // 2) Z index with hack reactor logo
     // var carousel = new CarouselView({
-    //     endDepth: 100,
+    //     pageDamp: 0.8,
+    //     rails: true,
+    //     startFade: 0.1,
     //     rotateRadian: null
     // });
 
+    // Scrollview.DEFAULT_OPTIONS = {
+    //     direction: Utility.Direction.Y,
+    //     rails: true,
+    //     friction: 0.001,
+    //     drag: 0.0001,
+    //     edgeGrip: 0.5,
+    //     edgePeriod: 300,
+    //     edgeDamp: 1,
+    //     paginated: false,
+    //     pagePeriod: 500,
+    //     pageDamp: 0.8,
+    //     pageStopSpeed: 10,
+    //     pageSwitchSpeed: 0.5,
+    //     speedLimit: 10
+    // };
+
+
+    // 2) Z index with hack reactor logo
+    var carousel = new CarouselView({
+        edgeDamp: 0.1,
+        edgePeriod: 1000,
+        rotateRadian: null
+        // endDepth: 100
+    });
+
     // 3) Physics engine with z-index and doge pic
     // var carousel = new CarouselView({
     //     startFade: 0.1,
@@ -183,9 +203,20 @@ define(function(require, exports, module) {
 
     // var midHMod = new StateModifier({
     //     origin: [0.5, 0]
-    // });
+    // });]
+
+    var optionsView = new OptionsView();
+    var optionsModifier = new StateModifier({
+        size: [undefined,200],
+        origin: [0,1]
+    })
+
+
+    optionsView.pipe(appView);
 
     mainContext.setPerspective(500);
-    mainContext.add(carouselModifier).add(carousel);
+    mainContext.add(appView);
+    // appView.add(carouselModifier).add(carousel);
+    mainContext.add(optionsModifier).add(optionsView);
     // mainContext.add(midHMod).add(midHSurface);
 });
diff --git a/app/src/views/AppView.js b/app/src/views/AppView.js
@@ -0,0 +1,84 @@
+/*globals define*/
+define(function(require, exports, module) {
+    var View = require('famous/core/View');
+    var Surface = require('famous/core/Surface');
+    var Transform = require('famous/core/Transform');
+    var StateModifier = require('famous/modifiers/StateModifier');
+    var CarouselView = require('./CarouselView');
+    var ScrollItemView = require('./ScrollItemView');
+
+
+    /*
+     * @name AppView
+     * @constructor
+     * @description
+     */
+
+    function AppView() {
+        View.apply(this, arguments);
+        createScrollView.call(this);
+        _setListeners.call(this);
+    }
+
+    AppView.prototype = Object.create(View.prototype);
+    AppView.prototype.constructor = AppView;
+
+    AppView.DEFAULT_OPTIONS = {
+    };
+
+    function createScrollView(options) {
+        var scrollItemViews = [];
+        options = options ||
+        {
+            rotateRadian: null
+        };
+        var createScrollItemArray = function (num, size) {
+            for (var i = 0; i < num; i += 1) {
+                var scrollItemView = new Surface({
+                    content: "<img src='../content/images/picasso.jpeg' height='" + size + "' width='" + size + "'>",
+                    size: [size, size]
+                });
+                scrollItemViews.push(scrollItemView);
+                this.carousel.subscribe(scrollItemView);
+            }
+        }.bind(this);
+        this.carousel = new CarouselView(options);
+        this.carouselModifier = new StateModifier({
+            origin: [0, 0.5]
+        });
+
+        createScrollItemArray(100, 150);
+        this.carousel.sequenceFrom(scrollItemViews);
+
+        this.add(this.carouselModifier).add(this.carousel);
+    }
+
+    function _setListeners() {
+
+        this._eventInput.on('fade', function() {
+            this.carousel.setOptions({
+                startFade: 0.5,
+                endFade: 1
+            });
+        }.bind(this));
+
+        this._eventInput.on('depth', function() {
+            this.carousel.setOptions({endDepth:100});
+        }.bind(this));
+
+        this._eventInput.on('swivel', function() {
+            this.carousel.setOptions({rotateRadian: Math.PI / 2});
+        }.bind(this));
+
+        this._eventInput.on('bounce', function() {
+            this.carousel.setOptions({
+                edgeDamp: 0.1,
+                edgePeriod: 1000
+            });
+
+        }.bind(this));
+
+    }
+
+    module.exports = AppView;
+});
diff --git a/app/src/views/CarouselView.js b/app/src/views/CarouselView.js
@@ -40,25 +40,25 @@ define(function(require, exports, module) {
     CarouselView.prototype.constructor = CarouselView;
 
     CarouselView.DEFAULT_OPTIONS = {
+        drag: 0.0001,
+        edgeGrip: 0.00001,
         direction: Utility.Direction.X,
         paginated: false,
         startFade: 1,
         endFade: 1,
         startDepth: 1,
         endDepth: 1,
-        startDamp: 0.5,
-        endDamp: 0.05,
+        startDamp: 0.05,
+        endDamp: 0.005,
         startPeriod: 250,
         endPeriod: 3000,
         rotateRadian: Math.PI / 2,
         rotateOrigin: [0.5, 0.5],
-        maxVelocity: 30,
+        maxVelocity: 10,
         lowerBound: 0.45,
         upperBound: 0.55
     };
 
-    // var obj = {};
-    // window.obj = obj;
     function _output(node, offset, target) {
         var direction = this.options.direction;
         var depth = this.options.startDepth;
@@ -67,10 +67,6 @@ define(function(require, exports, module) {
         var size = node.getSize ? node.getSize() : this._contextSize;
         var position = offset + size[direction] / 2 - this._positionGetter();
 
-        // Investigating how to swivel the surface on entering screen
-        // if (!obj[node.index]) {
-        //     obj[node.index] = node;
-        // }
 
         // TRANSFORM FUNCTIONS
         var translateXY = _translateXY.call(this, offset);
@@ -85,7 +81,7 @@ define(function(require, exports, module) {
             size: size,
             opacity: opacity,
             target: {
-                origin: origin, 
+                origin: origin,
                 target: {
                     transform: transform,
                     target: node.render()
@@ -153,7 +149,6 @@ define(function(require, exports, module) {
 
         this.transitionableTransform.set(
             Transform.rotateY(position * Math.abs(e.velocity)),
-            // Transform.rotateY(position * Math.abs(e.velocity / maxVelocity)),
             {
                 method : 'spring',
                 period : this.options.startPeriod,

diff --git a/app/src/views/OptionsView.js b/app/src/views/OptionsView.js
@@ -0,0 +1,98 @@
+/*globals define*/
+define(function(require, exports, module) {
+    var View = require('famous/core/View');
+    var Surface = require('famous/core/Surface');
+    var Transform = require('famous/core/Transform');
+    var StateModifier = require('famous/modifiers/StateModifier');
+
+    /*
+     * @name OptionsView
+     * @constructor
+     * @description
+     */
+
+    function OptionsView() {
+        View.apply(this, arguments);
+        this.createSurfaces.call(this);
+        this._setListeners.call(this);
+    }
+
+    OptionsView.prototype = Object.create(View.prototype);
+    OptionsView.prototype.constructor = OptionsView;
+
+    OptionsView.DEFAULT_OPTIONS = {
+    };
+    OptionsView.prototype.createSurfaces = function() {
+        var surfaceMain = new Surface({
+            size: [undefined, 200],
+            content: 'hello',
+            properties: {
+                backgroundColor: 'gray',
+                opacity: 0.5
+            }
+        });
+        this.depthButton = new Surface({
+            size: [100,100],
+            content: 'give me depth',
+            properties: {
+                backgroundColor: 'green'
+            }
+        })
+        var depthButtonModifier = new StateModifier({
+            origin: [0., 0]
+        })
+        this.swivelButton = new Surface({
+            size: [100,100],
+            content: 'swivel me',
+            properties: {
+                backgroundColor: 'blue'
+            }
+        })
+        var swivelButtonModifier = new StateModifier({
+            origin: [0, 1]
+        })
+        this.bounceButton = new Surface({
+            size: [100,100],
+            content: 'bounce me',
+            properties: {
+                backgroundColor: 'orange'
+            }
+        })
+        var bounceButtonModifier = new StateModifier({
+            origin: [1, 0]
+        })
+        this.fadeButton = new Surface({
+            size: [100,100],
+            content: 'fade me',
+            properties: {
+                backgroundColor: 'yellow'
+            }
+        })
+        var fadeButtonModifier = new StateModifier({
+            origin: [1, 1]
+        })
+        var main = this.add(surfaceMain);
+        this.add(depthButtonModifier).add(this.depthButton);
+        this.add(swivelButtonModifier).add(this.swivelButton);
+        this.add(bounceButtonModifier).add(this.bounceButton);
+        this.add(fadeButtonModifier).add(this.fadeButton);
+    };
+
+    OptionsView.prototype._setListeners = function() {
+        this.depthButton.on('click', function() {
+            this._eventOutput.emit('depth');
+        }.bind(this));
+        this.swivelButton.on('click', function() {
+            this._eventOutput.emit('swivel');
+        }.bind(this));
+        this.bounceButton.on('click', function() {
+            this._eventOutput.emit('bounce');
+        }.bind(this));
+        this.fadeButton.on('click', function() {
+            console.log('fade');
+            this._eventOutput.emit('fade');
+        }.bind(this));
+
+    };
+    module.exports = OptionsView;
+});