Skip to content

Commit 34848ea

Browse files
YXuuanYXuuan
committed
+1修复，+1优化，弃用直接拼合方式生成文件下载URL
version 2.0.4 2018-04-20 [修复] 懒惰导致的列表中与路径同名的名称无法被正常裁剪 [优化] 前端部分显示细节 [项目] 弃用直接拼合方式生成文件下载URL
1 parent a84b740 commit 34848ea

File tree

5 files changed

+75
-74
lines changed

5 files changed

+75
-74
lines changed

‎README.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ Releases：[https://github.com/YXuuan/hfs4OSS/releases/](https://github.com/YXuu
4040
4141
4242
/config/static.config.json： --前端配置文件
43-
DIRECTLY_GET_OBJECT ：(true/false)下载文件时直接通过拼接方式生成URL而不向后端请求SignedURL，Bucket ACL为公共读及以上时才可为true。缺省值为false
4443
SITE_NAME ：站点名称，请遵从json语法规范
4544
SHOW_STATS ：(true/false)底部是否显示状态信息，缺省值为true
4645
FOOTER ：底部Footer的HTML代码，请遵从json语法规范。缺省值为空
@@ -64,6 +63,10 @@ Releases：[https://github.com/YXuuan/hfs4OSS/releases/](https://github.com/YXuu
6463

6564
## 更新日志/ChangeLog
6665
```
66+
version 2.0.4 2018-04-20
67+
[修复] 懒惰导致的列表中与路径同名的项目名字无法被正常裁剪
68+
[优化] 前端部分显示细节
69+
[项目] 弃用直接拼合方式生成文件下载URL
6770
version 2.0.3 2018-04-17
6871
[增加] 文件最后修改时间显示
6972
[优化] 前端部分显示细节
@@ -95,14 +98,18 @@ version 1.0.1 2017-06-17
9598
version 1.0.0 2017-06-17
9699
[项目] 破壳。
97100
```
101+
## 已知的问题/Problems
102+
```
103+
顶部crumbbar过长时无法展示也无法收缩
104+
```
98105

99106
## 后续可能的改动/Preview
100107
```
101108
给不同类型的文件不一样的图标
102109
(划掉)输出item的大小
103110
批量下载（非压缩闭包）
104111
简单的object管理功能（上传，重命名等）
105-
文件列表排序
112+
列表排序
106113
```
107114

108115
## 开源协议/License

‎app/action/listObjects.action.php‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,22 @@
2727
$prefixList = $listObjectInfo->getPrefixList();
2828
if (!empty($objectList)) {
2929
foreach ($objectList as $objectInfo) {
30-
$listObjectsResults["fileList"][] = array( //存放文件列表
31-
str_replace($listObjectsOptions["prefix"], "", $objectInfo->getKey()),
30+
$listObjectsResults["fileList"][] = array( //取出每一个
31+
substr($objectInfo->getKey(), strlen($listObjectsOptions['prefix'])), //并去掉父级路径
3232
date("Y-m-d H:i", strtotime($objectInfo->getLastModified())),
3333
format_bytes($objectInfo->getSize()),
3434
);
3535
}
3636
}
3737
if (!empty($prefixList)) {
3838
foreach ($prefixList as $prefixInfo) {
39-
$listObjectsResults["folderList"][] = str_replace($listObjectsOptions['prefix'], "", $prefixInfo->getPrefix()); //存放目录列表
39+
$listObjectsResults["folderList"][] = substr($prefixInfo->getPrefix(), strlen($listObjectsOptions['prefix'])); //取出每一个并去掉父级路径放入数组
4040
}
4141
}
4242

43-
@array_shift($listObjectsResults['fileList']); //$fileList第一个object为当前目录，忽略
43+
if($listObjectsOptions['prefix'] !== ''){
44+
@array_shift($listObjectsResults['fileList']); //$fileList第一个object为当前目录，忽略
45+
}
4446
@$listObjectsResults['fileCount'] = count($listObjectsResults["fileList"]);
4547
@$listObjectsResults['folderCount'] = count($listObjectsResults["folderList"]);
4648
$listObjectsResults['takes'] = floor(($t2-$t1)*1000) . 'ms';

‎config/static.config_example.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
{
2-
"DIRECTLY_GET_OBJECT": false,
32
"SITE_NAME": "",
43
"SHOW_STATS": true,
54
"FOOTER": ""

‎static/_h5ai/public/css/styles.css‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1668,7 +1668,7 @@ html.no-browser .noBrowserMsg {
16681668
}
16691669

16701670
#view.view-details .label {
1671-
margin: 0 50px 0 48px /*Changed*/
1671+
margin: 0 246px 0 48px /*Changed*/
16721672
}
16731673

16741674
#view.view-details.width-0 .label {
@@ -1857,11 +1857,13 @@ html.no-browser .noBrowserMsg {
18571857
font-size: 5em;
18581858
/*font-weight: bold*/ /*Changed*/
18591859
}
1860-
18611860
@media only screen and (max-width:785px) { /*Changed*/
1862-
.size, .l10n-size{ /*Changed*/
1861+
.date, .l10n-lastModified{ /*Changed*/
18631862
display: none
18641863
}
1864+
#view.view-details .label{
1865+
margin-right: 80px;
1866+
}
18651867
#crumbbar .crumb:not(.active) {
18661868
display: none
18671869
}
@@ -1874,7 +1876,14 @@ html.no-browser .noBrowserMsg {
18741876
display: none!important
18751877
}
18761878
}
1877-
1879+
@media only screen and (max-width:500px) {
1880+
.size, .l10n-size{ /*Changed*/
1881+
display: none
1882+
}
1883+
#view.view-details .label{
1884+
margin-right: 4px;
1885+
}
1886+
}
18781887
@media print {
18791888
*,*:before,*:after,*:first-letter ,*:first-line {
18801889
background: transparent!important;

‎static/script/main.js‎

Lines changed: 47 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,7 @@ $(document).ready(function(){
7474
});
7575
function listObjects(path = ''){
7676
$("#items").attr("style", "opacity: 0.5;-moz-opacit: 0.5;");
77-
//////////
78-
console.log('-----listObjects("' + path + '")-----');
77+
console.log('-----listObjects("' + decodeURI(path) + path + ' = ' + '")-----');
7978
$.ajax({
8079
type: 'POST',
8180
//async: false,
@@ -85,7 +84,7 @@ function listObjects(path = ''){
8584
},
8685
dataType: 'text',
8786
success: function(data){
88-
console.log('ajaxpost listObjects() succeed:' + data);
87+
console.log('ajaxpost listObjects() succeed:' + decodeURI(data));
8988
try{
9089
result_listObjects = JSON.parse(data);
9190
}catch(e){ //异常捕获： 捕获请求成功但无法解析JSON的异常，多为listObjects.action抛出的异常
@@ -96,27 +95,28 @@ function listObjects(path = ''){
9695
return;
9796
}
9897
console.log('JSON.parse() succeed');
99-
//我跟你说这里开始才是列表动作
98+
//列表动作
10099
$("#list").html(''); //清空原有内容
101100
$.each(result_listObjects.folderList, function(i, folderInfo){
102101
$("#list").append(
103-
'<li class="item folder" data="' + encodeURI(path + folderInfo) + '">' +
104-
'<a href="#' + encodeURI(path + folderInfo) + '">' +
102+
'<li class="item folder" data="' + path + encodeURI(folderInfo) + '">' +
103+
'<a href="#' + path + encodeURI(folderInfo) + '">' +
105104
'<span class="icon square">' +
106105
'<img src="static/_h5ai/public/images/themes/default/folder.svg" alt="folder" />' +
107106
'</span>' +
108107
'<span class="icon landscape">' +
109108
'<img src="static/_h5ai/public/images/themes/default/folder.svg" alt="folder" />' +
110109
'</span>' +
111110
'<span class="label">' + folderInfo.replace("/", "") + '</span>' +
111+
'<span class="date">-</span>' +
112112
'<span class="size">-</span>' +
113113
'</a>' +
114114
'</li>'
115115
);
116116
});
117117
$.each(result_listObjects.fileList, function(i, fileInfo){
118118
$("#list").append(
119-
'<li class="item file" data="' + encodeURI(path + fileInfo[0]) + '">' +
119+
'<li class="item file" data="' + path + encodeURI(fileInfo[0]) + '">' +
120120
'<a>' +
121121
'<span class="icon square">' +
122122
'<img src="static/_h5ai/public/images/themes/default/file.svg" alt="file" />' +
@@ -125,7 +125,7 @@ function listObjects(path = ''){
125125
'<img src="static/_h5ai/public/images/themes/default/file.svg" alt="file">' +
126126
'</span>' +
127127
'<span class="label">' + fileInfo[0] + '</span>' +
128-
'<span class="date">' +fileInfo[1] + '</span>' +
128+
'<span class="date">' + fileInfo[1] + '</span>' +
129129
'<span class="size">' + fileInfo[2] + '</span>' +
130130
'</a>' +
131131
'</li>'
@@ -148,21 +148,23 @@ function listObjects(path = ''){
148148
console.log(textStatus);
149149
},
150150
complete: function(){
151+
//渲染顶部crumbbar和back按钮
151152
if(path !== ''){ //通过有path参数传入判断当前不为根文件夹
152-
var pathSplited = path.split("/"); //分割文件夹路径字符串为数组
153+
var pathSplited = decodeURI(path).split("/"); //分割文件夹路径字符串为数组，此处解码是为了防止由于js标准不同导致的对"/"的处理标准不同
153154
var nowFolderName = pathSplited[pathSplited.length - 2];
154155
var parentFolderName = pathSplited[pathSplited.length - 3] ? pathSplited[pathSplited.length - 3] : '/'; //上一层文件夹的名字，其中一个-1是数组下标，另一个是由于split(path)的结果最后一个元素总为空，再一个是当前文件夹名
155156
var parentFolder;
156-
157-
console.log('path.split() succeed:\n' + print_arr(pathSplited));
157+
$.each(pathSplited, function(i){ //重新编码
158+
pathSplited[i] = encodeURI(pathSplited[i]);
159+
});
158160
$("#crumbbar").html(
159161
'<a href="#" class="crumb">' +
160162
'<span class="label">' + appConfig.SITE_NAME + '</span>' +
161163
'<img class="hint" src="static/_h5ai/public/images/themes/default/folder-page.svg" alt="#">' +
162164
'</a>' +
163-
'<a href="#' + encodeURI(path) + '" class="crumb" data="' + encodeURI(pathSplited[0]) + '/">' + //手动定义crumbbar的第一层data
165+
'<a href="#' + path + '" class="crumb" data="' + pathSplited[0] + '/">' + //手动定义crumbbar的第一层data
164166
//'<img class="sep" src="static/_h5ai/public/images/ui/crumb.svg" alt=">">' +
165-
'<span class="label">' + pathSplited[0] + '</span>' +
167+
'<span class="label">' + decodeURI(pathSplited[0]) + '</span>' +
166168
'</a>'
167169
);
168170
//合成上一层文件夹路径用作“返回上一层”按钮使用，我他妈就是不写函数
@@ -171,47 +173,47 @@ function listObjects(path = ''){
171173
}else if(pathSplited[0] !== ''){ //存在多级子目录，别问我我也不知道怎么来的
172174
parentFolder = pathSplited[0];
173175
$("#crumbbar").append(
174-
'<a href="#' + encodeURI(path) + '" class="crumb" data="' + encodeURI(parentFolder + '/' + pathSplited[1]) + '/">' + //手动定义crumbbar的第一层data后添加每层数据，+1是因为要取得比父级目录多一层，并在结尾添加“/”
176+
'<a href="#' + path + '" class="crumb" data="' + parentFolder + '/' + pathSplited[1] + '/">' + //手动定义crumbbar的第一层data后添加每层数据，+1是因为要取得比父级目录多一层，并在结尾添加“/”
175177
'<img class="sep" src="static/_h5ai/public/images/ui/crumb.svg" alt=">">' +
176-
'<span class="label">' + pathSplited[1] + '</span>' +
178+
'<span class="label">' + decodeURI(pathSplited[1]) + '</span>' +
177179
'</a>'
178180
);
179181
for(i = 1; i < pathSplited.length - 2; i++){ //-2是因为只要取到父级目录即可
180182
if(pathSplited[i] !== ''){
181183
parentFolder = parentFolder + '/' + pathSplited[i];
182184
$("#crumbbar").append(
183-
'<a href="#' + encodeURI(path) + '" class="crumb" data="' + encodeURI(parentFolder + '/' + pathSplited[i+1]) + '/">' + //手动定义crumbbar的第一层data后添加每层数据，+1是因为要取得比父级目录多一层，并在结尾添加“/”
185+
'<a href="#' + path + '" class="crumb" data="' + parentFolder + '/' + pathSplited[i+1] + '/">' + //手动定义crumbbar的第一层data后添加每层数据，+1是因为要取得比父级目录多一层，并在结尾添加“/”
184186
'<img class="sep" src="static/_h5ai/public/images/ui/crumb.svg" alt=">">' +
185-
'<span class="label">' + pathSplited[i+1] + '</span>' +
187+
'<span class="label">' + decodeURI(pathSplited[i+1]) + '</span>' +
186188
'</a>'
187189
);
188190
}
189191
}
190192
parentFolder = parentFolder + '/'; //在路径结尾添加“/”才能正确请求
191193
}
192-
console.log('parentFolder: ' + parentFolder);
194+
console.log('parentFolder: ' + decodeURI(parentFolder));
193195
$("#crumbbar a.crumb:last").attr("class", "crumb active"); //设置crumbbar的最后一层
194-
$(document).attr("title", nowFolderName + " - " + appConfig.SITE_NAME);
196+
$(document).attr("title", decodeURI(nowFolderName) + " - " + appConfig.SITE_NAME);
195197
$("#back").html(
196-
'<li class="item folder folder-parent" data="' + encodeURI(parentFolder) + '">' +
197-
'<a href="#' + encodeURI(parentFolder) + '">' +
198+
'<li class="item folder folder-parent" data="' + parentFolder + '">' +
199+
'<a href="#' + parentFolder + '">' +
198200
'<span class="icon square">' +
199201
'<img src="static/_h5ai/public/images/themes/default/folder-parent.svg" alt="folder">' +
200202
'</span>' +
201203
'<span class="icon landscape">' +
202204
'<img src="static/_h5ai/public/images/themes/default/folder-parent.svg" alt="folder">' +
203205
'</span>' +
204206
'<span class="label">' +
205-
'<b>' + parentFolderName + '</b>' +
207+
'<b>' + decodeURI(parentFolderName) + '</b>' +
206208
'</span>' +
207209
'<span class="size" data-bytes="null">' +
208210
'</span>' +
209211
'</a>' +
210212
'</li>'
211213
);
212214
}else{
213-
$("#crumbbar").html( //每次都重置crumbbar
214-
'<a href="#" class="crumb active">' +
215+
$("#crumbbar").html(
216+
'<a href="#" class="crumb site active">' +
215217
'<span class="label">' + appConfig.SITE_NAME + '</span>' +
216218
'<img class="hint" src="static/_h5ai/public/images/themes/default/folder-page.svg" alt="#">' +
217219
'</a>'
@@ -224,45 +226,27 @@ function listObjects(path = ''){
224226
});
225227
}
226228
function downloadObject(target, who){
227-
console.log('-----getObject("' + target + '")-----');
229+
console.log('-----getObject("' + decodeURI(target) + '")-----');
228230
$(who).attr('style', 'opacity: 0.5;-moz-opacit: 0.5;');
229-
if(appConfig.DIRECTLY_GET_OBJECT === true){
230-
231-
}else{
232-
$.ajax({
233-
type: 'POST',
234-
url: 'app/action/getSignedUrlForGettingObject.action.php',
235-
data: {
236-
target: decodeURI(target),
237-
},
238-
async: false,
239-
dataType: 'json',
240-
success: function(data){
241-
console.log('ajaxpost getSignedUrlForGettingObject.action.php:\n' + data);
242-
$(who).find("a").attr("href", data).attr("target", "_blank");
243-
//a.appendTo('body');
244-
},
245-
error: function(textStatus, errorThrown){
246-
alert('ERROR!\najaxget app.config failed:\nGo FLUCKING to check for console.log');
247-
console.log(XMLHttpRequest.status);
248-
console.log(XMLHttpRequest.readyState);
249-
console.log(textStatus);
250-
}
251-
});
252-
}
231+
$.ajax({
232+
type: 'POST',
233+
url: 'app/action/getSignedUrlForGettingObject.action.php',
234+
data: {
235+
target: decodeURI(target),
236+
},
237+
async: false,
238+
dataType: 'json',
239+
success: function(data){
240+
console.log('ajaxpost getSignedUrlForGettingObject.action.php:\n' + decodeURI(data));
241+
$(who).find("a").attr("href", data).attr("target", "_blank");
242+
//a.appendTo('body');
243+
},
244+
error: function(textStatus, errorThrown){
245+
alert('ERROR!\najaxget app.config failed:\nGo FLUCKING to check for console.log');
246+
console.log(XMLHttpRequest.status);
247+
console.log(XMLHttpRequest.readyState);
248+
console.log(textStatus);
249+
}
250+
});
253251
$(who).attr("style", "opacity: 1.0;-moz-opacit: 1.0;");
254-
}
255-
function print_arr(arr, space, space2) {
256-
space = space || '';
257-
space2 = space2 || ' ';
258-
var str = "Array\n" + space + "(\n";
259-
for (var i = 0; i < arr.length; i++) {
260-
if (Object.prototype.toString.call(arr[i]) == '[object Array]') {
261-
str += space2 + '[' + i + "] => " + print_arr(arr[i], space + ' ', space2 + ' ');
262-
} else {
263-
str += space2 + '[' + i + "] => " + arr[i] + "\n";
264-
}
265-
}
266-
str += space + ")\n";
267-
return str;
268252
}

0 commit comments

Comments
 (0)