Skip to content

Instantly share code, notes, and snippets.

@neilmanuell
Created July 3, 2013 11:00
Show Gist options
  • Save neilmanuell/5917036 to your computer and use it in GitHub Desktop.
Save neilmanuell/5917036 to your computer and use it in GitHub Desktop.
controllers.CanvasCtrl = function ( $scope, $timeout, CanvasService ) {
$scope.onStart = function () {
$scope.pageNumber = $scope.data.pageNumber;
$scope.velocity = 0;
$scope.damping = 0.002;
$scope.repeat = false;
}
$scope.onDrag = function () {
calcPageNumber( Math.abs( $scope.diffX ) * 0.02);
applyPageNumber();
}
$scope.onUp = function () {
$scope.repeat = ($scope.velocity != 0);
$scope.timeout = $timeout( $scope.onTimeout, 100 );
}
$scope.onTimeout = function () {
calcPageNumber( $scope.velocity -= $scope.damping);
applyPageNumber();
if ($scope.velocity <= 0
|| $scope.diffX > 0 && $scope.data.pageNumber === $scope.data.totalPages
|| $scope.diffX < 0 && $scope.data.pageNumber === 1) {
$scope.repeat = false;
}
if ($scope.repeat) {
$scope.timeout = $timeout( $scope.onTimeout, 10 );
}
else {
console.log( "stopped" );
}
}
function calcPageNumber(velocity) {
var limitedV = Math.min( 1, velocity )
$scope.pageNumber = ($scope.diffX > 0) ? $scope.pageNumber + limitedV : $scope.pageNumber - limitedV ;
$scope.velocity = velocity;
}
function applyPageNumber() {
var rounded = parseInt( $scope.pageNumber );
if (rounded != $scope.data.pageNumber) {
$scope.data.pageNumber = rounded;
CanvasService.redraw();
}
}
}
.directive( 'pipitdrag', [function () {
return {
restrict: 'A',
link: function ( scope, element, attribs ) {
var onMouseDown = function (event){
scope.previousX = event.pageX;
scope.diffX = 0;
scope.mouseDown = true;
element.bind( 'mousemove', onMouseMove);
element.bind( 'mouseup', onMouseUp);
element.bind( 'mouseout', onMouseUp);
if (scope.onStart != null) {
scope.onStart();
}
}
var onMouseMove = function(event){
scope.diffX = event.pageX - scope.previousX;
scope.previousX = event.pageX;
if (scope.onDrag != null) {
scope.onDrag();
}
}
var onMouseUp = function(event){
scope.mouseDown = false;
element.unbind( 'mousemove', onMouseMove);
element.unbind( 'mouseup', onMouseUp);
element.unbind( 'mouseout', onMouseUp);
if (scope.onUp != null) {
scope.onUp();
}
}
element.bind( 'mousedown', onMouseDown);
}
}
}] )
<div class="span9" draggable="false">
<div map="canvasContainer" draggable="false" ng-controller="ImageCtrl" class="row-fluid" >
<canvas id="handle" draggable="false" pipitdrag="" map="canvas" ng-controller="CanvasCtrl" />
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment