268 lines
9.2 KiB
JavaScript
268 lines
9.2 KiB
JavaScript
/**
|
||
* 图片预览组件
|
||
* varstion 0.4.0
|
||
* by Houfeng
|
||
* Houfeng@DCloud.io
|
||
*/
|
||
|
||
(function($, document) {
|
||
|
||
$.init({
|
||
gestureConfig: {
|
||
tap: true, //默认为true
|
||
doubletap: true, //默认为false
|
||
longtap: true, //默认为false
|
||
swipe: true, //默认为true
|
||
drag: true, //默认为true
|
||
hold: true, //默认为false，不监听
|
||
release: true //默认为false，不监听
|
||
}
|
||
});
|
||
|
||
var touchSupport = ('ontouchstart' in document);
|
||
var tapEventName = touchSupport ? 'tap' : 'click';
|
||
var enterEventName = touchSupport ? 'tap' : 'click';
|
||
var imageClassName = $.className('image');
|
||
|
||
|
||
//创建DOM (此函数是否可放在 mui.js 中)
|
||
$.dom = function(str) {
|
||
if (!$.__create_dom_div__) {
|
||
$.__create_dom_div__ = document.createElement('div');
|
||
}
|
||
$.__create_dom_div__.innerHTML = str;
|
||
return $.__create_dom_div__.childNodes;
|
||
};
|
||
|
||
//图片预览组件类
|
||
var ImageViewer = $.ImageViewer = $.Class.extend({
|
||
//构造函数
|
||
init: function(selector, options) {
|
||
var self = this;
|
||
self.options = options || {};
|
||
self.selector = selector || 'img';
|
||
if (self.options.dbl) {
|
||
enterEventName = touchSupport ? 'doubletap' : 'dblclick';
|
||
}
|
||
self.findAllImage();
|
||
self.createViewer();
|
||
self.bindEvent();
|
||
},
|
||
//创建图片预览组件的整体 UI
|
||
createViewer: function() {
|
||
var self = this;
|
||
self.viewer = $.dom("<div class='mui-imageviewer'><div class='mui-imageviewer-mask'></div><div class='mui-imageviewer-header'><i class='mui-icon mui-icon-closeempty mui-imageviewer-close'></i><span class='mui-imageviewer-state'></span></div><i class='mui-icon mui-icon-arrowleft mui-imageviewer-left'></i><i class='mui-icon mui-icon-arrowright mui-imageviewer-right'></i></div>");
|
||
self.viewer = self.viewer[0] || self.viewer;
|
||
//self.viewer.style.height = screen.height;
|
||
self.closeButton = self.viewer.querySelector('.mui-imageviewer-close');
|
||
self.state = self.viewer.querySelector('.mui-imageviewer-state');
|
||
self.leftButton = self.viewer.querySelector('.mui-imageviewer-left');
|
||
self.rightButton = self.viewer.querySelector('.mui-imageviewer-right');
|
||
self.mask = self.viewer.querySelector('.mui-imageviewer-mask');
|
||
document.body.appendChild(self.viewer);
|
||
},
|
||
//查找所有符合的图片
|
||
findAllImage: function() {
|
||
var self = this;
|
||
self.images = [].slice.call($(self.selector));
|
||
},
|
||
//检查图片是否为启动预览的图片
|
||
checkImage: function(target) {
|
||
var self = this;
|
||
if (target.tagName !== 'IMG') return false;
|
||
return self.images.some(function(image) {
|
||
return image == target;
|
||
});
|
||
},
|
||
//绑定事件
|
||
bindEvent: function() {
|
||
var self = this;
|
||
//绑定图片 tap 事件
|
||
document.addEventListener(enterEventName, function(event) {
|
||
if (!self.viewer) return;
|
||
var target = event.target;
|
||
if (!self.checkImage(target)) return;
|
||
self.viewer.style.display = 'block';
|
||
setTimeout(function() {
|
||
self.viewer.style.opacity = 1;
|
||
}, 0);
|
||
self.index = self.images.indexOf(target);
|
||
self.currentItem = self.createImage(self.index);
|
||
}, false);
|
||
//关系按钮事件
|
||
self.closeButton.addEventListener(tapEventName, function(event) {
|
||
self.viewer.style.opacity = 0;
|
||
setTimeout(function() {
|
||
self.viewer.style.display = 'none';
|
||
self.disposeImage(true);
|
||
}, 600);
|
||
event.preventDefault();
|
||
event.cancelBubble = true;
|
||
}, false);
|
||
//处理左右按钮
|
||
self.leftButton.addEventListener(tapEventName, function() {
|
||
self.prev();
|
||
}, false);
|
||
self.rightButton.addEventListener(tapEventName, function() {
|
||
self.next();
|
||
}, false);
|
||
//处理划动
|
||
self.mask.addEventListener($.EVENT_MOVE, function(event) {
|
||
event.preventDefault();
|
||
event.cancelBubble = true;
|
||
}, false);
|
||
self.viewer.addEventListener('swipeleft', function(event) {
|
||
if (self.scaleValue == 1) self.next();
|
||
event.preventDefault();
|
||
event.cancelBubble = true;
|
||
}, false);
|
||
self.viewer.addEventListener('swiperight', function(event) {
|
||
if (self.scaleValue == 1) self.prev();
|
||
event.preventDefault();
|
||
event.cancelBubble = true;
|
||
}, false);
|
||
//处理缩放开始
|
||
self.viewer.addEventListener($.EVENT_START, function(event) {
|
||
var touches = event.touches;
|
||
if (touches.length == 2) {
|
||
var p1 = touches[0];
|
||
var p2 = touches[1];
|
||
var x = p1.pageX - p2.pageX; //x1-x2
|
||
var y = p1.pageY - p2.pageY; //y1-y2
|
||
self.scaleStart = Math.sqrt(x * x + y * y);
|
||
self.isMultiTouch = true;
|
||
} else if (touches.length = 1) {
|
||
self.dragStart = touches[0];
|
||
}
|
||
}, false);
|
||
self.viewer.addEventListener($.EVENT_MOVE, function(event) {
|
||
var img = self.currentItem.querySelector('img');
|
||
var touches = event.changedTouches;
|
||
if (touches.length == 2) {
|
||
event.preventDefault();
|
||
event.cancelBubble = true;
|
||
var p1 = touches[0];
|
||
var p2 = touches[1];
|
||
var x = p1.pageX - p2.pageX;
|
||
var y = p1.pageY - p2.pageY;
|
||
self.scaleEnd = Math.sqrt(x * x + y * y);
|
||
self._scaleValue = (self.scaleValue * (self.scaleEnd / self.scaleStart));
|
||
//self.state.innerText = self._scaleValue;
|
||
img.style.webkitTransform = "scale(" + self._scaleValue + "," + self._scaleValue + ") "; // + " translate(" + self.dragX || 0 + "px," + self.dragY || 0 + "px)";
|
||
} else if (!self.isMultiTouch && touches.length == 1 && self.scaleValue != 1) {
|
||
event.preventDefault();
|
||
event.cancelBubble = true;
|
||
self.dragEnd = touches[0];
|
||
self._dragX = self.dragX + (self.dragEnd.pageX - self.dragStart.pageX);
|
||
self._dragY = self.dragY + (self.dragEnd.pageY - self.dragStart.pageY);
|
||
img.style.marginLeft = self._dragX + 'px';
|
||
img.style.marginTop = self._dragY + 'px';
|
||
//img.style.transform = "translate(" + self._dragX + "px," + self._dragY + "px) " + " scale(" + self.scaleValue || 1 + "," + self.scaleValue || 1 + ")";
|
||
}
|
||
}, false);
|
||
self.viewer.addEventListener($.EVENT_END, function() {
|
||
self.scaleValue = self._scaleValue || self.scaleValue;
|
||
self._scaleValue = null;
|
||
self.dragX = self._dragX;
|
||
self.dragY = self._dragY;
|
||
self._dragX = null;
|
||
self._dragY = null;
|
||
var touches = event.touches;
|
||
self.isMultiTouch = (touches.length != 0);
|
||
});
|
||
// doubletap 好像不能用
|
||
self.viewer.addEventListener('doubletap', function() {
|
||
var img = self.currentItem.querySelector('img');
|
||
if (self.scaleValue === 1) {
|
||
self.scaleValue = 2;
|
||
} else {
|
||
self.scaleValue = 1;
|
||
}
|
||
self.dragX = 0;
|
||
self.dragY = 0;
|
||
img.style.marginLeft = self.dragX + 'px';
|
||
img.style.marginTop = self.dragY + 'px';
|
||
img.style.webkitTransform = "scale(" + self.scaleValue + "," + self.scaleValue + ") "; //+ " translate(" + self.dragX || 0 + "px," + self.dragY || 0 + "px)";
|
||
self.viewer.__tap_num = 0;
|
||
}, false);
|
||
//处理缩放结束
|
||
},
|
||
//下一张图片
|
||
next: function() {
|
||
var self = this;
|
||
self.mask.style.display = 'block';
|
||
self.index++;
|
||
var newItem = self.createImage(self.index, 'right');
|
||
setTimeout(function() {
|
||
self.currentItem.classList.remove('mui-imageviewer-item-center');
|
||
self.currentItem.classList.add('mui-imageviewer-item-left');
|
||
newItem.classList.remove('mui-imageviewer-item-right');
|
||
newItem.classList.add('mui-imageviewer-item-center');
|
||
self.oldItem = self.currentItem;
|
||
self.currentItem = newItem;
|
||
// TODO: 临时,稍候将调整
|
||
setTimeout(function() {
|
||
self.disposeImage();
|
||
self.mask.style.display = 'none';
|
||
}, 600);
|
||
}, 25);
|
||
},
|
||
//上一张图片
|
||
prev: function() {
|
||
var self = this;
|
||
self.mask.style.display = 'block';
|
||
self.index--;
|
||
var newItem = self.createImage(self.index, 'left');
|
||
setTimeout(function() {
|
||
self.currentItem.classList.remove('mui-imageviewer-item-center');
|
||
self.currentItem.classList.add('mui-imageviewer-item-right');
|
||
newItem.classList.remove('mui-imageviewer-item-left');
|
||
newItem.classList.add('mui-imageviewer-item-center');
|
||
self.oldItem = self.currentItem;
|
||
self.currentItem = newItem;
|
||
// TODO: 临时,稍候将调整
|
||
setTimeout(function() {
|
||
self.disposeImage();
|
||
self.mask.style.display = 'none';
|
||
}, 600);
|
||
}, 25);
|
||
},
|
||
//释放不显示的图片
|
||
disposeImage: function(all) {
|
||
var sel = '.mui-imageviewer-item-left,.mui-imageviewer-item-right';
|
||
if (all) sel += ",.mui-imageviewer-item";
|
||
var willdisposes = $(sel);
|
||
willdisposes.each(function(i, item) {
|
||
if (item.parentNode && item.parentNode.removeChild)
|
||
item.parentNode.removeChild(item, true);
|
||
});
|
||
},
|
||
//创建一个图片
|
||
createImage: function(index, type) {
|
||
var self = this;
|
||
type = type || 'center';
|
||
if (index < 0) index = self.images.length - 1;
|
||
if (index > self.images.length - 1) index = 0;
|
||
self.index = index;
|
||
var item = $.dom("<div class='mui-imageviewer-item'></div>")[0];
|
||
item.appendChild($.dom('<span><img src="' + self.images[self.index].src + '"/></span>')[0]);
|
||
item.classList.add('mui-imageviewer-item-' + type);
|
||
self.viewer.appendChild(item);
|
||
self.state.innerText = (self.index + 1) + "/" + self.images.length;
|
||
//重置初始缩放比例
|
||
self.scaleValue = 1;
|
||
self.dragX = 0;
|
||
self.dragY = 0;
|
||
return item;
|
||
}
|
||
});
|
||
|
||
$.imageViewer = function(selector, options) {
|
||
return new ImageViewer(selector, options);
|
||
};
|
||
|
||
$.ready(function() {
|
||
$.imageViewer('.' + imageClassName);
|
||
});
|
||
|
||
}(mui, document)); |