filesite
/
machete
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

theme google image support 1 dir-level, add blueimp-gallery support

master
filesite 3 years ago
parent
80bdb2de9d
commit
a71c4165e2
22 changed files with 169 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      conf/app.php
  2. 3
      themes/googleimage/controller/SiteController.php
  3. 46
      themes/googleimage/views/layout/main.php
  4. 25
      themes/googleimage/views/site/index.php
  5. 2
      www/css/blueimp-gallery.min.css
  6. 2
      www/css/googleimage.css
  7. BIN
      www/img/close.png
  8. 4
      www/img/close.svg
  9. BIN
      www/img/error.png
  10. 6
      www/img/error.svg
  11. BIN
      www/img/loading.gif
  12. 52
      www/img/loading.svg
  13. BIN
      www/img/next.png
  14. 4
      www/img/next.svg
  15. BIN
      www/img/play-pause.png
  16. 6
      www/img/play-pause.svg
  17. BIN
      www/img/prev.png
  18. 4
      www/img/prev.svg
  19. BIN
      www/img/video-play.png
  20. 5
      www/img/video-play.svg
  21. 2
      www/js/blueimp-gallery.min.js
  22. 17
      www/js/googleimage.js

2
conf/app.php
Unescape View File

@ -10,7 +10,7 @@ return array(
//'theme' => 'manual', //name of theme which is enabled //'theme' => 'manual', //name of theme which is enabled
//in developing //in developing
'content_directory' => 'dogs/', //directory of contents in /www/ 'content_directory' => 'dogs_2/', //directory of contents in /www/
'theme' => 'googleimage', //name of theme which is enabled 'theme' => 'googleimage', //name of theme which is enabled
'default_layout' => 'main', //default layout 'default_layout' => 'main', //default layout

3
themes/googleimage/controller/SiteController.php
Unescape View File

@ -8,8 +8,6 @@ require_once __DIR__ . '/../../../plugins/Parsedown.php';
Class SiteController extends Controller { Class SiteController extends Controller {
public function actionIndex() { public function actionIndex() {
$cateId = $this->get('id', '');
//获取数据 //获取数据
$scanner = new DirScanner(); $scanner = new DirScanner();
$scanner->setWebRoot(FSC::$app['config']['content_directory']); $scanner->setWebRoot(FSC::$app['config']['content_directory']);
@ -18,6 +16,7 @@ Class SiteController extends Controller {
//获取目录 //获取目录
$menus = $scanner->getMenus(); $menus = $scanner->getMenus();
$cateId = $this->get('id', $menus[0]['id']);
$titles = []; $titles = [];
$html = ''; $html = '';

46
themes/googleimage/views/layout/main.php
Unescape View File

@ -7,8 +7,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link href="/css/main.css?v.1.1" rel="stylesheet"> <link href="/css/main.css?v.1.1" rel="stylesheet">
<!--for theme googleimage--> <!--for theme googleimage-->
<link href="/css/blueimp-gallery.min.css" rel="stylesheet">
<link href="/css/github-markdown-dark.css" rel="stylesheet"> <link href="/css/github-markdown-dark.css" rel="stylesheet">
<link href="/css/googleimage.css?v<?=time()?>" rel="stylesheet"> <link href="/css/googleimage.css?v<?=time()?>" rel="stylesheet">
<style>
<?php if (!empty(FSC::$app['config']['googleimage']['imageHeight'])) { ?>
.img-item img{height: <?php echo FSC::$app['config']['googleimage']['imageHeight']; ?>px;}
<?php } ?>
</style>
</head> </head>
<body> <body>
@ -36,10 +42,50 @@ include_once $viewFile;
&copy;FSC 2022 - execute time: {page_time_cost} ms &copy;FSC 2022 - execute time: {page_time_cost} ms
</div> </div>
<!-- The Gallery as lightbox dialog, should be a document body child element -->
<div
id="blueimp-gallery"
class="blueimp-gallery blueimp-gallery-controls"
aria-label="image gallery"
aria-modal="true"
role="dialog"
>
<div class="slides" aria-live="polite"></div>
<h3 class="title"></h3>
<a
class="prev"
aria-controls="blueimp-gallery"
aria-label="previous slide"
aria-keyshortcuts="ArrowLeft"
></a>
<a
class="next"
aria-controls="blueimp-gallery"
aria-label="next slide"
aria-keyshortcuts="ArrowRight"
></a>
<a
class="close"
aria-controls="blueimp-gallery"
aria-label="close"
aria-keyshortcuts="Escape"
></a>
<a
class="play-pause"
aria-controls="blueimp-gallery"
aria-label="play slideshow"
aria-keyshortcuts="Space"
aria-pressed="false"
role="button"
></a>
<ol class="indicator"></ol>
</div>
<script src="/js/jquery-3.6.0.min.js"></script> <script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/js.cookie.min.js"></script> <script src="/js/js.cookie.min.js"></script>
<script src="/js/main.js?v.1.0"></script> <script src="/js/main.js?v.1.0"></script>
<!--for theme googleimage--> <!--for theme googleimage-->
<script src="/js/blueimp-gallery.min.js"></script>
<script src="/js/googleimage.js?v<?=time()?>"></script> <script src="/js/googleimage.js?v<?=time()?>"></script>
</body> </body>
</html> </html>

25
themes/googleimage/views/site/index.php
Unescape View File

@ -1,6 +1,3 @@
<style>
.img-item img{height: <?php echo FSC::$app['config']['googleimage']['imageHeight']; ?>px;}
</style>
<div class="menu"> <div class="menu">
<?php <?php
$selectedId = $viewData['cateId']; $selectedId = $viewData['cateId'];
@ -22,7 +19,7 @@ eof;
$imgExts = ['jpg', 'jpeg', 'png', 'gif']; $imgExts = ['jpg', 'jpeg', 'png', 'gif'];
$category = $viewData['scanResults'][$selectedId]; $category = $viewData['scanResults'][$selectedId];
if (!empty($category['directories'])) { if (!empty($category['directories'])) { //两级目录支持
foreach($category['directories'] as $dir) { foreach($category['directories'] as $dir) {
echo <<<eof echo <<<eof
<a href="{$dir['path']}" class="img-item"> <a href="{$dir['path']}" class="img-item">
@ -34,20 +31,34 @@ eof;
eof; eof;
}else if (!empty($dir['files'])) { }else if (!empty($dir['files'])) {
$first_img = array_shift($dir['files']); $first_img = array_shift($dir['files']);
echo <<<eof if (!in_array($first_img['extension'], $imgExts)) {
foreach($dir['files'] as $file) {
if (in_array($file['extension'], $imgExts)) {
$first_img = $file;
break;
}
}
}
if (in_array($first_img['extension'], $imgExts)) {
echo <<<eof
<img src="{$first_img['path']}" alt="{$first_img['filename']}"> <img src="{$first_img['path']}" alt="{$first_img['filename']}">
eof; eof;
}
} }
echo <<<eof echo <<<eof
<strong>{$dir['directory']}</strong> <strong>{$dir['directory']}</strong>
</a> </a>
eof; eof;
} }
}else if (!empty($category['files'])) { }else if (!empty($category['files'])) { //一级目录支持
foreach($category['files'] as $file) { foreach($category['files'] as $file) {
if (!in_array($file['extension'], $imgExts)) {continue;} if (!in_array($file['extension'], $imgExts)) {continue;}
echo <<<eof echo <<<eof
<img src="{$file['path']}" alt="{$file['filename']}"> <a href="{$file['path']}" class="img-item img-preview" target="_blank">
<img src="{$file['path']}" alt="{$file['filename']}">
</a>
eof; eof;
} }
} }

2
www/css/blueimp-gallery.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
www/css/googleimage.css
Unescape View File

@ -20,7 +20,7 @@ a{color: #aaadb2;text-decoration: none}
.modal-body{padding: 10px;background-color: inherit;} .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} .content{padding: 20px 10px}
.img-item{display: inline-block;margin-left: 10px;margin-right: 10px;margin-bottom: 20px;} .img-item{display: inline-block;margin-left: 10px;margin-right: 10px;margin-bottom: 20px;cursor: pointer;}
.img-item img{height: 180px;object-fit: cover;} .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;} .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;}

BIN
www/img/close.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 B

4
www/img/close.svg
Unescape View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
<path d="M1 5 L5 1 L10 6 L15 1 L19 5 L14 10 L19 15 L15 19 L10 14 L5 19 L1 15 L6 10 Z" stroke="#fff" fill="#000" fill-opacity="0.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 258 B

BIN
www/img/error.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

6
www/img/error.svg
Unescape View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64">
<circle cx="32" cy="32" r="25" stroke="red" stroke-width="7" fill="#fff" fill-opacity="0.2"/>
<rect x="28" y="17" width="8" height="30" fill="red" transform="rotate(45, 32, 32)"/>
<rect x="28" y="17" width="8" height="30" fill="red" transform="rotate(135, 32, 32)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 394 B

BIN
www/img/loading.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

52
www/img/loading.svg
Unescape View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="64px" height="64px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="rotate(0 50 50)">
<rect x="47" y="2" rx="3" ry="3.6" width="6" height="24" fill="#bdbdbd">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.625s" begin="-0.5729166666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(30 50 50)">
<rect x="47" y="2" rx="3" ry="3.6" width="6" height="24" fill="#bdbdbd">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.625s" begin="-0.5208333333333333s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(60 50 50)">
<rect x="47" y="2" rx="3" ry="3.6" width="6" height="24" fill="#bdbdbd">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.625s" begin="-0.46874999999999994s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(90 50 50)">
<rect x="47" y="2" rx="3" ry="3.6" width="6" height="24" fill="#bdbdbd">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.625s" begin="-0.41666666666666663s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(120 50 50)">
<rect x="47" y="2" rx="3" ry="3.6" width="6" height="24" fill="#bdbdbd">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.625s" begin="-0.36458333333333326s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(150 50 50)">
<rect x="47" y="2" rx="3" ry="3.6" width="6" height="24" fill="#bdbdbd">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.625s" begin="-0.31249999999999994s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(180 50 50)">
<rect x="47" y="2" rx="3" ry="3.6" width="6" height="24" fill="#bdbdbd">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.625s" begin="-0.26041666666666663s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(210 50 50)">
<rect x="47" y="2" rx="3" ry="3.6" width="6" height="24" fill="#bdbdbd">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.625s" begin="-0.20833333333333331s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(240 50 50)">
<rect x="47" y="2" rx="3" ry="3.6" width="6" height="24" fill="#bdbdbd">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.625s" begin="-0.15624999999999997s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(270 50 50)">
<rect x="47" y="2" rx="3" ry="3.6" width="6" height="24" fill="#bdbdbd">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.625s" begin="-0.10416666666666666s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(300 50 50)">
<rect x="47" y="2" rx="3" ry="3.6" width="6" height="24" fill="#bdbdbd">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.625s" begin="-0.05208333333333333s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(330 50 50)">
<rect x="47" y="2" rx="3" ry="3.6" width="6" height="24" fill="#bdbdbd">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="0.625s" begin="0s" repeatCount="indefinite"></animate>
</rect>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
www/img/next.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 B

4
www/img/next.svg
Unescape View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="20">
<path d="M0 0 V2 L6 10 L0 18 V20 L8 10 Z" stroke="#fff" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 194 B

BIN
www/img/play-pause.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 432 B

6
www/img/play-pause.svg
Unescape View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="30">
<polygon points="5,2 5,28 27,15" stroke="#fff" stroke-width="2" fill="#000" fill-opacity="0.5"/>
<rect x="35" y="3" width="8" height="24" stroke="#fff" stroke-width="2" fill="#000" fill-opacity="0.5"/>
<rect x="47" y="3" width="8" height="24" stroke="#fff" stroke-width="2" fill="#000" fill-opacity="0.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 434 B

BIN
www/img/prev.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 B

4
www/img/prev.svg
Unescape View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="20">
<path d="M8 0 V2 L2 10 L8 18 V20 L0 10 Z" stroke="#fff" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 194 B

BIN
www/img/video-play.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 993 B

5
www/img/video-play.svg
Unescape View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64">
<circle cx="32" cy="32" r="25" stroke="#fff" stroke-width="7" fill="#000" fill-opacity="0.2"/>
<polygon points="26,22 26,42 43,32" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 271 B

2
www/js/blueimp-gallery.min.js vendored
View File

File diff suppressed because one or more lines are too long

17
www/js/googleimage.js
Unescape View File

@ -19,4 +19,21 @@
} }
}); });
//init photo gallery
if ($('.img-preview').length > 0) {
var imgContainer = $('.content').get(0);
var links = imgContainer.getElementsByTagName('a');
$('.img-preview').click(function(evt) {
var target = evt.target;
var link = target.src ? target.parentNode : target;
var options = {
index: link,
event: evt,
container: '#blueimp-gallery'
};
blueimp.Gallery(links, options);
});
}
})(); })();
Write Preview
Loading…
Cancel
Save