Оформление листинга файлов на php в стиле MacOS: функция glob

Сообщение **mihas** » 11 фев 2017, 15:18

Для более продвинутого оформления листинга файлов, чем использование директивы Options +Indexes в .htaccess, можно использовать удобную функцию php - glob. Захотелось сделать как на маке чередование подсветки строк листинга, вот как это реализовано на примере.
Создадим стиль css для листинга, масштабируемый естественно, с резиновой таблицей, чтобы и на iPhone хорошо смотрелось, примерно такой:

Код: Выделить всё

<style>
BODY {FONT-FAMILY: Verdana, Arial, Helvetica, Geneva, Sans-Serif; FONT-SIZE: 10pt; -webkit-text-size-adjust: 100%; }
#table_listing {display: table; border:0px; border-spacing:0px; max-width:99%; width:95%; padding:0px; font-size:9pt; color: #002500; }
#table_listing a {color: #002500 !important;}
.row {display: table-row; border:0; border-spacing:0; padding:0; }
.cell_70L { display: table-cell; width:70%; text-align:left; vertical-align:middle; padding:2px; height:16px; word-break:break-all; }
.cell_24L { display: table-cell; width:24%; text-align:left; vertical-align:middle; padding:2px; height:16px; }
.cell_5L { display: table-cell; width:5%; text-align:right; vertical-align:middle; padding:2px; height:16px; }
.cell_1L { display: table-cell; width:1%; text-align:center; vertical-align:middle; padding:2px; height:16px; }
.cell_chet0 {background-color: rgba(204,204,204,0);}
.cell_chet1 {background-color: rgba(64,64,64,0.06);}
@media (max-device-width: 736px), (max-width: 752px) {
#table_listing {width:100%; max-width:100%;}
}
</style>

И собственно сам скрипт листинга поместим в нужное нам место индексного файла внутри тегов <body>:

Код: Выделить всё

<?php
echo '<div id="table_listing">';
$chet = 0;
foreach (glob("*.*") as $filename) {
	$filesr = filesize($filename)/1024;
	$kbmb = "Kb"; $prec = 1;
	if ($filesr >= 1024) {$filesr = $filesr/1024; $kbmb = "Mb";}
	if ($filesr >= 10) {$prec = 0;}
	if ($filename != "index.php" && $filename != "HEADER.html" && $filename != "README.php") {
		if($chet==0) {$chet=1;} else {$chet=0;}
		$ico = substr($filename, -3, 3);
    echo '<div class="row"><span class="cell_1L cell_chet' . $chet . '"><a href="' . $filename . '"><img src="ico/' . mb_strtolower($ico) . '.png" /></a></span><span class="cell_70L cell_chet' . $chet . '"><a href="' . $filename . '">' . $filename . '</a></span><span class="cell_24L cell_chet' . $chet . '">' . date ("Y-m-d H:i", filemtime($filename)) . '</span><span class="cell_5L cell_chet' . $chet . '">' . round($filesr, $prec) . $kbmb . '</span></div>';
	}
}
echo '</div>';
?>

Условие if ($filename... позволяет не выводить в листинг служебные файлы, указанные в нем, типа самого файла index.php. Для красоты понадобятся маленькие иконки или значки типов файлов, я надергал на маке и на пц что показалось покрасивее, иконки в аттаче. Папку ico надо положить соответственно в каталог, для которого делаем листинг.

ico.rar

very small icons files types, очень маленькие значки типов файлов, 16x16 px, с прозрачностями и полупрозрачностями png, 24 шт.

• 15.42 КБ • 349 скачиваний

: увеличенные preview для значков типов файлов; • 13.67 КБ • 8581 просмотр

В моем варианте ищется не строго расширение типа файла, которое может быть не только трехзначным, но и четырех-, типа xlsx. Этот скрипт находит три последних символа, для примера xlsx находит lsx. Значки названы соответственно. mb_strtolower приводит все расширения к нижнему регистру, чтобы не плодить одни и те же иконки дважды.
Переменная $chet управляет чересстрочным чередованием подсветки фона строчек листинга, чтобы выглядело, как список файлов на маке.

Сообщение **mihas** » 24 дек 2022, 00:35

Если добавить по коду из прошлого поста после png его геометрический размер на странице - width="16" height="16" - то можно взять иконки поновее, 4-кратного увеличения, под все современные мониторы.

Код: Выделить всё

Найти:
<img src="ico/' . mb_strtolower($ico) . '.png" /></a>

Заменить:
<img src="ico/' . mb_strtolower($ico) . '.png" width="16" height="16" /></a>

Форум колористов и полиграфистов

Колориметрия и печать: технологии