v2.2.1: 新增列表排序，+1优化

version 2.2.1 2018-05-12
[新增] 列表排序，可以根据名称、修改时间、大小来升降序排列
[优化] 数据格式化逻辑

Author: YXuuan

CHANGELOG.md

@@ -1,7 +1,11 @@
 # hfs4OSS
 
 ## 更新日志/ChangeLog
-
+### version 2.2.1 2018-05-12
+```
+[新增] 列表排序，可以根据名称、修改时间、大小来升降序排列
+[优化] 数据格式化逻辑
+```
 ### version 2.2.0 2018-05-04
 ```
 [新增] 简单的访问验证功能

README.md

@@ -8,7 +8,7 @@ SDK：aliyun-oss-php-[sdk](https://promotion.aliyun.com/ntms/act/ossdoclist.html
 
 ## 预览/Demo
 * oovoo.site：[http://file.oovoo.site/](http://file.oovoo.site/)
-* ![image](https://yxuuan.github.io/hfs4oss-demo/demo.png)
+* ![image](https://yxuuan.github.io/hfs4oss-demo/v2.2.0.png)
 
 ## 部署/Build
 * 环境：
@@ -39,7 +39,7 @@ Releases：[https://github.com/YXuuan/hfs4OSS/releases/](https://github.com/YXuu
 	ROOT_DIR		：根目录路径，类似于FTP服务器的虚拟目录显示（例如此项为"photo/"则会将photo文件夹下的内容当作根目录显示）。缺省值为空
 		注意：必须以"/"结尾且开头无需用"/"表示根目录
 	SIGNEDURL_TIMEOUT	：(int)每次下载文件时请求的签名URL有效期时长（秒）。缺省值：3600
-	INDEX_PASSWORD		：访问密码，程序将在每次请求时验证，为空则为不设置。缺省值为空
+	INDEX_PASSWORD		：访问密码，程序将在首次访问站点时要求输入，为空则为不设置。缺省值为空
 
 
 /config/static.config.json：	--前端配置文件
@@ -65,10 +65,9 @@ Releases：[https://github.com/YXuuan/hfs4OSS/releases/](https://github.com/YXuu
 ```
 ## 更新日志/ChangeLog
 ```
-version 2.2.0 2018-05-04
-	[新增] 简单的访问验证功能
-	[优化] 减小程序体积，去除无用文件
-	ATTENTION: app.config.php有更新
+version 2.2.1 2018-05-12
+	[新增] 列表排序，可以根据名称、修改时间、大小来升降序排列
+	[优化] 数据格式化逻辑
 ```
 更多：[CHANGELOG.md](https://github.com/YXuuan/hfs4OSS/blob/master/CHANGELOG.md)
 
@@ -83,7 +82,7 @@ version 2.2.0 2018-05-04
 (划掉)输出item的大小
 批量下载（非压缩闭包）
 简单的object管理功能（上传，重命名等）
-列表排序
+(划掉)列表排序
 ```
 
 ## 开源协议/License

app/action/listObjects.action.php

@@ -25,24 +25,39 @@
 $prefixList = $listObjectResult->getPrefixList();
 if (!empty($objectList)) {
 	foreach ($objectList as $objectInfo) {
-		$resultToReturn["fileList"][] = array(		//取出每一个
+		$resultToReturn["fileList"][] = array(
+			//取出每一个
 			substr($objectInfo->getKey(), strlen($options['prefix'])),		//并去掉父级路径
-			date("Y-m-d H:i", strtotime($objectInfo->getLastModified())),
-			format_bytes($objectInfo->getSize()),
+			//$objectInfo->getLastModified(),
+			strtotime($objectInfo->getLastModified()),
+			$objectInfo->getSize()
+			//format_bytes($objectInfo->getSize()),
 		);
 	}
 	if($options['prefix'] !== ''){
-	@array_shift($resultToReturn['fileList']);       //$fileList第一个object为当前目录，忽略
-}
+		@array_shift($resultToReturn['fileList']);       //$fileList第一个object为当前目录，忽略
+	}
 }
+//取出每一个并去掉父级路径放入数组
 if (!empty($prefixList)) {
 	foreach ($prefixList as $prefixInfo) {
-		$resultToReturn["folderList"][] = substr($prefixInfo->getPrefix(), strlen($options['prefix']));        //取出每一个并去掉父级路径放入数组
+		$resultToReturn["folderList"][] = substr($prefixInfo->getPrefix(), strlen($options['prefix']));
 	}
 }
+//排序相关
+if((isset($_POST['sortBy'])) && (!empty($_POST['sortBy'])) && (isset($_POST['descending'])) && (!empty($_POST['descending']))){
+	$descending = ($_POST['descending'] == "true") ? SORT_ASC : SORT_DESC ;
+	if($_POST['sortBy'] == "date"){
+		@array_multisort(array_column($resultToReturn['fileList'], 1), $descending, $resultToReturn['fileList']);
+	}elseif($_POST['sortBy'] == "size"){
+		@array_multisort(array_column($resultToReturn['fileList'], 2), $descending, $resultToReturn['fileList']);
+	}else{
+		@array_multisort(array_column($resultToReturn['fileList'], 0), $descending, $resultToReturn['fileList']);
+		@array_multisort($resultToReturn['folderList'], $descending, $resultToReturn['folderList']);
 
+	}
+}
 $t2 = microtime(true);
-
 @$resultToReturn['fileCount'] = count($resultToReturn["fileList"]);
 @$resultToReturn['folderCount'] = count($resultToReturn["folderList"]);
 $resultToReturn['takes'] = floor(($t2-$t1)*1000) . 'ms';

app/init.php

@@ -2,8 +2,6 @@
 require_once __DIR__ . '/../config/app.config.php';
 require_once __DIR__ . '/function/app.function.php';
 
-date_default_timezone_set("PRC");
-
 if(APPConfig::INDEX_PASSWORD !== ""){
 	if(!isset($_COOKIE['hfs4OSS_indexPassword']) || (empty($_COOKIE['hfs4OSS_indexPassword']))){
 		die('Exception201');

index.html

@@ -39,14 +39,17 @@
             <div id="view" class="view-details view-size-20">
                 <ul id="items" class="clearfix">
                     <li class="header">
-                        <a class="label">
-                            <span class="l10n-name">Name</span>
+                        <a class="label descending">
+                            <span>Name</span>
+                            <img src="/_h5ai/public/images/ui/sort.svg" class="sort" alt="sort order">
                         </a>
                         <a class="date">
-                        	<span class="l10n-lastModified">Last modified</span>
+                        	<span>Last modified</span>
+                        	<img src="/_h5ai/public/images/ui/sort.svg" class="sort" alt="sort order">
                         </a>
                         <a class="size">
-                            <span class="l10n-size">Size</span>
+                            <span>Size</span>
+                            <img src="/_h5ai/public/images/ui/sort.svg" class="sort" alt="sort order">
                         </a>
                     </li>
                     <div id="back"></div>
@@ -59,41 +62,6 @@
             </div>
         </div>
     </div>
-    <!--<div id="pv-overlay" class="hidden">
-			<div id="pv-container" style="width: 955px; height: 875px; left: 20px; top: 20px;"></div>
-			<div id="pv-spinner" class="hidden" style="left: 497.5px; top: 481.5px;">
-				<img class="back">
-				<img class="spinner" src="static/h5ai/public/images/ui/spinner.svg">
-			</div>
-			<div id="pv-prev-area" class="hof">
-				<img src="static/h5ai/public/images/ui/preview-prev.svg">
-			</div>
-			<div id="pv-next-area" class="hof">
-				<img src="static/h5ai/public/images/ui/preview-next.svg">
-			</div>
-			<div id="pv-bottombar" class="clearfix hof">
-				<ul id="pv-buttons">
-					<li id="pv-bar-close" class="bar-right bar-button">
-						<img src="static/h5ai/public/images/ui/preview-close.svg">
-					</li>
-					<li id="pv-bar-raw" class="bar-right">
-						<a class="bar-button" target="_blank">
-							<img src="static/h5ai/public/images/ui/preview-raw.svg">
-						</a>
-					</li>
-					<li id="pv-bar-fullscreen" class="bar-right bar-button">
-						<img src="static/h5ai/public/images/ui/preview-fullscreen.svg">
-					</li>
-					<li id="pv-bar-next" class="bar-right bar-button">
-						<img src="static/h5ai/public/images/ui/preview-next.svg">
-					</li>
-					<li id="pv-bar-idx" class="bar-right bar-label"></li>
-					<li id="pv-bar-prev" class="bar-right bar-button">
-						<img src="static/h5ai/public/images/ui/preview-prev.svg">
-					</li>
-				</ul>
-			</div>
-		</div>-->
 </body>
 
 </html>

static/h5ai/public/css/styles.css

@@ -1858,7 +1858,7 @@ html.no-browser .noBrowserMsg {
     /*font-weight: bold*/       /*Changed*/
 }
 @media only screen and (max-width:785px) {      /*Changed*/
-	.date, .l10n-lastModified{       /*Changed*/
+	.date, .lastModified{       /*Changed*/
          display: none
     }
     #view.view-details .label{
@@ -1877,7 +1877,7 @@ html.no-browser .noBrowserMsg {
     }
 }
 @media only screen and (max-width:500px) {
-	.size, .l10n-size{       /*Changed*/
+	.size{       /*Changed*/
          display: none
     }
     #view.view-details .label{

static/script/main.js

@@ -34,13 +34,12 @@ $.ajax({
 		console.log(textStatus);
 	}
 });
-if(window.location.hash){
-	listObjects(window.location.hash.substring(1));		//截掉“#”
-}else{
-	listObjects();
-}
+listObjects(window.location.hash.substring(1));
 $(document).ready(function(){
 	//Event Loop
+	$(".header").on("click", "a", function(event){     //定义的#back是为了每次覆盖
+		sortSwitch($(this));    //listObjects(当前元素的data值)
+	});
 	//对Ajax返回数据后新生成的元素进行绑定
 	$("#back").on("click", "li.item.folder.folder-parent", function(event){     //定义的#back是为了每次覆盖
 		listObjects($(this).attr("data"));    //listObjects(当前元素的data值)
@@ -62,14 +61,16 @@ $(document).ready(function(){
 	});
 });
 
-function listObjects(path = ''){
+function listObjects(path, sortBy = "label", descending = "true"){
 	$("#items").attr("style", "opacity: 0.5;-moz-opacit: 0.5;");
-	console.log('-----listObjects("' + decodeURI(path) + path + ' = ' + '")-----');
+	console.log('-----listObjects("' + decodeURI(path) + ', ' + sortBy + ', ' + descending + ')-----');
 	$.ajax({
 		type: 'POST',
 		url: 'app/action/listObjects.action.php',
 		data: {
 				prefix: decodeURI(path),
+				sortBy: sortBy,
+				descending: descending
 		},
 		dataType: 'text',
 		success: function(data){
@@ -144,11 +145,11 @@ function listObjects(path = ''){
 							'<span class="label" title="' + decodeURI(path) + fileInfo[0] +'">' +
 								fileInfo[0] +
 							'</span>' +
-							'<span class="date" title="' + fileInfo[1] +'">' +
-								fileInfo[1] +
+							'<span class="date" title="' + getTime(fileInfo[1]) +'">' +
+							getTime(fileInfo[1]) +
 							'</span>' +
-							'<span class="size" title="' + fileInfo[2] +'">' +
-								fileInfo[2] +
+							'<span class="size" title="' + bytesToSize(fileInfo[2]) +'">' +
+								bytesToSize(fileInfo[2]) +
 							'</span>' +
 						'</a>' +
 					'</li>'
@@ -247,6 +248,21 @@ function listObjects(path = ''){
 		}
 	});
 }
+function sortSwitch(who){
+	if($(who).hasClass("ascending")){
+		$(who).removeClass("ascending");
+		listObjects(window.location.hash.substring(1), $(who).attr("class"), "true");
+		$(who).addClass("descending");
+	}else if($(who).hasClass("descending")){
+		$(who).removeClass("descending");
+		listObjects(window.location.hash.substring(1), $(who).attr("class"), "false");
+		$(who).addClass("ascending");
+	}else{
+		$(".header a").removeClass("ascending").removeClass("descending");		//清空排序方法
+		listObjects(window.location.hash.substring(1), $(who).attr("class"), "true");		//默认新一次排序为倒序
+		$(who).addClass("descending");
+	}
+}
 function downloadObject(target, who){
 	console.log('-----getObject("' + decodeURI(target) + '")-----');
 	$(who).attr('style', 'opacity: 0.5;-moz-opacit: 0.5;');
@@ -282,25 +298,22 @@ function downloadObject(target, who){
 	});
 	$(who).attr("style", "opacity: 1.0;-moz-opacit: 1.0;");
 }
-function exceptionHandler(msg){
-	var handlerFlag = null;
-	switch(msg){
-		case 'Exception201':
-			var inputedPassword = prompt(appConfig.INDEX_PASSWORD_MESSAGE + "\nPassword needed: ");
-			if(inputedPassword !== null){
-				$.cookie('hfs4OSS_indexPassword', inputedPassword);
-				listObjects();
-			}
-			handlerFlag = true;
-			break;
-		case 'Exception202':
-			var inputedPassword = prompt("Invalid password, try again: ");
-			if(inputedPassword !== null){
-				$.cookie('hfs4OSS_indexPassword', inputedPassword)
-				listObjects();
-			}
-			handlerFlag = true;
-			break;
-	}
-	return handlerFlag;
+function getTime() {
+	var ts = arguments[0] || 0;
+	var t,y,m,d,h,i,s;
+	t = ts ? new Date(ts*1000) : new Date();
+	y = t.getFullYear();
+	m = t.getMonth()+1;
+	d = t.getDate();
+	h = t.getHours();
+	i = t.getMinutes();
+	s = t.getSeconds();
+	return y+'-'+(m<10?'0'+m:m)+'-'+(d<10?'0'+d:d)+' '+(h<10?'0'+h:h)+':'+(i<10?'0'+i:i)+':'+(s<10?'0'+s:s);
+}
+function bytesToSize(bytes) {
+	if (bytes === 0) return '0 B';
+	var k = 1024;
+	sizes = ['B','KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+	i = Math.floor(Math.log(bytes) / Math.log(k))
+	return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];
 }