(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.tagN
