-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (121 loc) · 4.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Paddy的代码片段</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
</head>
<!-- <base target="_blank"> -->
<body>
<header>
<a class="logo" href="/demo">Paddy的代码片段</a>
<div class="search">
<input type="text" placeholder="搜一搜">
</div>
<ul class="search-tags"></ul>
</header>
<section class="box">
<nav>
<a class="photo" href="https://github.com/PaddyWang">
<img src="https://avatars0.githubusercontent.com/u/17067189?v=3&s=460">
</a>
<!-- <a href="http://paddywang.github.io/about/">Readme</a> -->
<a href="https://paddywang.github.io/">前端随笔</a>
</nav>
<section class="content"></section>
</section>
<script src="./js/canvas-background.js"></script>
<script src="./js/init-canvas-background.js"></script>
<script src="./js/ajax.js"></script>
<script src="./js/paddy-03.js"></script>
<script>
;(function(){
var data = {
originData: undefined,
tag: {
'js': [],
'css': [],
'html': []
},
search: undefined
};
var $searchTagsNode = P('.search-tags');
var $contentNode = P('.content');
var timer = null;
ajax({
type: 'get',
url: './data.json',
callback: function(rData){
data.originData = rData;
renderNode();
Object.keys(data.tag).forEach(function(key){
var liNode = document.createElement('li');
liNode.setAttribute('type', key);
liNode.innerHTML = key + ' (' + data.tag[key].length + ')';
$searchTagsNode.append(liNode);
});
}
});
$searchTagsNode.on('click', function(event){
var target = event.e.target;
var type = target.getAttribute('type');
var $target;
if(type){
$target = P(target);
$target.toggleClass('active');
if($target.hasClass('active')){
$contentNode.addClass('tag-search-' + type);
}else {
$contentNode.removeClass('tag-search-' + type);
}
}
});
P('.search input').on('input', function(event){
var value = event.e.target.value.trim();
var search = data.search = [];
if(value){
value = value.toLowerCase();
data.originData.articles.forEach(function(item, index){
if(item.key.indexOf(value) >= 0 || item.type.indexOf(value) >= 0){
search.push(item);
}
});
}else {
data.search = undefined;
}
handleSearch();
});
function handleSearch(){
clearTimeout(timer);
timer = setTimeout(function(){
renderNode();
}, 300);
}
function renderNode(){
var listNode = data.search || data.originData.articles;
var fragment = document.createDocumentFragment();
console.log(listNode);
listNode.forEach(function(itemNode, index){
var aNode = document.createElement('a');
aNode.setAttribute('href', itemNode.url);
aNode.setAttribute('target', '_blank');
aNode.innerHTML = itemNode.title;
fragment.appendChild(aNode);
itemNode.type && itemNode.type.forEach(function(type){
aNode.setAttribute(type, '');
var typeArr = data.tag[type];
typeArr && typeArr.push(index);
});
});
if(listNode.length){
$contentNode[0].innerHTML = '';
$contentNode.append(fragment);
}else {
$contentNode.html('<p style="font-size: 24px; color: #999;">暂无搜索结果</p>');
}
}
}());
</script>
</body>
</html>