directories' data improve

lib/DirScanner.php

@@ -163,14 +163,31 @@ Class DirScanner {
             'directory' => basename($realpath),
             'realpath' => $realpath,
             'path' => $this->getDirPath($id),
-            'files' => $files,
         ];
 
+        $sub_dirs = [];
+        $sub_files = [];
+
         //try to merge description data
         if (!empty($files[$id])) {
             $data = array_merge($data, $files[$id]);
             unset($files[$id]);
-            $data['files'] = $files;
+        }
+
+        //区分目录和文件
+        foreach ($files as $id => $item) {
+            if (!empty($item['directory'])) {
+                $sub_dirs[$id] = $item;
+            }else {
+                $sub_files[$id] = $item;
+            }
+        }
+
+        if (!empty($sub_dirs)) {
+            $data['directories'] = $sub_dirs;
+        }
+        if (!empty($sub_files)) {
+            $data['files'] = $sub_files;
         }
 
         return $data;

themes/googleimage/controller/SiteController.php

@@ -8,6 +8,8 @@ require_once __DIR__ . '/../../../plugins/Parsedown.php';
 Class SiteController extends Controller {
 
     public function actionIndex() {
+        $cateId = $this->get('id', '');
+
         //获取数据
         $scanner = new DirScanner();
         $scanner->setWebRoot(FSC::$app['config']['content_directory']);
@@ -31,7 +33,7 @@ Class SiteController extends Controller {
 
         $pageTitle = !empty($titles) ? $titles[0]['name'] : "FileSite.io - 无数据库、基于文件和目录的Markdown文档、网址导航、图书、图片、视频网站PHP开源系统";
         $viewName = 'index';
-        $params = compact('dirTree', 'scanResults', 'menus', 'html');
+        $params = compact('cateId', 'dirTree', 'scanResults', 'menus', 'html');
         return $this->render($viewName, $params, $pageTitle);
     }
 

themes/googleimage/views/site/index.php

@@ -1,11 +1,11 @@
 <div class="menu">
 <?php
-$selectedIndex = 0;
+$selectedId = $viewData['cateId'];
 if (!empty($viewData['menus'])) {
 	foreach($viewData['menus'] as $index => $item) {
-		$selected = $index == $selectedIndex ? 'selected' : '';
+		$selected = $item['id'] == $selectedId ? 'selected' : '';
 		echo <<<eof
-		<a href="{$item['path']}" class="{$selected}">{$item['directory']}</a>
+		<a href="/?id={$item['id']}" class="{$selected}">{$item['directory']}</a>
 eof;
 	}
 }
@@ -16,10 +16,33 @@ eof;
 
 <div class="content markdown-body">
 	<?php
-		$cateId = $viewData['menus'][$selectedIndex]['id'];
-		$category = $viewData['scanResults'][$cateId];
-		if (!empty($category['files'])) {
+		$imgExts = ['jpg', 'jpeg', 'png', 'gif'];
+		$category = $viewData['scanResults'][$selectedId];
+
+		if (!empty($category['directories'])) {
+			foreach($category['directories'] as $dir) {
+				echo <<<eof
+				<a href="{$dir['path']}" class="img-item">
+eof;
+
+				if (!empty($dir['snapshot'])) {
+					echo <<<eof
+	<img src="{$dir['snapshot']}" alt="{$dir['directory']}">
+eof;
+				}else if (!empty($dir['files'])) {
+					$first_img = array_shift($dir['files']);
+					echo <<<eof
+	<img src="{$first_img['path']}" alt="{$first_img['filename']}">
+eof;
+				}
+				echo <<<eof
+				<strong>{$dir['directory']}</strong>
+			</a>
+eof;
+			}
+		}else if (!empty($category['files'])) {
 			foreach($category['files'] as $file) {
+				if (!in_array($file['extension'], $imgExts)) {continue;}
 				echo <<<eof
 	<img src="{$file['path']}" alt="{$file['filename']}">
 eof;

www/css/googleimage.css

@@ -4,7 +4,7 @@ a{color: #aaadb2;text-decoration: none}
 .header{padding:10px;position: relative;}
 .header .logo{display: inline-block;margin:10px;font-size: 1.86em;color: #e8eaed}
 .header .logo img{vertical-align: middle;}
-.menu{max-width: 80%;white-space;nowrap;overflow-x:auto;overflow-y: hidden;margin: 0 auto}
+.menu{max-width: 80%;white-space: nowrap;overflow-x:auto;overflow-y: hidden;margin: 0 auto;}
 .menu a{display: inline-block;line-height: 16px;margin: 0 1px;padding: 16px 12px 12px 10px;text-align: center}
 .menu .selected{color: #8ab4f8;border-bottom: 3px solid #8ab4f8;padding: 20px 12px 11px 10px;}
 .hr{border-bottom: solid 1px #3c4043;margin-bottom: 11px}
@@ -12,10 +12,32 @@ a{color: #aaadb2;text-decoration: none}
 .about:hover{background-color: #303134}
 .about svg{fill: currentColor;cursor: pointer;}
 .modal-mask{display: none;background: rgba(0,0,0,.6);position: fixed;left: 0;right: 0;top: 0;bottom: 0;overflow: hidden;z-index: 9000;}
-.modal-about{background: #202124;bottom: 0;overflow-y: auto;position: fixed;right: 0px;top: 0;width: 360px}
+.modal-about{background: #202124;bottom: 0;overflow-y: auto;position: fixed;right: 0px;top: 0;width: 360px;max-width: 100%;}
 .modal-about h3{color: #e8eaed;font-size: 24px;font-weight: 300;margin-top: 0;margin-bottom: 20px;text-align: left;}
 .modal-about .modal-head{padding: 20px 24px 0 24px}
 .modal-about .btn-close{color: #9aa0a6;cursor: pointer;display: block;float: right;position: relative;top: -45px;}
 .modal-about .btn-close svg{fill: currentColor;flex-shrink: 0;}
 .modal-body{padding: 10px;background-color: inherit;}
-.modal-about .modal-body h1{display: none;}
+.modal-about .modal-body h1{display: none;}
+.content{padding: 20px 10px}
+.img-item{display: inline-block;margin-left: 10px;margin-right: 10px;margin-bottom: 20px;}
+.img-item img{height: 180px;object-fit: cover;}
+.img-item strong{display: block;color: #bdc1c6;font-family: Roboto,Arial,sans-serif;font-size: 12px;letter-spacing: .2px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+
+/* for mobile */
+@media only screen and (max-width: 767px) {
+    .menu{max-width:96%;font-size: 15px}
+    .img-item{margin-left: 0;margin-right: 0;width: 100%}
+    .img-item img{height: auto;width: 100%}
+    .img-item strong{font-size: 14px;}
+}
+@media only screen and (min-width: 540px) and (max-width: 767px) {
+    .img-item{width: 48%;margin-right: 5px;}
+}
+
+/* for pad */
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+    .menu{font-size: 14px}
+    .img-item img{height: 18vh}
+    .img-item strong{font-size: 13px;}
+}

www/js/googleimage.js

@@ -10,5 +10,10 @@
     $('.btn-close').click(function(evt) {
         $(evt.target).parents('.modal-mask').css('display', 'none');
     });
+    $('.modal-mask').click(function(evt) {
+        if ($(evt.target).hasClass('modal-mask')) {
+            $(evt.target).css('display', 'none');
+        }
+    });
 
 })();