EdgeSwapper.prototype.commit = function(context, transform, opacity, origin, size) {
if(size[0] != this._size[0] || size[1] != this._size[1]) {
this._size = size;
this.lightbox.setOptions({
inTransform: Matrix.translate(this._size[0], 0, 0),
outTransform: Matrix.translate(this._size[0], 0, 0)
});
if(this._currTarget && this._currTarget.setSize) this._currTarget.setSize(size);
}
return {
transform: transform,
opacity: opacity,
origin: origin,
size: size,
target: this.lightbox.render()
};
};
fadeRight: function ( transform, callback, curve) {
curve = curve ? curve : {
curve : Easing.inOutExpoNorm,
duration : 1000
};
transform.halt();
transform.setTransform( FM.translate( window.innerWidth, 0, 0), curve, callback);
transform.setOpacity( 0, curve);
},
StoryView.prototype.render = function() {
var namePos = this.map(120, 85);
var textPos = this.map(140, 105);
var photoPos = this.map(-20, -68);
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.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()
}
});
}
if(this.photo) {
this.spec.push({
origin: [0.5, 1],
transform: FM.translate(0, photoPos, 0.1),
target: this.photo.render()
});
}
this.spec.push({
// origin: [0, 1],
transform: FM.translate(this.options.margin, window.innerHeight - this.footer.getSize()[1], 0),
opacity: Easing.inOutQuadNorm.call(this, this.progress),
target: this.footer.render()
});
this.spec.push({
transform: FM.translate(0, 0, 2),
target: this.cover.render()
});
return this.spec;
};
ArtScene.prototype.addSoundButton = function(type, arg)
{
var soundBtn = new Surface({
size: this.btnSize,
content: '<img draggable="false" class="no-user-select" src="img/'+type+'" height="'+this.btnSize[0]+'"></img>',
});
soundBtn.on('click', this.playSound.bind(this, arg));
var soundBtnModifier = new Modifier({
transform: FM.translate( 0, Utils.getHeight()+this.offset[1], 0),
opacity: 0.50,
});
this.node.add(soundBtnModifier).link(soundBtn);
this.soundBtns.push(soundBtn);
this.soundBtnMods.push(soundBtnModifier);
};
ArtScene.prototype.showSoundBtns = function(animate)
{
var w = this.width;
var h = this.height;
var len = this.soundBtnMods.length;
var mods = this.soundBtnMods;
var tw = this.btnSize[0]*len + this.offset[0]*(len-1);
var xOffset = tw*0.5;
for(var i = 0; i < len; i++)
{
var mtx = FM.translate(
i*this.btnSize[0]+w/2.0-xOffset+this.offset[0]*i,
h-this.btnSize[1]-this.offset[1],
0);
mods[i].setTransform(mtx, animate ? { curve: Easing.inOutCubicNorm, duration: 400+i*60 } : undefined);
}
};
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);
}
define(function(require, exports, module) {
var Entity = require('famous/Entity');
var EventHandler = require('famous/EventHandler');
var Matrix = require('famous/Matrix');
var LightBox = require('./LightBox');
/**
* @class Uses lightbox to make shown renderables enter and exit from the same side.
* @description
@name Edgeswapper
* @constructor
* @example
define(function(require, exports, module) {
var Engine = require('famous/Engine');
var EdgeSwapper = require('famous-views/EdgeSwapper');
var Surface = require('famous/Surface');
var Context = Engine.createContext();
var edgeswapper = new EdgeSwapper();
var surface1 = new Surface({
content: 'test1',
properties: {
backgroundColor: 'red'
}
});
var surface2 = new Surface({
content: 'test2',
properties: {
backgroundColor: 'blue'
}
});
Context.link(edgeswapper);
edgeswapper.show(surface1);
var showing = true;
var toggle = function() {
if (showing) {
edgeswapper.show(surface2);
showing = false;
} else {
edgeswapper.show(surface1);
showing = true;
};
};
Engine.on('click', toggle);
});
*/
function EdgeSwapper(options) {
this.options = Object.create(EdgeSwapper.DEFAULT_OPTIONS);
this._currTarget = undefined;
this._size = [window.innerWidth, window.innerHeight];
this.lightbox = new LightBox(this.options);
this.eventInput = new EventHandler();
EventHandler.setInputHandler(this, this.eventInput);
this.id = Entity.register(this);
if(options) this.setOptions(options);
}
EdgeSwapper.DEFAULT_OPTIONS = {
inOrigin: [0, 0],
outOrigin: [0, 0],
showOrigin: [0, 0],
inTransform: Matrix.translate(window.innerWidth, 0, 0),
outTransform: Matrix.translate(window.innerWidth, 0, 0)
};
EdgeSwapper.prototype.show = function(content) {
if(this._currTarget) this.eventInput.unpipe(this._currTarget);
this._currTarget = content;
if(this._currTarget) {
if(this._currTarget.setSize) this._currTarget.setSize(this._size);
if(this._currTarget.emit) this.eventInput.pipe(this._currTarget);
}
this.lightbox.show.apply(this.lightbox, arguments);
};
EdgeSwapper.prototype.setOptions = function(options) {
this.lightbox.setOptions(options);
};
EdgeSwapper.prototype.render = function() {
return this.id;
};
EdgeSwapper.prototype.commit = function(context, transform, opacity, origin, size) {
if(size[0] != this._size[0] || size[1] != this._size[1]) {
this._size = size;
this.lightbox.setOptions({
inTransform: Matrix.translate(this._size[0], 0, 0),
outTransform: Matrix.translate(this._size[0], 0, 0)
});
if(this._currTarget && this._currTarget.setSize) this._currTarget.setSize(size);
}
return {
transform: transform,
opacity: opacity,
origin: origin,
size: size,
target: this.lightbox.render()
};
};
module.exports = EdgeSwapper;
});
function _outputTransform(offset) {
if(this.options.direction == HeaderFooterLayout.DIRECTION_X) return Matrix.translate(offset, 0, 0);
else return Matrix.translate(0, offset, 0);
}
TestContactItemView.prototype.moveUpdate = function(position){
this.itemMod.setTransform(FM.translate(position[0], 0, 0));
};
Famous(function(require) {
// import dependencies
var FamousEngine = require('famous/Engine');
var FastClick = require('famous-sync/FastClick');
var Scrollview = require('famous-views/Scrollview');
var ViewSequence = require('famous/ViewSequence');
var Surface = require('famous/Surface');
var View = require('famous/View');
var EventHandler = require('famous/EventHandler');
var OptionsManager = require('famous/OptionsManager');
var RenderNode = require('famous/RenderNode');
var Utility = require('famous/Utility');
var HeaderFooterLayout = require('famous-views/HeaderFooterLayout');
var EdgeSwapper = require('famous-views/EdgeSwapper');
var NavigationBar = require('famous-widgets/NavigationBar');
var TitleBar = require('famous-widgets/TitleBar');
function App(options) {
// extend from view
View.apply(this, arguments);
// create the layout
this.layout = new HeaderFooterLayout();
// create the header
this.header = new TitleBar(this.options.header);
// create the navigation bar
this.navigation = new NavigationBar(this.options.navigation);
// create the content area
this.contentArea = new EdgeSwapper(this.options.content);
// link endpoints of layout to widgets
this.layout.id['header'].link(this.header);
this.layout.id['footer'].link(Utility.transformInFront).link(this.navigation);
this.layout.id['content'].link(Utility.transformBehind).link(this.contentArea);
// assign received events to content area
this.eventInput.pipe(this.contentArea);
// navigation events are app events
EventHandler.setOutputHandler(this, this.navigation);
// declare the render nodes
this._currentSection = undefined;
this._sections = {};
this._sectionTitles = {};
// respond to the the selection of a different section
this.navigation.on('select', function(data) {
this._currentSection = data.id;
this.header.show(this._sectionTitles[data.id]);
this.contentArea.show(this._sections[data.id].get());
}.bind(this));
// assign the layout to this view
this._link(this.layout);
};
App.prototype = Object.create(View.prototype);
App.prototype.constructor = App;
App.DEFAULT_OPTIONS = {
header: {
size: [undefined, 50],
inTransition: true,
outTransition: true,
look: {
size: [undefined, 50]
}
},
navigation: {
size: [undefined, 50],
direction: Utility.Direction.X,
buttons: {
inTransition: true,
outTransition: true
}
},
content: {
inTransition: true,
outTransition: true,
overlap: true
}
};
App.prototype.getState = function() {
return this._currentSection;
};
App.prototype.section = function(id) {
// create the section if it doesn't exist
if(!(id in this._sections)) {
this._sections[id] = new RenderNode();
// make it possible to set the section's properties
this._sections[id].setOptions = (function(options) {
this._sectionTitles[id] = options.title;
this.navigation.defineSection(id, {
content: '<span class="icon">' + options.navigation.icon + '</span><br />' + options.navigation.caption
});
}).bind(this);
}
return this._sections[id];
};
App.prototype.select = function(id) {
this._currentSection = id;
if(!(id in this._sections)) return false;
this.navigation.select(id);
return true;
};
var FeedItem = require('famous-widgets/FeedItem');
var Transitionable = require('famous/Transitionable');
var OptionsManager = require('famous/OptionsManager');
var Matrix = require('famous/Matrix');
var userInfoFirebase = null;
var userInfo = {};
function SparkItem(options) {
FeedItem.apply(this, arguments);
if(options) this.setOptions(options);
this.inState = new Transitionable(0);
this.inState.set(1, this.options.inTransition);
};
SparkItem.prototype = Object.create(FeedItem.prototype);
SparkItem.prototype.constructor = SparkItem;
SparkItem.DEFAULT_OPTIONS = OptionsManager.patch(FeedItem.DEFAULT_OPTIONS, {
classes: ['tweet'],
size: [undefined, 80],
inTransition: {curve: 'easeOut', duration: 500}
});
SparkItem.setFirebase = function(firebase) {
userInfoFirebase = firebase;
};
SparkItem.prototype.render = function(input) {
var result = FeedItem.prototype.render.apply(this, arguments);
if(!this.inState.isActive()) return result;
else return {opacity: this.inState.get(), target: result};
};
SparkItem.prototype.setContent = function(content) {
var userId = content['author'];
var iconUrl = 'content/default-pic.gif';
if(userId in userInfo) {
iconUrl = userInfo[userId]['pic'];
}
else {
var userRef = userInfoFirebase.child('people').child(userId);
userRef.on('value', function(dataSnapshot) {
userInfo[userId] = dataSnapshot.val();
if(userInfo[userId]['pic']) this.setContent(content);
}.bind(this));
}
var feedContent = {icon: iconUrl, source: content['by'], time: content['timestamp'], text: content['content']};
return FeedItem.prototype.setContent.call(this, feedContent);
};
// define the options
var headerOptions = {
look: {classes: ['header']},
inTransition: {curve: 'easeOutBounce', duration: 375},
outTransition: {curve: 'easeIn', duration: 225},
overlap: false
};
var navigationOptions = {
buttons: {
onClasses: ['navigation', 'on'],
offClasses: ['navigation', 'off'],
inTransition: {curve: 'easeInOut', duration: 150},
outTransition: {curve: 'easeInOut', duration: 150}
}
};
var contentOptions = {
inTransition: {curve: 'easeOutBounce', duration: 500},
outTransition: {duration: 300},
overlap: true
};
// create the App from the template and hook it into the context
var myApp = new App({header: headerOptions, navigation: navigationOptions, content: contentOptions});
var mainDisplay = FamousEngine.createContext();
mainDisplay.link(myApp);
FamousEngine.pipe(myApp);
// setup Firebase
var firebase = new Firebase('https://firefeed.firebaseio.com/');
//var firebase = new Firebase('https://koalalab-berry.firebaseio.com/');
SparkItem.setFirebase(firebase);
// create the 'Home' section
var CONTACT_SECTION_NAME = 'contact';
var contactSection = myApp.section(CONTACT_SECTION_NAME);
contactSection.setOptions({
title: '<span class="bird"></span>',
navigation: {caption: 'Contact', icon: '<span class="entypo">⌂</span>'}
});
var homeItems = new ViewSequence();
var homeScroll = new Scrollview();
contactSection.link(homeScroll);
// create the 'Connect' section
var connectSection = myApp.section('connect');
connectSection.setOptions({
title: 'Connect',
navigation: {caption: 'Connect', icon: '@'}
});
var connectItems = new ViewSequence();
var connectScroll = new Scrollview();
connectSection.link(connectScroll);
// create the 'Discover' section
var discoverSection = myApp.section('discover');
discoverSection.setOptions({
title: 'Discover',
navigation: {caption: 'Discover', icon: '#'}
});
var discoverItems = new ViewSequence();
var discoverScroll = new Scrollview();
discoverSection.link(discoverScroll);
// create the 'Me' section
var meSection = myApp.section('me');
meSection.setOptions({
title: 'Me',
navigation: {caption: 'Me', icon: '<span class="entypo">👤</span>'}
});
// stubbed default to Mark for demo purposes
var myAuth = {
'id': '819290432',
'pic': 'https://graph.facebook.com/819290432/picture/?width=200&height=200&return_ssl_resources=1',
'fullName': 'Mark Lu',
'location': 'San Francisco'
};
var profile = new Surface({
size: [undefined, 160],
classes: ['profile'],
content: '<img src="' + myAuth['pic'] + '" /><p>' + myAuth['fullName'] + ' • ' + myAuth['location'] + '</p>'
});
var meItems = new ViewSequence([profile]); // start with profile
var meScroll = new Scrollview();
meSection.link(meScroll);
// populate the scrollviews
var sparks = firebase.child('sparks');
// display the scrollviews when loaded
sparks.once('value', function() {
// rewind the pointers
while(homeItems.getPrevious()) homeItems = homeItems.getPrevious();
while(discoverItems.getPrevious()) discoverItems = discoverItems.getPrevious();
while(connectItems.getPrevious()) connectItems = connectItems.getPrevious();
while(meItems.getPrevious()) meItems = meItems.getPrevious();
// hook them up
homeScroll.sequenceFrom(homeItems);
discoverScroll.sequenceFrom(discoverItems);
connectScroll.sequenceFrom(connectItems);
meScroll.sequenceFrom(meItems);
});
// update the scrollviews with data as they come in
var recentTimestampLimit = Date.now() - 90*86400000; // limit to 90 days
sparks.on('child_added', function(snapshot) {
var value = snapshot.val();
if(value['timestamp'] > recentTimestampLimit) {
homeItems.unshift(new SparkItem({content: value}));
homeScroll.goToPreviousPage();
}
if(value['author'] === myAuth['id']) {
meItems.splice(1, 0, new SparkItem({content: value}));
meScroll.goToPreviousPage();
}
if(value['content'].indexOf('@') >= 0) {
connectItems.unshift(new SparkItem({content: value}));
connectScroll.goToPreviousPage();
}
if(value['content'].indexOf('#') >= 0) {
discoverItems.unshift(new SparkItem({content: value}));
discoverScroll.goToPreviousPage();
}
});
// start on the contact section
myApp.select(CONTACT_SECTION_NAME);
// signup button
var Modifier = require('famous/Modifier');
var Matrix = require('famous/Matrix');
var signupContext = FamousEngine.createContext();
signupContext.link(new Modifier({origin: [0, 0], transform: Matrix.translate(10, 10), opacity: 0.7})).link(new Surface({
size: [true, true],
classes: ['signup'],
content: '<a href="/logout">log out</a>'
}));
});
function ContactsSection(options) {
View.call(this);
this.searchBarSize = 30;
this.headerFooterLayout = new HeaderFooterLayout({
headerSize: 30,
footerSize: 0
})
this.searchSurface = new Surface({
size: [undefined, this.searchBarSize],
classes: ['searchButton'],
properties:{
backgroundColor: 'red',
zIndex:2
}
});
this.abcSurface = new Surface({
size: [20, window.innerHeight-102-this.searchBarSize],
classes: ['abcButton'],
properties:{
backgroundColor: 'blue',
zIndex:2
}
});
this.abcMod = new Mod({
transform: Matrix.translate(0,30),
origin: [1.0, 0.0]
})
// Set up navigation and title bar information
// this.title = '<button class="left import-contacts">Import</button><div>All Contacts</div><button class="right add-contact"><i class="fa fa-plus"></i></button>';
this.title = '<button class="left edit-button"></button><div>All Contacts</div><button class="right add-contact"><i class="fa fa-plus"></i></button>';
this.navigation = {
caption: 'Contacts',
icon: '<i class="fa fa-users"></i>'
};
this.collection = options.collection;
this.scrollview = new Scrollview({
direction: Util.Direction.Y,
margin: 10000
});
this.headerFooterLayout.id.header.link(this.searchSurface);
this.headerFooterLayout.id.content.link(this.scrollview);
this.pipe(this.scrollview);
this._add(this.abcMod).link(this.abcSurface);
this._add(this.headerFooterLayout);
// When Firebase returns the data switch out of the loading screen
this.collection.on('all', function(e) {
// console.log(e);
switch(e)
{
case 'remove':
case 'sync':
this.loadContacts();
break;
}
}.bind(this));
}
Playlist.prototype.importCards = function() {
//Set up event handlers
this.eventInput = new EventHandler();
EventHandler.setInputHandler(this, this.eventInput); // binds certain methods of event handler to module so can do things like module.pipe and module.on outside of the module. Pipe() is how you send things.
this.eventOutput = new EventHandler();
EventHandler.setOutputHandler(this, this.eventOutput); // if want surface to react while outside module, do this.eventOutput.on('event', callback)
var spacing = 50; //spacing between particles on grid
var N = this.collection.models.length; //number of particles. is all in collection
this.particleRadius = 1;
//force strengths
var rodStiffness = 0.7;
var gravityStrength = 0.006; // if higher than zero, unanchor bottom row
var dragStrength = 0.005;
//grid parameters
this.Nrows = 5; // Math.floor(Math.sqrt(N)) to make more dynamic
this.Ncols = 5; // fixed number of columns to fit screen
var width = (this.Ncols-1) * spacing;
var height = (this.Nrows-1) * spacing;
var marginX = -width/2;
var marginY = -height/2;
//creates particle grid
var grid = [[]];
for (var row = 0; row < this.Nrows; row++){
grid[row] = [];
var y = marginY + spacing * row;
for (var col = 0; col < this.Ncols; col++){
var x = marginX + spacing * col;
var p = [x,y,0];
var particle = PE.createBody({ // particle not being shown; add surface for content
m : 2,
shape : PE.BODIES.CIRCLE,
r : 30,
classes: ['imageParticles'],
p : p
});
var particleSurface = new Surface({
size : [20, 20],
content: '<img class="savedImage" src="' + this.collection.models[row*this.Ncols + col+1].get('imageUrl') + '"< />',
classes: ['savedImage']
});
surfaceArray.push(particleSurface);
particle.add(particleSurface);
// this.physicsTracker = new PhysicsTracker(particle);
// particleSurface.pipe(this.physicsTracker);
grid[row][col] = particle;
};
};
//creates additional surface to reduce load lag
var particleSurface = new Surface({
size : [20, 20],
content: '<img class="savedImage" src="' + this.collection.models[this.Nrows*this.Ncols+1].get('imageUrl') + '"< />',
classes: ['savedImage']
});
surfaceArray.push(particleSurface);
//current constraint being used
var rod = new Rod({
length : spacing,
stiffness : rodStiffness
});
//apply constraint to grid
var particleRight, particleDown, particleCenter;
for (var row = 0; row < this.Nrows; row++){
for (var col = 0; col < this.Ncols; col++){
particleCenter = grid[row][col];
if (row < this.Nrows-1) {
particleDown = grid[row+1][col];
PE.attach(rod, particleDown, particleCenter);
};
if (col < this.Ncols-1) {
particleRight = grid[row][col+1];
PE.attach(rod, particleRight, particleCenter);
};
};
};
//anchor top particles by setting their immunity to true
for (var col = 0; col < this.Ncols; col++) {
grid[0][col].setImmunity(Particle.IMMUNITIES.ALL);
};
this.gravity = new VectorField({
field : VectorField.FIELDS.CONSTANT,
strength : gravityStrength
});
this.drag = new Drag({strength : dragStrength});
this.walls = new Walls({restitution : 0});
PE.attach([this.gravity, this.drag, this.walls]);
var physicsNode = new RenderNode();
physicsNode.link(new Modifier({
origin : [.49,0],
transform : FM.translate(-10, 220, 4)
}))
physicsNode.link(PE);
this.containerSurface.add(physicsNode);
particleSurface.pipe(this.eventOutput);
};
Triangle3D.prototype.calculateTransform = function()
{
var p1x = 0.0;
var p1y = 0.0;
var p1z = 0.0;
var p2x = 0.0;
var p2y = 0.0;
var p2z = 0.0;
var p3x = 0.0;
var p3y = 0.0;
var p3z = 0.0;
var p1p2 = Utils.distance3D(this.x1, this.y1, this.z1, this.x2, this.y2, this.z2);
var p1p3 = Utils.distance3D(this.x1, this.y1, this.z1, this.x3, this.y3, this.z3);
var p2p3 = Utils.distance3D(this.x2, this.y2, this.z2, this.x3, this.y3, this.z3);
var a = 0.0; //Area
var b = 0.0; //Base
var h = 0.0; //Height
var l = 0.0; //Left Length
var r = 0.0; //Right Length
var hInvert = 1.0;
var wInvert = 1.0;
if(p1p2 > p1p3)
{
if(p1p2 > p2p3)
{
if(this.y1 < this.y2)
{
p1x = this.x1; p1y = this.y1; p1z = this.z1;
p2x = this.x2; p2y = this.y2; p2z = this.z2;
}
else
{
p1x = this.x2; p1y = this.y2; p1z = this.z2;
p2x = this.x1; p2y = this.y1; p2z = this.z1;
}
p3x = this.x3; p3y = this.y3; p3z = this.z3;
b = p1p2;
}
else
{
if(this.y2 < this.y3)
{
p1x = this.x2; p1y = this.y2; p1z = this.z2;
p2x = this.x3; p2y = this.y3; p2z = this.z3;
}
else
{
p1x = this.x3; p1y = this.y3; p1z = this.z3;
p2x = this.x2; p2y = this.y2; p2z = this.z2;
}
p3x = this.x1; p3y = this.y1; p3z = this.z1;
b = p2p3;
}
}
else
{
if(p1p3 > p2p3)
{
if(this.y1 < this.y3)
{
p1x = this.x1; p1y = this.y1; p1z = this.z1;
p2x = this.x3; p2y = this.y3; p2z = this.z3;
}
else
{
p1x = this.x3; p1y = this.y3; p1z = this.z3;
p2x = this.x1; p2y = this.y1; p2z = this.z1;
}
p3x = this.x2; p3y = this.y2; p3z = this.z2;
b = p1p3;
}
else
{
if(this.y2 < this.y3)
{
p1x = this.x2; p1y = this.y2; p1z = this.z2;
p2x = this.x3; p2y = this.y3; p2z = this.z3;
}
else
{
p1x = this.x3; p1y = this.y3; p1z = this.z3;
p2x = this.x2; p2y = this.y2; p2z = this.z2;
}
p3x = this.x1; p3y = this.y1; p3z = this.z1;
b = p2p3;
}
}
if(p1x <= p2x)
{
var tX = p1x;
var tY = p1y;
var tZ = p1z;
p1x = p2x;
p1y = p2y;
p1z = p2z;
p2x = tX;
p2y = tY;
p2z = tZ;
}
var p1 = new Vector(p1x,p1y,p1z);
var p2 = new Vector(p2x,p2y,p2z);
var p3 = new Vector(p3x,p3y,p3z);
var m = new Vector(p1x+p2x,p1y+p2y,p1z+p2z);
m.mult(.5, m);
var m1 = new Vector();
m1.add(p1).sub(m,m1);
this.line5.set(m.x, m.y, m.z, m.x+m1.x, m.y+m1.y, m.z+m1.z);
this.p5Surf.mtx = FM.translate(m.x, m.y, m.z);
this.p1Surf.mtx = FM.move(FM.identity, [p1x, p1y, p1z]);
this.p2Surf.mtx = FM.move(FM.identity, [p2x, p2y, p2z]);
this.p3Surf.mtx = FM.move(FM.identity, [p3x, p3y, p3z]);
var center = new Vector(p1x+p2x+p3x, p1y+p2y+p3y, p1z+p2z+p3z);
center.mult(1.0/3.0, center);
var v21 = new Vector();
v21.add(p2).sub(p1,v21);
var v23 = new Vector();
v23.add(p3).sub(p2,v23);
var v13 = new Vector();
v13.add(p3).sub(p1,v13);
var cross = new Vector();
v21.cross(v23, cross);
a = 0.5*cross.norm();
h = 2.0*a/b;
var mc = new Vector();
mc = m1.cross(cross, mc);
mc.normalize(h/2.0, mc);
this.line6.set(m.x, m.y, m.z, m.x+mc.x, m.y+mc.y, m.z+mc.z);
var diff = new Vector(m.x+mc.x, m.y+mc.y, m.z+mc.z);
this.p6Surf.mtx = FM.translate(diff.x, diff.y, diff.z);
var theta1 = Math.asin( h / v13.getLength() );
var theta2 = Math.asin( h / v23.getLength() );
var l = ( h / Math.tan(theta2) ) / b;
var r = ( h / Math.tan(theta1) ) / b;
cross.normalize(150.0, cross);
this.line4.set(center.x, center.y, center.z, center.x + cross.x, center.y + cross.y, center.z + cross.z);
this.p4Surf.mtx = FM.translate(center.x, center.y, center.z);
// rotateZ first, then rotateX and rotateY
var theta = Math.acos(v21.dot(v23) / (v21.norm() * v23.norm())); // angle between v21 and v23
var thetaY = Math.atan2(cross.x, Math.sqrt(cross.z*cross.z + cross.y*cross.y));
var thetaX = Math.atan2(-cross.y, cross.z);
this.surface.setProperties({
'border-radius': '0px',
'border-right': this.size*r+'px solid red',
'border-left': this.size*l+'px solid green',
'border-bottom': this.size+'px solid rgba('+this.red+', '+this.green+', '+this.blue+', 1.0)'
});
var xOff = center.x - (center.x-diff.x);
var yOff = center.y - (center.y-diff.y);
var zOff = center.z - (center.z-diff.z);
this.line1.setLineWidth(10);
this.line1.set(0, 0, 0, center.x, center.y, center.z);
this.mtx = FM.scale(this.invSize*b, this.invSize*h, 1.0);
this.mtx = FM.multiply(this.mtx, FM.rotateZ(-theta+Math.PI*.5), FM.rotate(thetaX, thetaY, 0));
this.mtx = FM.move(this.mtx, [xOff, yOff, zOff]);
}
window.addEventListener('touchmove', function(e) {
mod.setTransform(FM.translate(e.pageX, e.pageY, 244));
}, false);
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;
};
getCenterMatrix: function ( pos, size, z) {
if(z == undefined) z = 0;
return FM.translate( pos[0] - size[0] * 0.5, pos[1] - size[1] * 0.5, z );
},
define(function(require, exports, module) {
var RenderNode = require('famous/RenderNode');
var Fader = require('./Fader');
var Matrix = require('famous/Matrix');
/**
* @name ImageFader
* @constructor
* To be deleted.
*/
function ImageFader(options) {
this.options = Object.create(ImageFader.DEFAULT_OPTIONS);
this.nodes = [];
this.faders = [];
this.mode = -1;
if(options) this.setOptions(options);
}
ImageFader.DEFAULT_OPTIONS = {
crossfade: false
};
ImageFader.prototype.getMode = function() {
return this.mode;
};
ImageFader.prototype.setMode = function(mode, transition, callback) {
this.mode = mode;
if(this.options.crossfade) {
for(var i = 0; i < this.faders.length; i++) this.faders[i].set(0, transition);
this.faders[mode].set(1, transition, callback);
}
else {
this.faders[mode].set(1, transition, (function() {
if(this.mode != mode) return;
for(var i = 0; i < this.faders.length; i++) if(i != mode) this.faders[i].set(0);
if(callback) callback();
}).bind(this));
}
};
ImageFader.prototype.forMode = function(mode) {
if(!this.nodes[mode]) {
this.nodes[mode] = new RenderNode();
this.faders[mode] = new Fader(this.options);
}
return this.nodes[mode];
};
ImageFader.prototype.setOptions = function(options) {
if(options.crossfade !== undefined) this.options.crossfade = options.crossfade;
};
ImageFader.behindMatrix = Matrix.translate(0,0,-0.01);
ImageFader.prototype.render = function(input) {
var result = [];
for(var i = 0; i < this.nodes.length; i++) {
var rendered = this.faders[i].render(this.nodes[i].render());
if(i != this.mode) rendered = {transform: ImageFader.behindMatrix, target: rendered};
result[i] = rendered;
}
return result;
};
module.exports = ImageFader;
});
function getTransform(size) {
return this.options.direction == HeaderFooterLayout.DIRECTION_X ? Matrix.translate(size, 0, 0) : Matrix.translate(0, size, 0)
}
function IncomingCallView(options) {
View.call(this);
this.collection = options.collection;
// Set up event handlers
this.eventInput = new EventHandler();
EventHandler.setInputHandler(this, this.eventInput);
this.eventOutput = new EventHandler();
EventHandler.setOutputHandler(this, this.eventOutput);
this.headerLightBox = new LightBox({
inTransition:false,
outTransition:false,
showOrigin: [0.5, 0.1]
});
this.footerLightBox = new LightBox({
inTransform: Matrix.translate(0, 900, 0),
inTransition: {duration: duration, curve: Easing.inQuadNorm()},
inOpacity: 0,
inOrigin: [0.5, 0.5],
outTransform: Matrix.translate(0, 900, 0),
outOpacity: 0,
outOrigin: [0.5, 0.5],
outTransition: {duration:duration, curve: Easing.outQuadNorm()},
showTransform: Matrix.identity,
showOpacity: 1,
showOrigin: [0.5, 0.9]
});
this.header = new Surface({
classes:['outgoing-call-view'],
size: [undefined, 300],
_origin:[0.5,-0.5],
properties: {
backgroundColor: 'transparent'
}
});
var declineButton = Templates.button({
classes:["decline-button", "big-button"],
checked:true,
content:'Decline',
size:[160,70]
})
var answerButton = Templates.button({
classes:["answer-button", "big-button"],
checked:true,
content:'Answer',
size:[160,70]
})
this.footer = new Surface({
classes: ['incoming-call-view-buttons'],
size: [undefined, 80],
properties: {
backgroundColor: 'transparent'
},
content: '<div class="box">' + declineButton + answerButton + '</div>'
});
this._add(this.headerLightBox);
this._add(this.footerLightBox);
_.bindAll(this, 'template');
this.collection.bind('add', this.template);
this.ringtone = new SoundPlayer([
'content/audio/ringtone.mp3'
]);
this.footer.on('click', function(e) {
var target = $(e.target);
if (target.hasClass("decline-button")) {
this.stop();
}
else if (target.hasClass("answer-button")) {
this.accept();
}
}.bind(this));
this.eventInput.on('incomingCall', function() {
// console.log("incomingCall");
});
this.eventInput.on('incomingCallAnswerClick', function() {
this.accept();
}.bind(this));
}
define(function(require, exports, module) {
var Entity = require('famous/Entity');
var EventHandler = require('famous/EventHandler');
var Matrix = require('famous/Matrix');
var LightBox = require('./LightBox');
/** @constructor */
function EdgeSwapper(options) {
this.options = Object.create(EdgeSwapper.DEFAULT_OPTIONS);
this._currTarget = undefined;
this._size = [window.innerWidth, window.innerHeight];
this.lightbox = new LightBox(this.options);
this.eventInput = new EventHandler();
EventHandler.setInputHandler(this, this.eventInput);
this.id = Entity.register(this);
if(options) this.setOptions(options);
};
EdgeSwapper.DEFAULT_OPTIONS = {
inOrigin: [0, 0],
outOrigin: [0, 0],
showOrigin: [0, 0],
inTransform: Matrix.translate(window.innerWidth, 0, 0),
outTransform: Matrix.translate(window.innerWidth, 0, 0)
};
EdgeSwapper.prototype.show = function(content) {
if(this._currTarget) this.eventInput.unpipe(this._currTarget);
this._currTarget = content;
if(this._currTarget) {
if(this._currTarget.setSize) this._currTarget.setSize(this._size);
if(this._currTarget.emit) this.eventInput.pipe(this._currTarget);
}
this.lightbox.show(this._currTarget);
};
EdgeSwapper.prototype.setOptions = function(options) {
this.lightbox.setOptions(options);
};
EdgeSwapper.prototype.render = function() {
return this.id;
};
EdgeSwapper.prototype.commit = function(context, transform, opacity, origin, size) {
if(size[0] != this._size[0] || size[1] != this._size[1]) {
this._size = size;
this.lightbox.setOptions({
inTransform: Matrix.translate(this._size[0], 0, 0),
outTransform: Matrix.translate(this._size[0], 0, 0)
});
if(this._currTarget && this._currTarget.setSize) this._currTarget.setSize(size);
}
return {
transform: transform,
opacity: opacity,
origin: origin,
size: size,
target: this.lightbox.render()
};
};
module.exports = EdgeSwapper;
});
var slideUpSplashButtons = function(){
buttonModifier.setTransform(Matrix.translate(0,-400,0), {curve: 'easeIn'});
currentActive.removeClass('splash-button-active');
currentActive = null;
ballModifier = null;
}
fn = (function(offset) {
return (this.options.direction == Utility.Direction.X) ? Matrix.translate(offset, 0) : Matrix.translate(0, offset);
}).bind(this);
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;
};
return function(offset) {
return (this.options.direction == Utility.Direction.X) ? Matrix.translate(offset + widthOffset, 0) : Matrix.translate(0, offset + heightOffset);
}.bind(context);
t || (t = function (t) {
return this.options.direction == Utility.Direction.X ? Matrix.translate(t, 0) : Matrix.translate(0, t)
}.bind(this), i = t), this._outputFunction = t, this._masterOutputFunction = i ? i : function (i) {