Skip to content

Commit

Permalink
Merge pull request #27 from warpdesign/master
Browse files Browse the repository at this point in the history 
Interpolated id fix and more
  • Loading branch information
@mvindahl
mvindahl committed Dec 10, 2014
2 parents 82a53d8 + b662948 commit 4f23730
Show file tree
Hide file tree
Showing 8 changed files with 1,181 additions and 1,186 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ Method | Description
-------------------------------- | -----------
`model` | the model object which was passed to the panzoom directive
`config` | the config object which was passed to the panzoom directive
`changeZoomLevel()` | change zoom level to a new value using a quick animation
`changeZoomLevel(newZoomLevel [,clickPoint])` | change zoom level to a new value using a quick animation
`zoomIn()` | shorthand for increasing zoom level by one
`zoomOut()` | shorthand for decreasing zoom level by one
`zoomToFit(rectangle)` | zoom to display a part of the contents. Example rectangle: { "x": 0, "y": 100, "width": 100, "height": 100 }
Expand Down
1,161 changes: 579 additions & 582 deletions bin/panzoom.js
View file

Large diffs are not rendered by default.

12 changes: 3 additions & 9 deletions bin/panzoom.min.js
View file

Large diffs are not rendered by default.

10 changes: 2 additions & 8 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
/*
* You need gulp and various dependencies in order to run this. You can get these using
* npm by executing the following commands in sequence:
*
* npm install gulp
* npm install gulp-concat
* npm install gulp-uglify
* npm install gulp-jshint
* npm install jshint-stylish
* npm by executing npm install which will install all dependencies found in package.js
*
*/

Expand Down Expand Up @@ -102,4 +96,4 @@ gulp.task('test-coverage', function () {
// Make sure failed tests cause gulp to exit non-zero
throw err;
});
});
});
933 changes: 465 additions & 468 deletions scripts/directives/panzoom.js
View file

Large diffs are not rendered by default.

