add data type filter

4 months ago · fc2da884e5
6 changed files with 96 additions and 27 deletions
--- a/plugins/Html.php
+++ b/plugins/Html.php
@ -157,14 +157,13 @@ eof;
				@@ -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;
				@@ -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开始
--- a/themes/beauty/controller/ListController.php
+++ b/themes/beauty/controller/ListController.php
@ -103,6 +103,20 @@ Class ListController extends Controller {
				@@ -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 {
				@@ -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);
    }
--- a/themes/beauty/controller/SiteController.php
+++ b/themes/beauty/controller/SiteController.php
@ -137,10 +137,27 @@ Class SiteController extends Controller {
				@@ -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 {
				@@ -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 {
				@@ -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);
--- a/themes/beauty/views/site/index.php
+++ b/themes/beauty/views/site/index.php
@ -122,17 +122,6 @@ eof;
				@@ -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;
				@@ -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">';


--- a/www/css/beauty.css
+++ b/www/css/beauty.css
@ -127,7 +127,7 @@ a:link{text-decoration:none}
				@@ -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}
				@@ -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 {
--- a/www/js/beauty.js
+++ b/www/js/beauty.js
@ -21,6 +21,9 @@ if ($('#image_site').get(0)) {
				@@ -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') {
				@@ -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 });
    }