improve dir ext and close

themes/beauty/views/layout/main.php

@@ -100,6 +100,7 @@ require_once __DIR__ . '/../../../../plugins/Html.php';
     <script src="/js/fubox.min.js"></script>
     <script src="/js/qrcode.min.js"></script>
     <script src="/js/video.min.js"></script>
+    <script src="/js/js.cookie.min.js"></script>
     <script src="/js/beauty.js?v<?= Html::getStaticFileVersion('beauty.js', 'js') ?>"></script>
     <script>
         <?php if (empty(FSC::$app['config']['enableSmallImage']) || FSC::$app['config']['enableSmallImage'] === 'false') {

themes/beauty/views/layout/player.php

@@ -57,6 +57,7 @@ require_once __DIR__ . '/../../../../plugins/Html.php';
     <script src="/js/bootstrap.min.js"></script>
     <script src="/js/qrcode.min.js"></script>
     <script src="/js/video.min.js"></script>
+    <script src="/js/js.cookie.min.js"></script>
     <script src="/js/beauty.js?v<?= Html::getStaticFileVersion('beauty.js', 'js') ?>"></script>
     <?php echo Html::getGACode(); ?>
 </body>

themes/beauty/views/site/index.php

@@ -6,6 +6,7 @@ $imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config
 $videoExts = !empty(FSC::$app['config']['supportedVideoExts']) ? FSC::$app['config']['supportedVideoExts'] : array('mp4', 'mov', 'm3u8');
 $supportedExts = array_merge($imgExts, $videoExts);
 
+$dir_ext_status = !empty($_COOKIE['dir_ext_status']) ? $_COOKIE['dir_ext_status'] : 'opened';
 ?><!-- 顶部导航栏模块 -->
 <nav class="navbar navbar-default navbar-fixed-top navbarJS">
     <div class="container-fluid">
@@ -147,9 +148,10 @@ eof;
     <div class="modal-body text_dark markdown-body">{$viewData['htmlCateReadme']}</div>
 eof;
         }
-    ?>
 
-    <div class="im_mainl row">
+    $dirHideClass = $dir_ext_status == 'closed' ? 'hide' : '';
+    ?>
+    <div class="im_mainl row <?php echo $dirHideClass; ?>">
         <?php
         if (!empty($category['directories'])) {        //两级目录支持
             $index = 0;
@@ -220,10 +222,12 @@ eof;
             echo '</div>';
 
             if (!empty($category['files']) && count($category['files']) > 3) {
+                $arrowImg = $dir_ext_status == 'opened' ? 'arrow-up.svg' : 'arrow-down.svg';
+                $btnTxt = $dir_ext_status == 'opened' ? '收拢' : '展开';
                 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>
+    <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>
 </div>
 eof;
             }

www/js/beauty.js

@@ -499,16 +499,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');
-    if (status == 'open') {
+    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('展开');
+
+        Cookies.set(cookieKey, 'closed', { expires: 1 });
     }else {
-        $('.btn-dir-ext').attr('data-status', 'open');
+        $('.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('收拢');
+
+        Cookies.set(cookieKey, 'opened', { expires: 1 });
     }
 });

www/js/js.cookie.min.js

@@ -1,2 +1,2 @@
-/*! js-cookie v3.0.0-rc.1 | MIT */
+/*! js-cookie v3.0.5 | MIT */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,function(){var n=e.Cookies,r=e.Cookies=t();r.noConflict=function(){return e.Cookies=n,r}}())}(this,function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)e[r]=n[r]}return e}var t={read:function(e){return e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}};return function n(r,o){function i(t,n,i){if("undefined"!=typeof document){"number"==typeof(i=e({},o,i)).expires&&(i.expires=new Date(Date.now()+864e5*i.expires)),i.expires&&(i.expires=i.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape),n=r.write(n,t);var c="";for(var u in i)i[u]&&(c+="; "+u,!0!==i[u]&&(c+="="+i[u].split(";")[0]));return document.cookie=t+"="+n+c}}return Object.create({set:i,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var n=document.cookie?document.cookie.split("; "):[],o={},i=0;i<n.length;i++){var c=n[i].split("="),u=c.slice(1).join("=");'"'===u[0]&&(u=u.slice(1,-1));try{var f=t.read(c[0]);if(o[f]=r.read(u,f),e===f)break}catch(e){}}return e?o[e]:o}},remove:function(t,n){i(t,"",e({},n,{expires:-1}))},withAttributes:function(t){return n(this.converter,e({},this.attributes,t))},withConverter:function(t){return n(e({},this.converter,t),this.attributes)}},{attributes:{value:Object.freeze(o)},converter:{value:Object.freeze(r)}})}(t,{path:"/"})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self,function(){var n=e.Cookies,o=e.Cookies=t();o.noConflict=function(){return e.Cookies=n,o}}())}(this,(function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)e[o]=n[o]}return e}var t=function t(n,o){function r(t,r,i){if("undefined"!=typeof document){"number"==typeof(i=e({},o,i)).expires&&(i.expires=new Date(Date.now()+864e5*i.expires)),i.expires&&(i.expires=i.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var c="";for(var u in i)i[u]&&(c+="; "+u,!0!==i[u]&&(c+="="+i[u].split(";")[0]));return document.cookie=t+"="+n.write(r,t)+c}}return Object.create({set:r,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var t=document.cookie?document.cookie.split("; "):[],o={},r=0;r<t.length;r++){var i=t[r].split("="),c=i.slice(1).join("=");try{var u=decodeURIComponent(i[0]);if(o[u]=n.read(c,u),e===u)break}catch(e){}}return e?o[e]:o}},remove:function(t,n){r(t,"",e({},n,{expires:-1}))},withAttributes:function(n){return t(this.converter,e({},this.attributes,n))},withConverter:function(n){return t(e({},this.converter,n),this.attributes)}},{attributes:{value:Object.freeze(o)},converter:{value:Object.freeze(n)}})}({read:function(e){return'"'===e[0]&&(e=e.slice(1,-1)),e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}},{path:"/"});return t}));