Greetings,
I would first like to express appreciation for such an awesome framework thus far.
template: (‘scaled’ css class sets max-width: 100% for uniform image scaling and transform-origin: ‘top left’)
<ion-content padding="true" overflow-scroll="true" >
<div id="container" ng-style="containerStyle">
<img id="image-scrollable" zoomable ng-src="images/{{type.typeName}}.jpg" class="scaled">
</div>
</ion-content>
controller:
'use strict';
angular.module('myApp').controller('HerpDerperShowCtrl',
function($scope, $stateParams, HerpDerpersFactory) {
var id = Number($stateParams.id);
$scope.type = HerpDerpersFactory.get(id);
$scope.containerStyle = {};
});
zoomable directive:
'use strict';
angular.module('myApp').directive('zoomable', function($ionicGesture) {
return {
restrict: 'A',
link: function($scope, $element, $attrs) {
var minHeight, minWidth, maxHeight, maxWidth;
// set max/min size after image is loaded
$element.bind('load', function() {
var el = $element[0];
minHeight = el.height;
minWidth = el.width;
maxHeight = el.naturalHeight;
maxWidth = el.naturalWidth;
});
// pinch to scale
var handlePinch = function(e) {
$scope.$apply(function() {
TweenMax.set($element, { scale: e.gesture.scale });
});
};
var pinchGesture = $ionicGesture.on('pinch', handlePinch, $element);
// resize after done
var handleTransformEnd = function() {
//resize zoomable container
var newHeight, newWidth;
var dimensions = $element[0].getBoundingClientRect();
newHeight = Math.round(dimensions.height);
newWidth = Math.round(dimensions.width);
newHeight = Math.min(newHeight, maxHeight);
newWidth = Math.min(newWidth, maxWidth);
newHeight = Math.max(newHeight, minHeight);
newWidth = Math.max(newWidth, minWidth);
$scope.$apply(function() {
TweenMax.set($element, { clearProps: 'scale' });
$scope.containerStyle.height = newHeight + 'px';
$scope.containerStyle.width = newWidth + 'px';
})
};
$ionicGesture.on('transformend', handleTransformEnd, $element);
// cleanup
$scope.$on('$destroy', function() {
$ionicGesture.off(handlePinch, 'pinch', $element);
$ionicGesture.off(handleTransformEnd, 'transformend', $element);
});
}
};
});
The pinching seems to work very performant on iOS (only tested 7+) after some initial lag, but the gesture is not even being recognized on android (4.3+ and even 4.0.4 running via crosswalk).
From what I can tell, the overflow-scroll attribute only sets a css class specifying -webkit-overflow-scrolling: touch; and I am not really sure why that would suppress my gesture handler that I created.
Alternatively, I tried out the ion-scroll directive with zooming=“true”, but there are several issues with that. Namely, the zooming is done via css scale and causes the image to look terrible. Also, there is no on-scroll-complete on this directive (which I would like to have used to do a manual resize of the image so the downsampling that is done in webkit can kick in). Lastly, the direction attribute only takes either x or y and not both – which would be ideal for a container that needs to uniformly scale.
I am using ionic beta3, cordova 3.4, crosswalk 4.32.76, and the angular-ionic yeoman generator.
I would also like to add that the $destroy callback where I turn off the gesture handlers throws an error. After looking at the docs, the on and off functions have the same signatures, but when I look at the source functions, they do not – so I am not sure what is going on.
Any insight or help would be appreciated.
Thanks in advance…
Jared