nativescript-image-swipe
Version:
A widget to easily swipe and zoom through images
295 lines (294 loc) • 12 kB
JavaScript
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
var utils = require("utils/utils");
var image_swipe_common_1 = require("./image-swipe-common");
__export(require("./image-swipe-common"));
var ImageSwipe = (function (_super) {
__extends(ImageSwipe, _super);
function ImageSwipe() {
var _this = _super.call(this) || this;
_this.isScrollingIn = false;
_this._delegate = UIScrollViewPagedDelegate.initWithOwner(new WeakRef(_this));
_this._views = [];
return _this;
}
ImageSwipe.prototype.initNativeView = function () {
var scrollView = this.nativeViewProtected;
scrollView.pagingEnabled = true;
scrollView.autoresizingMask = 2 | 16;
};
ImageSwipe.prototype.onLoaded = function () {
_super.prototype.onLoaded.call(this);
this.nativeViewProtected.delegate = this._delegate;
};
ImageSwipe.prototype.onUnloaded = function () {
this.nativeViewProtected.delegate = null;
this._purgeAllPages();
_super.prototype.onUnloaded.call(this);
};
ImageSwipe.prototype.onLayout = function (left, top, right, bottom) {
_super.prototype.onLayout.call(this, left, top, right, bottom);
if (this.items && this.items.length > 0) {
var scrollView = this.nativeViewProtected;
this._calcScrollViewContentSize();
scrollView.setContentOffsetAnimated(CGPointMake(this.pageNumber * utils.layout.toDeviceIndependentPixels(this.getMeasuredWidth()), 0), false);
for (var loop = Math.max(0, this.pageNumber - 1); loop <= Math.min(this.pageNumber + 1, this.items.length - 1); loop++) {
this._resizeNativeViews(loop);
if (this._views[loop]) {
this._positionImageView(this._views[loop].imageView);
}
}
}
};
ImageSwipe.prototype[image_swipe_common_1.allowZoomProperty.setNative] = function (value) {
for (var _i = 0, _a = this._views; _i < _a.length; _i++) {
var viewHolder = _a[_i];
if (viewHolder) {
this._positionImageView(viewHolder.imageView);
}
}
};
ImageSwipe.prototype.refresh = function () {
this._purgeAllPages();
this._calcScrollViewContentSize();
image_swipe_common_1.pageNumberProperty.coerce(this);
if (this.pageNumber !== undefined && this.pageNumber !== null) {
this._loadCurrentPage(this.pageNumber);
}
};
ImageSwipe.prototype[image_swipe_common_1.itemsProperty.setNative] = function (value) {
this.refresh();
};
ImageSwipe.prototype[image_swipe_common_1.pageNumberProperty.setNative] = function (value) {
if (value === null) {
return;
}
this._loadCurrentPage(value);
this.notify({
eventName: image_swipe_common_1.ImageSwipeBase.pageChangedEvent,
object: this,
page: value
});
};
ImageSwipe.prototype._centerImageView = function (imageView) {
var boundSize = imageView.superview.bounds.size;
var contentsFrame = imageView.frame;
var newPosition = { x: 0, y: 0 };
if (contentsFrame.size.width < boundSize.width) {
newPosition.x = (boundSize.width - contentsFrame.size.width) / 2;
}
else {
newPosition.x = 0;
}
if (contentsFrame.size.height < boundSize.height) {
newPosition.y = (boundSize.height - contentsFrame.size.height) / 2;
}
else {
newPosition.y = 0;
}
contentsFrame.origin = CGPointMake(newPosition.x, newPosition.y);
imageView.frame = contentsFrame;
};
ImageSwipe.prototype._loadCurrentPage = function (page) {
var scrollView = this.nativeViewProtected;
if (!scrollView) {
return;
}
var pageWidth = scrollView.frame.size.width;
if (!this.isScrollingIn) {
scrollView.contentOffset = CGPointMake(page * pageWidth, 0);
}
for (var loop = 0; loop < page - 1; loop++) {
this._purgePage(loop);
}
this._loadPage(page);
if (page - 1 >= 0) {
this._loadPage(page - 1);
}
if (page + 1 < this.items.length) {
this._loadPage(page + 1);
}
for (var loop = page + 2; loop < this.items.length; loop++) {
this._purgePage(loop);
}
};
ImageSwipe.prototype._resizeNativeViews = function (page) {
if (page < 0 || page >= this.items.length) {
return;
}
if (!this._views[page]) {
return;
}
var scrollView = this.nativeViewProtected;
var frame = scrollView.bounds;
var view = this._views[page].view;
frame.origin = CGPointMake(frame.size.width * page, 0);
view.frame = frame;
for (var loop = 0; loop < view.subviews.count; loop++) {
var subview = view.subviews.objectAtIndex(loop);
subview.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);
}
};
ImageSwipe.prototype._loadPage = function (page) {
var _this = this;
if (page < 0 || page >= this.items.length) {
return;
}
if (this._views[page]) {
return;
}
var scrollView = this.nativeViewProtected;
var imageUrl = this._getDataItem(page)[this.imageUrlProperty];
var imageView;
var activityIndicator;
var view;
var zoomScrollView;
var image;
view = UIView.alloc().init();
view.autoresizingMask = 2
| 16
| 1
| 4;
zoomScrollView = UIScrollView.alloc().init();
zoomScrollView.maximumZoomScale = 1;
zoomScrollView.autoresizingMask = 2 | 16;
imageView = UIImageView.alloc().init();
zoomScrollView.delegate = UIScrollViewZoomDelegateImpl.initWithOwnerAndZoomView(new WeakRef(this), new WeakRef(imageView));
activityIndicator = UIActivityIndicatorView.alloc().init();
activityIndicator.autoresizingMask = 2 | 16;
activityIndicator.hidesWhenStopped = true;
zoomScrollView.addSubview(imageView);
view.addSubview(activityIndicator);
view.addSubview(zoomScrollView);
scrollView.addSubview(view);
this._views[page] = {
view: view,
imageView: imageView,
zoomDelegate: zoomScrollView.delegate
};
this._resizeNativeViews(page);
activityIndicator.startAnimating();
image = image_swipe_common_1.ImageSwipeBase._imageCache.get(imageUrl);
if (image) {
this._prepareImageView(image, imageView);
activityIndicator.stopAnimating();
}
else {
image_swipe_common_1.ImageSwipeBase._imageCache.push({
key: imageUrl,
url: imageUrl,
completed: function (imageSource) {
_this._prepareImageView(imageSource, imageView);
activityIndicator.stopAnimating();
}
});
}
};
ImageSwipe.prototype._prepareImageView = function (image, imageView) {
imageView.image = image;
imageView.frame = CGRectMake(0, 0, image.size.width, image.size.height);
this._positionImageView(imageView);
};
ImageSwipe.prototype._positionImageView = function (imageView) {
if (!imageView || !imageView.image) {
return;
}
var zoomScrollView = imageView.superview;
if (!zoomScrollView
|| zoomScrollView.frame.size.width === 0
|| zoomScrollView.frame.size.height === 0) {
return;
}
var minimumScale = Math.min(zoomScrollView.frame.size.width / imageView.image.size.width, zoomScrollView.frame.size.height / imageView.image.size.height);
zoomScrollView.contentSize = imageView.frame.size;
zoomScrollView.minimumZoomScale = minimumScale;
zoomScrollView.zoomScale = minimumScale;
zoomScrollView.maximumZoomScale = this.allowZoom ? 1.0 : minimumScale;
this._centerImageView(imageView);
};
ImageSwipe.prototype._purgePage = function (page) {
if (page < 0 || page >= this.items.length) {
return;
}
var pageView = this._views[page];
if (pageView) {
pageView.view.removeFromSuperview();
}
this._views[page] = null;
};
ImageSwipe.prototype._purgeAllPages = function () {
if (!this._views) {
return;
}
for (var loop = 0; loop < this.items.length; loop++) {
this._purgePage(loop);
}
};
ImageSwipe.prototype._calcScrollViewContentSize = function () {
var scrollView = this.nativeViewProtected;
if (!scrollView) {
return;
}
var width = utils.layout.toDeviceIndependentPixels(this.getMeasuredWidth());
var height = utils.layout.toDeviceIndependentPixels(this.getMeasuredHeight());
var safeAreaInsets = this.getSafeAreaInsets();
var insetAllowance = utils.layout.toDeviceIndependentPixels(safeAreaInsets.left + safeAreaInsets.right);
var calculatedWidth = width + insetAllowance;
scrollView.contentSize = CGSizeMake(this.items.length * calculatedWidth, height);
};
return ImageSwipe;
}(image_swipe_common_1.ImageSwipeBase));
exports.ImageSwipe = ImageSwipe;
var UIScrollViewPagedDelegate = (function (_super) {
__extends(UIScrollViewPagedDelegate, _super);
function UIScrollViewPagedDelegate() {
return _super !== null && _super.apply(this, arguments) || this;
}
UIScrollViewPagedDelegate_1 = UIScrollViewPagedDelegate;
UIScrollViewPagedDelegate.initWithOwner = function (owner) {
var delegate = UIScrollViewPagedDelegate_1.new();
delegate._owner = owner;
return delegate;
};
UIScrollViewPagedDelegate.prototype.scrollViewDidScroll = function (scrollView) {
this._owner.get().isScrollingIn = true;
};
UIScrollViewPagedDelegate.prototype.scrollViewDidEndDecelerating = function (scrollView) {
var pageWidth = scrollView.frame.size.width;
var owner = this._owner.get();
owner.isScrollingIn = false;
owner.pageNumber = Math.floor(Math.abs(scrollView.contentOffset.x) / pageWidth);
};
var UIScrollViewPagedDelegate_1;
UIScrollViewPagedDelegate = UIScrollViewPagedDelegate_1 = __decorate([
ObjCClass(UIScrollViewDelegate)
], UIScrollViewPagedDelegate);
return UIScrollViewPagedDelegate;
}(NSObject));
var UIScrollViewZoomDelegateImpl = (function (_super) {
__extends(UIScrollViewZoomDelegateImpl, _super);
function UIScrollViewZoomDelegateImpl() {
return _super !== null && _super.apply(this, arguments) || this;
}
UIScrollViewZoomDelegateImpl_1 = UIScrollViewZoomDelegateImpl;
UIScrollViewZoomDelegateImpl.initWithOwnerAndZoomView = function (owner, zoomView) {
var delegate = UIScrollViewZoomDelegateImpl_1.new();
delegate._zoomView = zoomView;
delegate._owner = owner;
return delegate;
};
UIScrollViewZoomDelegateImpl.prototype.viewForZoomingInScrollView = function (scrollView) {
return this._zoomView.get();
};
UIScrollViewZoomDelegateImpl.prototype.scrollViewDidZoom = function (scrollView) {
this._owner.get()._centerImageView(this._zoomView.get());
};
var UIScrollViewZoomDelegateImpl_1;
UIScrollViewZoomDelegateImpl = UIScrollViewZoomDelegateImpl_1 = __decorate([
ObjCClass(UIScrollViewDelegate)
], UIScrollViewZoomDelegateImpl);
return UIScrollViewZoomDelegateImpl;
}(NSObject));