Famous.loaded(function (require) {
require('famous-sync/FastClick');
// ANIMATIONS!
var RegisterEasing = require('famous-animation/RegisterEasing');
// Physics!!
var Transitionable = require('famous/Transitionable');
var PhysicsTrans = require('famous-physics/utils/PhysicsTransition');
Transitionable.registerMethod('physics', PhysicsTrans);
var Surface = require('famous/Surface');
var Engine = require('famous/Engine');
var Utility = require('famous/Utility');
var Time = require('famous-utils/Time');
var KeyCodes = require('famous-utils/KeyCodes');
var SceneController = require('app/SceneController');
var LightboxScene = Lightbox.LightboxScene;
var BlankLightbox = Lightbox.BlankLightbox;
var mainCtx = Engine.createContext();
mainCtx.setPerspective(1000);
mainCtx.add(SceneController);
SceneController.addScenes({
'lightbox': LightboxScene,
'blank': BlankLightbox
});
SceneController.setScene('lightbox');
Engine.on('keydown', function (e) {
if (e.keyCode == KeyCodes.LEFT_ARROW) {
SceneController.prev();
} else if (e.keyCode == KeyCodes.RIGHT_ARROW) {
SceneController.next();
}
});
});
define(function(require, exports, module) {
var View = require('famous/View');
var FM = require('famous/Matrix');
var Surface = require('famous/Surface');
var Modifier = require('famous/Modifier');
var Easing = require('famous-animation/Easing');
// Physics!!
var Transitionable = require('famous/Transitionable');
var PhysicsTrans = require('famous-physics/utils/PhysicsTransition');
Transitionable.registerMethod('physics', PhysicsTrans);
/*
* @constructor
*/
function Counter () {
View.apply(this, arguments);
this.eventInput.pipe( this.eventOutput );
//
this.surfaces = [];
this.mods = [];
this._positions = {
prev: 0,
curr: 1,
next: 2
}
// STATE
this._currSelected = 1;
this.value = this.options.defaultValue;
if( localStorage ) {
var stored = localStorage.getItem( this.options.localStorageId );
if( stored ) {
this.value = parseInt( stored );
}
}
initRotations.call( this );
init.call( this );
}
Counter.prototype = Object.create( View.prototype );
Counter.prototype.constructor = Counter;
Counter.prototype.getSize = function () {
return this.currNumber.getSize();
}
Counter.DEFAULT_OPTIONS = {
size: [200, 60],
numberClasses: [ 'counter-number' ],
numberProperties: {
'textAlign': 'right',
},
radius: 75,
curve: {
method: 'physics',
spring: {
period : 700,
dampingRatio : 0.25
},
wall: false,
v: -0.001
},
rotation: Math.PI * .25,
defaultValue: 0,
localStorageId: 'famous-counter',
useLocalStorage: true
}
function init () {
var positions = [ this.rotations.prev, this.rotations.curr, this.rotations.next ]
for( var i = 0; i < 3; i++ ) {
var surface = new Surface({
size: this.options.size,
properties: this.options.numberProperties,
content: this.value + '' ,
classes: this.options.numberClasses
});
var mod = new Modifier({
transform: positions[i],
opacity: 0
});
this.node.add( mod ).link( surface );
this.surfaces.push( surface );
this.mods.push( mod );
}
// show initial
this.mods[this._currSelected].setOpacity( 1, this.options.curve );
}
function initRotations () {
var rotation = this.options.rotation;
this.rotations = {
prev : FM.aboutOrigin([0,0,-this.options.radius], FM.rotateX( rotation )),
curr : FM.aboutOrigin([0,0,-this.options.radius], FM.rotateX( 0 )),
next : FM.aboutOrigin([0,0,-this.options.radius], FM.rotateX( -rotation ))
}
}
// public methods
Counter.prototype.subtract = function ( num ) {
this.value -= num;
this._setNextToValue();
var prev = currentToPrev.call( this );
var curr = nextToCurrent.call( this );
var next = prevToNext.call( this );
this._currSelected = curr;
this._storage();
}
Counter.prototype.add = function ( num ) {
this.value += num;
this._setPrevToValue();
var prev = nextToPrevious.call( this );
var curr = prevToCurrent.call( this );
var next = currentToNext.call( this );
this._currSelected = curr;
this._storage();
}
Counter.prototype._storage = function () {
if( localStorage ) {
localStorage.setItem( this.options.localStorageId, this.value );
}
}
Counter.prototype.addOne = function () {
this.add( 1 );
}
Counter.prototype.subOne = function () {
this.subtract( 1 );
}
Counter.prototype.get = function () {
return this._value;
}
// content sets
Counter.prototype._setToValue = function ( surface ) {
surface.setContent( this.value + '' );
}
Counter.prototype._setPrevToValue = function () {
var surface = this.surfaces[ getPrev.call(this) ];
this._setToValue( surface );
}
Counter.prototype._setNextToValue = function () {
var surface = this.surfaces[ getNext.call(this) ];
this._setToValue( surface );
}
Counter.prototype.getSize = function () {
return this.options.size;
}
// private methods
function getPrev () {
var index = (this._currSelected - 1 ) % 3;
return index == -1 ? 2 : index;
}
function getNext () {
return ( this._currSelected + 1 ) % 3;
}
// adding animations
function currentToNext ( callback ) {
var current = this.mods[ this._currSelected ];
current.halt();
current.setTransform( this.rotations.next, this.options.curve, callback );
current.setOpacity( 0, this.options.curve );
return this._currSelected;
}
function prevToCurrent ( callback ) {
var index = getPrev.call( this );
var prev = this.mods[ index ];
prev.halt();
prev.setTransform( this.rotations.curr, this.options.curve, callback );
prev.setOpacity( 1, this.options.curve );
return index;
}
function nextToPrevious ( ) {
var index = getNext.call( this );
var next = this.mods[ index ];
next.halt();
next.setTransform( this.rotations.prev );
next.setOpacity( 0 );
return index;
}
// subtracting animations
function currentToPrev () {
var current = this.mods[ this._currSelected ];
current.halt();
current.setTransform( this.rotations.prev, this.options.curve, callback );
current.setOpacity( 0, this.options.curve );
}
function nextToCurrent () {
var index = getNext.call( this );
var next = this.mods[ index ];
next.halt();
next.setTransform( this.rotations.curr, this.options.curve, callback);
next.setOpacity( 1, this.options.curve );
return index;
}
function prevToNext () {
var index = getPrev.call( this );
var prev = this.mods[ index ];
prev.halt();
prev.setTransform( this.rotations.next );
prev.setOpacity( 0 );
return index;
}
module.exports = Counter;
});
define(function(require, exports, module) {
// Famous
var FamousSurface = require('famous/Surface');
var FM = require('famous/Matrix');
var FT = require('famous/Modifier');
var Modifier = require('famous/Modifier');
var Engine = require('famous/Engine');
var RegisterEasing = require('famous-animation/RegisterEasing');
var KeyCodes = require('famous-utils/KeyCodes');
var Utils = require('famous-utils/Utils');
var TorqueRenderable = require('app/widgets/TorqueRenderable');
var SplitImages = require('app/widgets/SplitImages');
var SceneTransitions = require('app/SceneTransitions');
var Interface = require('core/Interface');
var FontFeedback = require('famous-feedback/FontFeedback');
// Physics!!
var Transitionable = require('famous/Transitionable');
var PhysicsTrans = require('famous-physics/utils/PhysicsTransition');
Transitionable.registerMethod('physics', PhysicsTrans);
// SOUNDS
var SoundPlayer = require('famous-audio/SoundPlayer');
// Scene
var Scene = require('famous-scene/Scene');
// COUNTER!
var CounterView = require('app/scenes/CounterView');
// UI
var AutoUI = require('famous-ui/AutoUI');
function BatmanScene() {
document.body.style.backgroundColor = '#222';
Scene.apply(this, arguments);
// Button
this.split;
this.torque;
// UI
this.ui;
this.autoUI;
this.labelProperties;
this.descriptionProperties;
// Feedback
this.lasers;
// Audio
this.audio;
this.initLasers();
this.initAudio();
this.initButton();
this.initUI();
this.events();
}
BatmanScene.prototype = Object.create(Scene.prototype);
BatmanScene.prototype.constructor = BatmanScene;
BatmanScene.NAME = 'Ono-mato-poeia';
BatmanScene.IMAGE = 'img/splitImage5/batman.svg';
BatmanScene.DEFAULT_OPTIONS = {
torqueSize: [400, 400]
}
BatmanScene.prototype.events = function () {
this.torque.on('forceApplied', CounterView.add.bind( CounterView, 1));
this.torque.on('forceApplied', this.audio.playSound.bind(this.audio, 0, 1 ));
this.torque.pipe( this.lasers );
Engine.on('resize', Utils.debounce( this.setTorquePos.bind(this), 150));
}
BatmanScene.prototype.setTorquePos = function () {
this.torque.setTransform( FM.translate(
window.innerWidth * 0.5 - this.options.torqueSize[0] * 0.5,
window.innerHeight * 0.5 - this.options.torqueSize[1] * 0.5), {
curve: 'inOutBackNorm',
duration: 500
});
}
BatmanScene.prototype.initLasers= function () {
this.lasers = new FontFeedback({
fontContent: [
'h', 'j', 'k', 'l','q', 's', 'z', '0', '5', 'u', 'C', 'D', 'G', 'J', 'L'
],
fontProperties: {
//'background-color': 'rgba( 255, 255, 255, 0.7)',
//'background-color': '#a07cb7',
'textAlign': 'center',
'padding': '15px',
'borderRadius': '5px',
//'color': '#d94626'
'color': '#51c8ee',
},
size: [320, 320],
curve: {
curve: 'outBackNorm',
duration: 2000
},
opacityCurve: {
curve: 'outSineNorm',
duration: 2200
},
zDepth: 10
});
this.node.add(this.lasers );
}
BatmanScene.prototype.initAudio = function () {
this.audio = new SoundPlayer([
'sounds/punch_02.wav'
]);
}
BatmanScene.prototype.initButton = function () {
this.split = new SplitImages({
images: [
'img/splitImage5/0.svg',
'img/splitImage5/1.svg'
],
depth: 20,
size: this.options.torqueSize
});
this.torque = new TorqueRenderable({
views: [this.split],
forceStrength: 0.50,
forceSpringDamping: 0.35,
forceSpringPeriod: 1100,
torqueStrength: 0.2,
torquePeriod: 12
});
this.setTorquePos();
this.node.add( this.torque );
}
BatmanScene.prototype.initUI = function () {
this.labelProperties = {
'borderBottom' : '1px solid white',
'color' : 'rgba( 255, 255, 255, 1 )',
'fontSize': '16px'
}
this.descriptionProperties = {
'color' : 'rgba( 200, 200, 200, 1 )',
'fontSize': '14px'
}
this.autoUI = [
{
type: 'label',
uiOptions: {
content: 'IMAGE',
properties: this.labelProperties
}
},
{
type: 'label',
uiOptions: {
content: 'This changes the scale of the layers of images.',
properties: this.descriptionProperties
}
},
{
type: 'slider',
callback: this.split.setDepth.bind( this.split ),
uiOptions: {
range: [0, 100],
name: 'Depth',
defaultValue: this.split.options.depth
}
},
{
type: 'label',
uiOptions: {
content: 'TORQUE SPRING',
properties: this.labelProperties
}
},
{
type: 'label',
uiOptions: {
content: 'Torque controls the rotation of the button.',
properties: this.descriptionProperties
}
},
{
type: 'slider',
object: this.torque.options,
key: 'torquePeriod',
callback: this.torque.setTorqueSpringOpts.bind( this.torque ),
uiOptions: {
range: [0.5, 15],
name: 'Duration',
defaultValue: this.torque.options.torquePeriod
}
},
{
type: 'slider',
object: this.torque.options,
key: 'torqueStrength',
callback: this.torque.setTorque.bind( this.torque ),
uiOptions: {
range: [0.00005, 0.5],
name: 'Force',
defaultValue: this.torque.options.torqueStrength
}
},
{
type: 'label',
uiOptions: {
content: 'FORCE SPRING',
properties: this.labelProperties
}
},
{
type: 'label',
uiOptions: {
content: 'Force controls the depth of the button when it is clicked.',
properties: this.descriptionProperties
}
},
{
type: 'slider',
object: this.torque.options,
key: 'forceStrength',
callback: this.torque.setForce.bind( this.torque ),
uiOptions: {
range: [0.05, 5],
name: 'Force Strength',
defaultValue: this.torque.options.forceStrength
}
},
{
type: 'slider',
object: this.torque.options,
key: 'forceSpringDamping',
callback: this.torque.setForceSpringOpts.bind( this.torque ),
uiOptions: {
range: [0.00005, 0.9],
name: 'Force Spring Damping',
defaultValue: this.torque.options.forceSpringDamping
}
},
{
type: 'slider',
object: this.torque.options,
key: 'forceSpringPeriod',
callback: this.torque.setForceSpringOpts.bind( this.torque ),
uiOptions: {
range: [100, 2000],
name: 'Force Spring Period',
defaultValue: this.torque.options.forceSpringPeriod
}
}
]
this.ui = new Interface();
Engine.pipe( this.ui );
this.ui.setCurrentObject( this );
this.node.add( this.ui );
}
BatmanScene.prototype.activate = function ( callback, direction ) {
if( direction == 'next' ) {
SceneTransitions.sceneFadeInLeft( callback );
} else {
SceneTransitions.sceneFadeInRight( callback );
}
}
BatmanScene.prototype.deactivate = function ( callback, direction ) {
if( direction == 'next' ) {
SceneTransitions.sceneFadeLeft( callback );
} else {
SceneTransitions.sceneFadeRight( callback );
}
}
module.exports = BatmanScene;
});
define(function(require, exports, module) {
var Engine = require('famous/Engine');
var Surface = require('famous/Surface');
var Modifier = require('famous/Modifier');
var FM = require('famous/Matrix');
var View = require('famous/View');
var Easing = require('famous-animation/Easing');
var GenericSync = require('famous-sync/GenericSync');
var Transitionable = require('famous/Transitionable');
var SpringTransition = require('famous-physics/utils/SpringTransition');
var Scrollview = require('famous-views/Scrollview');
var ContainerSurface = require('famous/ContainerSurface');
var Utility = require('famous/Utility');
var Utils = require('famous-utils/Utils');
var ProfilePicsView = require('./ProfilePicsView');
var NameView = require('./NameView');
var TextView = require('./TextView');
var ArticleView = require('../ArticleViews/ArticleView');
var FooterView = require('./FooterView');
Transitionable.registerMethod('spring', SpringTransition);
function ArticleStoryView() {
View.apply(this, arguments);
this.flipable = true;
this.closed = true;
this.contentWidth = window.innerWidth - 2*this.options.margin;
createSync.call(this);
createCard.call(this);
createProfilePic.call(this);
createName.call(this);
createText.call(this);
createArticle.call(this);
createFooter.call(this);
function createSync() {
this.pos = new Transitionable(0);
this.sync = new GenericSync(function() {
return this.pos.get();
}.bind(this), {direction: Utility.Direction.Y});
this.sync.on('update', function(data) {
this.closed = false;
if(this.progress !== 1) return;
if(this.open && this.article.atTop && data.v > 0) {
this.articleScale.set(0.875, this.options.curve);
this.articleTop.set(-68, this.options.curve);
}
if(this.article.atTop && data.v > 0) { // closing top
this.article.disableScroll();
this.open = false;
}
if(!this.open) {
this.pos.set(data.p);
}
}.bind(this));
this.sync.on('end', function(data) {
console.log(this.angle, data.v)
if(this.angle < Math.PI/2) {
if(data.v > this.options.velThreshold && this.article.atTop) {
this.flipClose();
} else {
this.flipOpen();
}
} else {
if(data.v < -this.options.velThreshold) {
this.flipOpen();
} else {
this.flipClose();
}
}
}.bind(this));
}
function createCard() {
this.card = new Surface({
properties: {
borderRadius: '5px',
backgroundColor: 'white'
}
});
this.card.pipe(this.eventOutput);
}
function createProfilePic() {
this.profilePicsView = new ProfilePicsView({
scale: this.options.scale,
urls: this.options.profilePics
});
this.profilePicsView.pipe(this.eventOutput);
}
function createName() {
this.nameView = new NameView({
name: this.options.name
});
this.nameView.pipe(this.eventOutput);
}
function createText() {
if(!this.options.text) return;
this.textView = new TextView({
text: this.options.text,
time: this.options.time,
photos: true
});
this.textView.pipe(this.eventOutput);
}
function createArticle() {
this.article = new ArticleView({
scale: this.options.scale,
content: this.options.content,
thumbSm: this.options.thumbSm,
thumbLg: this.options.thumbLg,
});
this.article.pipe(this.eventOutput);
this.articleScale = new Transitionable(0.875);
this.articleTop = new Transitionable(-68);
}
function createFooter() {
this.footer = new FooterView({
likes: this.options.likes,
comments: this.options.comments
});
this.footer.pipe(this.eventOutput);
}
}
ArticleStoryView.prototype = Object.create(View.prototype);
ArticleStoryView.prototype.constructor = ArticleStoryView;
ArticleStoryView.DEFAULT_OPTIONS = {
scale: null,
name: null,
profilePics: null,
text: null,
content: null,
thumbSm: null,
thumbLg: null,
time: null,
likes: null,
comments: null,
margin: 20,
curve: {
duration: 200,
curve: 'easeInOut'
},
velThreshold: 1
};
ArticleStoryView.prototype.getSize = function() {
};
ArticleStoryView.prototype.setProgress = function(progress) {
this.progress = progress;
};
ArticleStoryView.prototype.map = function(start, end, clamp) {
return Utils.map(this.progress, 0, 1, start, end, clamp);
};
ArticleStoryView.prototype.enableFlip = function() {
this.article.pipe(this.sync);
};
ArticleStoryView.prototype.disableFlip = function() {
this.article.unpipe(this.sync);
};
ArticleStoryView.prototype.flipOpen = function() {
this.pos.set(-320, this.options.curve);
this.articleScale.set(1, this.options.curve);
this.articleTop.set(0, this.options.curve);
this.closed = false;
this.open = true;
this.article.enableScroll();
this.article.enable = true;
};
ArticleStoryView.prototype.flipClose = function() {
this.pos.set(0, this.options.curve, function() {
this.article.enable = false;
this.closed = true;
}.bind(this));
this.articleScale.set(0.875, this.options.curve);
this.articleTop.set(-68, this.options.curve);
};
ArticleStoryView.prototype.render = function() {
var pos = this.pos.get();
this.angle = Utils.map(pos, 0, -320, Math.PI, 0, true);
this.article.setAngle(this.angle);
var articleScale = this.articleScale.get();
var namePos = this.map(120, 85);
var textPos = this.map(140, 105);
var photoPos = this.map(-20, this.articleTop.get());
var footerPos = this.map(48, 0);
var profilePicScale = this.map(1/3/this.options.scale, 0.5);
this.profilePicsView.setProgress(this.progress);
this.nameView.fade(this.progress);
this.textView.fade(this.progress);
this.open = this.angle === 0;
if(this.open) {
this.article.articleBottom.noShadow();
} else {
this.article.articleBottom.shadow();
}
this.spec = [];
this.spec.push(this.card.render());
this.spec.push({
transform: FM.translate(this.options.margin, this.options.margin, 0),
target: this.profilePicsView.render()
});
this.spec.push({
transform: FM.translate(this.options.margin, namePos, 0),
target: this.nameView.render()
});
if(this.textView) {
this.spec.push({
transform: FM.translate(this.options.margin, textPos, 0),
size: [this.options.contentWidth, window.innerHeight - textPos - this.options.margin],
target: {
target: this.textView.render()
}
});
}
this.spec.push({
origin: [0.5, 0],
transform: FM.move(FM.scale(articleScale, articleScale, 1), [0, photoPos, 0.0001]),
size: [window.innerWidth, window.innerHeight],
target: {
target: this.article.render()
}
});
this.spec.push({
transform: FM.translate(this.options.margin, window.innerHeight - this.footer.getSize()[1], 0),
opacity: Easing.inOutQuadNorm.call(this, this.progress),
target: this.footer.render()
});
return this.spec;
};
module.exports = ArticleStoryView;
});
define(function(require, exports, module) {
var Engine = require('famous/Engine');
var Surface = require('famous/Surface');
var Modifier = require('famous/Modifier');
var FM = require('famous/Matrix');
var Utility = require('famous/Utility');
var Scene = require('famous-scene/Scene');
var Utils = require('famous-utils/Utils');
var KeyCodes = require('famous-utils/KeyCodes');
var Easing = require('famous-animation/Easing');
var Time = require('famous-utils/Time');
// Physics!!
var Transitionable = require('famous/Transitionable');
var PhysicsTrans = require('famous-physics/utils/PhysicsTransition');
Transitionable.registerMethod('physics', PhysicsTrans);
var NextButton = require('./NextButton');
var Signup = require('./Signup');
var UI = require('./UI');
function Interface(options)
{
Scene.apply(this, arguments);
this.UI = new UI({
offset: this.options.offset,
buttonSize: this.options.buttonSize
});
this.nextButton = new NextButton({
offset: this.options.offset,
buttonSize: this.options.buttonSize
});
this.signup = new Signup({
offset: this.options.offset,
buttonSize: this.options.buttonSize,
textInputScale: this.options.textInputScale,
submitScale: this.options.submitScale
});
this._uiHidden = false;
this.node.add( this.signup );
this.node.add( this.nextButton );
this.node.add( this.UI );
this.nextButton.show();
window.s = this;
}
Interface.prototype = Object.create(Scene.prototype);
Interface.prototype.constructor = Interface;
Interface.DEFAULT_OPTIONS = {
buttonSize: [40, 40],
offset: [20, 20],
submitScale: 2,
textInputScale: 6,
uiFadeTransition: {
curve: Easing.inOutBackNorm,
duration: 400
},
uiScaleTransition: {
curve: Easing.inOutCubicNorm,
duration: 400
},
hoverTransition: {
curve: Easing.inOutSineNorm,
duration: 800
},
hideAllTransition: {
curve: Easing.inOutBackNorm,
duration: 800
},
}
Interface.prototype.hideAllUI = function () {
this._uiHidden = true;
this.signup.hideAll();
this.UI.hideAll();
this.nextButton.hideAll();
}
Interface.prototype.showAllUI = function () {
this._uiHidden = false;
this.signup.showAll();
this.UI.showAll();
this.nextButton.showAll();
}
Interface.prototype.setCurrentObject = function(obj) {
this.UI.setCurrentObject( obj );
};
Interface.prototype.resize = function(event)
{
this.width = Utils.getWidth();
this.height = Utils.getHeight();
if( !this._uiHidden) {
this.signup.showLogo();
}
this.nextButton.resize();
this.signup.resize();
this.UI.resize();
};
Interface.prototype.mousemove = function(event)
{
if (this._uiHidden) return;
var threshold = Math.max(this.height/3.0,
this.options.buttonSize[0] * (this.options.textInputScale + this.options.submitScale) +
this.options.offset[0]*3);
this.UI.mousemove( event, threshold );
this.nextButton.mousemove( event, threshold );
this.signup.mousemove( event, threshold );
};
Interface.prototype.update = function()
{
if(!this.initForm) {
this.initForm = this.signup.formEvents() ? true : false;
}
};
module.exports = Interface;
});
define(function(require, exports, module) {
var Surface = require('famous/Surface');
var View = require('famous/View');
var Scene = require('famous/scene');
var Modifier = require('famous/Modifier');
var GenericSync = require('famous-sync/GenericSync');
var MouseSync = require('famous-sync/MouseSync');
var TouchSync = require('famous-sync/TouchSync');
var FM = require('famous/Matrix');
var Easing = require('famous-animation/Easing');
var Transitionable = require('famous/Transitionable');
var WallTransition = require('famous-physics/utils/WallTransition');
var SpringTransition = require('famous-physics/utils/SpringTransition');
Transitionable.registerMethod('wall', WallTransition);
Transitionable.registerMethod('spring', SpringTransition);
function TestContactItemView(){
View.apply(this, arguments);
this.itemSurface = this.createSurface([undefined,100],"yellow","item");
this.deleteSurface = this.createSurface([50,50],"red","delete");
this.favorSurface = this.createSurface([50,50],"blue","favor");
this.callSurface = this.createSurface([50,50],"call","green");
this.itemMod = this.createMod([0.5,0.5],1);
this.deleteMod = this.createMod([-0.2,0.5],0);
this.favorMod = this.createMod([-0.2,0.5],0);
this.callMod = this.createMod([1.2,0.5],0);
this._add(this.itemMod).link(this.itemSurface);
this._add(this.deleteMod).link(this.deleteSurface);
this._add(this.favorMod).link(this.favorSurface);
this._add(this.callMod).link(this.callSurface);
this.posX=[0,0];
var sync = new GenericSync(function(){
return this.posX
}.bind(this),{syncClasses:[MouseSync,TouchSync]
});
var swipeBackTransition = {
'curve' : Easing.outBackNorm,
'duration' : 500
};
this.itemSurface.pipe(sync);
sync.on('start', function(data) {
this.posX = [0,0];
}.bind(this));
sync.on('update', function(data) {
this.posX = data.p; // the displacement from the start touch point.
this.moveUpdate(this.posX);
if (this.posX > 0) {
// this.animateLeftButtons()
} else {
// this.animateRightButtons();
}
}.bind(this));
sync.on('end', function(data) {
this.itemMod.setTransform(FM.identity ,{
method: 'wall',
period: 500,
dampingRatio: .1
});
}.bind(this));
window.tt=this;
};
TestContactItemView.prototype = Object.create(View.prototype);
TestContactItemView.prototype.constructor = TestContactItemView;
TestContactItemView.prototype.createSurface = function(size,color,content){
var surface = new Surface({
content:content,
size:size,
properties:{
backgroundColor:color
}
});
return surface;
};
TestContactItemView.prototype.createMod= function(origin, opacity){
var Mod = new Modifier({
origin: origin,
opacity:opacity
});
return Mod;
};
TestContactItemView.prototype.moveUpdate = function(position){
this.itemMod.setTransform(FM.translate(position[0], 0, 0));
};
window.tt=this;
module.exports = TestContactItemView;
});
Famous.loaded(function (require) {
var Matrix = (require("famous/Engine"), require("famous/Matrix")),
View = require("famous/View"),
EventHandler = (require("famous/Modifier"), require("famous/EventHandler")),
GenericSync = require("famous-sync/GenericSync"),
Transitionable = require("famous/Transitionable"),
SpringTransition = require("famous-physics/utils/SpringTransition"),
Scrollview = require("famous-views/Scrollview"),
ViewSequence = require("famous/ViewSequence"),
Utility = require("famous/Utility"),
Utils = require("famous-utils/Utils"),
StoryView = Paper.StoryView,
PhotoStoryView = Paper.PhotoStoryView,
ArticleStoryView = Paper.ArticleStoryView;
var storyData = [
{
name: "Nathalie Pickens",
profilePics: ["./img/profile-pics/nat.jpg"],
text: "Eat some kale today!",
time: "8 HRS",
likes: 3,
comments: 2
},
{
name: "Zita Molnar",
profilePics: ["./img/profile-pics/zita.jpg"],
text: "Sometimes walking in the San Francisco rain, without an umbrella, feels good.",
time: "JUST NOW • FRIENDS",
likes: 2,
comments: 3
},
{
name: "Josh Hoover",
profilePics: ["./img/profile-pics/josh.jpg"],
text: '"Revolution doesn\'t have to do with smashing something; it has to do with bringing something forth. If you spend all your time thinking about that which you are attacking, then you are negatively bound to it. You have to find the zeal in yourself and bring that out."<br><br>Joseph Campbell, Pathways to Bliss',
time: "YESTERDAY",
likes: 6,
comments: 9
},
{
name: "RJ Pickens",
profilePics: ["./img/profile-pics/rj.jpg"],
text: "Man, these are some good-looking speakers. #AISAudio #VOIDAudio",
photos: ["./img/rj/photos/1.jpg"],
time: "2 MINS • FRIENDS",
likes: 10,
comments: 2
},
{
name: "Scuba Steve",
profilePics: ["./img/profile-pics/scuba.jpg"],
text: "Eric Prydz EPIC 2.0!!!! \\o/",
photos: ["./img/scuba/photos/1.jpg"],
time: "12 HRS",
likes: 5,
comments: 3
},
{
name: "Shupac Takur added 4 new photos with Lee-ann Platt and 5 others",
profilePics: ["./img/profile-pics/shu.jpg", "./img/profile-pics/leeann.jpg", "./img/profile-pics/sabina.jpg", "./img/profile-pics/corban.jpg", "./img/profile-pics/corban.jpg", "./img/profile-pics/corban.jpg"],
text: "Fun times at Sunset Picnic! ",
photos: ["./img/shu/photos/1.jpg", "./img/shu/photos/2.jpg", "./img/shu/photos/3.jpg", "./img/shu/photos/4.jpg"],
time: "8 MINS SAN FRANCISCO, CA • FRIENDS",
likes: 9,
comments: 4
},
{
name: "Jane Williams",
profilePics: ["./img/profile-pics/jane.jpg"],
text: "Hilarious! #goodguyroy",
time: "4 HRS • PUBLIC",
likes: 4,
comments: 2,
articleThumbSm: "./img/roy/roysm.jpg",
articleThumbLg: "./img/roy/roylg.jpg",
article: '<img src="./img/roy/header.png" width="320" /><div style="padding:0 20px;"><h1>I Could Watch Roy Hibbert Blocking This Little Kid\'s Shot All Day Long</h1><iframe width="280" height="158" src="//www.youtube.com/embed/BY69NUNsF1Q?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe><p>Indiana Pacers big man Roy Hibbert visited Paramount School of Excellence in Indianapolis and relived his childhood when he wasn\'t yet an NBA star for a cute video. The best part is when he swats the crap out of a kid\'s weak layup, which has been GIFed below. (Second-best part is Hibbert using a child as a human shield in dodgeball.)</p><img width="280" src="./img/roy/block.jpg" /><p>The GIF\'s really missing the crushing thump of Hibbert\'s hand on the rejection, so watch the video for the full experience.</p></div>'
}
];
var setupStoryViews = function () {
this.storiesHandler = new EventHandler;
this.scrollview = new Scrollview(this.options.scrollOpts);
this.stories = [];
for (var storyIndex = 0; storyIndex < storyData.length; storyIndex++) {
var articleStoryView,
options = {
profilePics: storyData[storyIndex].profilePics,
name: storyData[storyIndex].name,
text: storyData[storyIndex].text,
time: storyData[storyIndex].time,
likes: storyData[storyIndex].likes,
comments: storyData[storyIndex].comments,
scale: this.options.cardScale
};
if (storyData[storyIndex].article) {
options.content = storyData[storyIndex].article;
options.thumbSm = storyData[storyIndex].articleThumbSm;
options.thumbLg = storyData[storyIndex].articleThumbLg;
options.velThreshold = this.options.velThreshold;
articleStoryView = new ArticleStoryView(options);
} else {
options.photos = storyData[storyIndex].photos;
if (storyData[storyIndex].photos && storyData[storyIndex].photos.length > 1) {
articleStoryView = new PhotoStoryView(options);
} else {
articleStoryView = new StoryView(options);
}
}
articleStoryView.pipe(this.storiesHandler);
this.stories.push(articleStoryView);
articleStoryView.on("touchstart", function (story) {
this.targetStory = story;
}.bind(this, articleStoryView));
}
this.storiesHandler.pipe(this.scrollview);
this.storiesHandler.pipe(this.ySync);
var viewSequence = new ViewSequence(this.stories, 0, true);
this.scrollview.sequenceFrom(viewSequence);
this.scrollview.on("paginate", function () {
if (this.targetStory.sequence) {
this.targetStory.sequence();
this.targetStory.disableScroll();
}
}.bind(this));
};
var ySyncHandlers = function () {
this.ySync.on("start", function () {
var t = this.yPos.get();
this.direction = undefined;
if (0 === t && this.targetStory.scrollable) this.targetStory.enableScroll();
if (0 === t && this.targetStory.flipable) this.targetStory.enableFlip();
this.enableY = false;
}.bind(this));
this.ySync.on("update", function (t) {
var i = this.yPos.get();
if (!this.direction) {
if (Math.abs(t.v[1]) > Math.abs(t.v[0])) {
this.direction = "y";
} else {
this.storiesHandler.unpipe(this.ySync);
this.direction = "x";
}
}
if (this.direction === "y") {
if (0 !== i) {
this.enableY = true;
this.swipeY = true;
} else {
if (!this.targetStory.scrollable && !this.targetStory.flipable) this.enableY = true;
if (this.targetStory.scrollable && this.targetStory.top && t.v[1] > 0) {
this.targetStory.disableScroll();
this.enableY = true;
}
if (this.targetStory.flipable && this.targetStory.closed && t.v[1] > 0) {
this.targetStory.disableFlip();
this.enableY = true;
}
}
if (this.enableY) {
this.yPos.set(Math.min(this.options.initY + 75, Math.max(-75, t.p[1])));
}
} else if (this.targetStory.scrollable && Math.abs(this.targetStory.scrollview.getVelocity()) > .05) {
this.storiesHandler.unpipe(this.scrollview);
}
}.bind(this));
this.ySync.on("end", function (t) {
this.storiesHandler.pipe(this.scrollview);
this.storiesHandler.pipe(this.ySync);
var i = t.v[1].toFixed(2);
if (this.enableY) {
if (this.yPos.get() < this.options.posThreshold) {
if (i > this.options.velThreshold) {
this.slideDown(i);
} else {
this.slideUp(Math.abs(i));
}
} else {
if (i < -this.options.velThreshold) {
this.slideUp(Math.abs(i));
} else {
this.slideDown(i);
}
}
}
}.bind(this));
};
function correctYSyncHandlers() {
this.ySync.on("start", function () {
var t = this.yPos.get();
this.direction = void 0, 0 === t && this.targetStory.scrollable && this.targetStory.enableScroll(), 0 === t && this.targetStory.flipable && this.targetStory.enableFlip(), this.enableY = !1
}.bind(this)), this.ySync.on("update", function (t) {
var i = this.yPos.get();
this.direction || (Math.abs(t.v[1]) > Math.abs(t.v[0]) ? this.direction = "y" : (this.storiesHandler.unpipe(this.ySync), this.direction = "x")), "y" === this.direction ? (0 !== i ? (this.enableY = !0, this.swipeY = !0) : (this.targetStory.scrollable || this.targetStory.flipable || (this.enableY = !0), this.targetStory.scrollable && this.targetStory.top && t.v[1] > 0 && (this.targetStory.disableScroll(), this.enableY = !0), this.targetStory.flipable && this.targetStory.closed && t.v[1] > 0 && (this.targetStory.disableFlip(), this.enableY = !0)), this.enableY && this.yPos.set(Math.min(this.options.initY + 75, Math.max(-75, t.p[1])))) : this.targetStory.scrollable && Math.abs(this.targetStory.scrollview.getVelocity()) > .05 && this.storiesHandler.unpipe(this.scrollview)
}.bind(this)), this.ySync.on("end", function (t) {
this.storiesHandler.pipe(this.scrollview), this.storiesHandler.pipe(this.ySync);
var i = t.v[1].toFixed(2);
this.enableY && (this.yPos.get() < this.options.posThreshold ? i > this.options.velThreshold ? this.slideDown(i) : this.slideUp(Math.abs(i)) : i < -this.options.velThreshold ? this.slideUp(Math.abs(i)) : this.slideDown(i))
}.bind(this))
}
function StoriesView() {
View.apply(this, arguments);
this.yPos = new Transitionable(this.options.initY);
this.ySync = new GenericSync(function () {
return [0, this.yPos.get()];
}.bind(this));
setupStoryViews.call(this);
ySyncHandlers.call(this);
}
Transitionable.registerMethod("spring", SpringTransition);
StoriesView.prototype = Object.create(View.prototype);
StoriesView.prototype.constructor = StoriesView;
StoriesView.DEFAULT_OPTIONS = {
velThreshold: .7,
spring: {
method: "spring",
period: 200,
dampingRatio: 1
},
curve: {
duration: 500,
curve: "easeOut"
},
cardScale: .445,
gutter: 2
};
StoriesView.DEFAULT_OPTIONS.cardWidth = StoriesView.DEFAULT_OPTIONS.cardScale * window.innerWidth;
StoriesView.DEFAULT_OPTIONS.cardHeight = StoriesView.DEFAULT_OPTIONS.cardScale * window.innerHeight;
StoriesView.DEFAULT_OPTIONS.initY = window.innerHeight - StoriesView.DEFAULT_OPTIONS.cardHeight;
StoriesView.DEFAULT_OPTIONS.posThreshold = (window.innerHeight - StoriesView.DEFAULT_OPTIONS.cardHeight) / 2;
StoriesView.DEFAULT_OPTIONS.scrollOpts = {
direction: Utility.Direction.X,
defaultItemSize: [StoriesView.DEFAULT_OPTIONS.cardWidth, StoriesView.DEFAULT_OPTIONS.cardHeight],
itemSpacing: 2 / StoriesView.DEFAULT_OPTIONS.cardScale,
margin: 3 * window.innerWidth,
pageSwitchSpeed: .1,
pagePeriod: 300,
pageDamp: 1,
speedLimit: 10,
drag: .001
};
StoriesView.prototype.slideUp = function (t) {
console.log("slide up");
var i = this.options.spring;
i.velocity = t;
this.options.scrollOpts.paginated = true;
this.scrollview.setOptions(this.options.scrollOpts);
this.yPos.set(0, i);
};
StoriesView.prototype.slideDown = function (t) {
console.log("slide down");
var i = this.options.spring;
i.velocity = t, this.options.scrollOpts.paginated = !1, this.scrollview.setOptions(this.options.scrollOpts), this.yPos.set(this.options.initY, i)
};
StoriesView.prototype.render = function () {
var t = this.yPos.get(),
i = Utils.map(t, 0, this.options.initY, 1, this.options.cardScale);
this.progress = Utils.map(t, this.options.initY, 0, 0, 1, !0), this.scrollview.sync.setOptions({
direction: GenericSync.DIRECTION_X,
scale: 1 / i
});
for (var e = 0; e < this.stories.length; e++) this.stories[e].setProgress(this.progress);
return this.spec = [], this.spec.push({
origin: [.5, 1],
transform: Matrix.scale(i, i, 1),
target: {
size: [window.innerWidth, window.innerHeight],
target: this.scrollview.render()
}
}), this.spec
};
Paper.StoriesView = StoriesView;
});
define(function(require, exports, module) {
// Famous
var Surface = require('famous/Surface');
var FM = require('famous/Matrix');
var Modifier = require('famous/Modifier');
var Engine = require('famous/Engine');
// Utils
var Utils = require('famous-utils/Utils');
// Feedback
var Lasers = require('famous-feedback/Circle');
// Widgets
var TorqueRenderable = require('app/widgets/TorqueRenderable');
var SplitImages = require('app/widgets/SplitImages');
// Scene
var SceneTransitions = require('app/SceneTransitions');
var Scene = require('famous-scene/Scene');
// Core UI
var Interface = require('core/Interface');
// COUNTER!
var CounterView = require('app/scenes/CounterView');
// Physics!!
var Transitionable = require('famous/Transitionable');
var PhysicsTrans = require('famous-physics/utils/PhysicsTransition');
Transitionable.registerMethod('physics', PhysicsTrans);
// SOUNDS
var SoundPlayer = require('famous-audio/SoundPlayer');
function NuclearScene() {
document.body.style.backgroundColor = '#222';
Scene.apply(this, arguments);
// Button
this.split;
this.torque;
// UI
this.ui;
this.autoUI;
this.labelProperties;
this.descriptionProperties;
// Feedback
this.lasers;
// Alarm
this.alarmSurface;
this.alarmMod;
this._shoudlHighlight;
this.initLasers();
this.initButton();
this.initAlarm();
this.initUI();
this.events();
}
NuclearScene.prototype = Object.create(Scene.prototype);
NuclearScene.prototype.constructor = NuclearScene;
NuclearScene.NAME = 'The Countdown';
NuclearScene.IMAGE = 'img/splitImage4/nuclear.svg';
NuclearScene.DEFAULT_OPTIONS = {
torqueSize: [400, 400],
alarmDelay: 1000,
alarmCurve: {
curve: 'outSineNorm',
duration: 1000
}
}
NuclearScene.prototype.events = function () {
Engine.on('resize', Utils.debounce( this.setTorquePos.bind(this), 150));
this.torque.on('forceApplied', CounterView.add.bind( CounterView, 1));
this.split.pipe( this.lasers );
}
NuclearScene.prototype.setTorquePos = function () {
this.torque.setTransform( FM.translate(
window.innerWidth * 0.5 - this.options.torqueSize[0] * 0.5,
window.innerHeight * 0.5 - this.options.torqueSize[1] * 0.5), {
curve: 'inOutBackNorm',
duration: 500
});
}
NuclearScene.prototype.initLasers= function () {
this.lasers = new Lasers();
this.node.add( this.lasers );
}
NuclearScene.prototype.initAlarm = function () {
this.alarmSurface = new Surface({
classes: ['alarm-bg'],
properties: {
'pointerEvents': 'none'
}
});
this.alarmMod = new Modifier({
opacity: 0,
transform: FM.translate(0, 0, -1 )
});
this._shoudlHighlight = true;
this.node.add( this.alarmMod ).link( this.alarmSurface );
var highlight = (function () {
var callback = this._shoudlHighlight ? unhighlight : undefined;
this.alarmMod.setOpacity( 1, this.options.alarmCurve, callback )
}).bind(this);
var unhighlight = (function () {
var callback = this._shoudlHighlight ? highlight : undefined;
this.alarmMod.setOpacity( 0, this.options.alarmCurve, callback )
}).bind(this);
highlight();
}
NuclearScene.prototype.initButton = function () {
this.split = new SplitImages({
images: [
'img/splitImage4/0.svg',
'img/splitImage4/1.svg',
'img/splitImage4/2.svg',
'img/splitImage4/3.svg',
'img/splitImage4/4.svg'
],
depth: 20,
size: this.options.torqueSize
});
this.torque = new TorqueRenderable({
views: [this.split],
forceStrength: 0.50,
forceSpringDamping: 0.35,
forceSpringPeriod: 1100,
torqueStrength: 0.2,
torquePeriod: 12
});
this.setTorquePos();
this.node.add( this.torque );
}
NuclearScene.prototype.initUI = function () {
this.labelProperties = {
'borderBottom' : '1px solid white',
'color' : 'rgba( 255, 255, 255, 1 )',
'fontSize': '16px'
}
this.descriptionProperties = {
'color' : 'rgba( 200, 200, 200, 1 )',
'fontSize': '14px'
}
this.autoUI = [
{
type: 'label',
uiOptions: {
content: 'IMAGE',
properties: this.labelProperties
}
},
{
type: 'label',
uiOptions: {
content: 'This changes the scale of the layers of images.',
properties: this.descriptionProperties
}
},
{
type: 'slider',
callback: this.split.setDepth.bind( this.split ),
uiOptions: {
range: [0, 100],
name: 'Depth',
defaultValue: this.split.options.depth
}
},
{
type: 'label',
uiOptions: {
content: 'TORQUE SPRING',
properties: this.labelProperties
}
},
{
type: 'label',
uiOptions: {
content: 'Torque controls the rotation of the button.',
properties: this.descriptionProperties
}
},
{
type: 'slider',
object: this.torque.options,
key: 'torquePeriod',
callback: this.torque.setTorqueSpringOpts.bind( this.torque ),
uiOptions: {
range: [0.5, 15],
name: 'Duration',
defaultValue: this.torque.options.torquePeriod
}
},
{
type: 'slider',
object: this.torque.options,
key: 'torqueStrength',
callback: this.torque.setTorque.bind( this.torque ),
uiOptions: {
range: [0.00005, 0.5],
name: 'Force',
defaultValue: this.torque.options.torqueStrength
}
},
{
type: 'label',
uiOptions: {
content: 'FORCE SPRING',
properties: this.labelProperties
}
},
{
type: 'label',
uiOptions: {
content: 'Force controls the depth of the button when it is clicked.',
properties: this.descriptionProperties
}
},
{
type: 'slider',
object: this.torque.options,
key: 'forceStrength',
callback: this.torque.setForce.bind( this.torque ),
uiOptions: {
range: [0.05, 5],
name: 'Force Strength',
defaultValue: this.torque.options.forceStrength
}
},
{
type: 'slider',
object: this.torque.options,
key: 'forceSpringDamping',
callback: this.torque.setForceSpringOpts.bind( this.torque ),
uiOptions: {
range: [0.00005, 0.9],
name: 'Force Spring Damping',
defaultValue: this.torque.options.forceSpringDamping
}
},
{
type: 'slider',
object: this.torque.options,
key: 'forceSpringPeriod',
callback: this.torque.setForceSpringOpts.bind( this.torque ),
uiOptions: {
range: [100, 2000],
name: 'Force Spring Period',
defaultValue: this.torque.options.forceSpringPeriod
}
}
]
this.ui = new Interface();
Engine.pipe( this.ui );
this.ui.setCurrentObject( this );
this.node.add( this.ui );
}
NuclearScene.prototype.activate = function ( callback, direction ) {
if( direction == 'next' ) {
SceneTransitions.sceneFadeInLeft( callback );
} else {
SceneTransitions.sceneFadeInRight( callback );
}
}
NuclearScene.prototype.deactivate = function ( callback, direction ) {
if( direction == 'next' ) {
SceneTransitions.sceneFadeLeft( callback );
} else {
SceneTransitions.sceneFadeRight( callback );
}
}
module.exports = NuclearScene;
});
define(function(require, exports, module){
var
RenderNode = require('famous/RenderNode'),
Surface = require('famous/Surface'),
Modifier = require('famous/Modifier'),
Matrix = require('famous/Matrix'),
Transitionable = require('famous/Transitionable'),
WallTransition = require('famous-physics/utils/WallTransition'),
SpringTransition = require('famous-physics/utils/SpringTransition'),
PhysicsEngine = require('famous-physics/PhysicsEngine'),
Walls = require('famous-physics/constraints/Walls'),
VectorField = require('famous-physics/forces/VectorField'),
Vector = require('famous-physics/math/Vector');
// Drag = require('famous-physics/forces/Drag');
Transitionable.registerMethod('wall', WallTransition);
Transitionable.registerMethod('spring', SpringTransition);
module.exports = function(eventHandler){
var splashNode = new RenderNode();
////////////////
// BACKGROUND //
////////////////
var splashSurface = new Surface({
size: [window.innerWidth, window.innerHeight],
classes: ['splash-back'],
properties: {
opacity: 0.1
}
});
splashNode.add(splashSurface);
/////////////
// BUTTONS //
/////////////
var currentActive;
var buttonContainer = new RenderNode();
var buttonSize = [window.innerWidth/4, Math.min(window.innerWidth/4, window.innerHeight/6)]
var sightsButton = new Surface({
size: buttonSize,
classes: ['splash-button', 'splash-button-sights'],
content: '<button><i class="icon-picture"></i><div>Sights</div></button>'
});
buttonContainer.add(sightsButton);
sightsButton.on('click', function(){
if(currentActive && currentActive === sightsButton){
return;
}
sightsButton.addClass('splash-button-active');
currentActive && currentActive.removeClass('splash-button-active');
currentActive = sightsButton;
window.category = 'sights';
dropBall('sights');
});
var foodButton = new Surface({
size: buttonSize,
classes: ['splash-button', 'splash-button-food'],
content: '<button><i class="icon-food"></i><div>Food</div></button>'
});
buttonContainer.add(new Modifier(Matrix.translate(window.innerWidth/4, 0, 0))).link(foodButton);
foodButton.on('click', function(){
if(currentActive && currentActive === foodButton){
return;
}
foodButton.addClass('splash-button-active');
currentActive && currentActive.removeClass('splash-button-active');
currentActive = foodButton;
window.category = 'food';
dropBall('food');
});
var artsButton = new Surface({
size: buttonSize,
classes: ['splash-button', 'splash-button-arts'],
content: '<button><i class="icon-art-gallery"></i><div>Arts</div></button>'
});
buttonContainer.add(new Modifier(Matrix.translate(window.innerWidth/2,0,0))).link(artsButton);
artsButton.on('click', function(){
if(currentActive && currentActive === artsButton){
return;
}
artsButton.addClass('splash-button-active');
currentActive && currentActive.removeClass('splash-button-active');
currentActive = artsButton;
window.category = 'arts';
dropBall('arts');
});
var shopButton = new Surface({
size: buttonSize,
classes: ['splash-button', 'splash-button-shop'],
content: '<button><i class="icon-shop"></i><div>Shop</div></button>'
});
buttonContainer.add(new Modifier(Matrix.translate((window.innerWidth*3)/4,0,0))).link(shopButton);
shopButton.on('click', function(){
if(currentActive && currentActive === shopButton){
return;
}
shopButton.addClass('splash-button-active');
currentActive && currentActive.removeClass('splash-button-active');
currentActive = shopButton;
window.category = 'shop';
dropBall('shop');
});
var buttonModifier = new Modifier(Matrix.translate(0,-400,0));
splashNode.add(buttonModifier).link(buttonContainer);
var slideDownSplashButtons = function(){
buttonModifier.setTransform(Matrix.identity, {method: 'spring', period: 400, dampingRatio: 0.5});
};
var slideUpSplashButtons = function(){
buttonModifier.setTransform(Matrix.translate(0,-400,0), {curve: 'easeIn'});
currentActive.removeClass('splash-button-active');
currentActive = null;
ballModifier = null;
}
slideDownSplashButtons();
//////////
// LOGO //
//////////
var logo = new Surface({
// classes: ['logo'],
content: '<div class="logo">poing</div><div class="slogan">everywhere you want to go</div>',
size: [window.innerWidth*0.9, window.innerWidth*0.3]
});
splashNode.add(new Modifier({origin: [0.5, 0.28]})).link(logo);
/////////////////////
// BALL DROP LOGIC //
/////////////////////
var ballSize = Math.min(window.innerWidth/3, window.innerHeight/4);
var ballModifier;
var ballNode;
var dropBall = function(category){
if(ballModifier){
releaseBall(category, true);
} else {
dropNewBall(category);
}
};
var dropNewBall = function(category){
var ballSurface = new Surface({
classes: ['buttonBall', category],
size: [ballSize, ballSize],
properties: {
lineHeight: ballSize + 'px',
textAlign: 'center'
},
content: 'GO'
});
ballSurface.on('click', function(){
switchPage(category);
});
ballModifier = new Modifier({
transform: Matrix.translate(0,-400,0),
origin: [0.5, 0.78]
});
ballModifier.setTransform(Matrix.identity, {
method: 'wall',
period: 500,
dampingRatio: .1
});
ballNode = splashNode.add(ballModifier).link(ballSurface);
}
var mapExists = false;
var previousCategory;
var switchPage = function(targetCategory){
releaseBall();
slideUpSplashButtons();
addSpinner();
var vent = !mapExists ? 'loadmap' : targetCategory === previousCategory ? 'swap' : 'switchCategory';
if(vent === 'loadmap'){
setTimeout(function(){
eventHandler.emit(vent);
mapExists = true;
}, 1000)
} else {
eventHandler.emit(vent);
}
previousCategory = targetCategory;
};
var releaseBall = function(category, drop){
// drop is a boolean. If true, a new ball is dropped.
ballModifier.halt();
var ballIndex = splashNode.get().indexOf(ballNode);
ballModifier.setTransform(Matrix.translate(0, window.innerWidth+400, 0), {
curve: 'easeOut',
duration: 500,
period: 400,
dampingRatio: 1
}, function(){
splashNode.get().splice(ballIndex, 1);
drop && dropNewBall(category);
});
}
/////////////
// SPINNER //
/////////////
var spinner;
var addSpinner = function(){
spinner = splashNode.add(new Surface({
content: '<i class="icon-spin4 animate-spin"></i>',
properties: {
color: '#ccc',
fontSize: '2em'
}
}))
}
var removeSpinner = function(){
splashNode.get().splice(splashNode.get().indexOf(spinner), 1);
};
////////////
// EVENTS //
////////////
eventHandler.on('removeSpinner', removeSpinner)
eventHandler.on('slideDownSplashButtons', slideDownSplashButtons);
eventHandler.on('slideUpSplashButtons', slideUpSplashButtons);
return splashNode;
};
});