add data type filter

plugins/Html.php

@@ -157,14 +157,13 @@ eof;
         return $total;
     }
 
-    //参数：page、limit
-    public static function getPaginationLink($url, $page, $pageSize = 24) {
+    //根据指定参数，以及当前网址，生成新的网址
+    public static function getLinkByParams($url, $getParams = array()) {
         $arr = explode('?', $url);
         if (count($arr) == 1) {     //不含问号
-            return "{$url}?page={$page}&limit={$pageSize}";
+            return "{$url}?" . http_build_query($getParams);
         }
 
-        $paginationParams = array('page', 'limit');
         $newParms = array();
         $baseUrl = $arr[0];
         $queryString = $arr[1];
@@ -172,13 +171,20 @@ eof;
         if (count($params) > 0) {
             foreach ($params as $item) {
                 list($name, $val) = explode('=', $item);
-                if (!in_array($name, $paginationParams)) {
+                if (!isset($getParams[$name])) {
                     array_push($newParms, $item);
                 }
             }
         }
 
-        return $baseUrl . "?page={$page}&limit={$pageSize}" . (!empty($newParms) ? '&'.implode('&', $newParms) : '');
+        return "{$baseUrl}?" . http_build_query($getParams) . (!empty($newParms) ? '&'.implode('&', $newParms) : '');
+    }
+
+    //参数：page、limit
+    public static function getPaginationLink($url, $page, $limit = 24) {
+        $paginationParams = compact('page', 'limit');
+
+        return self::getLinkByParams($url, $paginationParams);
     }
 
     //输出翻页组件，page从1开始

themes/beauty/controller/ListController.php

@@ -103,6 +103,20 @@ Class ListController extends Controller {
         $subcate = $scanResults[$cateId];
         $breadcrumbs = $this->getBreadcrumbs($currentDir, $cachedParentData, $scanner);
 
+        //图片、视频类型筛选支持
+        $showType = $this->get('show', 'all');
+        if ($showType == 'image') {
+            $scanResults[$cateId]['files'] = array_filter($scanResults[$cateId]['files'], function($item) {
+                $imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
+                return in_array($item['extension'], $imgExts);
+            });
+        }else if ($showType == 'video') {
+            $scanResults[$cateId]['files'] = array_filter($scanResults[$cateId]['files'], function($item) {
+                $videoExts = !empty(FSC::$app['config']['supportedVideoExts']) ? FSC::$app['config']['supportedVideoExts'] : array('mp4', 'mov', 'm3u8');
+                return in_array($item['extension'], $videoExts);
+            });
+        }
+
         //获取当前目录下的readme
         $cateReadmeFile = $scanner->getDefaultReadme();
         if (!empty($cateReadmeFile)) {
@@ -184,7 +198,7 @@ Class ListController extends Controller {
         $viewName = '//site/index';     //共享视图
         $params = compact(
             'cateId', 'dirTree', 'scanResults', 'menus', 'htmlReadme', 'breadcrumbs', 'htmlCateReadme',
-            'mp3File', 'page', 'pageSize', 'cacheDataId', 'copyright'
+            'mp3File', 'page', 'pageSize', 'cacheDataId', 'copyright', 'showType'
         );
         return $this->render($viewName, $params, $pageTitle);
     }

themes/beauty/controller/SiteController.php

@@ -137,10 +137,27 @@ Class SiteController extends Controller {
             $copyright = $readmeFile['copyright'];
         }
 
+        //图片、视频类型筛选支持
+        $imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
+        $videoExts = !empty(FSC::$app['config']['supportedVideoExts']) ? FSC::$app['config']['supportedVideoExts'] : array('mp4', 'mov', 'm3u8');
+
+        $showType = $this->get('show', 'all');
+        if ($showType == 'image') {
+            $scanResults = array_filter($scanResults, function($item) {
+                $imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
+                return in_array($item['extension'], $imgExts);
+            });
+        }else if ($showType == 'video') {
+            $scanResults = array_filter($scanResults, function($item) {
+                $videoExts = !empty(FSC::$app['config']['supportedVideoExts']) ? FSC::$app['config']['supportedVideoExts'] : array('mp4', 'mov', 'm3u8');
+                return in_array($item['extension'], $videoExts);
+            });
+        }
+
+
         //dataType支持：[image, video]
         $dataType = $this->get('dataType', 'html');
         if ($dataType == 'image') {
-            $imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
             $imgs = array();
             $pageStartIndex = ($page-1) * $pageSize;
             $index = 0;
@@ -160,7 +177,6 @@ Class SiteController extends Controller {
             }
             return $this->renderJson(compact('page', 'pageSize', 'imgs'));
         }else if ($dataType == 'video') {
-            $videoExts = !empty(FSC::$app['config']['supportedVideoExts']) ? FSC::$app['config']['supportedVideoExts'] : array('mp4', 'mov', 'm3u8');
             $videos = array();
             $pageStartIndex = ($page-1) * $pageSize;
             $index = 0;
@@ -184,7 +200,7 @@ Class SiteController extends Controller {
 
         $viewName = 'index';
         $params = compact(
-            'page', 'pageSize', 'cacheDataId',
+            'page', 'pageSize', 'cacheDataId', 'showType',
             'dirTree', 'scanResults', 'menus', 'htmlReadme', 'htmlCateReadme', 'mp3File', 'copyright'
         );
         return $this->render($viewName, $params, $pageTitle);

themes/beauty/views/site/index.php

@@ -122,17 +122,6 @@ eof;
                 'directories' => $viewData['menus'],
                 'files' => $viewData['scanResults'],
             );
-        }else if (empty($category['directories']) && $total == 0) {
-            echo <<<eof
-    <div class="alert alert-warning">
-        <h2>咦？没有图片或视频</h2>
-        <p class="mt-2">
-            空目录吗？复制照片目录或文件到目录后点右上角“<img width="18" src="/img/beauty/refresh.svg" alt="清空缓存数据" title="刷新缓存数据">刷新”图标清空缓存。
-            <br>
-            如果不是空目录，点右上角“<img width="18" src="/img/beauty/refresh.svg" alt="清空缓存数据" title="刷新缓存数据">刷新”图标清空缓存，网页有 10 分钟缓存。
-        </p>
-    </div>
-eof;
         }
 
         //当前目录的描述介绍
@@ -228,15 +217,51 @@ eof;
 
         if (!empty($category['directories'])) {        //两级目录支持
             $arrowImg = $dir_ext_status == 'opened' ? 'arrow-up.svg' : 'arrow-down.svg';
-            $btnTxt = $dir_ext_status == 'opened' ? '收拢' : '展开';
+            $btnTxt = $dir_ext_status == 'opened' ? '收拢目录' : '展开目录';
             echo <<<eof
 <div class="gap-hr">
     <hr>
-    <button class="btn btn-default btn-xs btn-dir-ext" data-status="{$dir_ext_status}"><img src="/img/{$arrowImg}" alt="directory toggle"> <span>{$btnTxt}</span></button>
+    <button class="btn btn-default btn-xs btn-dir-ext" data-status="{$dir_ext_status}" data-opened-title="收拢目录" data-closed-title="展开目录"><img src="/img/{$arrowImg}" alt="directory toggle"> <span>{$btnTxt}</span></button>
 </div>
 eof;
         }
 
+
+        //显示图片、视频筛选链接
+        $arrShowTypes = array(
+            'all' => '所有',
+            'image' => '照片',
+            'video' => '视频',
+        );
+
+        echo '<ul class="nav nav-tabs ml-1">';
+        foreach ($arrShowTypes as $key => $title) {
+            $showLink = Html::getLinkByParams(FSC::$app['requestUrl'], array('show' => $key));
+            $activedClass = $key == $viewData['showType'] ? 'active' : '';
+            echo <<<eof
+            <li role="presentation" class="{$activedClass}"><a href="{$showLink}">{$title}</a></li>
+eof;
+        }
+        echo '</ul>';
+
+        //空目录显示提示信息
+        if (
+            ( empty($selectedId) && empty($category['directories']) ) || 
+            ( !empty($selectedId) && empty($category['files']) )
+        ) {
+            echo <<<eof
+    <div class="alert alert-warning mt-1 mr-1 ml-1">
+        <h2>咦？没有文件哦</h2>
+        <p class="mt-2">
+            空目录吗？复制照片目录或文件到目录后点右上角“<img width="18" src="/img/beauty/refresh.svg" alt="清空缓存数据" title="刷新缓存数据">刷新”图标清空缓存。
+            <br>
+            如果不是空目录，点右上角“<img width="18" src="/img/beauty/refresh.svg" alt="清空缓存数据" title="刷新缓存数据">刷新”图标清空缓存，网页有 10 分钟缓存。
+        </p>
+    </div>
+eof;
+        }
+
+
         echo '<div class="im_mainl row">';
 
 

www/css/beauty.css

@@ -127,7 +127,7 @@ a:link{text-decoration:none}
 
 .gap-hr{position:relative}
 .gap-hr .btn-dir-ext{position:absolute;left:50%;top:50%;margin-top:-11px;margin-left:-26px}
-.gap-hr .btn-dir-ext img{width:13px}
+.gap-hr .btn-dir-ext img{width:13px;vertical-align:text-bottom}
 
 #qrimg{width:160px;height:160px;margin:0 auto 20px auto;background-color:#FFF;padding:5px;border:1px solid #EEE;border-radius:5px;overflow:hidden}
 
@@ -139,7 +139,10 @@ a:link{text-decoration:none}
 .video_previewer{display:none;position:fixed;right:4px;bottom:4px;width:200px;height:112px;overflow:hidden;z-index:1000}
 
 .mt-2{margin-top:2em}
+.mt-1{margin-top:1em}
 .mr-1{margin-right:1em}
+.ml-1{margin-left:1em}
+.mb-1{margin-bottom:1em}
 
 @media screen and (max-width: 1199px) {
     .im_item {

www/js/beauty.js

@@ -21,6 +21,9 @@ if ($('#image_site').get(0)) {
         on: {
             startSlideshow: function(fancybox) {
                 //console.log('startSlideshow', arguments);
+            },
+            endSlideshow: function(fancybox) {
+                console.log('current', fancybox.getSlide());
             }
         }
     });
@@ -530,19 +533,21 @@ if ($('#my-player').length > 0 && typeof(videojs) != 'undefined') {
 //目录收拢、展开
 $('.btn-dir-ext').click(function(evt) {
     var cookieKey = 'dir_ext_status';
-    var status = $('.btn-dir-ext').attr('data-status');
+    var status = $('.btn-dir-ext').attr('data-status'),
+        opened_title = $('.btn-dir-ext').attr('data-opened-title'),
+        closed_title = $('.btn-dir-ext').attr('data-closed-title');
     if (status == 'opened') {
         $('.btn-dir-ext').attr('data-status', 'closed');
         $('.btn-dir-ext').parents('.gap-hr').prev('.im_mainl').addClass('hide');
         $('.btn-dir-ext').find('img').attr('src', '/img/arrow-down.svg');
-        $('.btn-dir-ext').find('span').text('展开');
+        $('.btn-dir-ext').find('span').text(closed_title);
 
         Cookies.set(cookieKey, 'closed', { expires: 1 });
     }else {
         $('.btn-dir-ext').attr('data-status', 'opened');
         $('.btn-dir-ext').parents('.gap-hr').prev('.im_mainl').removeClass('hide');
         $('.btn-dir-ext').find('img').attr('src', '/img/arrow-up.svg');
-        $('.btn-dir-ext').find('span').text('收拢');
+        $('.btn-dir-ext').find('span').text(opened_title);
 
         Cookies.set(cookieKey, 'opened', { expires: 1 });
     }