You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
382 lines
13 KiB
382 lines
13 KiB
5 years ago
|
(function($, window) {
|
||
|
|
|
||
|
|
var template = '<div id="{{id}}" class="mui-slider mui-preview-image mui-fullscreen"><div class="mui-preview-header">{{header}}</div><div class="mui-slider-group"></div><div class="mui-preview-footer mui-hidden">{{footer}}</div><div class="mui-preview-loading"><span class="mui-spinner mui-spinner-white"></span></div></div>';
|
||
|
|
var itemTemplate = '<div class="mui-slider-item mui-zoom-wrapper {{className}}"><div class="mui-zoom-scroller"><img src="{{src}}" data-preview-lazyload="{{lazyload}}" style="{{style}}" class="mui-zoom"></div></div>';
|
||
|
|
var defaultGroupName = '__DEFAULT';
|
||
|
|
var div = document.createElement('div');
|
||
|
|
var imgId = 0;
|
||
|
|
var PreviewImage = function(options) {
|
||
|
|
this.options = $.extend(true, {
|
||
|
|
id: '__MUI_PREVIEWIMAGE',
|
||
|
|
zoom: true,
|
||
|
|
header: '<span class="mui-preview-indicator"></span>',
|
||
|
|
footer: ''
|
||
|
|
}, options || {});
|
||
|
|
this.init();
|
||
|
|
this.initEvent();
|
||
|
|
};
|
||
|
|
var proto = PreviewImage.prototype;
|
||
|
|
proto.init = function() {
|
||
|
|
var options = this.options;
|
||
|
|
var el = document.getElementById(this.options.id);
|
||
|
|
if (!el) {
|
||
|
|
div.innerHTML = template.replace(/\{\{id\}\}/g, this.options.id).replace('{{header}}', options.header).replace('{{footer}}', options.footer);
|
||
|
|
document.body.appendChild(div.firstElementChild);
|
||
|
|
el = document.getElementById(this.options.id);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.element = el;
|
||
|
|
this.scroller = this.element.querySelector($.classSelector('.slider-group'));
|
||
|
|
this.indicator = this.element.querySelector($.classSelector('.preview-indicator'));
|
||
|
|
this.loader = this.element.querySelector($.classSelector('.preview-loading'));
|
||
|
|
if (options.footer) {
|
||
|
|
this.element.querySelector($.classSelector('.preview-footer')).classList.remove($.className('hidden'));
|
||
|
|
}
|
||
|
|
this.addImages();
|
||
|
|
};
|
||
|
|
proto.initEvent = function() {
|
||
|
|
var self = this;
|
||
|
|
$(document.body).on('tap', 'img[data-preview-src]', function() {
|
||
|
|
self.open(this);
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
var laterClose = null;
|
||
|
|
var laterCloseEvent = function() {
|
||
|
|
!laterClose && (laterClose = $.later(function() {
|
||
|
|
self.loader.removeEventListener('tap', laterCloseEvent);
|
||
|
|
self.scroller.removeEventListener('tap', laterCloseEvent);
|
||
|
|
self.close();
|
||
|
|
}, 300));
|
||
|
|
};
|
||
|
|
this.scroller.addEventListener('doubletap', function() {
|
||
|
|
if (laterClose) {
|
||
|
|
laterClose.cancel();
|
||
|
|
laterClose = null;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.element.addEventListener('webkitAnimationEnd', function() {
|
||
|
|
if (self.element.classList.contains($.className('preview-out'))) { //close
|
||
|
|
self.element.style.display = 'none';
|
||
|
|
self.element.classList.remove($.className('preview-out'));
|
||
|
|
self.element.classList.remove($.className('preview-in'));
|
||
|
|
laterClose = null;
|
||
|
|
} else { //open
|
||
|
|
self.loader.addEventListener('tap', laterCloseEvent);
|
||
|
|
self.scroller.addEventListener('tap', laterCloseEvent);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.element.addEventListener('slide', function(e) {
|
||
|
|
if (self.options.zoom) {
|
||
|
|
var lastZoomerEl = self.element.querySelector('.mui-zoom-wrapper:nth-child(' + (self.lastIndex + 1) + ')');
|
||
|
|
if (lastZoomerEl) {
|
||
|
|
$(lastZoomerEl).zoom().setZoom(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var slideNumber = e.detail.slideNumber;
|
||
|
|
self.lastIndex = slideNumber;
|
||
|
|
self.indicator && (self.indicator.innerText = (slideNumber + 1) + '/' + self.currentGroup.length);
|
||
|
|
self._loadItem(slideNumber);
|
||
|
|
|
||
|
|
});
|
||
|
|
};
|
||
|
|
proto.addImages = function(group, index) {
|
||
|
|
this.groups = {};
|
||
|
|
var imgs = [];
|
||
|
|
if (group) {
|
||
|
|
if (group === defaultGroupName) {
|
||
|
|
imgs = document.querySelectorAll("img[data-preview-src]:not([data-preview-group])");
|
||
|
|
} else {
|
||
|
|
imgs = document.querySelectorAll("img[data-preview-src][data-preview-group='" + group + "']");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
imgs = document.querySelectorAll("img[data-preview-src]");
|
||
|
|
}
|
||
|
|
if (imgs.length) {
|
||
|
|
for (var i = 0, len = imgs.length; i < len; i++) {
|
||
|
|
this.addImage(imgs[i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
proto.addImage = function(img) {
|
||
|
|
var group = img.getAttribute('data-preview-group');
|
||
|
|
group = group || defaultGroupName;
|
||
|
|
if (!this.groups[group]) {
|
||
|
|
this.groups[group] = [];
|
||
|
|
}
|
||
|
|
var src = img.getAttribute('src');
|
||
|
|
if (img.__mui_img_data && img.__mui_img_data.src === src) { //已缓存且图片未变化
|
||
|
|
this.groups[group].push(img.__mui_img_data);
|
||
|
|
} else {
|
||
|
|
var lazyload = img.getAttribute('data-preview-src');
|
||
|
|
if (!lazyload) {
|
||
|
|
lazyload = src;
|
||
|
|
}
|
||
|
|
var imgObj = {
|
||
|
|
src: src,
|
||
|
|
lazyload: src === lazyload ? '' : lazyload,
|
||
|
|
loaded: src === lazyload ? true : false,
|
||
|
|
sWidth: 0,
|
||
|
|
sHeight: 0,
|
||
|
|
sTop: 0,
|
||
|
|
sLeft: 0,
|
||
|
|
sScale: 1,
|
||
|
|
el: img
|
||
|
|
};
|
||
|
|
this.groups[group].push(imgObj);
|
||
|
|
img.__mui_img_data = imgObj;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
proto.empty = function() {
|
||
|
|
this.scroller.innerHTML = '';
|
||
|
|
};
|
||
|
|
proto._initImgData = function(itemData, imgEl) {
|
||
|
|
if (!itemData.sWidth) {
|
||
|
|
var img = itemData.el;
|
||
|
|
itemData.sWidth = img.offsetWidth;
|
||
|
|
itemData.sHeight = img.offsetHeight;
|
||
|
|
var offset = $.offset(img);
|
||
|
|
itemData.sTop = offset.top;
|
||
|
|
itemData.sLeft = offset.left;
|
||
|
|
itemData.sScale = Math.max(itemData.sWidth / window.innerWidth, itemData.sHeight / window.innerHeight);
|
||
|
|
}
|
||
|
|
imgEl.style.webkitTransform = 'translate3d(0,0,0) scale(' + itemData.sScale + ')';
|
||
|
|
};
|
||
|
|
|
||
|
|
proto._getScale = function(from, to) {
|
||
|
|
var scaleX = from.width / to.width;
|
||
|
|
var scaleY = from.height / to.height;
|
||
|
|
var scale = 1;
|
||
|
|
if (scaleX <= scaleY) {
|
||
|
|
scale = from.height / (to.height * scaleX);
|
||
|
|
} else {
|
||
|
|
scale = from.width / (to.width * scaleY);
|
||
|
|
}
|
||
|
|
return scale;
|
||
|
|
};
|
||
|
|
proto._imgTransitionEnd = function(e) {
|
||
|
|
var img = e.target;
|
||
|
|
img.classList.remove($.className('transitioning'));
|
||
|
|
img.removeEventListener('webkitTransitionEnd', this._imgTransitionEnd.bind(this));
|
||
|
|
};
|
||
|
|
proto._loadItem = function(index, isOpening) { //TODO 暂时仅支持img
|
||
|
|
var itemEl = this.scroller.querySelector($.classSelector('.slider-item:nth-child(' + (index + 1) + ')'));
|
||
|
|
var itemData = this.currentGroup[index];
|
||
|
|
var imgEl = itemEl.querySelector('img');
|
||
|
|
this._initImgData(itemData, imgEl);
|
||
|
|
if (isOpening) {
|
||
|
|
var posi = this._getPosition(itemData);
|
||
|
|
imgEl.style.webkitTransitionDuration = '0ms';
|
||
|
|
imgEl.style.webkitTransform = 'translate3d(' + posi.x + 'px,' + posi.y + 'px,0) scale(' + itemData.sScale + ')';
|
||
|
|
imgEl.offsetHeight;
|
||
|
|
}
|
||
|
|
if (!itemData.loaded && imgEl.getAttribute('data-preview-lazyload')) {
|
||
|
|
var self = this;
|
||
|
|
self.loader.classList.add($.className('active'));
|
||
|
|
//移动位置动画
|
||
|
|
imgEl.style.webkitTransitionDuration = '0.5s';
|
||
|
|
imgEl.addEventListener('webkitTransitionEnd', self._imgTransitionEnd.bind(self));
|
||
|
|
imgEl.style.webkitTransform = 'translate3d(0,0,0) scale(' + itemData.sScale + ')';
|
||
|
|
this.loadImage(imgEl, function() {
|
||
|
|
itemData.loaded = true;
|
||
|
|
imgEl.src = itemData.lazyload;
|
||
|
|
self._initZoom(itemEl, this.width, this.height);
|
||
|
|
imgEl.classList.add($.className('transitioning'));
|
||
|
|
imgEl.addEventListener('webkitTransitionEnd', self._imgTransitionEnd.bind(self));
|
||
|
|
imgEl.setAttribute('style', '');
|
||
|
|
imgEl.offsetHeight;
|
||
|
|
self.loader.classList.remove($.className('active'));
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
itemData.lazyload && (imgEl.src = itemData.lazyload);
|
||
|
|
this._initZoom(itemEl, imgEl.width, imgEl.height);
|
||
|
|
imgEl.classList.add($.className('transitioning'));
|
||
|
|
imgEl.addEventListener('webkitTransitionEnd', this._imgTransitionEnd.bind(this));
|
||
|
|
imgEl.setAttribute('style', '');
|
||
|
|
imgEl.offsetHeight;
|
||
|
|
}
|
||
|
|
this._preloadItem(index + 1);
|
||
|
|
this._preloadItem(index - 1);
|
||
|
|
};
|
||
|
|
proto._preloadItem = function(index) {
|
||
|
|
var itemEl = this.scroller.querySelector($.classSelector('.slider-item:nth-child(' + (index + 1) + ')'));
|
||
|
|
if (itemEl) {
|
||
|
|
var itemData = this.currentGroup[index];
|
||
|
|
if (!itemData.sWidth) {
|
||
|
|
var imgEl = itemEl.querySelector('img');
|
||
|
|
this._initImgData(itemData, imgEl);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
proto._initZoom = function(zoomWrapperEl, zoomerWidth, zoomerHeight) {
|
||
|
|
if (!this.options.zoom) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (zoomWrapperEl.getAttribute('data-zoomer')) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var zoomEl = zoomWrapperEl.querySelector($.classSelector('.zoom'));
|
||
|
|
if (zoomEl.tagName === 'IMG') {
|
||
|
|
var self = this;
|
||
|
|
var maxZoom = self._getScale({
|
||
|
|
width: zoomWrapperEl.offsetWidth,
|
||
|
|
height: zoomWrapperEl.offsetHeight
|
||
|
|
}, {
|
||
|
|
width: zoomerWidth,
|
||
|
|
height: zoomerHeight
|
||
|
|
});
|
||
|
|
$(zoomWrapperEl).zoom({
|
||
|
|
maxZoom: Math.max(maxZoom, 1)
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
$(zoomWrapperEl).zoom();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
proto.loadImage = function(imgEl, callback) {
|
||
|
|
var onReady = function() {
|
||
|
|
callback && callback.call(this);
|
||
|
|
};
|
||
|
|
var img = new Image();
|
||
|
|
img.onload = onReady;
|
||
|
|
img.onerror = onReady;
|
||
|
|
img.src = imgEl.getAttribute('data-preview-lazyload');
|
||
|
|
};
|
||
|
|
proto.getRangeByIndex = function(index, length) {
|
||
|
|
return {
|
||
|
|
from: 0,
|
||
|
|
to: length - 1
|
||
|
|
};
|
||
|
|
// var from = Math.max(index - 1, 0);
|
||
|
|
// var to = Math.min(index + 1, length);
|
||
|
|
// if (index === length - 1) {
|
||
|
|
// from = Math.max(length - 3, 0);
|
||
|
|
// to = length - 1;
|
||
|
|
// }
|
||
|
|
// if (index === 0) {
|
||
|
|
// from = 0;
|
||
|
|
// to = Math.min(2, length - 1);
|
||
|
|
// }
|
||
|
|
// return {
|
||
|
|
// from: from,
|
||
|
|
// to: to
|
||
|
|
// };
|
||
|
|
};
|
||
|
|
|
||
|
|
proto._getPosition = function(itemData) {
|
||
|
|
var sLeft = itemData.sLeft - window.pageXOffset;
|
||
|
|
var sTop = itemData.sTop - window.pageYOffset;
|
||
|
|
var left = (window.innerWidth - itemData.sWidth) / 2;
|
||
|
|
var top = (window.innerHeight - itemData.sHeight) / 2;
|
||
|
|
return {
|
||
|
|
left: sLeft,
|
||
|
|
top: sTop,
|
||
|
|
x: sLeft - left,
|
||
|
|
y: sTop - top
|
||
|
|
};
|
||
|
|
};
|
||
|
|
proto.refresh = function(index, groupArray) {
|
||
|
|
this.currentGroup = groupArray;
|
||
|
|
//重新生成slider
|
||
|
|
var length = groupArray.length;
|
||
|
|
var itemHtml = [];
|
||
|
|
var currentRange = this.getRangeByIndex(index, length);
|
||
|
|
var from = currentRange.from;
|
||
|
|
var to = currentRange.to + 1;
|
||
|
|
var currentIndex = index;
|
||
|
|
var className = '';
|
||
|
|
var itemStr = '';
|
||
|
|
var wWidth = window.innerWidth;
|
||
|
|
var wHeight = window.innerHeight;
|
||
|
|
for (var i = 0; from < to; from++, i++) {
|
||
|
|
var itemData = groupArray[from];
|
||
|
|
var style = '';
|
||
|
|
if (itemData.sWidth) {
|
||
|
|
style = '-webkit-transform:translate3d(0,0,0) scale(' + itemData.sScale + ');transform:translate3d(0,0,0) scale(' + itemData.sScale + ')';
|
||
|
|
}
|
||
|
|
itemStr = itemTemplate.replace('{{src}}', itemData.src).replace('{{lazyload}}', itemData.lazyload).replace('{{style}}', style);
|
||
|
|
if (from === index) {
|
||
|
|
currentIndex = i;
|
||
|
|
className = $.className('active');
|
||
|
|
} else {
|
||
|
|
className = '';
|
||
|
|
}
|
||
|
|
itemHtml.push(itemStr.replace('{{className}}', className));
|
||
|
|
}
|
||
|
|
this.scroller.innerHTML = itemHtml.join('');
|
||
|
|
this.element.style.display = 'block';
|
||
|
|
this.element.classList.add($.className('preview-in'));
|
||
|
|
this.lastIndex = currentIndex;
|
||
|
|
this.element.offsetHeight;
|
||
|
|
$(this.element).slider().gotoItem(currentIndex, 0);
|
||
|
|
this.indicator && (this.indicator.innerText = (currentIndex + 1) + '/' + this.currentGroup.length);
|
||
|
|
this._loadItem(currentIndex, true);
|
||
|
|
};
|
||
|
|
proto.openByGroup = function(index, group) {
|
||
|
|
index = Math.min(Math.max(0, index), this.groups[group].length - 1);
|
||
|
|
this.refresh(index, this.groups[group]);
|
||
|
|
};
|
||
|
|
proto.open = function(index, group) {
|
||
|
|
if (this.isShown()) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (typeof index === "number") {
|
||
|
|
group = group || defaultGroupName;
|
||
|
|
this.addImages(group, index); //刷新当前group
|
||
|
|
this.openByGroup(index, group);
|
||
|
|
} else {
|
||
|
|
group = index.getAttribute('data-preview-group');
|
||
|
|
group = group || defaultGroupName;
|
||
|
|
this.addImages(group, index); //刷新当前group
|
||
|
|
this.openByGroup(this.groups[group].indexOf(index.__mui_img_data), group);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
proto.close = function(index, group) {
|
||
|
|
if (!this.isShown()) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.element.classList.remove($.className('preview-in'));
|
||
|
|
this.element.classList.add($.className('preview-out'));
|
||
|
|
var itemEl = this.scroller.querySelector($.classSelector('.slider-item:nth-child(' + (this.lastIndex + 1) + ')'));
|
||
|
|
var imgEl = itemEl.querySelector('img');
|
||
|
|
if (imgEl) {
|
||
|
|
imgEl.classList.add($.className('transitioning'));
|
||
|
|
var itemData = this.currentGroup[this.lastIndex];
|
||
|
|
var posi = this._getPosition(itemData);
|
||
|
|
var sLeft = posi.left;
|
||
|
|
var sTop = posi.top;
|
||
|
|
if (sTop > window.innerHeight || sLeft > window.innerWidth || sTop < 0 || sLeft < 0) { //out viewport
|
||
|
|
imgEl.style.opacity = 0;
|
||
|
|
imgEl.style.webkitTransitionDuration = '0.5s';
|
||
|
|
imgEl.style.webkitTransform = 'scale(' + itemData.sScale + ')';
|
||
|
|
} else {
|
||
|
|
if (this.options.zoom) {
|
||
|
|
$(imgEl.parentNode.parentNode).zoom().toggleZoom(0);
|
||
|
|
}
|
||
|
|
imgEl.style.webkitTransitionDuration = '0.5s';
|
||
|
|
imgEl.style.webkitTransform = 'translate3d(' + posi.x + 'px,' + posi.y + 'px,0) scale(' + itemData.sScale + ')';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var zoomers = this.element.querySelectorAll($.classSelector('.zoom-wrapper'));
|
||
|
|
for (var i = 0, len = zoomers.length; i < len; i++) {
|
||
|
|
$(zoomers[i]).zoom().destroy();
|
||
|
|
}
|
||
|
|
$(this.element).slider().destroy();
|
||
|
|
// this.empty();
|
||
|
|
};
|
||
|
|
proto.isShown = function() {
|
||
|
|
return this.element.classList.contains($.className('preview-in'));
|
||
|
|
};
|
||
|
|
|
||
|
|
var previewImageApi = null;
|
||
|
|
$.previewImage = function(options) {
|
||
|
|
if (!previewImageApi) {
|
||
|
|
previewImageApi = new PreviewImage(options);
|
||
|
|
}
|
||
|
|
return previewImageApi;
|
||
|
|
};
|
||
|
|
$.getPreviewImage = function() {
|
||
|
|
return previewImageApi;
|
||
|
|
}
|
||
|
|
|
||
|
|
})(mui, window);
|