Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
b237645b
T
three.js
项目概览
车家大少爷
/
three.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
three.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
b237645b
编写于
2月 10, 2016
作者:
M
Mugen87
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
added filter option to example viewer
上级
61c9727a
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
201 addition
and
40 deletion
+201
-40
examples/index.html
examples/index.html
+201
-40
未找到文件。
examples/index.html
浏览文件 @
b237645b
...
...
@@ -102,6 +102,55 @@
opacity
:
1
;
}
.filterBlock
{
margin
:
20px
;
position
:
relative
;
}
.filterBlock
p
{
margin
:
0
;
}
#filterInput
{
width
:
100%
;
padding
:
5px
;
font-family
:
inherit
;
font-size
:
15px
;
outline
:
none
;
border
:
1px
solid
#dedede
;
}
#filterInput
:focus
{
border
:
1px
solid
#2194CE
;
}
#clearFilterButton
{
position
:
absolute
;
right
:
6px
;
top
:
50%
;
margin-top
:
-8px
;
width
:
16px
;
height
:
16px
;
font-size
:
14px
;
color
:
grey
;
text-align
:
center
;
line-height
:
0
;
padding-top
:
7px
;
opacity
:
.5
;
}
#clearFilterButton
:hover
{
opacity
:
1
;
}
.filtered
{
display
:
none
!important
;
}
#panel
li
b
{
font-weight
:
bold
;
}
/* mobile */
#expandButton
{
...
...
@@ -149,7 +198,7 @@
#content
{
position
:
absolute
;
left
:
0
;
top
:
6
0px
;
top
:
9
0px
;
right
:
0
;
bottom
:
0
;
font-size
:
17px
;
...
...
@@ -182,6 +231,10 @@
<span></span>
<span></span>
</a>
<div
class=
"filterBlock"
>
<input
type=
"text"
id=
"filterInput"
placeholder=
"Type to filter"
/>
<a
href=
"#"
id=
"clearFilterButton"
>
x
</a>
</div>
<div
id=
"content"
></div>
</div>
<iframe
id=
"viewer"
allowfullscreen
onmousewheel=
""
></iframe>
...
...
@@ -193,6 +246,9 @@
var
content
=
document
.
getElementById
(
'
content
'
);
var
viewer
=
document
.
getElementById
(
'
viewer
'
);
var
filterInput
=
document
.
getElementById
(
'
filterInput
'
);
var
clearFilterButton
=
document
.
getElementById
(
'
clearFilterButton
'
);
var
expandButton
=
document
.
getElementById
(
'
expandButton
'
);
expandButton
.
addEventListener
(
'
click
'
,
function
(
event
)
{
panel
.
classList
.
toggle
(
'
collapsed
'
);
...
...
@@ -236,17 +292,16 @@
var
section
=
files
[
key
];
var
div
=
document
.
createElement
(
'
h2
'
);
div
.
textContent
=
key
;
container
.
appendChild
(
div
);
var
header
=
document
.
createElement
(
'
h2
'
);
header
.
textContent
=
key
;
header
.
setAttribute
(
'
data-category
'
,
key
);
container
.
appendChild
(
header
);
for
(
var
i
=
0
;
i
<
section
.
length
;
i
++
)
{
(
function
(
file
)
{
var
name
=
file
.
split
(
'
_
'
);
name
.
shift
();
name
=
name
.
join
(
'
/
'
);
var
name
=
getName
(
file
);
var
link
=
document
.
createElement
(
'
a
'
);
link
.
className
=
'
link
'
;
...
...
@@ -296,6 +351,112 @@
}
// filter
filterInput
.
addEventListener
(
'
input
'
,
function
(
e
)
{
updateFilter
();
}
);
clearFilterButton
.
addEventListener
(
'
click
'
,
function
(
e
)
{
filterInput
.
value
=
''
;
updateFilter
();
e
.
preventDefault
();
}
);
function
updateFilter
()
{
var
exp
=
new
RegExp
(
filterInput
.
value
,
'
gi
'
);
for
(
var
key
in
files
)
{
var
section
=
files
[
key
];
for
(
var
i
=
0
;
i
<
section
.
length
;
i
++
)
{
filterExample
(
section
[
i
],
exp
);
}
}
layoutList
();
}
function
filterExample
(
file
,
exp
){
var
link
=
links
[
file
];
var
name
=
getName
(
file
);
var
res
=
file
.
match
(
exp
);
var
text
;
if
(
res
&&
res
.
length
>
0
)
{
link
.
classList
.
remove
(
'
filtered
'
);
for
(
var
i
=
0
;
i
<
res
.
length
;
i
++
)
{
text
=
name
.
replace
(
res
[
i
],
'
<b>
'
+
res
[
i
]
+
'
</b>
'
);
}
link
.
innerHTML
=
text
;
}
else
{
link
.
classList
.
add
(
'
filtered
'
);
link
.
innerHTML
=
name
;
}
}
function
getName
(
file
)
{
var
name
=
file
.
split
(
'
_
'
);
name
.
shift
();
return
name
.
join
(
'
/
'
);
}
function
layoutList
()
{
for
(
var
key
in
files
)
{
var
collapsed
=
true
;
var
section
=
files
[
key
];
for
(
var
i
=
0
;
i
<
section
.
length
;
i
++
)
{
var
file
=
section
[
i
];
if
(
!
links
[
file
].
classList
.
contains
(
'
filtered
'
)
){
collapsed
=
false
;
break
;
}
}
var
element
=
document
.
querySelector
(
'
h2[data-category="
'
+
key
+
'
"]
'
);
if
(
collapsed
){
element
.
classList
.
add
(
'
filtered
'
);
}
else
{
element
.
classList
.
remove
(
'
filtered
'
);
}
}
}
</script>
</body>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录