|
|
@@ -0,0 +1,382 @@
|
|
|
1
|
+(function($, window) {
|
|
|
2
|
+
|
|
|
3
|
+ 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>';
|
|
|
4
|
+ 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>';
|
|
|
5
|
+ var defaultGroupName = '__DEFAULT';
|
|
|
6
|
+ var div = document.createElement('div');
|
|
|
7
|
+ var imgId = 0;
|
|
|
8
|
+ var PreviewImage = function(options) {
|
|
|
9
|
+ this.options = $.extend(true, {
|
|
|
10
|
+ id: '__MUI_PREVIEWIMAGE',
|
|
|
11
|
+ zoom: true,
|
|
|
12
|
+ header: '<span class="mui-preview-indicator"></span>',
|
|
|
13
|
+ footer: ''
|
|
|
14
|
+ }, options || {});
|
|
|
15
|
+ this.init();
|
|
|
16
|
+ this.initEvent();
|
|
|
17
|
+ };
|
|
|
18
|
+ var proto = PreviewImage.prototype;
|
|
|
19
|
+ proto.init = function() {
|
|
|
20
|
+ var options = this.options;
|
|
|
21
|
+ var el = document.getElementById(this.options.id);
|
|
|
22
|
+ if (!el) {
|
|
|
23
|
+ div.innerHTML = template.replace(/\{\{id\}\}/g, this.options.id).replace('{{header}}', options.header).replace('{{footer}}', options.footer);
|
|
|
24
|
+ document.body.appendChild(div.firstElementChild);
|
|
|
25
|
+ el = document.getElementById(this.options.id);
|
|
|
26
|
+ }
|
|
|
27
|
+
|
|
|
28
|
+ this.element = el;
|
|
|
29
|
+ this.scroller = this.element.querySelector($.classSelector('.slider-group'));
|
|
|
30
|
+ this.indicator = this.element.querySelector($.classSelector('.preview-indicator'));
|
|
|
31
|
+ this.loader = this.element.querySelector($.classSelector('.preview-loading'));
|
|
|
32
|
+ if (options.footer) {
|
|
|
33
|
+ this.element.querySelector($.classSelector('.preview-footer')).classList.remove($.className('hidden'));
|
|
|
34
|
+ }
|
|
|
35
|
+ this.addImages();
|
|
|
36
|
+ };
|
|
|
37
|
+ proto.initEvent = function() {
|
|
|
38
|
+ var self = this;
|
|
|
39
|
+ $(document.body).on('tap', 'img[data-preview-src]', function() {
|
|
|
40
|
+ self.open(this);
|
|
|
41
|
+ return false;
|
|
|
42
|
+ });
|
|
|
43
|
+ var laterClose = null;
|
|
|
44
|
+ var laterCloseEvent = function() {
|
|
|
45
|
+ !laterClose && (laterClose = $.later(function() {
|
|
|
46
|
+ self.loader.removeEventListener('tap', laterCloseEvent);
|
|
|
47
|
+ self.scroller.removeEventListener('tap', laterCloseEvent);
|
|
|
48
|
+ self.close();
|
|
|
49
|
+ }, 300));
|
|
|
50
|
+ };
|
|
|
51
|
+ this.scroller.addEventListener('doubletap', function() {
|
|
|
52
|
+ if (laterClose) {
|
|
|
53
|
+ laterClose.cancel();
|
|
|
54
|
+ laterClose = null;
|
|
|
55
|
+ }
|
|
|
56
|
+ });
|
|
|
57
|
+ this.element.addEventListener('webkitAnimationEnd', function() {
|
|
|
58
|
+ if (self.element.classList.contains($.className('preview-out'))) { //close
|
|
|
59
|
+ self.element.style.display = 'none';
|
|
|
60
|
+ self.element.classList.remove($.className('preview-out'));
|
|
|
61
|
+ self.element.classList.remove($.className('preview-in'));
|
|
|
62
|
+ laterClose = null;
|
|
|
63
|
+ } else { //open
|
|
|
64
|
+ self.loader.addEventListener('tap', laterCloseEvent);
|
|
|
65
|
+ self.scroller.addEventListener('tap', laterCloseEvent);
|
|
|
66
|
+ }
|
|
|
67
|
+ });
|
|
|
68
|
+ this.element.addEventListener('slide', function(e) {
|
|
|
69
|
+ if (self.options.zoom) {
|
|
|
70
|
+ var lastZoomerEl = self.element.querySelector('.mui-zoom-wrapper:nth-child(' + (self.lastIndex + 1) + ')');
|
|
|
71
|
+ if (lastZoomerEl) {
|
|
|
72
|
+ $(lastZoomerEl).zoom().setZoom(1);
|
|
|
73
|
+ }
|
|
|
74
|
+ }
|
|
|
75
|
+ var slideNumber = e.detail.slideNumber;
|
|
|
76
|
+ self.lastIndex = slideNumber;
|
|
|
77
|
+ self.indicator && (self.indicator.innerText = (slideNumber + 1) + '/' + self.currentGroup.length);
|
|
|
78
|
+ self._loadItem(slideNumber);
|
|
|
79
|
+
|
|
|
80
|
+ });
|
|
|
81
|
+ };
|
|
|
82
|
+ proto.addImages = function(group, index) {
|
|
|
83
|
+ this.groups = {};
|
|
|
84
|
+ var imgs = [];
|
|
|
85
|
+ if (group) {
|
|
|
86
|
+ if (group === defaultGroupName) {
|
|
|
87
|
+ imgs = document.querySelectorAll("img[data-preview-src]:not([data-preview-group])");
|
|
|
88
|
+ } else {
|
|
|
89
|
+ imgs = document.querySelectorAll("img[data-preview-src][data-preview-group='" + group + "']");
|
|
|
90
|
+ }
|
|
|
91
|
+ } else {
|
|
|
92
|
+ imgs = document.querySelectorAll("img[data-preview-src]");
|
|
|
93
|
+ }
|
|
|
94
|
+ if (imgs.length) {
|
|
|
95
|
+ for (var i = 0, len = imgs.length; i < len; i++) {
|
|
|
96
|
+ this.addImage(imgs[i]);
|
|
|
97
|
+ }
|
|
|
98
|
+ }
|
|
|
99
|
+ };
|
|
|
100
|
+ proto.addImage = function(img) {
|
|
|
101
|
+ var group = img.getAttribute('data-preview-group');
|
|
|
102
|
+ group = group || defaultGroupName;
|
|
|
103
|
+ if (!this.groups[group]) {
|
|
|
104
|
+ this.groups[group] = [];
|
|
|
105
|
+ }
|
|
|
106
|
+ var src = img.getAttribute('src');
|
|
|
107
|
+ if (img.__mui_img_data && img.__mui_img_data.src === src) { //已缓存且图片未变化
|
|
|
108
|
+ this.groups[group].push(img.__mui_img_data);
|
|
|
109
|
+ } else {
|
|
|
110
|
+ var lazyload = img.getAttribute('data-preview-src');
|
|
|
111
|
+ if (!lazyload) {
|
|
|
112
|
+ lazyload = src;
|
|
|
113
|
+ }
|
|
|
114
|
+ var imgObj = {
|
|
|
115
|
+ src: src,
|
|
|
116
|
+ lazyload: src === lazyload ? '' : lazyload,
|
|
|
117
|
+ loaded: src === lazyload ? true : false,
|
|
|
118
|
+ sWidth: 0,
|
|
|
119
|
+ sHeight: 0,
|
|
|
120
|
+ sTop: 0,
|
|
|
121
|
+ sLeft: 0,
|
|
|
122
|
+ sScale: 1,
|
|
|
123
|
+ el: img
|
|
|
124
|
+ };
|
|
|
125
|
+ this.groups[group].push(imgObj);
|
|
|
126
|
+ img.__mui_img_data = imgObj;
|
|
|
127
|
+ }
|
|
|
128
|
+ };
|
|
|
129
|
+
|
|
|
130
|
+
|
|
|
131
|
+ proto.empty = function() {
|
|
|
132
|
+ this.scroller.innerHTML = '';
|
|
|
133
|
+ };
|
|
|
134
|
+ proto._initImgData = function(itemData, imgEl) {
|
|
|
135
|
+ if (!itemData.sWidth) {
|
|
|
136
|
+ var img = itemData.el;
|
|
|
137
|
+ itemData.sWidth = img.offsetWidth;
|
|
|
138
|
+ itemData.sHeight = img.offsetHeight;
|
|
|
139
|
+ var offset = $.offset(img);
|
|
|
140
|
+ itemData.sTop = offset.top;
|
|
|
141
|
+ itemData.sLeft = offset.left;
|
|
|
142
|
+ itemData.sScale = Math.max(itemData.sWidth / window.innerWidth, itemData.sHeight / window.innerHeight);
|
|
|
143
|
+ }
|
|
|
144
|
+ imgEl.style.webkitTransform = 'translate3d(0,0,0) scale(' + itemData.sScale + ')';
|
|
|
145
|
+ };
|
|
|
146
|
+
|
|
|
147
|
+ proto._getScale = function(from, to) {
|
|
|
148
|
+ var scaleX = from.width / to.width;
|
|
|
149
|
+ var scaleY = from.height / to.height;
|
|
|
150
|
+ var scale = 1;
|
|
|
151
|
+ if (scaleX <= scaleY) {
|
|
|
152
|
+ scale = from.height / (to.height * scaleX);
|
|
|
153
|
+ } else {
|
|
|
154
|
+ scale = from.width / (to.width * scaleY);
|
|
|
155
|
+ }
|
|
|
156
|
+ return scale;
|
|
|
157
|
+ };
|
|
|
158
|
+ proto._imgTransitionEnd = function(e) {
|
|
|
159
|
+ var img = e.target;
|
|
|
160
|
+ img.classList.remove($.className('transitioning'));
|
|
|
161
|
+ img.removeEventListener('webkitTransitionEnd', this._imgTransitionEnd.bind(this));
|
|
|
162
|
+ };
|
|
|
163
|
+ proto._loadItem = function(index, isOpening) { //TODO 暂时仅支持img
|
|
|
164
|
+ var itemEl = this.scroller.querySelector($.classSelector('.slider-item:nth-child(' + (index + 1) + ')'));
|
|
|
165
|
+ var itemData = this.currentGroup[index];
|
|
|
166
|
+ var imgEl = itemEl.querySelector('img');
|
|
|
167
|
+ this._initImgData(itemData, imgEl);
|
|
|
168
|
+ if (isOpening) {
|
|
|
169
|
+ var posi = this._getPosition(itemData);
|
|
|
170
|
+ imgEl.style.webkitTransitionDuration = '0ms';
|
|
|
171
|
+ imgEl.style.webkitTransform = 'translate3d(' + posi.x + 'px,' + posi.y + 'px,0) scale(' + itemData.sScale + ')';
|
|
|
172
|
+ imgEl.offsetHeight;
|
|
|
173
|
+ }
|
|
|
174
|
+ if (!itemData.loaded && imgEl.getAttribute('data-preview-lazyload')) {
|
|
|
175
|
+ var self = this;
|
|
|
176
|
+ self.loader.classList.add($.className('active'));
|
|
|
177
|
+ //移动位置动画
|
|
|
178
|
+ imgEl.style.webkitTransitionDuration = '0.5s';
|
|
|
179
|
+ imgEl.addEventListener('webkitTransitionEnd', self._imgTransitionEnd.bind(self));
|
|
|
180
|
+ imgEl.style.webkitTransform = 'translate3d(0,0,0) scale(' + itemData.sScale + ')';
|
|
|
181
|
+ this.loadImage(imgEl, function() {
|
|
|
182
|
+ itemData.loaded = true;
|
|
|
183
|
+ imgEl.src = itemData.lazyload;
|
|
|
184
|
+ self._initZoom(itemEl, this.width, this.height);
|
|
|
185
|
+ imgEl.classList.add($.className('transitioning'));
|
|
|
186
|
+ imgEl.addEventListener('webkitTransitionEnd', self._imgTransitionEnd.bind(self));
|
|
|
187
|
+ imgEl.setAttribute('style', '');
|
|
|
188
|
+ imgEl.offsetHeight;
|
|
|
189
|
+ self.loader.classList.remove($.className('active'));
|
|
|
190
|
+ });
|
|
|
191
|
+ } else {
|
|
|
192
|
+ itemData.lazyload && (imgEl.src = itemData.lazyload);
|
|
|
193
|
+ this._initZoom(itemEl, imgEl.width, imgEl.height);
|
|
|
194
|
+ imgEl.classList.add($.className('transitioning'));
|
|
|
195
|
+ imgEl.addEventListener('webkitTransitionEnd', this._imgTransitionEnd.bind(this));
|
|
|
196
|
+ imgEl.setAttribute('style', '');
|
|
|
197
|
+ imgEl.offsetHeight;
|
|
|
198
|
+ }
|
|
|
199
|
+ this._preloadItem(index + 1);
|
|
|
200
|
+ this._preloadItem(index - 1);
|
|
|
201
|
+ };
|
|
|
202
|
+ proto._preloadItem = function(index) {
|
|
|
203
|
+ var itemEl = this.scroller.querySelector($.classSelector('.slider-item:nth-child(' + (index + 1) + ')'));
|
|
|
204
|
+ if (itemEl) {
|
|
|
205
|
+ var itemData = this.currentGroup[index];
|
|
|
206
|
+ if (!itemData.sWidth) {
|
|
|
207
|
+ var imgEl = itemEl.querySelector('img');
|
|
|
208
|
+ this._initImgData(itemData, imgEl);
|
|
|
209
|
+ }
|
|
|
210
|
+ }
|
|
|
211
|
+ };
|
|
|
212
|
+ proto._initZoom = function(zoomWrapperEl, zoomerWidth, zoomerHeight) {
|
|
|
213
|
+ if (!this.options.zoom) {
|
|
|
214
|
+ return;
|
|
|
215
|
+ }
|
|
|
216
|
+ if (zoomWrapperEl.getAttribute('data-zoomer')) {
|
|
|
217
|
+ return;
|
|
|
218
|
+ }
|
|
|
219
|
+ var zoomEl = zoomWrapperEl.querySelector($.classSelector('.zoom'));
|
|
|
220
|
+ if (zoomEl.tagName === 'IMG') {
|
|
|
221
|
+ var self = this;
|
|
|
222
|
+ var maxZoom = self._getScale({
|
|
|
223
|
+ width: zoomWrapperEl.offsetWidth,
|
|
|
224
|
+ height: zoomWrapperEl.offsetHeight
|
|
|
225
|
+ }, {
|
|
|
226
|
+ width: zoomerWidth,
|
|
|
227
|
+ height: zoomerHeight
|
|
|
228
|
+ });
|
|
|
229
|
+ $(zoomWrapperEl).zoom({
|
|
|
230
|
+ maxZoom: Math.max(maxZoom, 1)
|
|
|
231
|
+ });
|
|
|
232
|
+ } else {
|
|
|
233
|
+ $(zoomWrapperEl).zoom();
|
|
|
234
|
+ }
|
|
|
235
|
+ };
|
|
|
236
|
+ proto.loadImage = function(imgEl, callback) {
|
|
|
237
|
+ var onReady = function() {
|
|
|
238
|
+ callback && callback.call(this);
|
|
|
239
|
+ };
|
|
|
240
|
+ var img = new Image();
|
|
|
241
|
+ img.onload = onReady;
|
|
|
242
|
+ img.onerror = onReady;
|
|
|
243
|
+ img.src = imgEl.getAttribute('data-preview-lazyload');
|
|
|
244
|
+ };
|
|
|
245
|
+ proto.getRangeByIndex = function(index, length) {
|
|
|
246
|
+ return {
|
|
|
247
|
+ from: 0,
|
|
|
248
|
+ to: length - 1
|
|
|
249
|
+ };
|
|
|
250
|
+ // var from = Math.max(index - 1, 0);
|
|
|
251
|
+ // var to = Math.min(index + 1, length);
|
|
|
252
|
+ // if (index === length - 1) {
|
|
|
253
|
+ // from = Math.max(length - 3, 0);
|
|
|
254
|
+ // to = length - 1;
|
|
|
255
|
+ // }
|
|
|
256
|
+ // if (index === 0) {
|
|
|
257
|
+ // from = 0;
|
|
|
258
|
+ // to = Math.min(2, length - 1);
|
|
|
259
|
+ // }
|
|
|
260
|
+ // return {
|
|
|
261
|
+ // from: from,
|
|
|
262
|
+ // to: to
|
|
|
263
|
+ // };
|
|
|
264
|
+ };
|
|
|
265
|
+
|
|
|
266
|
+ proto._getPosition = function(itemData) {
|
|
|
267
|
+ var sLeft = itemData.sLeft - window.pageXOffset;
|
|
|
268
|
+ var sTop = itemData.sTop - window.pageYOffset;
|
|
|
269
|
+ var left = (window.innerWidth - itemData.sWidth) / 2;
|
|
|
270
|
+ var top = (window.innerHeight - itemData.sHeight) / 2;
|
|
|
271
|
+ return {
|
|
|
272
|
+ left: sLeft,
|
|
|
273
|
+ top: sTop,
|
|
|
274
|
+ x: sLeft - left,
|
|
|
275
|
+ y: sTop - top
|
|
|
276
|
+ };
|
|
|
277
|
+ };
|
|
|
278
|
+ proto.refresh = function(index, groupArray) {
|
|
|
279
|
+ this.currentGroup = groupArray;
|
|
|
280
|
+ //重新生成slider
|
|
|
281
|
+ var length = groupArray.length;
|
|
|
282
|
+ var itemHtml = [];
|
|
|
283
|
+ var currentRange = this.getRangeByIndex(index, length);
|
|
|
284
|
+ var from = currentRange.from;
|
|
|
285
|
+ var to = currentRange.to + 1;
|
|
|
286
|
+ var currentIndex = index;
|
|
|
287
|
+ var className = '';
|
|
|
288
|
+ var itemStr = '';
|
|
|
289
|
+ var wWidth = window.innerWidth;
|
|
|
290
|
+ var wHeight = window.innerHeight;
|
|
|
291
|
+ for (var i = 0; from < to; from++, i++) {
|
|
|
292
|
+ var itemData = groupArray[from];
|
|
|
293
|
+ var style = '';
|
|
|
294
|
+ if (itemData.sWidth) {
|
|
|
295
|
+ style = '-webkit-transform:translate3d(0,0,0) scale(' + itemData.sScale + ');transform:translate3d(0,0,0) scale(' + itemData.sScale + ')';
|
|
|
296
|
+ }
|
|
|
297
|
+ itemStr = itemTemplate.replace('{{src}}', itemData.src).replace('{{lazyload}}', itemData.lazyload).replace('{{style}}', style);
|
|
|
298
|
+ if (from === index) {
|
|
|
299
|
+ currentIndex = i;
|
|
|
300
|
+ className = $.className('active');
|
|
|
301
|
+ } else {
|
|
|
302
|
+ className = '';
|
|
|
303
|
+ }
|
|
|
304
|
+ itemHtml.push(itemStr.replace('{{className}}', className));
|
|
|
305
|
+ }
|
|
|
306
|
+ this.scroller.innerHTML = itemHtml.join('');
|
|
|
307
|
+ this.element.style.display = 'block';
|
|
|
308
|
+ this.element.classList.add($.className('preview-in'));
|
|
|
309
|
+ this.lastIndex = currentIndex;
|
|
|
310
|
+ this.element.offsetHeight;
|
|
|
311
|
+ $(this.element).slider().gotoItem(currentIndex, 0);
|
|
|
312
|
+ this.indicator && (this.indicator.innerText = (currentIndex + 1) + '/' + this.currentGroup.length);
|
|
|
313
|
+ this._loadItem(currentIndex, true);
|
|
|
314
|
+ };
|
|
|
315
|
+ proto.openByGroup = function(index, group) {
|
|
|
316
|
+ index = Math.min(Math.max(0, index), this.groups[group].length - 1);
|
|
|
317
|
+ this.refresh(index, this.groups[group]);
|
|
|
318
|
+ };
|
|
|
319
|
+ proto.open = function(index, group) {
|
|
|
320
|
+ if (this.isShown()) {
|
|
|
321
|
+ return;
|
|
|
322
|
+ }
|
|
|
323
|
+ if (typeof index === "number") {
|
|
|
324
|
+ group = group || defaultGroupName;
|
|
|
325
|
+ this.addImages(group, index); //刷新当前group
|
|
|
326
|
+ this.openByGroup(index, group);
|
|
|
327
|
+ } else {
|
|
|
328
|
+ group = index.getAttribute('data-preview-group');
|
|
|
329
|
+ group = group || defaultGroupName;
|
|
|
330
|
+ this.addImages(group, index); //刷新当前group
|
|
|
331
|
+ this.openByGroup(this.groups[group].indexOf(index.__mui_img_data), group);
|
|
|
332
|
+ }
|
|
|
333
|
+ };
|
|
|
334
|
+ proto.close = function(index, group) {
|
|
|
335
|
+ if (!this.isShown()) {
|
|
|
336
|
+ return;
|
|
|
337
|
+ }
|
|
|
338
|
+ this.element.classList.remove($.className('preview-in'));
|
|
|
339
|
+ this.element.classList.add($.className('preview-out'));
|
|
|
340
|
+ var itemEl = this.scroller.querySelector($.classSelector('.slider-item:nth-child(' + (this.lastIndex + 1) + ')'));
|
|
|
341
|
+ var imgEl = itemEl.querySelector('img');
|
|
|
342
|
+ if (imgEl) {
|
|
|
343
|
+ imgEl.classList.add($.className('transitioning'));
|
|
|
344
|
+ var itemData = this.currentGroup[this.lastIndex];
|
|
|
345
|
+ var posi = this._getPosition(itemData);
|
|
|
346
|
+ var sLeft = posi.left;
|
|
|
347
|
+ var sTop = posi.top;
|
|
|
348
|
+ if (sTop > window.innerHeight || sLeft > window.innerWidth || sTop < 0 || sLeft < 0) { //out viewport
|
|
|
349
|
+ imgEl.style.opacity = 0;
|
|
|
350
|
+ imgEl.style.webkitTransitionDuration = '0.5s';
|
|
|
351
|
+ imgEl.style.webkitTransform = 'scale(' + itemData.sScale + ')';
|
|
|
352
|
+ } else {
|
|
|
353
|
+ if (this.options.zoom) {
|
|
|
354
|
+ $(imgEl.parentNode.parentNode).zoom().toggleZoom(0);
|
|
|
355
|
+ }
|
|
|
356
|
+ imgEl.style.webkitTransitionDuration = '0.5s';
|
|
|
357
|
+ imgEl.style.webkitTransform = 'translate3d(' + posi.x + 'px,' + posi.y + 'px,0) scale(' + itemData.sScale + ')';
|
|
|
358
|
+ }
|
|
|
359
|
+ }
|
|
|
360
|
+ var zoomers = this.element.querySelectorAll($.classSelector('.zoom-wrapper'));
|
|
|
361
|
+ for (var i = 0, len = zoomers.length; i < len; i++) {
|
|
|
362
|
+ $(zoomers[i]).zoom().destroy();
|
|
|
363
|
+ }
|
|
|
364
|
+ $(this.element).slider().destroy();
|
|
|
365
|
+// this.empty();
|
|
|
366
|
+ };
|
|
|
367
|
+ proto.isShown = function() {
|
|
|
368
|
+ return this.element.classList.contains($.className('preview-in'));
|
|
|
369
|
+ };
|
|
|
370
|
+
|
|
|
371
|
+ var previewImageApi = null;
|
|
|
372
|
+ $.previewImage = function(options) {
|
|
|
373
|
+ if (!previewImageApi) {
|
|
|
374
|
+ previewImageApi = new PreviewImage(options);
|
|
|
375
|
+ }
|
|
|
376
|
+ return previewImageApi;
|
|
|
377
|
+ };
|
|
|
378
|
+ $.getPreviewImage = function() {
|
|
|
379
|
+ return previewImageApi;
|
|
|
380
|
+ }
|
|
|
381
|
+
|
|
|
382
|
+})(mui, window);
|
