define(function(require, exports, module) {
var Engine = require("famous/core/Engine");
var GenericSync = require("famous/inputs/GenericSync");
var MouseSync = require("famous/inputs/MouseSync");
var TouchSync = require("famous/inputs/TouchSync");
var ScrollSync = require("famous/inputs/ScrollSync");
var Surface = require("famous/core/Surface");
var mainContext = Engine.createContext();
var start = 0;
var update = 0;
var end = 0;
var delta = [0,0];
var position = [0,0];
GenericSync.register({
mouse : MouseSync,
touch : TouchSync,
scroll : ScrollSync
});
var genericSync = new GenericSync(['mouse', 'touch', 'scroll']);
Engine.pipe(genericSync);
var contentTemplate = function() {
return "<div>Start Count: " + start + "</div>" +
"<div>End Count: " + end + "</div>" +
"<div>Update Count: " + update + "</div>" +
"<div>Delta: " + delta + "</div>" +
"<div>Distance from start: " + position + "</div>";
};
var surface = new Surface({
size: [undefined, undefined],
classes: ['grey-bg'],
content: contentTemplate()
});
genericSync.on("start", function() {
start++;
position = [0,0];
surface.setContent(contentTemplate());
});
genericSync.on("update", function(data) {
update++;
position = data.position;
delta = data.delta;
surface.setContent(contentTemplate());
});
genericSync.on("end", function() {
end++;
surface.setContent(contentTemplate());
});
mainContext.add(surface);
});
function _handleSwipe() {
var sync = new GenericSync(['touch'], {
direction: GenericSync.DIRECTION_X
})
this.pageView.pipe(sync)
sync.on('update', function(data) {
var currentPosition = this.pageViewPos.get()
if (currentPosition === 0 && data.velocity > 0) {
ViewActions.animateStrips()
}
this.pageViewPos.set(Math.max(0, currentPosition + data.delta))
}.bind(this))
sync.on('end', function (data) {
var velocity = data.velocity
var position = this.pageViewPos.get()
if (position > this.options.posThreshold) {
if (velocity < -this.options.velThreshold) {
this.slideLeft()
} else {
this.slideRight()
}
} else {
if (velocity > this.options.velThreshold) {
this.slideRight()
} else {
this.slideLeft()
}
}
}.bind(this))
}
function _handleSwipe() {
var sync = new GenericSync(
['mouse', 'touch'],
{direction : GenericSync.DIRECTION_X}
);
this.pageView.pipe(sync);
sync.on('update', function(data) {
var currentPosition = this.pageViewPos.get();
if(currentPosition === 0 && data.velocity > 0) {
this.menuView.animateStrips();
}
this.pageViewPos.set(Math.max(0, currentPosition + data.delta));
}.bind(this));
sync.on('end', (function(data) {
var velocity = data.velocity;
var position = this.pageViewPos.get();
console.log(velocity);
if(velocity < 0) {
this.slideLeft();
} else {
this.slideRight();
}
}).bind(this));
}
/**
* Handle swipe gestures
*/
function _handleSwipe() {
// Create a sync that listens to touch and mouse on the X-dimension
var sync = new GenericSync(
['mouse', 'touch'],
{direction : GenericSync.DIRECTION_X}
);
// Forward touch events from SidepanelLayout input to the Sync
this._eventInput.pipe(sync);
// When starting: Activate dragging if close to the edge
sync.on('start',function(data){
this.dragging = data.clientX < this.options.moveThreshold;
}.bind(this));
// When updating
sync.on('update', function(data) {
// If we're already in an animation, or not dragging, exit
if(this.animating || !this.dragging) return;
// Scale current position (this.position is from [0..1], remember)
var currentPosition = this.position.get() * this.options.width;
// Update current position with delta from touch/mouse event.
// Also, constrain position to [0,this.options.maxPos]
var position = Math.max(0, currentPosition + data.delta);
position = Math.min(this.options.maxPos,position);
// Scale back to [0...1] and update this.position
this.position.set(position / this.options.width);
}.bind(this));
// When end
sync.on('end', (function(data) {
// Update dragging
this.dragging = false;
// If already animating, we don't need to check to open/close the panel
if(this.animating) return;
// Check velocity and position. Get them first.
var velocity = data.velocity;
var position = this.position.get();
// Some magic decisions....
if(this.position.get() > this.options.posThreshold / this.options.width) {
if(velocity < -this.options.velThreshold) {
_close.call(this);
} else {
_open.call(this);
}
} else {
if(velocity > this.options.velThreshold) {
_open.call(this);
} else {
_close.call(this);
}
}
}).bind(this));
}
define(function(require, exports, module) {
var Engine = require("famous/core/Engine");
var GenericSync = require("famous/inputs/GenericSync");
var MouseSync = require("famous/inputs/MouseSync");
var TouchSync = require("famous/inputs/TouchSync");
var ScrollSync = require("famous/inputs/ScrollSync");
var Surface = require("famous/core/Surface");
var Accumulator = require("famous/inputs/Accumulator");
var mainContext = Engine.createContext();
var update = 0;
var start = 0;
GenericSync.register({
mouse : MouseSync,
touch : TouchSync,
scroll : ScrollSync
});
var accumulator = new Accumulator(start);
var genericSync = new GenericSync({
mouse : {
direction : GenericSync.DIRECTION_X,
scale : 2
},
touch : {direction : GenericSync.DIRECTION_Y},
scroll : {direction : GenericSync.DIRECTION_Y}
});
Engine.pipe(genericSync);
genericSync.pipe(accumulator);
var contentTemplate = function() {
return "<div>Update Count: " + update + "</div>" +
"<div>Accumulated distance: " + accumulator.get() + "</div>";
};
var surface = new Surface({
size: [undefined, undefined],
classes: ['grey-bg'],
content: contentTemplate()
});
genericSync.on('start', function(){
accumulator.set(start);
surface.setContent(contentTemplate());
});
genericSync.on("update", function() {
update++;
surface.setContent(contentTemplate());
});
mainContext.add(surface);
});
define(function(require, exports, module) {
var Engine = require("famous/core/Engine");
var GenericSync = require("famous/inputs/GenericSync");
var MouseSync = require("famous/inputs/MouseSync");
var TouchSync = require("famous/inputs/TouchSync");
var ScrollSync = require("famous/inputs/ScrollSync");
var Surface = require("famous/core/Surface");
var mainContext = Engine.createContext();
var start = 0;
var update = 0;
var end = 0;
var position = [0, 0];
var genericSync = new GenericSync(function() {
return [0, 0];
}, {
syncClasses: [MouseSync, TouchSync, ScrollSync]
});
Engine.pipe(genericSync);
var contentTemplate = function() {
return "<div>Start Count: " + start + "</div>" +
"<div>End Count: " + end + "</div>" +
"<div>Update Count: " + update + "</div>" +
"<div>Distance away from mousedown/touch origin:<br>" + position + "</div>";
};
var surface = new Surface({
size: [undefined, undefined],
classes: ['grey-bg'],
content: contentTemplate()
});
genericSync.on("start", function() {
start++;
position = [0, 0];
surface.setContent(contentTemplate());
});
genericSync.on("update", function(data) {
update++;
position[0] += data.position[0];
position[1] += data.position[1];
surface.setContent(contentTemplate());
});
genericSync.on("end", function() {
end++;
surface.setContent(contentTemplate());
});
mainContext.add(surface);
});
function _createMenuItem(tag, last) {
var container = new ContainerSurface({
size: [undefined, this.options.itemHeight]
});
var background = new Surface({
size: [undefined, this.options.itemHeight],
properties: {
background: "white",
padding: "0px",
margin: "0px",
overflow: "hidden",
lineHeight: this.options.itemHeight + "px"
}
});
container.add(background);
var surface = new Surface({
content: "<div class='right-arrow'>" + tag + "</div>",
size: [undefined, this.options.itemHeight],
properties: {
overflow: "hidden",
lineHeight: this.options.itemHeight + "px",
borderBottom: last ? "0px" : "1px solid rgb(200, 199, 204)",
fontWeight: "normal",
padding: "0px",
margin: "0px"
}
});
var modifier = new Modifier({
transform: Transform.translate(15, 0, 0)
});
container.add(modifier).add(surface);
this.surfaces.push(container);
var sync = new GenericSync({
"mouse" : {},
"touch" : {}
});
sync.on("start", function () {
background.setProperties({
background: "rgb(217, 217, 221)"
});
});
sync.on("end", function () {
background.setProperties({
background: "white"
});
this._eventOutput.emit("clickTag", tag);
}.bind(this));
surface.pipe(sync);
}
SocialItemView.prototype.setupEvent = function () {
var sync = new GenericSync(function () {
return this.pos;
}.bind(this), {
syncClasses: [Helpers.deviceSync()]
}
);
this.itemSurface.pipe(sync);
this.itemSurface.pipe(this._eventOutput);
this.pos = [0, 0];
sync.on('start', function () {
this.pos = [0, 0];
this._directionChosen = false;
this.clickTimeout = setTimeout(function () {
this.itemSurface.setProperties({backgroundColor: 'rgba(255,255,255,0.1)'});
}.bind(this), 100);
}.bind(this));
sync.on('update', function (data) {
if (this.clickTimeout) {
clearTimeout(this.clickTimeout);
delete this.clickTimeout;
}
this.itemSurface.setProperties({backgroundColor: 'transparent'});
this.pos = data.p; // the displacement from the start touch point.
if (Helpers.isMobile() && !this._directionChosen) {
var diffX = Math.abs(this.pos[0]),
diffY = Math.abs(this.pos[1]);
this.direction = diffX > diffY ? Utility.Direction.X : Utility.Direction.Y;
this._directionChosen = true;
if (this.direction == Utility.Direction.X) {
this.itemSurface.unpipe(this._eventOutput);
}
else {
this.itemSurface.pipe(this._eventOutput);
}
}
}.bind(this));
sync.on('end', function () {
setTimeout(function () {
this.itemSurface.setProperties({backgroundColor: 'transparent'});
}.bind(this), 300);
}.bind(this));
if (Helpers.isMobile() && this.direction != Utility.Direction.X) return;
};
GymListView.prototype._setItemSyncEvent = function(item){
var sync = new GenericSync(
['touch', 'mouse']
);
item.pipe(sync);
sync.on('update', function(data) {
if (!this.syncDirection){
if (Math.abs(data.velocity[0])>Math.abs(data.velocity[1])){
item.unpipe(this.gymScrollview);
} else {
item.unpipe(this._eventOutput);
}
this.syncDirection = true;
}
}.bind(this));
sync.on('end', (function() {
this.syncDirection = undefined;
item.pipe(this._eventOutput);
item.pipe(this.gymScrollview);
}).bind(this));
};
define(function(require, exports, module) {
'use strict';
// import dependencies
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 Transitionable = require('famous/transitions/Transitionable');
var SnapTransition = require('famous/transitions/SnapTransition');
Transitionable.registerMethod('snap', SnapTransition);
var GenericSync = require('famous/inputs/GenericSync');
var MouseSync = require('famous/inputs/MouseSync');
var TouchSync = require('famous/inputs/TouchSync');
var ScrollSync = require('famous/inputs/ScrollSync');
GenericSync.register({
'mouse': MouseSync,
'touch': TouchSync,
'scroll': ScrollSync
});
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
function rgbDifference(r, g, b) {
return 'rgb(' + Math.abs(255 - r) + ', ' + Math.abs(255 - g) + ', ' + Math.abs(255 - b) + ')';
}
var SURFACE_SIZE = [undefined, 100];
var OPACITY_SCALE = 0.9;
var OPACITY_THRESHOLD = 0.1;
var BACKGROUND_COLOR = 'rgb(' + r + ', ' + g + ', ' + b + ')';
// create the main context
var mainContext = Engine.createContext();
var position = new Transitionable(0);
var opacity = new Transitionable(1);
var sync = new GenericSync(
['mouse', 'touch', 'scroll'],
{ direction: GenericSync.DIRECTION_Y }
);
// your app here
var background = new Surface({
properties: {
backgroundColor: BACKGROUND_COLOR
}
});
var draggableSurface = new Surface({
size: SURFACE_SIZE,
properties: {
backgroundColor: '#fff',
cursor: 'pointer'
}
});
var textOutlineSurface = new Surface({
content: '10',
size: SURFACE_SIZE,
properties: {
backgroundColor: 'transparent',
color: '#fff',
fontSize: '60px',
fontWeight: '100',
textAlign: 'right',
paddingRight: '10%',
pointerEvents: 'none',
lineHeight: SURFACE_SIZE[1] + 'px',
textShadow: '0px 0px 4px rgba(0,0,0,0.25)'
// textShadow: '-1px -1px 0 rgba(0,0,0,0.5),1px -1px 0 rgba(0,0,0,0.5),-1px 1px 0 rgba(0,0,0,0.5),1px 1px 0 rgba(0,0,0,0.5)'
}
});
var textSurface = new Surface({
content: 'JOHNSON',
size: SURFACE_SIZE,
properties: {
backgroundColor: 'transparent',
color: rgbDifference(r, g, b),
fontSize: '60px',
fontWeight: 'bold',
textAlign: 'center',
pointerEvents: 'none',
lineHeight: SURFACE_SIZE[1] + 'px'
}
});
draggableSurface.pipe(sync);
sync.on('update', function(data) {
var currentPosition = position.get();
var contextSize = mainContext.getSize();
var percentagePosition = Math.round((currentPosition / contextSize[1]) * 100) / 100;
var newOpacity = (OPACITY_SCALE - percentagePosition);
var score = (newOpacity > 1) ? 10 : ((newOpacity < OPACITY_THRESHOLD) ? 1 : Math.floor((OPACITY_SCALE - percentagePosition) * 10) + 1);
if (newOpacity < OPACITY_THRESHOLD)
newOpacity = OPACITY_THRESHOLD;
position.set(currentPosition + data.delta);
opacity.set(newOpacity);
textOutlineSurface.setContent(score);
});
sync.on('end', function(data) {
var currentPosition = position.get();
var velocity = data.velocity;
var contextSize = mainContext.getSize();
if (currentPosition < 0) {
position.set(0, {
method: 'snap',
period: 150,
velocity: velocity
});
}
if ((currentPosition + SURFACE_SIZE[1]) > contextSize[1]) {
position.set(contextSize[1] - SURFACE_SIZE[1], {
method: 'snap',
period: 150,
velocity: velocity
});
}
});
var yPositionModifier = new Modifier({
transform: function() {
return Transform.translate(0, position.get(), 0);
}
});
var opacityTextModifier = new Modifier({
opacity: function() {
return opacity.get();
}
});
var opacityModifier = new Modifier({
opacity: 0.1
});
var centerTextModifier = new Modifier({
size: SURFACE_SIZE,
origin: [0.5, 0],
align: [0.5, 0]
});
mainContext.add(background);
var moveableNode = mainContext.add(yPositionModifier);
moveableNode.add(opacityModifier).add(draggableSurface);
moveableNode.add(textOutlineSurface);
moveableNode.add(centerTextModifier).add(opacityTextModifier).add(textSurface);
});
function drag(surface, link) {
// Links sync to our surface parameter
surface.pipe(sync);
// Updates position of transitionable
sync.on('update', function(data){
var currentPosition = position.get();
//Sets the position of the surface to the X position of the mouse
position.set([
currentPosition[0] + data.delta[0],
currentPosition[1]
]);
// Optionally modifies the opacity of the logo
// opacityLogo.setOpacity(1-Math.abs(currentPosition[0])/(window.innerWidth*.4));
//Modifies the opacity of the like button
if(currentPosition[0]>0){
opacityYes.setOpacity(currentPosition[0]/(window.innerWidth*.3));
}
// Modifies the opacity of the dislike button
if(currentPosition[0]<0){
opacityNo.setOpacity(Math.abs(currentPosition[0])/window.innerWidth*3);
}
});
// on dragging to right, like page and open link, else not like and close ad
surface.on('mouseup', function(){
var currentPosition = position.get();
//resets the opacity of the like and dislike to be hidden
opacityYes.setOpacity(0);
opacityNo.setOpacity(0);
console.log(currentPosition[0])
if (currentPosition[0] > 100) {
//Redirect to link if dragged right
position.set([0,0], {curve : 'easeOutBounce', duration : 300});
console.log("positive")
data.result = 'positive';
data.time= Date.now();
analytics(data)
window.open(link, '_blank');
} else if (currentPosition[0] < (-100)) {
// Transition out of dragged left
position.set([-window.innerWidth,0], {curve : 'easeOutBounce', duration : 800});
console.log("negative")
data.result = 'negative';
data.time= Date.now();
analytics(data)
}else{
//Bounces the surface back to center if the drag was insufficient
position.set([0,0], {curve : 'easeOutBounce', duration : 300});
}
})
// on touch drag right like, left dislike
surface.on('touchend', function(){
var currentPosition = position.get();
console.log(currentPosition)
//resets the opacity of the like and dislike to be hidden
opacityYes.setOpacity(0);
opacityNo.setOpacity(0);
//Redirect to link if dragged right
if (currentPosition[0] > 150) {
position.set([250,window.innerHeight], {curve : 'easeOutBounce', duration : 300});
data.result = 'positive';
data.time= Date.now();
analytics(data)
window.open(link, '_blank');
}else if (currentPosition[0] < (-150)) {
// Transition out of dragged left
position.set([window.innerWidth,0], {curve : 'easeOutBounce', duration : 800});
data.result = 'negative';
data.time= Date.now();
analytics(data)
}else{
//Bounces the surface back to center if the drag was insufficient
position.set([0,0], {curve : 'easeOutBounce', duration : 300});
}
})
// Applies updated position to surface
var positionModifier = new Modifier({
transform: function(){
var currentPosition = position.get();
return Transform.translate(currentPosition[0], currentPosition[1], 0);
}
});
// Sends back the modified surface and position modifier
return {surface: surface, positionModifier: positionModifier, like: like, notLike:notLike, opacityNo:opacityNo, opacityYes:opacityYes};
}
function setElementSurfaceListener(context, i) {
//////////////////////////////////////////////////////////////////////////////////////FLING LISTENERS:::::
var accumulator = new Accumulator([0,0]);
var sync = new GenericSync(['mouse', 'touch']);
context.elementElements[i].surface.pipe(sync);
context.elementElements[i].backSurface.pipe(sync);
sync.pipe(accumulator);
var inTable = function(data) {
var velocity = data.velocity;
if (velocity[0] > 1){
translateRightFromTable(velocity);
sync.removeListener('end', inTable);
sync.on('end', inHolding);
} else if (velocity[0] < 0.1 && velocity [0] > -0.1) {
context.inViewElements.push(i);
enlargeElementFromTable();
sync.removeListener('end', inTable);
sync.on('end', inView);
} else if (velocity[0] > 0.1 && velocity[0] < 1 || velocity[0] > -1 && velocity[0] < -0.1) {
if (context.isFliped.indexOf(i) > -1) {
reFlipElement(velocity);
} else {
flipElement(velocity);
}
}
}
var inHolding = function(data) {
var velocity = data.velocity;
if (velocity[0] < -1) {
attachElement(velocity);
//translateIntoTable(velocity);
sync.removeListener('end', inHolding);
sync.on('end', inTable);
} else if (velocity[0] < 0.1 && velocity [0] > -0.1) {
context.inViewElements.push(i);
enlargeElementFromHolding();
sync.removeListener('end', inHolding);
sync.on('end', inView);
} else if (velocity[0] > 0.1 && velocity[0] < 1 || velocity[0] > -1 && velocity[0] < -0.1) {
if (context.isFliped.indexOf(i) > -1) {
reFlipElement(velocity);
} else {
flipElement(velocity);
}
}
}
var inView = function(data) {
var velocity = data.velocity;
if (velocity[0] > 1) {
for (var int = context.inViewElements.length - 1; int >= 0; int--) {
if(context.inViewElements[int] === i) {
context.inViewElements.splice(int, 1);
}
}
translateRightFromInView(velocity);
sync.removeListener('end', inView);
sync.on('end', inHolding);
} else if (velocity[0] < 0.1 && velocity [0] > -0.1 || velocity[1] < -1) {
for (var int = context.inViewElements.length - 1; int >= 0; int--) {
if(context.inViewElements[int] === i) {
context.inViewElements.splice(int, 1);
}
}
//attachElement(velocity);
unenlargeElement();
sync.removeListener('end', inView);
sync.on('end', inTable);
} else if (velocity[0] > 0.1 && velocity[0] < 1 || velocity[0] > -1 && velocity[0] < -0.1) {
if (context.isFliped.indexOf(i) > -1) {
reFlipElement(velocity);
} else {
flipElement(velocity);
}
}
}
sync.on('end', inTable);
function flipElement(velocity) {
var individualYTransitionable = new Transitionable(0);
var individualYBackTransitionable = new Transitionable(-Math.PI);
var flipDirection = Math.PI;
if (velocity[0] < 0) {
flipDirection = -Math.PI;
individualYBackTransitionable.set(Math.PI);
}
context.elementElements[i].individual.transformFrom(function() {
return Transform.rotateY(individualYTransitionable.get())
});
context.elementElements[i].individualBack.transformFrom(function() {
return Transform.rotateY(individualYBackTransitionable.get())
});
var transition = {
method: 'tween',
duration: 4000,
curve: Easing.outElastic
};
individualYTransitionable.set(flipDirection, transition);
individualYBackTransitionable.set(0, transition);
addSvg();
context.isFliped.push(i);
}
function reFlipElement(velocity) {
var individualYTransitionable = new Transitionable(Math.PI);
var individualYBackTransitionable = new Transitionable(0);
flipDirection = -Math.PI;
if(velocity[0] > 0) {
flipDirection = Math.PI;
individualYTransitionable.set(-Math.PI);
}
context.elementElements[i].individual.transformFrom(function() {
return Transform.rotateY(individualYTransitionable.get())
});
context.elementElements[i].individualBack.transformFrom(function() {
return Transform.rotateY(individualYBackTransitionable.get())
});
var transition = {
method: 'tween',
duration: 4000,
curve: Easing.outElastic
};
individualYTransitionable.set(0, transition);
individualYBackTransitionable.set(flipDirection, transition);
for (var int = context.isFliped.length - 1; int >= 0; int--) {
if(context.isFliped[int] === i) {
context.isFliped.splice(int, 1);
}
}
}
function addSvg() {
var lanthanum = [2, 8, 18, 18, 9, 2];
var heighMulti = 3;
var dividerHeight = 6;
var width = 110;
var height = width * 1.25;
var element = '.element' + i;
var svg = d3.select(element).append("svg").attr("width", width).attr("height", height);
var newSVG = svg.selectAll("rect").data(lanthanum).enter().append("rect")
.attr("x", function(d,i) {
return (width*0.65) + i * dividerHeight;
}).attr("y", function(d, i) {
return -width/2 + (-d*heighMulti/2);
}).attr("width", 5)
.attr("height", function(d) {
return 0;
})
.attr("fill", function(d) {
return "rgb(0,"+(d*20)+","+(d*10)+")";
})
.attr("transform", "rotate(90 0 0) skewX(45)")
.transition()
.duration(2000)
.ease(Math.sqrt)
.attr("height", function(d) {
return d * heighMulti;
});
}
function detachElement(velocity) {
var flatXTransitionable = new Transitionable(context.xTransitionable.get());
var flatYTransitionable = new Transitionable(context.yTransitionable.get());
var flatZTransitionable = new Transitionable(context.zTransitionable.get());
var flatX = new Transitionable(0);
var flatY = new Transitionable(0);
var originalX = context.elementElements[i].original[12];
context.elementElements[i].modifierChain.removeModifier(context.elementElements[i].table);
context.elementElements[i].modifierChain.addModifier(context.elementElements[i].flat);
context.elementElements[i].modifierBackChain.removeModifier(context.elementElements[i].tableBack);
context.elementElements[i].modifierBackChain.addModifier(context.elementElements[i].flatBack);
context.elementElements[i].flat.transformFrom(function() {
return Transform.multiply(Transform.translate(flatX.get(),flatY.get(),flatZTransitionable.get()), Transform.multiply(Transform.rotateY(flatYTransitionable.get()), Transform.rotateX(flatXTransitionable.get())))
});
context.elementElements[i].flatBack.transformFrom(function() {
return Transform.multiply(Transform.translate(flatX.get(),flatY.get(),flatZTransitionable.get()), Transform.multiply(Transform.rotateY(flatYTransitionable.get()), Transform.rotateX(flatXTransitionable.get())))
});
var duration = 5000 / velocity[0];
var transition = {
method: 'tween',
duration: duration,
curve: 'easeOut'
};
flatYTransitionable.set(0, transition);
flatXTransitionable.set(0, transition);
flatZTransitionable.set(-6000, transition);
flatX.set(-originalX + (context.windowWidth * 3.3), transition);
flatY.set(velocity[1] * 1000, transition);
}
function attachElement(velocity) {
var flatTransform = context.elementElements[i].flat.getFinalTransform();
var detachedX = new Transitionable(flatTransform[12]);
var detachedY = new Transitionable(flatTransform[13]);
var detachedZ = new Transitionable(flatTransform[14]);
var tableYTransitionable = new Transitionable(0);
var tableXTransitionable = new Transitionable(0);
context.elementElements[i].flat.transformFrom(function() {
return Transform.multiply(Transform.translate(detachedX.get(),detachedY.get(),detachedZ.get()), Transform.multiply(Transform.rotateY(tableYTransitionable.get()), Transform.rotateX(tableXTransitionable.get())))
});
context.elementElements[i].flatBack.transformFrom(function() {
return Transform.multiply(Transform.translate(detachedX.get(),detachedY.get(),detachedZ.get()), Transform.multiply(Transform.rotateY(tableYTransitionable.get()), Transform.rotateX(tableXTransitionable.get())))
});
var duration = 5000 / -velocity[0];
var transition = {
method: 'tween',
duration: duration,
curve: 'easeOut'
};
tableYTransitionable.set(context.yTransitionable.get(), transition);
tableXTransitionable.set(context.xTransitionable.get(), transition);
detachedX.set(0, transition);
detachedY.set(0, transition);
detachedZ.set(context.zTransitionable.get(), transition);
Timer.setTimeout(function() {
context.elementElements[i].modifierChain.addModifier(context.elementElements[i].table);
context.elementElements[i].modifierChain.removeModifier(context.elementElements[i].flat);
context.elementElements[i].modifierBackChain.addModifier(context.elementElements[i].tableBack);
context.elementElements[i].modifierBackChain.removeModifier(context.elementElements[i].flatBack);
}.bind(this), duration);
}
function translateRightFromTable(velocity) {
var flatXTransitionable = new Transitionable(context.xTransitionable.get());
var flatYTransitionable = new Transitionable(context.yTransitionable.get());
var flatZTransitionable = new Transitionable(context.zTransitionable.get());
var flatX = new Transitionable(0);
var flatY = new Transitionable(0);
var originalX = context.elementElements[i].original[12];
context.elementElements[i].modifierChain.removeModifier(context.elementElements[i].table);
context.elementElements[i].modifierChain.addModifier(context.elementElements[i].flat);
context.elementElements[i].modifierBackChain.removeModifier(context.elementElements[i].tableBack);
context.elementElements[i].modifierBackChain.addModifier(context.elementElements[i].flatBack);
context.elementElements[i].flat.transformFrom(function() {
return Transform.multiply(Transform.translate(flatX.get(),flatY.get(),flatZTransitionable.get()), Transform.multiply(Transform.rotateY(flatYTransitionable.get()), Transform.rotateX(flatXTransitionable.get())))
});
context.elementElements[i].flatBack.transformFrom(function() {
return Transform.multiply(Transform.translate(flatX.get(),flatY.get(),flatZTransitionable.get()), Transform.multiply(Transform.rotateY(flatYTransitionable.get()), Transform.rotateX(flatXTransitionable.get())))
});
var duration = 5000 / velocity[0];
var transition = {
method: 'tween',
duration: duration,
curve: 'easeOut'
};
flatYTransitionable.set(0, transition);
flatXTransitionable.set(0, transition);
flatZTransitionable.set(-1500, transition);
flatX.set(-originalX + (context.windowWidth * 1.2), transition);
flatY.set(velocity[1] * 1000, transition);
}
function translateRightFromInView(velocity) {
var flatXTransitionable = new Transitionable(0);
var flatYTransitionable = new Transitionable(0);
var flatZTransitionable = new Transitionable(700);
var originalX = context.elementElements[i].original[12];
var originalY = context.elementElements[i].original[13];
var flatX = new Transitionable(-originalX);
var flatY = new Transitionable(-originalY);
var originalX = context.elementElements[i].original[12];
var originalY = context.elementElements[i].original[13];
context.elementElements[i].flat.transformFrom(function() {
return Transform.multiply(Transform.translate(flatX.get(),flatY.get(),flatZTransitionable.get()), Transform.multiply(Transform.rotateY(flatYTransitionable.get()), Transform.rotateX(flatXTransitionable.get())))
});
context.elementElements[i].flatBack.transformFrom(function() {
return Transform.multiply(Transform.translate(flatX.get(),flatY.get(),flatZTransitionable.get()), Transform.multiply(Transform.rotateY(flatYTransitionable.get()), Transform.rotateX(flatXTransitionable.get())))
});
var duration = 5000 / velocity[0];
var transition = {
method: 'tween',
duration: duration,
curve: 'easeOut'
};
context.elementElements[i].position.setTransform(context.elementElements[i].original, {
duration: duration,
curve: 'easeOut'
});
context.elementElements[i].positionBack.setTransform(context.elementElements[i].original, {
duration: duration,
curve: 'easeOut'
});
flatYTransitionable.set(0, transition);
flatXTransitionable.set(0, transition);
flatZTransitionable.set(-1500, transition);
flatX.set(-originalX + (context.windowWidth * 1.2), transition);
flatY.set(velocity[1] * 1000, transition);
}
function translateIntoTable(velocity) {
context.elementElements[i].position.setTransform(context.elementElements[i].original, {
duration: 1500,
curve: 'easeOut'
});
context.elementElements[i].positionBack.setTransform(context.elementElements[i].original, {
duration: 1500,
curve: 'easeOut'
});
}
function enlargeElementFromTable() {
var flatXTransitionable = new Transitionable(context.xTransitionable.get());
var flatYTransitionable = new Transitionable(context.yTransitionable.get());
var flatZTransitionable = new Transitionable(context.zTransitionable.get());
var flatX = new Transitionable(0);
var flatY = new Transitionable(0);
var originalX = context.elementElements[i].original[12];
var originalY = context.elementElements[i].original[13];
context.elementElements[i].modifierChain.removeModifier(context.elementElements[i].table);
context.elementElements[i].modifierChain.addModifier(context.elementElements[i].flat);
context.elementElements[i].modifierBackChain.removeModifier(context.elementElements[i].tableBack);
context.elementElements[i].modifierBackChain.addModifier(context.elementElements[i].flatBack);
context.elementElements[i].flat.transformFrom(function() {
return Transform.multiply(Transform.translate(flatX.get(),flatY.get(),flatZTransitionable.get()), Transform.multiply(Transform.rotateY(flatYTransitionable.get()), Transform.rotateX(flatXTransitionable.get())))
});
context.elementElements[i].flatBack.transformFrom(function() {
return Transform.multiply(Transform.translate(flatX.get(),flatY.get(),flatZTransitionable.get()), Transform.multiply(Transform.rotateY(flatYTransitionable.get()), Transform.rotateX(flatXTransitionable.get())))
});
//var duration = 5000 / velocity[0];
var transition = {
method: 'tween',
duration: 1500,
curve: 'easeOut'
};
flatYTransitionable.set(0, transition);
flatXTransitionable.set(0, transition);
flatZTransitionable.set(700, transition);
flatX.set(-originalX, transition);
flatY.set(-originalY, transition);
Timer.setTimeout(function() {
//addHQElement();
}.bind(this), 1500);
scoochElements();
}
function enlargeElementFromHolding() {
var flatXTransitionable = new Transitionable(0);
var flatYTransitionable = new Transitionable(0);
var current = context.elementElements[i].flat.getTransform();
var currentX = current[12];
var currentY = current[13];
var currentZ = current[14];
var flatZTransitionable = new Transitionable(currentZ);
var flatX = new Transitionable(currentX);
var flatY = new Transitionable(currentY);
var originalX = context.elementElements[i].original[12];
var originalY = context.elementElements[i].original[13];
context.elementElements[i].flat.transformFrom(function() {
return Transform.multiply(Transform.translate(flatX.get(),flatY.get(),flatZTransitionable.get()), Transform.multiply(Transform.rotateY(flatYTransitionable.get()), Transform.rotateX(flatXTransitionable.get())))
});
context.elementElements[i].flatBack.transformFrom(function() {
return Transform.multiply(Transform.translate(flatX.get(),flatY.get(),flatZTransitionable.get()), Transform.multiply(Transform.rotateY(flatYTransitionable.get()), Transform.rotateX(flatXTransitionable.get())))
});
var transition = {
method: 'tween',
duration: 1500,
curve: 'easeOut'
};
flatYTransitionable.set(0, transition);
flatXTransitionable.set(0, transition);
flatZTransitionable.set(700, transition);
flatX.set(-originalX, transition);
flatY.set(-originalY, transition);
scoochElements();
}
function addHQElement() {
var hqWidth = context.elementWidth*3.3;
var hqHeight = hqWidth * 1.25;
var hqSurface = new Surface({
size: [hqWidth,hqHeight],
content: 'H',
properties: {
lineHeight: hqHeight + 'px',
textAlign: 'center',
fontSize: hqWidth / 3 + 'px',
overflow: 'hidden',
color: 'white',
fontFamily: 'Roboto, sans-serif',
fontWeight: 100
}
});
hqSurface.addClass('hqPeriodicElement');
var hqModifier = new Modifier({
origin: [0.5,0.5],
align: [0.5,0.5],
transform: Transform.translate(0,0,1000)
});
context.add(hqModifier).add(hqSurface);
}
function scoochElements() {
for (var int = 0; int < context.inViewElements.length; int++) {
var elementNumber = context.inViewElements[int];
context.elementElements[elementNumber].position.halt();
context.elementElements[elementNumber].positionBack.halt();
var inViewX = context.elementElements[elementNumber].original[12];
var inViewY = context.elementElements[elementNumber].original[13];
//console.log(elementNumber + ': ' + context.elementElements[elementNumber].flat.getTransform() + ' inViewX&Y: ' + inViewX + ', ' + inViewY);
var halfElement = -context.elementWidth / 2 - context.elementWidth *.03;
var x = (halfElement * (context.inViewElements.length - 1)) + (-halfElement * 2 * int);
var newX = inViewX + x;
console.log(halfElement + ', ' + newX);
context.elementElements[elementNumber].position.setTransform(Transform.translate(newX,inViewY,0), {
duration: 1500,
curve: 'easeOut'
});
context.elementElements[elementNumber].positionBack.setTransform(Transform.translate(newX,inViewY,0), {
duration: 1500,
curve: 'easeOut'
});
}
}
function unenlargeElement() {
var flatXTransitionable = new Transitionable(0);
var flatYTransitionable = new Transitionable(0);
var flatZTransitionable = new Transitionable(700);
var originalX = context.elementElements[i].original[12];
var originalY = context.elementElements[i].original[13];
var flatX = new Transitionable(-originalX);
var flatY = new Transitionable(-originalY);
var originalX = context.elementElements[i].original[12];
var originalY = context.elementElements[i].original[13];
context.elementElements[i].flat.transformFrom(function() {
return Transform.multiply(Transform.translate(flatX.get(),flatY.get(),flatZTransitionable.get()), Transform.multiply(Transform.rotateY(flatYTransitionable.get()), Transform.rotateX(flatXTransitionable.get())))
});
context.elementElements[i].flatBack.transformFrom(function() {
return Transform.multiply(Transform.translate(flatX.get(),flatY.get(),flatZTransitionable.get()), Transform.multiply(Transform.rotateY(flatYTransitionable.get()), Transform.rotateX(flatXTransitionable.get())))
});
var transition = {
method: 'tween',
duration: 1500,
curve: 'easeOut'
};
context.elementElements[i].position.setTransform(context.elementElements[i].original, {
duration: 1500,
curve: 'easeOut'
});
context.elementElements[i].positionBack.setTransform(context.elementElements[i].original, {
duration: 1500,
curve: 'easeOut'
});
flatYTransitionable.set(context.yTransitionable.get(), transition);
flatXTransitionable.set(context.xTransitionable.get(), transition);
flatZTransitionable.set(context.zTransitionable.get(), transition);
flatX.set(0, transition);
flatY.set(0, transition);
Timer.setTimeout(function() {
context.elementElements[i].modifierChain.addModifier(context.elementElements[i].table);
context.elementElements[i].modifierChain.removeModifier(context.elementElements[i].flat);
context.elementElements[i].modifierBackChain.addModifier(context.elementElements[i].tableBack);
context.elementElements[i].modifierBackChain.removeModifier(context.elementElements[i].flatBack);
}.bind(this), 1500);
}
}
function _createTasks() {
// console.log('making new task list...');
var data = allData.getTasks(this.listIndex);
this.scrollView = new ScrollView({
});
this.renderNodes = [];
this.taskItems = [];
this.modifiers = [];
this.draggables = [];
for (var i = 0; i < data.length; i++) {
var taskData = data[i];
// var taskHSL = ((((i) * 2000) % 460) / 11);
var taskHSL = ((((i + 8) * 100)) / 6);
var newTaskItem = new TaskItemView({
taskItemContent: taskData.name,
taskItemCompleted: taskData.completed,
taskItemStarred: taskData.starred,
taskItemDeleteRange: this.options.taskDeleteRange,
taskItemCreated: taskData.created,
backgroundColor: "hsl(" + taskHSL + ", 50%, 54%)",
doCompleteAnimationIn: !this.deletingTask
}, i);
this.taskItems.push(newTaskItem);
newTaskItem.on('taskNameClicked', function(i) {
this._eventOutput.emit('taskNameClick');
// console.log('getTaskIndex: ');
// console.log(this.taskItems[i].getTaskIndex());
// console.log('task name ' + (i + 1) + ' clicked');
}.bind(this, i));
newTaskItem.on('taskDeleteClicked', function(i) {
this.deletingTask = true;
this._eventOutput.emit('taskDeleteClick');
// console.log('task delete ' + (i + 1) + ' clicked');
_deleteTask.call(this, i);
}.bind(this, i));
newTaskItem.on('taskCompleteClicked', function(i) {
this.deletingTask = true;
_completeTask.call(this, this.listIndex, i);
}.bind(this, i));
newTaskItem.on('taskStarClicked', function(i) {
_starTask.call(this, this.listIndex, i);
}.bind(this, i));
var newDraggable = new Draggable({
xRange: [-110, 0],
yRange: [0, 0]
});
this.draggables.push(newDraggable);
var newModifier = new Modifier({});
this.modifiers.push(newModifier);
var newRenderNode = new RenderNode(newDraggable);
newRenderNode.add(newModifier).add(newTaskItem);
var context = this;
newDraggable.on('end', function(newTaskItem, i, e) {
// console.log(i);
if (e.position[0] < context.options.taskDeleteRange) {
this.setPosition([0, 0, 0], {duration: 200, curve: 'easeOut'});
newTaskItem.initiateSlide(i);
} else {
this.setPosition([0, 0, 0], trans);
}
}.bind(newDraggable, newTaskItem, i));
newDraggable.on('update', function(i, e) {
if (e.position[0] <= -16) {
context.taskItems[i].unpipe(context.scrollView);
context.taskItems[i].pipe(context.draggables[i]);
}
if (context.scrollView.getVelocity() !== 0) {
e.position[0] = 0;
context.taskItems[i].unpipe(context.draggables[i]);
context.taskItems[i].pipe(context.scrollView);
}
this.setDeleteOpacity(e.position[0]);
}.bind(newTaskItem, i));
var sync = new GenericSync({
"mouse" : {},
"touch" : {},
// "scroll" : {scale : .5}
});
sync.on('end', function(i){
context.taskItems[i].pipe(context.scrollView);
context.taskItems[i].pipe(context.draggables[i]);
// context.scrollView.setVelocity(0);
}.bind(this, i));
newTaskItem.pipe(sync);
newTaskItem.pipe(newDraggable);
newTaskItem.pipe(this.scrollView);
this.renderNodes.push(newRenderNode);
if (!this.deletingTask) {
(function() {
var newOpacity = new Transitionable(0);
newModifier.opacityFrom(function() {
return newOpacity.get();
});
var newTransform = new Transitionable([10, -100, -1000]);
// var newTransform = new Transitionable([0, 100, 1000]);
newModifier.transformFrom(function() {
var currentValue = newTransform.get();
return Transform.translate(currentValue[0], currentValue[1], currentValue[2]);
});
// console.log();
var amount = ((i+5) * 380);
newOpacity.set(1, {duration: (amount/2), curve: 'easeInOut'}, function() {
// console.log('here');
});
newTransform.set([0, 0, 0], {duration: (amount/4), curve: 'easeInOut'}, function() {
});
})(i);
}
}
this.scrollView.sequenceFrom(this.renderNodes);
this.node.add(this.scrollView);
this.deletingTask = false;
}
define(function(require, exports, module) {
'use strict';
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var ImageSurface = require('famous/surfaces/ImageSurface');
var Surface = require('famous/core/Surface')
var StateModifier = require('famous/modifiers/StateModifier')
var View = require('famous/core/View')
var Easing = require('famous/transitions/Easing')
var SpringTransition = require('famous/transitions/SpringTransition')
var EventHandler = require('famous/core/EventHandler')
var HeaderFooterLayout = require('famous/views/HeaderFooterLayout')
var GridLayout = require('famous/views/GridLayout')
var Transitionable = require('famous/transitions/Transitionable')
var SnapTransition = require('famous/transitions/SnapTransition')
Transitionable.registerMethod('spring', SnapTransition)
var MouseSync = require('famous/inputs/MouseSync')
var TouchSync = require('famous/inputs/TouchSync')
var ScrollSync = require('famous/inputs/ScrollSync')
var GenericSync = require('famous/inputs/GenericSync')
GenericSync.register({
"mouse" : MouseSync
, "touch" : TouchSync
})
var sync = new GenericSync(['mouse','touch'], {
direction: GenericSync.DIRECTION_X
})
var DISPLACEMENT_LIMIT = 100
var DISPLACEMENT_PEEK = 50
var DISPLACEMENT_THRESHOLD = 200
var VELOCITY_THRESHOLD = 0.2
var SURFACE_SIZE = [200,200]
var position = new Transitionable(0)
var background = new Surface({
size: SURFACE_SIZE,
properties : {background:'black'}
})
var draggableSurface = new Surface({
size: SURFACE_SIZE,
properties : {background:'red'}
})
var textSurface = new Surface({
size : SURFACE_SIZE,
content : '➵',
properties: {
fontSize : '100px',
lineHeight: SURFACE_SIZE[1] + 'px',
textAlign : 'center',
pointerEvents : 'none',
textShadow: '0 0 2px white'
}
})
draggableSurface.pipe(sync)
sync.on('update', function(data) {
var curPos = position.get()
var delta = data.delta
if (curPos + delta < DISPLACEMENT_LIMIT) {
position.set(curPos+delta)
} else {
position.get(DISPLACEMENT_LIMIT)
}
if (curPos + delta < -DISPLACEMENT_PEEK)
position.set(-DISPLACEMENT_PEEK)
})
sync.on('end', function(data) {
var curPos = position.get()
var velocity = data.velocity
if (curPos>DISPLACEMENT_THRESHOLD || velocity > VELOCITY_THRESHOLD) {
position.set(DISPLACEMENT_LIMIT, {
method : 'snap',
period : 200,
velocity : velocity
})
} else {
position.set(0, {
method : 'snap',
period : 200,
velocity : velocity
})
}
})
var positionMod = new Modifier({
transform: function() {
return Transform.translate(position.get(),0,0)
}
})
var rotationMod = new Modifier({
transform : function() {
var angle = Math.PI * (position.get() / DISPLACEMENT_LIMIT)
return Transform.rotateZ(angle)
}
})
var centerMod = new Modifier({origin: [0.5,0.5]})
var mainContext = Engine.createContext()
var centerNode = mainContext.add(centerMod)
centerNode.add(background)
var movableNod = centerNode.add(positionMod)
movableNod.add(draggableSurface)
movableNod.add(rotationMod).add(textSurface)
});
function _createPage() {
this.originMod = new Modifier({
origin: [0, 0]
});
this.pageSurface = new Surface({
size: [undefined, undefined],
content: this.options.content,
classes: ["page"],
properties: {
backgroundColor: '#111',
fontSize: '16px'
}
});
var modifier = new Modifier({
transform: Transform.rotateY(0)
});
this._add(this.originMod).add(this.pageSurface);
this.position = 0;
var sync = new GenericSync(['mouse', 'touch'], {
direction: GenericSync.DIRECTION_X
})
this.pageSurface.pipe(sync);
sync.on('start', function(data) {
this.touchJustStarted = true;
}.bind(this));
sync.on('update', function(data) {
var edge = window.innerWidth - (this.pageSurface.getSize()[0])
if (this.touchJustStarted) {
if (data.position >= 0 && data.velocity >= 0) {
this.rotatePrevious = true;
} else {
this.rotatePrevious = false;
}
this.touchJustStarted = false;
}
if (!this.rotatePrevious) {
if (data.position > edge) {
this.position = edge;
} else if (data.position >= 0) {
this.position = 0;
} else {
this.position = data.position;
}
// Converts position in pixels to degrees and then to radians.
var deg = (60 * Math.abs(this.position)) / window.innerWidth;
var radians = -Math.floor(deg) * (Math.PI / 180); // Negative to flip forward
this.rotate(radians);
} else { // Previous Page Rotate
this.position = data.position;
var prevDeg = 120 - (180 * Math.abs(-data.position)) / window.innerWidth;
var prevRadians = Math.floor(prevDeg) * (Math.PI / 180); // Negative to flip forward
this._eventOutput.emit('rotatePrevious', {
radians: prevRadians
});
}
}.bind(this));
var welcomeScreenAnimation = new steroids.Animation({
transition: "flipVerticalFromBottom",
duration: 0.7,
curve: "easeInOut",
reversedTransition: "curlDown",
reversedDuration: 0.4
});
sync.on('end', function(data) {
if (this.rotatePrevious) {
this._eventOutput.emit('touchEndPrevious', data);
} else {
if (data.velocity.toFixed(2) < 0 && !this.options.last) {
this.turn();
this._eventOutput.emit('nextPage');
} else {
this.turnBack();
}
}
if(this.options.last) {
var mainView = new steroids.views.WebView("http://localhost/main.html");
steroids.layers.push({
overrideBackButton: true,
view: mainView,
navigationBar: true,
statusBar: true,
tabBar: true,
animation: welcomeScreenAnimation
});
}
this.position = 0;
}.bind(this));
// End event for touchEndPrevious. @todo make this clearer.
this.on('end', function(data) {
if (data.velocity.toFixed(2) < 0 && !this.options.last) {
this.turn();
this._eventOutput.emit('nextPage');
} else {
this.turnBack();
}
if(this.options.last) {
var mainView = new steroids.views.WebView("http://localhost/main.html");
steroids.layers.push({
overrideBackButton: true,
view: mainView,
navigationBar: true,
statusBar: true,
tabBar: true,
animation: welcomeScreenAnimation
});
}
this.position = 0;
}.bind(this));
}
function TestView() {
View.apply(this, arguments);
this.elementSize = 120;
this.elementWidth = this.elementSize;
this.elementHeight = this.elementWidth * 1.25;
this.tableWidth = this.elementWidth * 18.72;
this.tableHeight = this.elementHeight * 10.4;
this.windowHeight = window.innerHeight;
this.windowWidth = window.innerWidth;
console.log(this.windowWidth +', ' + this.windowHeight);
this.inViewElements = [];
this.isFliped = [];
var mainEngine = Engine.createContext();
mainEngine.setPerspective(1000);
Transitionable.registerMethod('tween', TweenTransition);
this.yTransitionable = new Transitionable(0);
this.xTransitionable = new Transitionable(0);
this.zTransitionable = new Transitionable(-1500);
var position = [0,0];
GenericSync.register({
mouse: MouseSync,
touch: TouchSync
});
var accumulator = new Accumulator(position);
var genericSync = new GenericSync(['mouse', 'touch']);
Engine.pipe(genericSync);
genericSync.pipe(accumulator);
genericSync.on('update', function() {
var genericPosition = accumulator.get();
this._eventOutput.emit('planeChanged', genericPosition);
}.bind(this));
var scrollAccumulator = new Accumulator([0,-1500]);
var scrollSync = new ScrollSync();
Engine.pipe(scrollSync);
scrollSync.pipe(scrollAccumulator);
scrollSync.on('update', function(data) {
var scrolled = scrollAccumulator.get();
this._eventOutput.emit('planeZChanged', scrolled[1]);
}.bind(this));
var pinchAccumulator = new Accumulator(0);
var pinchSync = new PinchSync();
Engine.pipe(pinchSync);
pinchSync.pipe(pinchAccumulator);
pinchSync.on('update', function(data) {
var pinched = pinchAccumulator.get() * 2;
this._eventOutput.emit('planeZChanged', pinched);
}.bind(this));
_setPlaneListener.call(this);
_setPageButtons.call(this);
mainEngine.add(_createElements.call(this));
this.add(mainEngine);
}
ItemView.prototype.setupEvent = function () {
var sync = new GenericSync(function () {
return this.pos;
}.bind(this), {
syncClasses: [Helpers.deviceSync()]
}
);
this.itemSurface.pipe(sync);
this.itemSurface.pipe(this._eventOutput);
this.pos = [0, 0];
sync.on('start', function () {
this.pos = this.isEditingMode ? [this.options.nButtons * this.options.buttonSizeX, 0] : [0, 0];
this._directionChosen = false;
this.clickTimeout = setTimeout(function () {
this.itemSurface.setProperties({backgroundColor: 'rgba(255,255,255,0.1)'});
}.bind(this), 100);
}.bind(this));
sync.on('update', function (data) {
if (this.clickTimeout) {
clearTimeout(this.clickTimeout);
delete this.clickTimeout;
}
this.itemSurface.setProperties({backgroundColor: 'transparent'});
this.pos = data.p; // the displacement from the start touch point.
if (Helpers.isMobile() && !this._directionChosen) {
var diffX = this.isEditingMode ? Math.abs(this.pos[0] - this.options.nButtons * this.options.buttonSizeX) : Math.abs(this.pos[0]),
diffY = Math.abs(this.pos[1]);
this.direction = diffX > diffY ? Utility.Direction.X : Utility.Direction.Y;
this._directionChosen = true;
if (this.direction == Utility.Direction.X) {
this.itemSurface.unpipe(this._eventOutput);
}
else {
this.itemSurface.pipe(this._eventOutput);
}
} else {
if (!Helpers.isMobile() || this.direction == Utility.Direction.X) {
this.animateItem();
this.animateLeftButtons();
this.animateRightButtons();
}
}
}.bind(this));
sync.on('end', function (data) {
setTimeout(function () {
this.itemSurface.setProperties({backgroundColor: 'transparent'});
}.bind(this), 300);
this.pos = data.p;
if (Helpers.isMobile() && this.direction != Utility.Direction.X) return;
if (this.pos[0] > this.options.nButtons * this.options.buttonSizeX) {
this.toggleEditing();
} else {
this.setEditingOff();
}
if (this.pos[0] < -0.3 * window.innerWidth) {
this._eventOutput.emit(this.options.rightButton.event, this.model);
this.setEditingOff();
}
}.bind(this));
}
define(function(requires,exports,module){
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var Transform = require("famous/core/Transform");
var Modifier = require("famous/core/Modifier");
var MouseSync = require("famous/inputs/MouseSync");
var TouchSync = require("famous/inputs/TouchSync");
var ScrollSync = require("famous/inputs/ScrollSync");
var GenericSync = require("famous/inputs/GenericSync");
// register any necessary Syncs globally by {SYNC_ID : SYNC_CLASS}
GenericSync.register({
"mouse" : MouseSync,
"touch" : TouchSync,
"scroll" : ScrollSync
});
var Transitionable = require("famous/transitions/Transitionable");
var SnapTransition = require("famous/transitions/SnapTransition");
Transitionable.registerMethod("spring", SnapTransition);
var position = new Transitionable([0, 0]);
// create a sync from the registered SYNC_IDs
// here we define default options for `mouse` and `touch` while
// scrolling sensitivity is scaled down
var sync = new GenericSync({
"mouse" : {},
"touch" : {},
"scroll" : {scale : .5}
});
var surface = new Surface({
size : [200, 200],
properties : {background : 'red'}
});
// now surface's events are piped to `MouseSync`, `TouchSync` and `ScrollSync`
surface.pipe(sync);
sync.on('update', function(data){
var currentPosition = position.get();
position.set([
currentPosition[0] + data.delta[0],
currentPosition[1] + data.delta[1]
]);
});
sync.on('end', function(data){
var velocity = data.velocity;
position.set([0, 0], {
method : 'spring',
period : 150,
velocity : velocity
});
});
var positionModifier = new Modifier({
transform : function(){
var currentPosition = position.get();
return Transform.translate(currentPosition[0], currentPosition[1], 0);
}
});
var centerModifier = new Modifier({origin : [0.5, 0.5]});
var mainContext = Engine.createContext();
mainContext.add(centerModifier).add(positionModifier).add(surface);
});
define('main', function(require, exports, module) {
"use strict";
// Dependencies
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var ScrollView = require('famous/views/Scrollview');
var GenericSync = require('famous/inputs/GenericSync');
var MouseSync = require('famous/inputs/MouseSync');
var TouchSync = require('famous/inputs/TouchSync');
// Create the context
var mainContext = Engine.createContext();
// Scrollview and surfaces
var scrollview = new ScrollView({
direction: 0,
paginated: true
});
var surfaces = [];
scrollview.sequenceFrom(surfaces);
// touch + mouse sync
GenericSync.register({
'mouse' : MouseSync,
'touch' : TouchSync
});
var genericSync = new GenericSync(
['mouse', 'touch'],
{direction : GenericSync.DIRECTION_X}
);
function setContent() {
for (var i = 0, temp; i < 50; i++) {
temp = new Surface({
content: 'Surface: ' + surfaces.length,
size: [180, 100],
properties: {
backgroundColor: 'hsl(' + (i * 360 / 10) + ', 100%, 50%)',
lineHeight: '100px',
textAlign: 'center'
}
});
temp.pipe(genericSync);
surfaces.push(temp);
}
}
// pipe touch+mouse events
genericSync.pipe(scrollview);
// events listening
genericSync.on('end', function(data){
console.log(data);
});
// Initial content
setContent();
mainContext.add(scrollview);
});
define(function(require, exports, module) {
// import dependencies
var Engine = require('famous/core/Engine')
var Surface = require('famous/core/Surface')
var Modifier = require('famous/core/Modifier')
var Transform = require('famous/core/Transform')
var Transitionable = require('famous/transitions/Transitionable')
var SnapTransition = require('famous/transitions/SnapTransition')
Transitionable.registerMethod('snap', SnapTransition)
var GenericSync = require('famous/inputs/GenericSync')
var MouseSync = require('famous/inputs/MouseSync')
var TouchSync = require('famous/inputs/TouchSync')
GenericSync.register({
'mouse' : MouseSync,
'touch' : TouchSync
})
var DISPLACEMENT_LIMIT = 100
var DISPLACEMENT_PEEK = 50
var DISPLACEMENT_THRESHOLD = 50
var VELOCITY_THRESHOLD = 0.2
var SURFACE_SIZE = [undefined, 100]
var position = new Transitionable(0)
var sync = new GenericSync(
['mouse','touch'],
{direction : GenericSync.DIRECTION_Y}
)
var background = new Surface({
size : SURFACE_SIZE,
properties : {background : '#3399FF'}
})
var draggableSurface = new Surface({
size: SURFACE_SIZE,
properties : {background : '#FF9933'}
});
draggableSurface.pipe(sync)
//event listeners
sync.on('update', function(e){
var xy = position.get()
var delta = e.delta;
if(xy + delta < DISPLACEMENT_LIMIT){
position.set(xy + delta)
}else{
position.set(DISPLACEMENT_LIMIT)
}
if(xy + delta < -DISPLACEMENT_PEEK) position.set(-DISPLACEMENT_PEEK)
})
sync.on('end', function(e){
var xy = position.get()
var v = e.velocity;
if(xy > DISPLACEMENT_THRESHOLD || v > VELOCITY_THRESHOLD){
position.set(DISPLACEMENT_LIMIT, {
method : 'snap',
period : 200,
velocity : v
})
}else{
position.set(0,{
method : 'snap',
period : 200,
velocity : v
})
}
})
//end of event listeners
var positionModifier = new Modifier({
transform : function(){
return Transform.translate(0,position.get(),0)
}
})
var centerModifier = new Modifier({
size: SURFACE_SIZE,
origin: [0.5,0],
align: [0.5,0]
})
var rotationModifier = new Modifier({
size: SURFACE_SIZE,
origin: [0.5,0.5],
align: [0.5,0.5],
transform : function(){
var angle = Math.PI * (position.get()/DISPLACEMENT_LIMIT);
return Transform.rotateZ(angle)
}
})
var textSurface = new Surface({
size: SURFACE_SIZE,
content: '↑',
properties:{
color: '#fff',
fontSize: '60px',
lineHeight: SURFACE_SIZE[1] + 'px',
textAlign: 'center',
pointerEvents: 'none'
}
})
// create the main context
var mainContext = Engine.createContext();
mainContext.add(background);
var moveableNode = mainContext.add(positionModifier);
moveableNode.add(draggableSurface);
moveableNode.add(centerModifier).add(rotationModifier).add(textSurface)
});
PageView.prototype.createTouchBindings = function() {
var sync = new GenericSync(['mouse', 'touch'], {
direction: GenericSync.DIRECTION_X
});
this.pageSurface.pipe(sync);
sync.on('start', function(data) {
this.touchJustStarted = true;
}.bind(this));
sync.on('update', function(data) {
var edge = window.innerWidth - (this.pageSurface.getSize()[0]);
if (this.touchJustStarted) {
if (data.position >= 0 && data.velocity >= 0){
this.rotatePrevious = true;
}
else {
this.rotatePrevious = false;
}
this.touchJustStarted = false;
}
if (!this.rotatePrevious) {
if (data.position > edge){
this.position = edge;
}
else if (data.position >= 0){
this.position = 0;
}
else {
this.position = data.position;
}
// Converts position in pixels to degrees and then to radians.
var deg = (60 * Math.abs(this.position)) / window.innerWidth;
var radians = -Math.floor(deg) * (Math.PI / 180); // Negative to flip forward
this.rotate(radians);
}
else { // Previous Page Rotate
this.position = data.position;
var prevDeg = 120 - (180 * Math.abs(-data.position)) / window.innerWidth;
var prevRadians = Math.floor(prevDeg) * (Math.PI / 180); // Negative to flip forward
this._eventOutput.emit('rotatePrevious', {
radians: prevRadians
});
}
}.bind(this));
sync.on('end', function(data) {
if (this.rotatePrevious){
this._eventOutput.emit('touchEndPrevious', data);
}
else
if (data.velocity.toFixed(2) < 0 && !this.options.last) {
this.turn();
this._eventOutput.emit('nextPage');
}
else {
this.turnBack();
}
this.position = 0;
}.bind(this));
// End event for touchEndPrevious. @todo make this clearer.
this.on('end', function(data) {
if (data.velocity.toFixed(2) < 0 && !this.options.last) {
this.turn();
this._eventOutput.emit('nextPage');
}
else {
this.turnBack();
}
this.position = 0;
}.bind(this));
};