From 68e47fa31271db5bd7d189fc160870f1a3bae311 Mon Sep 17 00:00:00 2001 From: kitian616 Date: Sun, 16 Dec 2018 21:21:12 +0800 Subject: [PATCH] feat: gallery supports pan-to-move --- _includes/scripts/lib/gallery.js | 130 +++++++++++++++++++------------ 1 file changed, 82 insertions(+), 48 deletions(-) diff --git a/_includes/scripts/lib/gallery.js b/_includes/scripts/lib/gallery.js index d1c502e3412..1793f040d18 100644 --- a/_includes/scripts/lib/gallery.js +++ b/_includes/scripts/lib/gallery.js @@ -17,28 +17,25 @@ 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'); @@ -46,7 +43,7 @@ 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($( '
' + '
' + @@ -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) { @@ -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( @@ -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;