Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Miykael_xxm
amazeui
提交
af637616
A
amazeui
项目概览
Miykael_xxm
/
amazeui
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
amazeui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
af637616
编写于
12月 24, 2014
作者:
M
Minwe
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
optimize Pureview plugin, resolved #294 in v1.x
上级
e6d42481
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
149 addition
and
87 deletion
+149
-87
CHANGELOG.md
CHANGELOG.md
+4
-0
docs/javascript/pureview.md
docs/javascript/pureview.md
+22
-2
js/ui.pureview.js
js/ui.pureview.js
+120
-82
less/ui.pureview.less
less/ui.pureview.less
+3
-3
未找到文件。
CHANGELOG.md
浏览文件 @
af637616
# Amaze UI 1.x Change Log
---
### 2014.12 W4
-
`IMPROVED`
#294 Pureview 插件优化。
### 2014.12 W3
**JS:**
...
...
docs/javascript/pureview.md
浏览文件 @
af637616
...
...
@@ -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 的图片
...
...
js/ui.pureview.js
浏览文件 @
af637616
...
...
@@ -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
);
}
...
...
less/ui.pureview.less
浏览文件 @
af637616
...
...
@@ -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.4
s);
.transition-duration(
.3
s);
&.am-active {
.translate3d(0, 0, 0);
...
...
@@ -133,7 +133,7 @@
z-index: 200;
-webkit-user-drag: none;
user-drag: none;
.transition(opacity .
15
s linear);
.transition(opacity .
2
s linear);
&.am-img-loaded {
opacity: 1;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录