Skip to content

Commit

Permalink
feat: modal add hideWhenWindowScroll option, gallery supports pinch-t…
Browse files Browse the repository at this point in the history 
…o-zoom
  • Loading branch information
@kitian616
kitian616 committed Dec 15, 2018
1 parent a345c61 commit a571ed0
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 30 deletions.
2 changes: 1 addition & 1 deletion _includes/scripts/components/search/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ window.Lazyload.js([SOURCES.jquery, PAHTS.search_js], function() {
var $searchToggle = $('.js-search-toggle');
var modalVisible = false;

var searchModal = $searchModal.modal({ onChange: handleModalChange });
var searchModal = $searchModal.modal({ onChange: handleModalChange, hideWhenWindowScroll: true });

function handleModalChange(visible) {
modalVisible = visible;
Expand Down
91 changes: 80 additions & 11 deletions _includes/scripts/lib/gallery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,41 @@
'<div class="swiper__button swiper__button--prev fas fa-chevron-left"></div>' +
'<div class="swiper__button swiper__button--next fas fa-chevron-right"></div>' +
'</div>';
function Gallery(root, items, options) {
function setState($item, zoom, translate) {
$item.css('transform', 'scale(' + zoom + ') translate(' + translate.x + 'px,' + translate.y + 'px)');
}
function Gallery(root, items) {
this.$root = $(root);
this.$swiper = null;
this.$itemWrapper = 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.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, itemsSnippet = '', size, self = this;
var i, item, items = this.items, size, self = this;
this.$root.append(template);
this.$swiper = this.$root.find('.gallery__swiper');
this.$itemWrapper = this.$root.find('.swiper__wrapper');
this.contentWidth = this.$itemWrapper && this.$itemWrapper.width();
this.contentHeight = this.$itemWrapper && this.$itemWrapper.height();
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);
Expand All @@ -40,8 +57,12 @@
'</div>'
));
}
this.$itemWrapper && this.$itemWrapper.append(this.$items);
this.swiper = this.$swiper && this.$swiper.swiper();
this.$swiperWrapper && this.$swiperWrapper.append(this.$items);
this.swiper = this.$swiper && this.$swiper.swiper({
onChangeEnd: function() {
self._handleChangeEnd.apply(self, Array.prototype.slice.call(arguments));
}
});
$(window).on('resize', function() {
if (self.disabled) { return; }
self.resizeImageSize();
Expand All @@ -55,6 +76,54 @@
self.swiper && self.swiper.next();
}
});
function getRect(touch0, touch1) {
return {
o: {
x: (touch0.pageX + touch1.pageX) / 2,
y: (touch0.pageY + touch1.pageY) / 2
},
w: Math.abs(touch0.pageX - touch1.pageX),
h: Math.abs(touch0.pageY - touch1.pageY)
};
}
function minusVector(vector0, vector1) {
return {
x: vector0.x - vector1.x,
y: vector0.y - vector1.y
};
}
function addVector(vector0, vector1) {
return {
x: vector0.x + vector1.x,
y: vector0.y + vector1.y
};
}

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);
}
});
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);
}
});
self.$swiperWrapper.on('touchend', function() {
self.preZoom = self.zoom;
});
this.$root.on('touchmove', function(e) {
if (self.disabled) { return; }
e.preventDefault();
});
};
Gallery.prototype.calculateImageSize = function(w, h) {
var scale = 1;
Expand All @@ -67,15 +136,15 @@
};
Gallery.prototype.resizeImageSize = function() {
var i, $item, $items = this.$items, item, size;
this.contentWidth = this.$itemWrapper && this.$itemWrapper.width();
this.contentHeight = this.$itemWrapper && this.$itemWrapper.height();
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);
$item && $item.find('img').css({ width: size.w, height: size.h });
}
}
};
Gallery.prototype.refresh = function() {
this.swiper && this.swiper.refresh();
this.resizeImageSize();
Expand Down
11 changes: 6 additions & 5 deletions _includes/scripts/lib/modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@
var $pageRoot = $('.js-page-root'), $pageMain = $('.js-page-main');
var activeCount = 0;
function modal(options) {
var $root = this, visible, onChange;
var $root = this, visible, onChange, hideWhenWindowScroll = false;
var scrollTop;
function setOptions(options) {
var _options = options || {};
visible = _options.initialVisible === undefined ? false : show;
onChange = _options.onChange;
hideWhenWindowScroll = _options.hideWhenWindowScroll;
}
function init() {
setState(visible);
Expand All @@ -21,19 +22,19 @@
}
visible = isShow;
if (visible) {
activeCount ++;
activeCount++;
scrollTop = $(window).scrollTop() || $pageMain.scrollTop();
$root.addClass('modal--show');
$pageMain.scrollTop(scrollTop);
activeCount === 1 && ($pageRoot.addClass('show-modal'), $body.addClass('of-hidden'));
$window.on('scroll', hide);
hideWhenWindowScroll && window.hasEvent('touchstart') && $window.on('scroll', hide);
$window.on('keyup', handleKeyup);
} else {
activeCount > 0 && activeCount --;
activeCount > 0 && activeCount--;
$root.removeClass('modal--show');
$window.scrollTop(scrollTop);
activeCount === 0 && ($pageRoot.removeClass('show-modal'), $body.removeClass('of-hidden'));
$window.off('scroll', hide);
hideWhenWindowScroll && window.hasEvent('touchstart') && $window.off('scroll', hide);
$window.off('keyup', handleKeyup);
}
onChange && onChange(visible);
Expand Down
32 changes: 27 additions & 5 deletions _includes/scripts/lib/swiper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,21 @@
var SOURCES = window.TEXT_VARIABLES.sources;
window.Lazyload.js(SOURCES.jquery, function() {
function swiper(options) {
var $window = $(window), $root = this, $swiperWrapper, $swiperButtonPrev, $swiperButtonNext,
initialSlide, animation,
rootWidth, count, curIndex, translateX, CRITICAL_ANGLE = Math.PI / 3;
var $window = $(window), $root = this, $swiperWrapper, $swiperSlides, $swiperButtonPrev, $swiperButtonNext,
initialSlide, animation, onChange, onChangeEnd,
rootWidth, count, preIndex, curIndex, translateX, CRITICAL_ANGLE = Math.PI / 3;

function setOptions(options) {
var _options = options || {};
initialSlide = _options.initialSlide || 0;
animation = _options.animation === undefined && true;
onChange = onChange || _options.onChange;
onChangeEnd = onChangeEnd || _options.onChangeEnd;
}

function init() {
$swiperWrapper = $root.find('.swiper__wrapper');
$swiperSlides = $root.find('.swiper__slide');
$swiperButtonPrev = $root.find('.swiper__button--prev');
$swiperButtonNext = $root.find('.swiper__button--next');
animation && $swiperWrapper.addClass('swiper__wrapper--animation');
Expand All @@ -32,14 +35,29 @@
}

var calc = (function() {
var preAnimation;
var preAnimation, $swiperSlide, $preSwiperSlide;
return function (needPreCalc, params) {
needPreCalc && preCalc();
var _animation = (params && params.animation !== undefined) ? params.animation : animation;
if (preAnimation === undefined || preAnimation !== _animation) {
preAnimation = _animation ? $swiperWrapper.addClass('swiper__wrapper--animation') :
$swiperWrapper.removeClass('swiper__wrapper--animation');
}
if (preIndex !== curIndex) {
($preSwiperSlide = $swiperSlides.eq(preIndex)).removeClass('active');
($swiperSlide = $swiperSlides.eq(curIndex)).addClass('active');
onChange && onChange(curIndex, $swiperSlides.eq(curIndex), $swiperSlide, $preSwiperSlide);
if (onChangeEnd) {
if (_animation) {
setTimeout(function() {
onChangeEnd(curIndex, $swiperSlides.eq(curIndex), $swiperSlide, $preSwiperSlide);
}, 400);
} else {
onChangeEnd(curIndex, $swiperSlides.eq(curIndex), $swiperSlide, $preSwiperSlide);
}
}
preIndex = curIndex;
}
$swiperWrapper.css('transform', 'translate(' + translateX + 'px, 0)');
if (count > 1) {
if (curIndex <= 0) {
Expand All @@ -61,6 +79,7 @@
}

function moveToIndex(index ,params) {
preIndex = curIndex;
curIndex = index;
translateX = getTranslateXFromCurIndex();
calc(false, params);
Expand All @@ -85,6 +104,7 @@

setOptions(options);
init();
preIndex = curIndex;

$swiperButtonPrev.on('click', function(e) {
e.stopPropagation();
Expand All @@ -95,7 +115,6 @@
move('next');
});
$window.on('resize', function() {
translateX = getTranslateXFromCurIndex();
calc(true, { animation: false });
});

Expand All @@ -109,6 +128,9 @@
preTranslateX = translateX;
}
function handleTouchmove(e) {
if (e.touches && e.touches.length > 1) {
return;
}
var point = e.touches ? e.touches[0] : e;
var deltaX = point.pageX - pageX;
var deltaY = point.pageY - pageY;
Expand Down
12 changes: 4 additions & 8 deletions _sass/common/components/_gallery.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,9 @@
}

.gallery-item{
display: table;
width: 100%;
@include flexbox();
@include align-items(center);
@include justify-content(center);
height: 100%;
}

.gallery-item__content {
display: table-cell;
text-align: center;
vertical-align: middle;
overflow: hidden;
}

0 comments on commit a571ed0

Please sign in to comment.