forked from Srar/189CloudLinkTools
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlist.html
112 lines (104 loc) · 5.09 KB
/
list.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
<html>
<head>
<meta charset="utf-8">
<title>189天翼云 直连工具</title>
</head>
<body>
<div id="app"></div>
<script src="//cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script src="//cdn.bootcss.com/react/0.14.4/react.min.js"></script>
<script src="//cdn.bootcss.com/react/0.14.0-beta3/JSXTransformer.js"></script>
<script type="text/jsx">
var CloudLink = React.createClass({
getInitialState: function() {
return {
folderId: 0,
folderArray: [],
filesList : [],
isLoading : false
};
},
componentWillMount: function() {
this.load();
},
load: function() {
var temp = [];
this.setState({isLoading: true});
$.getJSON(this.state.folderId == 0 ? '/folder' : '/folder/' + this.state.folderId, function(data){
this.setState({isLoading: false});
if(this.state.folderId != 0){
temp.push({
name: '..',
id : this.state.lastFolder,
folder: true,
});
}
if(data.fileList.folder != undefined)
data.fileList.folder.map(function(foldersItem){
foldersItem.folder = true;
temp.push(foldersItem);
});
if(data.fileList.file != undefined)
data.fileList.file.map(function(filesItem){
filesItem.folder = false;
temp.push(filesItem);
});
this.setState({ filesList: temp });
}.bind(this));
},
toFolder: function(folderId, folderName){
if(folderName == '..'){
var top = this.state.folderArray.pop();
this.state.folderId = this.state.folderArray.length + 1 == 1 ? 0 : top;
console.log(this.state.folderArray.length + 1 == 1 ? 0 : top);
}else{
this.state.folderArray.push(this.state.folderId);
this.state.folderId = folderId;
}
this.setState({filesList: []});
this.load();
},
render: function() {
return (
<div>
<h2 style={this.state.isLoading ? {display: 'block'} : {display: 'none'} }> 正在加载 </h2>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="20%"><span style={{float:'left'}}>文件名称</span></th>
<th width="20%"><span style={{float:'left'}}>文件MD5</span></th>
<th width="20%"><span style={{float:'left'}}>地址 / 文件夹</span></th>
</tr>
</thead>
<tbody>
{this.state.filesList.map(function(item){
return <TableItem toFolder={this.toFolder} item={item} />
}.bind(this))}
</tbody>
</table>
</div>
);
}
});
var TableItem = React.createClass({
render: function() {
return (
<tr>
{
this.props.item.folder ?
<td><a href="javascript:void(0);" onClick={this.props.toFolder.bind(this, this.props.item.id, this.props.item.name)}>{this.props.item.name + '/'}</a></td>
:
<td>{this.props.item.name}</td>
}
<td>{this.props.item.md5}</td>
<td>
{this.props.item.folder ? this.props.item.id : window.location.protocol + '//' + document.domain + (location.port ? ':' + location.port : '') + '/link/' + this.props.item.id}
</td>
</tr>
)
}
});
React.render(<CloudLink />, document.getElementById('app'));
</script>
</body>
</html>