define(function(require, exports, module) {
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var Utility = require('famous/utilities/Utility');
var Easing = require('famous/transitions/Easing');
// will need to change this to correct directory later
var ReflowableScrollview = require("views/reflowableScrollview");
var mainContext = Engine.createContext();
// * @param {Number} [options.direction=Utility.Direction.Y] Using the direction helper found in the famous Utility
// * module, this option will lay out the Scrollview instance's renderables either horizontally
// * (x) or vertically (y). Utility's direction is essentially either zero (X) or one (Y), so feel free
// * to just use integers as well.
// * @param {Number} [duration=1000] represents length of time for reflowable animation
// * @param {String} [curve='linear'] easing curve for the reflowable animation
// * @param {Number} [debounceTimer=1000] amount of time delayed before triggering reflowable animation after resize
// * @param {Boolean} [gutter=false] whether a gutter should appear between each renderable
var reflowable = new ReflowableScrollview({
direction: Utility.Direction.Y,
duration: 1000,
curve: Easing.inOutBounce,
debounceTimer: 1000,
gutter: true
});
var surfaces = [];
var num = 100;
for (var i = 0; i < num; i += 1) {
var color = "hsl(" + (i * 360 / 10) + ", 100%, 50%)";
var surface = new Surface({
size: [100, 100],
content: '' + i,
properties: {
backgroundColor: color
}
});
reflowable.subscribe(surface);
surfaces.push(surface);
}
reflowable.sequenceFrom(surfaces);
mainContext.add(reflowable);
});
define(function(require, exports, module) {
'use strict';
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var Surface = require('famous/core/Surface');
var ImageSurface = require('famous/surfaces/ImageSurface');
var ReflowableScrollview = require('views/reflowableScrollview');
var Utility = require('famous/utilities/Utility');
var Easing = require('famous/transitions/Easing');
// DEMO SCENARIOS
// 1. Baseline - using defaults and same-sized colored surfaces
var reflowable = new ReflowableScrollview({
debounceTimer: 1000
});
var surfaces = [];
var num = 100;
for (var i = 0; i < num; i += 1) {
var color = "hsl(" + (i * 360 / 10) + ", 100%, 50%)";
var surface = new Surface({
size: [100, 100],
content: '' + i,
properties: {
backgroundColor: color
}
});
reflowable.subscribe(surface);
surfaces.push(surface);
}
// 2. Demonstrate gutter
// var reflowable = new ReflowableScrollview({
// debounceTimer: 1000,
// gutter: true
// };
// 3. Demonstrate different surface sizes
// var reflowable = new ReflowableScrollview({
// // direction: Utility.Direction.Y,
// // curve: Easing.inOutBounce,
// // duration: 200,
// debounceTimer: 1000,
// gutter: true
// });
// var surfaces = [];
// var num = 100;
// var sizeCounter = 1;
// for (var i = 0; i < num; i += 1) {
// var color = "hsl(" + (i * 360 / 10) + ", 100%, 50%)";
// var surface = new Surface({
// size: [ 50 * (sizeCounter % 2 + 1), 50 * (sizeCounter % 4 + 1) ],
// content: '' + i,
// properties: {
// backgroundColor: color
// }
// });
// sizeCounter++;
// reflowable.subscribe(surface);
// surfaces.push(surface);
// }
// 4. Demonstrate changing curves
// var reflowable = new ReflowableScrollview({
// curve: Easing.inOutBounce,
// debounceTimer: 1000,
// gutter: true
// });
// var surfaces = [];
// var num = 100;
// var sizeCounter = 1;
// for (var i = 0; i < num; i += 1) {
// var color = "hsl(" + (i * 360 / 10) + ", 100%, 50%)";
// var surface = new Surface({
// size: [ 50 * (sizeCounter % 2 + 1), 50 * (sizeCounter % 4 + 1) ],
// content: '' + i,
// properties: {
// backgroundColor: color
// }
// });
// sizeCounter++;
// reflowable.subscribe(surface);
// surfaces.push(surface);
// }
// ALWAYS INCLUDE
reflowable.sequenceFrom(surfaces);
var mainContext = Engine.createContext();
mainContext.add(reflowable);
});