Skip to content

Commit

Permalink
feat: gallery supports pan-to-move
Browse files Browse the repository at this point in the history
  • Loading branch information
@kitian616
kitian616 committed Dec 16, 2018
1 parent a571ed0 commit 68e47fa
Showing 1 changed file with 82 additions and 48 deletions.
130 changes: 82 additions & 48 deletions _includes/scripts/lib/gallery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,36 +17,33 @@
this.$swiper = null;
this.$swiperWrapper = null;
this.$activeItem = null;
this.swiper = null;
this.$items = [];
this.items = items;
this.disabled = false;
this.contentWidth = 0;
this.contentHeight = 0;
this.PreRect = null;
this.rect = null;
this.preVector = null;
this.vector = null;
this.swiper = null;
this.items = items;
this.disabled = false;
this.curIndex = 0;
this.touchCenter = null;
this.lastTouchCenter = null;
this.zoomRect = null;
this.lastZoomRect = null;
this.lastTranslate = null;
this.translate = null;
this.lastZoom = 1;
this.preZoom = 1;
this.zoom = 1;
}
Gallery.prototype._handleChangeEnd = function(index, $dom, preIndex, $preDom) {
this.PreRect = null; this.rect = null;
this.preVector = null; this.vector = { x: 0, y:0 };
this.preZoom = 1; this.zoom = 1;
this.$activeItem = $dom.find('.gallery-item__content');
setState($preDom.find('.gallery-item__content'), this.zoom, this.vector);
};
Gallery.prototype.init = function() {
var i, item, items = this.items, size, self = this;
var i, item, items = this.items, size, self = this, touchstartFingerCount = 0;
this.$root.append(template);
this.$swiper = this.$root.find('.gallery__swiper');
this.$swiperWrapper = this.$root.find('.swiper__wrapper');
this.contentWidth = this.$swiperWrapper && this.$swiperWrapper.width();
this.contentHeight = this.$swiperWrapper && this.$swiperWrapper.height();
for (i = 0; i < items.length; i++) {
item = items[i];
size = this.calculateImageSize(item.w, item.h);
size = this._calculateImageSize(item.w, item.h);
this.$items.push($(
'<div class="swiper__slide">' +
'<div class="gallery-item">' +
Expand All @@ -65,7 +62,7 @@
});
$(window).on('resize', function() {
if (self.disabled) { return; }
self.resizeImageSize();
self._resizeImageSize();
});
// Char Code: 37 ⬅, 39 ➡
$(window).on('keyup', function(e) {
Expand All @@ -86,46 +83,72 @@
h: Math.abs(touch0.pageY - touch1.pageY)
};
}
function minusVector(vector0, vector1) {
return {
x: vector0.x - vector1.x,
y: vector0.y - vector1.y
};
function getTouches(e) {
return e.touches || e;
}
function addVector(vector0, vector1) {
return {
x: vector0.x + vector1.x,
y: vector0.y + vector1.y
};
function getTouchesCount(e) {
if (e.touches) {
return e.touches.length;
} else {
return 1;
}
}

self.$swiperWrapper.on('touchstart', function(e) {
if (e.touches && e.touches.length > 1) {
var touch0 = e.touches[0];
var touch1 = e.touches[1];
self.PreRect = self.rect = getRect(touch0, touch1);
this.$swiperWrapper.on('touchstart', function(e) {
var touch0, touch1, rect;
touchstartFingerCount = getTouchesCount(e);
if (touchstartFingerCount > 1) {
touch0 = e.touches[0];
touch1 = e.touches[1];
rect = getRect(touch0, touch1);
self.lastZoomRect = { w: rect.w, h: rect.h };
self.lastTouchCenter = rect.o;
} else {
var touch = getTouches(e)[0];
self.lastTouchCenter = { x: touch.pageX, y: touch.pageY };
}
});
self.$swiperWrapper.on('touchmove', function(e) {
if (e.touches && e.touches.length > 1) {
var touch0 = e.touches[0];
var touch1 = e.touches[1];
var curRect = getRect(touch0, touch1);
self.vector = curRect.o && self.rect.o && self.preVector ? addVector(minusVector(curRect.o, self.rect.o), self.preVector) : { x: 0, y: 0 };
self.rect = curRect; self.preVector = self.vector;
self.zoom = Math.max(curRect.w / self.PreRect.w, curRect.h / self.PreRect.h) * self.preZoom;
setState(self.$activeItem, self.zoom, self.vector);
this.$swiperWrapper.on('touchmove', function(e) {
if (touchstartFingerCount === getTouchesCount(e)) {
if (touchstartFingerCount > 1) {
var touch0 = e.touches[0];
var touch1 = e.touches[1];
var rect = getRect(touch0, touch1);
self.zoomRect = { w: rect.w, h: rect.h };
self.touchCenter = rect.o;
self._zoom(); self._translate();
setState(self.$activeItem, self.zoom, self.translate);
} else {
var touch = getTouches(e)[0];
self.touchCenter = { x: touch.pageX, y: touch.pageY };
self._translate();
setState(self.$activeItem, self.zoom, self.translate);
}
}
});
self.$swiperWrapper.on('touchend', function() {
self.preZoom = self.zoom;
this.$swiperWrapper.on('touchend', function(e) {
self.lastZoom = self.zoom;
self.lastTranslate = self.translate;
touchstartFingerCount = 0;
});
this.$root.on('touchmove', function(e) {
if (self.disabled) { return; }
e.preventDefault();
});
};
Gallery.prototype.calculateImageSize = function(w, h) {

Gallery.prototype._translate = function() {
this.translate = this.touchCenter && this.lastTouchCenter && this.lastTranslate ? {
x: (this.touchCenter.x - this.lastTouchCenter.x) / this.zoom + this.lastTranslate.x,
y: (this.touchCenter.y - this.lastTouchCenter.y) / this.zoom + this.lastTranslate.y
} : { x: 0, y: 0 };
}
Gallery.prototype._zoom = function() {
this.zoom = (this.zoomRect.w + this.zoomRect.h) / (this.lastZoomRect.w + this.lastZoomRect.h) * this.lastZoom;
this.zoom > 1 ? this.$activeItem.addClass('zoom') : this.$activeItem.removeClass('zoom');
this.preZoom = this.zoom;
}

Gallery.prototype._calculateImageSize = function(w, h) {
var scale = 1;
if (this.contentWidth > 0 && this.contentHeight > 0 && w > 0 && h > 0) {
scale = Math.min(
Expand All @@ -134,20 +157,31 @@
}
return { w: Math.floor(w * scale), h: Math.floor(h * scale) };
};
Gallery.prototype.resizeImageSize = function() {

Gallery.prototype._resizeImageSize = function() {
var i, $item, $items = this.$items, item, size;
this.contentWidth = this.$swiperWrapper && this.$swiperWrapper.width();
this.contentHeight = this.$swiperWrapper && this.$swiperWrapper.height();
if ($items.length < 1) { return; }
for (i = 0; i < $items.length; i++) {
item = this.items[i], $item = $items[i];
size = this.calculateImageSize(item.w, item.h);
size = this._calculateImageSize(item.w, item.h);
item.width = size.w; item.height = size.h;
$item && $item.find('img').css({ width: size.w, height: size.h });
}
};
Gallery.prototype._handleChangeEnd = function(index, $dom, preIndex, $preDom) {
this.curIndex = index;
this.lastZoomRect = null; this.lastZoomRect = null;
this.lastTranslate = this.translate = { x: 0, y:0 };
this.lastZoom = this.preZoom = this.zoom = 1;
this.$activeItem = $dom.find('.gallery-item__content');
setState($preDom.find('.gallery-item__content'), this.zoom, this.translate);
};

Gallery.prototype.refresh = function() {
this.swiper && this.swiper.refresh();
this.resizeImageSize();
this._resizeImageSize();
};
Gallery.prototype.setOptions = function(options) {
this.disabled = options.disabled;
Expand Down

0 comments on commit 68e47fa

Please sign in to comment.