add toggle button for dirs

themes/beauty/views/site/index.php

@@ -114,8 +114,7 @@ eof;
 }
 ?>
 
-    <div class="im_mainl row">
-        <?php
+    <?php
         //如果没有选中任何目录，则把所有目录显示出来
         if (empty($selectedId) && !empty($viewData['menus'])) {
             $category = array(
@@ -148,13 +147,20 @@ eof;
     <div class="modal-body text_dark markdown-body">{$viewData['htmlCateReadme']}</div>
 eof;
         }
+    ?>
 
+    <div class="im_mainl row">
+        <?php
         if (!empty($category['directories'])) {        //两级目录支持
             $index = 0;
             foreach ($category['directories'] as $dir) {
+                $dirUrl = $dir['path'];
+                if (strpos($dirUrl, 'cid=') === false) {
+                    $dirUrl .= "&cid={$viewData['cacheDataId']}";
+                }
                 echo <<<eof
             <div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
-                <a href="{$dir['path']}&cid={$viewData['cacheDataId']}" class="bor_radius dir_item" data-id="{$dir['id']}" data-cid="{$viewData['cacheDataId']}">
+                <a href="{$dirUrl}" class="bor_radius dir_item" data-id="{$dir['id']}" data-cid="{$viewData['cacheDataId']}">
 eof;
 
                 if (!empty($dir['snapshot'])) {
@@ -212,9 +218,16 @@ eof;
 
             //分割目录和文件
             echo '</div>';
+
             if (!empty($category['files']) && count($category['files']) > 3) {
-                echo '<hr>';
+                echo <<<eof
+<div class="gap-hr">
+    <hr>
+    <button class="btn btn-default btn-xs btn-dir-ext" data-status="open"><img src="/img/arrow-up.svg" alt="directory toggle"> <span>收拢</span></button>
+</div>
+eof;
             }
+
             echo '<div class="im_mainl row">';
         }
 

www/css/beauty.css

@@ -124,6 +124,10 @@ a:link{text-decoration:none}
 .lampshow .text_dark{color:#808080}
 .lampshow .text_dark a{color:#f4f7fd}
 
+.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}
+
 #qrimg{width:160px;height:160px;margin:0 auto 20px auto;background-color:#FFF;padding:5px;border:1px solid #EEE;border-radius:5px;overflow:hidden}
 
 .videoplayer{max-width:800px;margin:0 auto;text-align:center}

www/js/beauty.js

@@ -235,7 +235,9 @@ $('.dir_item').each(function(index, el) {
                     }, 100);
                 }
             }else {
-                console.warn('目录 %s 里没有任何图片', id);
+                //console.warn('目录 %s 里没有任何图片', id);
+                var imgHtml = '<img src="/img/default.png">';
+                $(el).find('.im_img_title').before(imgHtml);
             }
         }).fail(function(jqXHR, textStatus, errorThrown) {
             console.error('获取封面图失败，错误信息：' + errorThrown);
@@ -492,4 +494,21 @@ if ($('#my-player').length > 0 && typeof(videojs) != 'undefined') {
             clickedBtn.prop('disabled', false);
         }, 3000);
     });
-}
+}
+
+
+//目录收拢、展开
+$('.btn-dir-ext').click(function(evt) {
+    var status = $('.btn-dir-ext').attr('data-status');
+    if (status == 'open') {
+        $('.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('展开');
+    }else {
+        $('.btn-dir-ext').attr('data-status', 'open');
+        $('.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('收拢');
+    }
+});