diff --git a/app/index.html b/app/index.html
index 375ddf7..4a57043 100644
--- a/app/index.html
+++ b/app/index.html
@@ -6,25 +6,25 @@
-
+
-
+
-
+
-
+
-
+
diff --git a/app/src/main.js b/app/src/main.js
index eb2308e..f37b086 100644
--- 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,12 +135,9 @@ define(function(require, exports, module) {
var createScrollItemArray = function (num, size) {
for (var i = 0; i < num; i += 1) {
var scrollItemView = new Surface({
- content: "
",
+ content: "
",
size: [size, size]
});
- scrollItemView.on('click', function () {
- alert('Hello Hack Reactor!');
- });
scrollItemViews.push(scrollItemView);
carousel.subscribe(scrollItemView);
}
@@ -146,17 +145,38 @@ define(function(require, exports, module) {
// 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);
});
\ No newline at end of file
diff --git a/app/src/views/AppView.js b/app/src/views/AppView.js
new file mode 100644
index 0000000..17418d4
--- /dev/null
+++ 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: "",
+ 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
index 6989551..f2770be 100644
--- 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
new file mode 100644
index 0000000..a471f6a
--- /dev/null
+++ 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;
+});
diff --git a/app/styles/app.css b/app/styles/app.css
index 35e0913..fed29f1 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1,4 +1,4 @@
html {
- /*background: #2B167B;*/
- background: #000000;
-}
\ No newline at end of file
+ background: black;
+ /*background: #000000;*/
+}
\ No newline at end of file