226 changes: 112 additions & 114 deletions scripts/directives/panzoomwidget.js
View file
Original file line number Diff line number Diff line change
@@ -1,116 +1,114 @@
angular.module('panzoomwidget', [])
.directive('panzoomwidget', ['$document',
function ($document) {
var panzoomId;

return {
restrict: 'E',
transclude: true,
controller: ['$scope', '$element', 'PanZoomService',
function ($scope, $element, PanZoomService) {
PanZoomService.getAPI(panzoomId).then(function (api) {
$scope.model = api.model;
$scope.config = api.config;

var zoomSliderWidget = $element.find('.zoom-slider-widget');
var isDragging = false;

var sliderWidgetTopFromZoomLevel = function (zoomLevel) {
return (($scope.config.zoomLevels - zoomLevel - 1) * $scope.widgetConfig.zoomLevelHeight);
};

var zoomLevelFromSliderWidgetTop = function (sliderWidgetTop) {
return $scope.config.zoomLevels - 1 - sliderWidgetTop / $scope.widgetConfig.zoomLevelHeight;
};

var getZoomLevelForMousePoint = function ($event) {
var sliderWidgetTop = $event.pageY - $element.find('.zoom-slider').offset().top - $scope.widgetConfig.zoomLevelHeight / 2;
return zoomLevelFromSliderWidgetTop(sliderWidgetTop);
};

$scope.getZoomLevels = function () {
var zoomLevels = [];
for (var i = $scope.config.zoomLevels - 1; i >= 0; i--) {
zoomLevels.push(i);
}
return zoomLevels;
};

$scope.widgetConfig = {
zoomLevelHeight: 10
};

$scope.zoomIn = function () {
api.zoomIn();
};

$scope.zoomOut = function () {
api.zoomOut();
};

$scope.onClick = function ($event) {
var zoomLevel = getZoomLevelForMousePoint($event);
api.changeZoomLevel(zoomLevel);
};

$scope.onMousedown = function () {
isDragging = true;

$document.on('mousemove', $scope.onMousemove);
$document.on('mouseup', $scope.onMouseup);
};

$scope.onMousemove = function ($event) {
$event.preventDefault();
var zoomLevel = getZoomLevelForMousePoint($event);
api.changeZoomLevel(zoomLevel);
};

$scope.onMouseup = function () {
isDragging = false;

$document.off('mousemove', $scope.onMousemove);
$document.off('mouseup', $scope.onMouseup);
};

$scope.onMouseleave = function () {
isDragging = false;
};

// $watch is not fast enough so we set up our own polling
setInterval(function () {
zoomSliderWidget.css('top', sliderWidgetTopFromZoomLevel($scope.model.zoomLevel) + 'px');
}, 25);
});


}],
compile: function compile(tElement, tAttrs, transclude) {
// we pick the value ourselves at this point, before the controller is instantiated,
// instead of passing it as a scope variable. This is to not force people to type quotes
// around the string.
panzoomId = tElement.attr('panzoom-id');
if (!panzoomId) {
throw 'Error in setup. You must define attribute panzoom-id on the <panzoomwidget> element in order to link it to the ' +
'id of the <panzoom> element. Ref: ';
}

return {
pre: function preLink(scope, iElement, iAttrs, controller) {},
post: function postLink(scope, iElement, iAttrs, controller) {}
}
},
template: '<div class="panzoomwidget">' +
'<div ng-click="zoomIn()" ng-mouseenter="zoomToLevelIfDragging(config.zoomLevels - 1)" class="zoom-button zoom-button-in">+</div>' +
'<div class="zoom-slider" ng-mousedown="onMousedown()" ' +
'ng-click="onClick($event)">' +
'<div class="zoom-slider-widget" ng-style="{\'height\': widgetConfig.zoomLevelHeight - 2 +\'px\'}"></div>' +
'<div ng-repeat="zoomLevel in getZoomLevels()" ' +
' class="zoom-level zoom-level-{{zoomLevel}}" ng-style="{\'height\': widgetConfig.zoomLevelHeight +\'px\'}"></div>' +
'</div>' +
'<div ng-click="zoomOut()" ng-mouseenter="zoomToLevelIfDragging(0)" class="zoom-button zoom-button-out">-</div>' +
'<div ng-transclude></div>' +
'</div>',
replace: true
.directive('panzoomwidget', ['$document', 'PanZoomService',
function ($document, PanZoomService) {
var panzoomId;

return {
restrict: 'E',
transclude: true,
compile: function compile(/*tElement, tAttrs, transclude*/) {
return {
pre: function preLink(/*scope, iElement, iAttrs, controller*/) { },
post: function postLink(scope, iElement, iAttrs /*, controller*/) {
// we pick the value ourselves at this point, before the controller is instantiated,
// instead of passing it as a scope variable. This is to not force people to type quotes
// around the string.
// Note: we need to use iAttrs and not directly get the attribute on the element to
// be sure to get the interpolated value ({{foo}})
panzoomId = iAttrs.panzoomId;

if (!panzoomId) {
throw 'Error in setup. You must define attribute panzoom-id on the <panzoomwidget> element in order to link it to the ' +
'id of the <panzoom> element. Ref: ';
}
PanZoomService.getAPI(panzoomId).then(function (api) {
scope.model = api.model;
scope.config = api.config;

var zoomSliderWidget = iElement.find('.zoom-slider-widget');
var isDragging = false;

var sliderWidgetTopFromZoomLevel = function (zoomLevel) {
return ((scope.config.zoomLevels - zoomLevel - 1) * scope.widgetConfig.zoomLevelHeight);
};
}]);

var zoomLevelFromSliderWidgetTop = function (sliderWidgetTop) {
return scope.config.zoomLevels - 1 - sliderWidgetTop / scope.widgetConfig.zoomLevelHeight;
};

var getZoomLevelForMousePoint = function ($event) {
var sliderWidgetTop = $event.pageY - iElement.find('.zoom-slider').offset().top - scope.widgetConfig.zoomLevelHeight / 2;
return zoomLevelFromSliderWidgetTop(sliderWidgetTop);
};

scope.getZoomLevels = function () {
var zoomLevels = [];
for (var i = scope.config.zoomLevels - 1; i >= 0; i--) {
zoomLevels.push(i);
}
return zoomLevels;
};

scope.widgetConfig = {
zoomLevelHeight: 10
};

scope.zoomIn = function () {
api.zoomIn();
};

scope.zoomOut = function () {
api.zoomOut();
};

scope.onClick = function ($event) {
var zoomLevel = getZoomLevelForMousePoint($event);
api.changeZoomLevel(zoomLevel);
};

scope.onMousedown = function () {
isDragging = true;

$document.on('mousemove', scope.onMousemove);
$document.on('mouseup', scope.onMouseup);
};

scope.onMousemove = function ($event) {
$event.preventDefault();
var zoomLevel = getZoomLevelForMousePoint($event);
api.changeZoomLevel(zoomLevel);
};

scope.onMouseup = function () {
isDragging = false;

$document.off('mousemove', scope.onMousemove);
$document.off('mouseup', scope.onMouseup);
};

scope.onMouseleave = function () {
isDragging = false;
};

// $watch is not fast enough so we set up our own polling
setInterval(function () {
zoomSliderWidget.css('top', sliderWidgetTopFromZoomLevel(scope.model.zoomLevel) + 'px');
}, 25);
});
}
};
},
template: '<div class="panzoomwidget">' +
'<div ng-click="zoomIn()" ng-mouseenter="zoomToLevelIfDragging(config.zoomLevels - 1)" class="zoom-button zoom-button-in">+</div>' +
'<div class="zoom-slider" ng-mousedown="onMousedown()" ' +
'ng-click="onClick($event)">' +
'<div class="zoom-slider-widget" ng-style="{\'height\': widgetConfig.zoomLevelHeight - 2 +\'px\'}"></div>' +
'<div ng-repeat="zoomLevel in getZoomLevels()" ' +
' class="zoom-level zoom-level-{{zoomLevel}}" ng-style="{\'height\': widgetConfig.zoomLevelHeight +\'px\'}"></div>' +
'</div>' +
'<div ng-click="zoomOut()" ng-mouseenter="zoomToLevelIfDragging(0)" class="zoom-button zoom-button-out">-</div>' +
'<div ng-transclude></div>' +
'</div>',
replace: true
};
}]);
6 changes: 3 additions & 3 deletions scripts/services/PanZoomService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ angular.module('panzoom').factory('PanZoomService', ['$q',

var deferred = panZoomAPIs[key];
if (deferred.hasBeenResolved) {
throw "Internal error: attempt to register a panzoom API but key was already used. Did you declare two <panzoom> directives with the same id?";
throw 'Internal error: attempt to register a panzoom API but key was already used. Did you declare two <panzoom> directives with the same id?';
} else {
deferred.resolve(panZoomAPI);
deferred.hasBeenResolved = true;
}
};

var unregisterAPI = function (key, panZoomAPI) {
var unregisterAPI = function (key) {
delete panZoomAPIs[key];
};

Expand All @@ -35,4 +35,4 @@ angular.module('panzoom').factory('PanZoomService', ['$q',
unregisterAPI: unregisterAPI,
getAPI: getAPI
};
}]);
}]);
17 changes: 16 additions & 1 deletion test/unit/PanZoomSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,21 @@ describe('PanZoom specs', function () {
expect($scope.panzoomModel.pan.y).toEqual(0);
});

it('should use {{interpolated}} value for panzoomid', function() {
var element = angular.element('<panzoom id="{{panZoomElementId}}" config="panzoomConfig" model="panzoomModel" style="width:800px; height: 600px"><div id="WrappedElement"/></panzoom>');

$scope.panZoomElementId = "panZoom1";

$compile(element)($scope);

var handler = jasmine.createSpy('success');
PanZoomService.getAPI('panZoom1').then(handler);

$scope.$digest();

expect(handler).toHaveBeenCalled();
});

it('should publish and unpublish its API', function () {
var _this = this;

Expand Down Expand Up @@ -205,4 +220,4 @@ describe('PanZoom specs', function () {
expect(timerId).toBeNull(); // it's gone again
});
});
});
});

0 comments on commit 4f23730

Please sign in to comment.