提交 af637616 编写于 作者: M Minwe

optimize Pureview plugin, resolved #294 in v1.x

上级 e6d42481
# Amaze UI 1.x Change Log
---
### 2014.12 W4
- `IMPROVED` #294 Pureview 插件优化。
### 2014.12 W3
**JS:**
......
......@@ -7,10 +7,10 @@
## 使用演示
### 从链接中获取图片
`````html
<ul data-am-widget="gallery" class="am-gallery sm-block-grid-2
md-block-grid-3 lg-block-grid-4 am-gallery-default" data-am-pureview="{target: 'a'}">
md-block-grid-3 lg-block-grid-4 am-gallery-default" data-am-pureview="{target: 'a'}" id="doc-pv-gallery">
<li>
<div class="am-gallery-item">
<a href="http://amui.qiniudn.com/pure-1.jpg" title="远方 有一个地方 那里种有我们的梦想">
......@@ -54,6 +54,26 @@
</ul>
`````
`````html
<button class="am-btn am-btn-primary" id="doc-pv-append">随机插入一个图片</button>
`````
<script>
$(function() {
var $gallery = $('#doc-pv-gallery');
var $items = $gallery.find('li');
$('#doc-pv-append').on('click', function() {
var random = Math.round(Math.random() * 3);
var $clone = $items.eq(random).clone();
$clone.find('a').removeAttr('data-am-pureviewed');
$clone.appendTo($gallery);
$gallery.trigger('changed:dom:amui');
});
});
</script>
### 从 `data-rel` 中获取图片
#### BT 的图片
......
......@@ -42,8 +42,9 @@ define(function(require, exports, module) {
'<ol class="am-pureview-nav"></ol>' +
'<div class="am-pureview-bar am-active">' +
'<span class="am-pureview-title"></span>' +
'<span class="am-pureview-current"></span> / ' +
'<span class="am-pureview-total"></span></div>' +
'<div class="am-pureview-counter">' +
' <span class="am-pureview-current"></span> / ' +
' <span class="am-pureview-total"></span></div></div>' +
'<div class="am-pureview-actions am-active">' +
'<a href="javascript: void(0)" class="am-icon-chevron-left" ' +
'data-am-close="pureview"></a></div>' +
......@@ -81,130 +82,87 @@ define(function(require, exports, module) {
};
PureView.prototype.init = function() {
var me = this;
var _this = this;
var options = this.options;
var $element = this.$element;
var $pureview = this.$pureview;
var $slider = $pureview.find(options.selector.slider);
var $nav = $pureview.find(options.selector.nav);
var $slides = $([]);
var $navItems = $([]);
var $images = $element.find(options.target);
var total = $images.length;
var imgUrls = [];
if (!total) {
return;
}
if (total === 1) {
$pureview.addClass(options.className.onlyOne);
}
$images.each(function(i, item) {
var src;
var title;
if (options.target == 'a') {
src = item.href; // to absolute path
title = item.title || '';
} else {
src = $(item).data('rel') || item.src; // <img src='' data-rel='' />
title = $(item).attr('alt') || '';
}
// hide bar: wechat_webview_type=1
// http://tmt.io/wechat/ not working?
imgUrls.push(src);
$slides = $slides.add($('<li><div class="am-pinch-zoom">' +
'<img src="' + src + '" alt="' + title + '"/></div></li>'));
$navItems = $navItems.add($('<li>' + (i + 1) + '</li>'));
});
$slider.append($slides);
$nav.append($navItems);
this.refreshSlides();
$('body').append($pureview);
$pureview.find(options.selector.total).text(total);
this.$title = $pureview.find(options.selector.title);
this.$current = $pureview.find(options.selector.current);
this.$bar = $pureview.find(options.selector.bar);
this.$actions = $pureview.find(options.selector.actions);
this.$navItems = $nav.find('li');
this.$slides = $slider.find('li');
if (options.shareBtn) {
this.$actions.append('<a href="javascript: void(0)" ' +
'class="am-icon-share-square-o" data-am-toggle="share"></a>');
}
$slider.find(options.selector.pinchZoom).each(function() {
$(this).data('amui.pinchzoom', new PinchZoom($(this), {}));
$(this).on('pz_doubletap', function(e) {
//
});
});
$images.on('click.pureview.amui', function(e) {
this.$element.on('click.pureview.amui', options.target, function(e) {
e.preventDefault();
var clicked = $images.index(this);
var clicked = _this.$images.index(this);
// Invoke WeChat ImagePreview in WeChat
// TODO: detect WeChat before init
if (options.weChatImagePreview && window.WeixinJSBridge) {
window.WeixinJSBridge.invoke('imagePreview', {
current: imgUrls[clicked],
urls: imgUrls
current: _this.imgUrls[clicked],
urls: _this.imgUrls
});
} else {
me.open(clicked);
_this.open(clicked);
}
});
$pureview.find('.am-pureview-direction a').
on('click.direction.pureview.amui', function(e) {
e.preventDefault();
var $clicked = $(e.target).parent('li');
$pureview.find('.am-pureview-direction').
on('click.direction.pureview.amui', 'li', function(e) {
e.preventDefault();
if ($clicked.is('.am-pureview-prev')) {
me.prevSlide();
} else {
me.nextSlide();
}
});
if ($(this).is('.am-pureview-prev')) {
_this.prevSlide();
} else {
_this.nextSlide();
}
});
// Nav Contorl
this.$navItems.on('click.nav.pureview.amui', function() {
var index = me.$navItems.index($(this));
me.activate(me.$slides.eq(index));
});
$pureview.find(options.selector.nav).on('click.nav.pureview.amui', 'li',
function() {
var index = _this.$navItems.index($(this));
_this.activate(_this.$slides.eq(index));
});
// Close Icon
$pureview.find(options.selector.close).
on('click.close.pureview.amui', function(e) {
e.preventDefault();
me.close();
_this.close();
});
$slider.hammer().on('press.pureview.amui', function(e) {
this.$slider.hammer().on('press.pureview.amui', function(e) {
e.preventDefault();
me.toggleToolBar();
_this.toggleToolBar();
}).on('swipeleft.pureview.amui', function(e) {
e.preventDefault();
me.nextSlide();
_this.nextSlide();
}).on('swiperight.pureview.amui', function(e) {
e.preventDefault();
me.prevSlide();
_this.prevSlide();
});
$slider.data('hammer').get('swipe').set({
this.$slider.data('hammer').get('swipe').set({
direction: Hammer.DIRECTION_HORIZONTAL,
velocity: 0.35
});
// NOTE:
// trigger `changed.dom.amui` manually
// when new images appended, or call refreshSlides()
$element.on('changed:dom:amui', $.proxy(this.refreshSlides, _this));
$(document).on('keydown.pureview.amui', $.proxy(function(e) {
var keyCode = e.keyCode;
if (keyCode == 37) {
......@@ -217,6 +175,81 @@ define(function(require, exports, module) {
}, this));
};
PureView.prototype.refreshSlides = function() {
// update images collections
this.$images = this.$element.find(this.options.target);
var _this = this;
var options = this.options;
var $pureview = this.$pureview;
var $slides = $([]);
var $navItems = $([]);
var $images = this.$images;
var total = $images.length;
this.$slider = $pureview.find(options.selector.slider);
this.$nav = $pureview.find(options.selector.nav);
this.imgUrls = []; // for WeChat Image Preview
var viewedFlag = 'data-am-pureviewed';
if (!total) {
return;
}
if (total === 1) {
$pureview.addClass(options.className.onlyOne);
}
$images.not('[' + viewedFlag + ']').each(function(i, item) {
var src;
var title;
// get image URI from link's href attribute
if (item.nodeName === 'A') {
src = item.href; // to absolute path
title = item.title || '';
} else {
src = $(item).data('rel') || item.src; // <img src='' data-rel='' />
title = $(item).attr('alt') || '';
}
// add pureviewed flag
item.setAttribute(viewedFlag, '1');
// hide bar: wechat_webview_type=1
// http://tmt.io/wechat/ not working?
_this.imgUrls.push(src);
$slides = $slides.add($('<li data-src="' + src + '" data-title="' + title +
'"></li>'));
$navItems = $navItems.add($('<li>' + (i + 1) + '</li>'));
});
$pureview.find(options.selector.total).text(total);
this.$slider.append($slides);
this.$nav.append($navItems);
this.$navItems = this.$nav.find('li');
this.$slides = this.$slider.find('li');
};
PureView.prototype.loadImage = function($slide, callback) {
var appendedFlag = 'image-appended';
if (!$slide.data(appendedFlag)) {
var $img = $('<img>', {
src: $slide.data('src'),
alt: $slide.data('title')
});
$slide.html($img).wrapInner('<div class="am-pinch-zoom"></div>').redraw();
var $pinchWrapper = $slide.find(this.options.selector.pinchZoom);
$pinchWrapper.data('amui.pinchzoom', new PinchZoom($pinchWrapper[0], {}));
$slide.data('image-appended', true);
}
callback && callback.call(this);
};
PureView.prototype.activate = function($slide) {
var options = this.options;
var $slides = this.$slides;
......@@ -224,10 +257,6 @@ define(function(require, exports, module) {
var alt = $slide.find('img').attr('alt') || '';
var active = options.className.active;
UI.utils.imageLoader($slide.find('img'), function(image) {
$(image).addClass('am-img-loaded');
});
if ($slides.find('.' + active).is($slide)) {
return;
}
......@@ -236,6 +265,12 @@ define(function(require, exports, module) {
return;
}
this.loadImage($slide, function() {
UI.utils.imageLoader($slide.find('img'), function(image) {
$(image).addClass('am-img-loaded');
});
});
this.transitioning = 1;
this.$title.text(alt);
......@@ -301,6 +336,7 @@ define(function(require, exports, module) {
PureView.prototype.open = function(index) {
var active = index || 0;
this.$pureview.show().redraw();
this.checkScrollbar();
this.setScrollbar();
this.activate(this.$slides.eq(active));
......@@ -315,12 +351,14 @@ define(function(require, exports, module) {
this.$slides.removeClass();
function resetBody() {
this.$pureview.hide();
this.$body.removeClass(options.className.activeBody);
this.resetScrollbar();
}
if (transition) {
this.$pureview.one(transition.end, $.proxy(resetBody, this));
this.$pureview.one(transition.end, $.proxy(resetBody, this)).
emulateTransitionEnd(300);
} else {
resetBody.call(this);
}
......
......@@ -21,14 +21,14 @@
height: 100%;
z-index: @z-index-pureview;
background: rgba(0, 0, 0, 0.95);
//display: none;
display: none;
overflow: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
.translate3d(0, 100%, 0);
.transition-duration(0.4s);
.transition-duration(.3s);
&.am-active {
.translate3d(0, 0, 0);
......@@ -133,7 +133,7 @@
z-index: 200;
-webkit-user-drag: none;
user-drag: none;
.transition(opacity .15s linear);
.transition(opacity .2s linear);
&.am-img-loaded {
opacity: 1;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册