Created
June 25, 2014 05:10
-
-
Save raix/1bcaaeed7a3e075e27b4 to your computer and use it in GitHub Desktop.
Paginated viewport in Meteor/Famo.us/Famono
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if (Meteor.isClient) { | |
// Rig some famo.us deps | |
//famousPolyfills; | |
famous.polyfills; | |
famous.core.famous; | |
// Make sure dom got a body... | |
Meteor.startup(function() { | |
famous.transitions.Transitionable.registerMethod('spring', famous.transitions.SnapTransition); | |
// the position state | |
position = new famous.transitions.Transitionable([0, 0]); | |
famous.inputs.GenericSync.register({ | |
'mouse': famous.inputs.MouseSync, | |
'touch': famous.inputs.TouchSync, | |
'scroll': famous.inputs.ScrollSync | |
}); | |
// create a Sync to listen to mouse events | |
var sync = new famous.inputs.GenericSync({ | |
'mouse': {}, | |
'touch': {}, | |
'scroll': { scale: 0.5 } | |
}); | |
//var sync = new famous.inputs.GenericSync(['scroll', 'touch'], { direction: 0 }); | |
// Prepare options | |
var size = [undefined, undefined]; | |
var clip = true; | |
var overdrive = true; | |
var paginate = true; | |
var transition = function(velocity) { | |
return { | |
method: 'spring', | |
period: 150, | |
velocity: velocity }; | |
}; | |
//transition = 'ease'; | |
var surfaces = [ | |
new library.meteor.core.Surface({ | |
template: Template.hello, | |
data: { _id: 1 }, | |
properties : {background : 'red'}, | |
}), | |
new library.meteor.core.Surface({ | |
template: Template.hello, | |
data: { _id: 2 }, | |
properties : {background : 'blue'}, | |
}), | |
new library.meteor.core.Surface({ | |
template: Template.hello, | |
data: { _id: 3 }, | |
properties : {background : 'green'}, | |
}) | |
]; | |
container = new famous.surfaces.ContainerSurface({ | |
size: size, | |
properties: { | |
overflow: clip ? 'hidden' : 'visible' | |
} | |
}); | |
// Surface provides events that the sync listens to | |
container.pipe(sync); | |
//surface2.pipe(sync); | |
// Syncs have `start`, `update` and `end` events. | |
// On `update` we increment the position state of the surface based | |
// on the change in x- and y- displacements | |
sync.on('update', function(data){ | |
var currentPosition = position.get(); | |
var x = currentPosition[0] + (data.delta[0] || 0); | |
var y = currentPosition[1];// + data.delta[1] | |
if (overdrive) { | |
// No boundary limits | |
} else { | |
// Get the width | |
var width = container._size && container._size[0] || 0; | |
// Calculate the negative max width | |
var maxWidth = -width * lastPage; | |
if (x > 0) { | |
x = 0; | |
} else if (x < maxWidth) { | |
x = maxWidth; | |
} | |
} | |
// Follow the scroll or touch | |
position.set([x, y]); | |
}); | |
var currentPage = 0; | |
var firstPage = 0; | |
var lastPage = 1; | |
goToPage = function(page, transition) { | |
// XXX: do render / destroy of pages... | |
// Get the width | |
var width = container._size && container._size[0] || 0; | |
// Set the position | |
position.set([-width * page, 0], transition); | |
}; | |
// On end we check if we hit bounderies and/or paginate | |
sync.on('end', function(data) { | |
// Get the width | |
var width = container._size && container._size[0] || 0; | |
// Get the current position | |
var currentPosition = position.get(); | |
// Get the current page | |
var currentPage = -Math.round(width ? currentPosition[0] / width : 0); | |
// Only use the x-axis of the velocity.. | |
var velocity = [data.velocity[0] || 0, 0]; | |
// Check boundaries | |
if (currentPage < firstPage) { | |
// Hit first boundary | |
currentPage = firstPage; | |
} else if (currentPage > lastPage) { | |
// Hit last boundary | |
currentPage = lastPage; | |
} else { | |
// No boundaries hit... | |
} | |
// Set the position | |
if (paginate) goToPage(currentPage, (typeof transition == 'function' ? transition(velocity): transition)); | |
console.log('PAGE', currentPage); | |
}); | |
var getModifier = function(page) { | |
return new famous.core.Modifier({ | |
transform : function(){ | |
var currentPosition = position.get(); | |
var width = container._size && container._size[0] || 0; | |
// Calc the x position | |
var x = currentPosition[0] + (width * page); | |
return famous.core.Transform.translate(x, currentPosition[1], 0); | |
//return famous.core.Transform.translate(Math.max(x, 0), currentPosition[1], 0); | |
} | |
}); | |
}; | |
// Add surfaces to array | |
for (var i = 0; i < surfaces.length; i++) { | |
// Get the current element | |
var surface = surfaces[i]; | |
var positionModifier = getModifier(i); | |
container | |
.add(positionModifier) | |
.add(surface); | |
} | |
// Set the index of the last element | |
lastPage = surfaces.length-1; | |
// this modifier reads from the position state to create a translation | |
// Transform that is applied to the surface | |
var positionModifier = new famous.core.Modifier({ | |
transform : function(){ | |
var currentPosition = position.get(); | |
var x = currentPosition[0]; | |
return famous.core.Transform.translate(Math.max(x, 0), currentPosition[1], 0); | |
} | |
}); | |
// define the scene graph | |
var mainContext = famous.core.Engine.createContext(); | |
mainContext.add(container); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment