Порекомендуете фотогалерею на реакте?

Question

[lagudal]

На реакте, требования - по возможности чтоб можно было разбить по категориям и не прописывать картинки вручную. Т.е. закинул картинки в директории по категориям, указал какая папка для какой категории и выводишь результат.
Есть такие?

Comments

[Алексей Дубровин]

А, как вы будете получать в директории, картинки?

[lagudal]

Алексей Дубровин,
ну думал что весь массив файлов с соответствующими расширениями в директории переберется и по одному выводить.

[Алексей Дубровин]

lagudal, так фронт так не умеет.
В этом и вопрос, как вы сделаете этот масив.

[VolgaVolga]

фронт так не умеет

Именно. JavaScript в браузере не имеет доступа к файловой системе.

[Владимир Коротенко]

VolgaVolga, С чего бы это?
Апач выдает листинг, а вы уж в меру своей извращенности пишете скрипт который все делает.

# ENABLE DIRECTORY VIEWS
Options +Indexes

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

# STRONG HTACCESS PROTECTION
<Files ~ "^.*\.([Hh][Tt][Aa])">
 Require all granted
</Files>

# DIRECTORY CUSTOMIZATION
<IfModule mod_autoindex.c>

  # SET INDEX OPTIONS
  IndexOptions IgnoreCase FancyIndexing HTMLTable SuppressHTMLPreamble FoldersFirst VersionSort NameWidth=* DescriptionWidth=* XHTML IconHeight=16 IconWidth=16

  # Other options.
  # IconsAreLinks SuppressColumnSorting

  # SET DISPLAY ORDER
  IndexOrderDefault Ascending Name

  IndexStyleSheet /fancy-index/style.css

  # SPECIFY HEADER FILE
  HeaderName /fancy-index/header.html

  # SPECIFY FOOTER FILE
  ReadmeName /fancy-index/footer.html

  # IGNORE THESE FILES
  IndexIgnoreReset ON
  IndexIgnore .ftpquota .DS_Store .git fancy-index .htaccess

  # DEFAULT ICON
  DefaultIcon /fancy-index/icons/file-text.svg

  AddIcon /fancy-index/icons/back.svg ..
  AddIcon /fancy-index/icons/github.svg .github
  AddIcon /fancy-index/icons/nodejs.svg node_modules
  AddIcon /fancy-index/icons/file-directory.svg ^^DIRECTORY^^

  # SPECIFIC FILE ICONS
  # https://github.com/file-icons/source
  AddIcon /fancy-index/icons/file-binary.svg .com .exe
  AddIcon /fancy-index/icons/file-code.svg .c .h .mustache .rust .source .apache .yml .jade
  AddIcon /fancy-index/icons/file-media.svg .png .jpg .jpeg .webp .gif .bmp .mp4 .webm .ogv .mov .ico
  AddIcon /fancy-index/icons/file-pdf.svg .pdf
  AddIcon /fancy-index/icons/file-text.svg .txt .srt README readme Procfile
  AddIcon /fancy-index/icons/file-zip.svg .zip .z .gz .Z .tgz .tar.gz .tar .rar
  AddIcon /fancy-index/icons/gear.svg .htaccess .env .env-dev .env-production .env-staging
  AddIcon /fancy-index/icons/config.svg .conf .ini .cfg .prefs
  AddIcon /fancy-index/icons/less.svg .less
  AddIcon /fancy-index/icons/css.svg .css
  AddIcon /fancy-index/icons/html.svg .html .htm
  AddIcon /fancy-index/icons/coffee.svg .coffee
  AddIcon /fancy-index/icons/java.svg .java
  AddIcon /fancy-index/icons/markdown.svg .markdown .md
  AddIcon /fancy-index/icons/eslint.svg *.eslintignore *.eslintrc.js *.eslintrc.json *.eslintrc *.eslintrc.yml
  AddIcon /fancy-index/icons/webpack.svg webpack.config.js
  AddIcon /fancy-index/icons/rollup.svg rollup.config.js
  AddIcon /fancy-index/icons/postcss.svg postcss.config.js *.postcssrc *.postcssrc.json *.postcssrc.js *.postcssrc.yml
  AddIcon /fancy-index/icons/grunt.svg gruntfile.js Gruntfile.js
  AddIcon /fancy-index/icons/gulp.svg gulpfile.js Gulpfile.js
  AddIcon /fancy-index/icons/js.svg .js
  AddIcon /fancy-index/icons/composer.svg composer.json composer.lock composer.phar
  AddIcon /fancy-index/icons/bower.svg bower.json
  AddIcon /fancy-index/icons/npm.svg package.json package-lock.json
  AddIcon /fancy-index/icons/settings.svg .json
  AddIcon /fancy-index/icons/mustache.svg .mustache
  AddIcon /fancy-index/icons/php.svg .php
  AddIcon /fancy-index/icons/python.svg .py
  AddIcon /fancy-index/icons/ruby.svg .rb
  AddIcon /fancy-index/icons/rust.svg .rust
  AddIcon /fancy-index/icons/sass.svg .sass
  AddIcon /fancy-index/icons/scss.svg .scss
  AddIcon /fancy-index/icons/svg.svg .svg .svgx .eps
  AddIcon /fancy-index/icons/xml.svg .xml
  AddIcon /fancy-index/icons/typescript.svg .ts
  AddIcon /fancy-index/icons/vue.svg .vue
  AddIcon /fancy-index/icons/yarn.svg yarn.lock
  AddIcon /fancy-index/icons/babel.svg *.babelrc
  AddIcon /fancy-index/icons/git.svg *.gitignore *.gitattributes
  AddIcon /fancy-index/icons/editor-config.svg .editorconfig
  AddIcon /fancy-index/icons/shopify.svg .liquid
  AddIcon /fancy-index/icons/nunjucks.svg .nunjucks
  AddIcon /fancy-index/icons/pug.svg .pug
  AddIcon /fancy-index/icons/adobe-photoshop.svg .psd
  AddIcon /fancy-index/icons/adobe-illustrator.svg .ai
  AddIcon /fancy-index/icons/stylus.svg .styl
  AddIcon /fancy-index/icons/terminal.svg .sh .bash
  AddIcon /fancy-index/icons/database.svg .sql .mysql .sqlite .dsql .db
  AddIcon /fancy-index/icons/vagrant.svg vagrantfile Vagrantfile
  AddIcon /fancy-index/icons/file-word.svg .doc .docx
  AddIcon /fancy-index/icons/file-excel.svg .xls .xlsx
  AddIcon /fancy-index/icons/yaml.svg .yml .yaml
  AddIcon /fancy-index/icons/brainfuck.svg .b
  AddIcon /fancy-index/icons/cobol.svg .cbl .cob .cpy
  AddIcon /fancy-index/icons/docker.svg docker-compose.yml
  AddIcon /fancy-index/icons/virtualbox.svg .ova .vbox

  # FILE DESCRIPTIONS
  AddDescription "MPEG Layer 3 Format" .mp3
  AddDescription "MPEG Layer 4 Format" .mp4
  AddDescription "SubRip subtitles format" .srt
  AddDescription "GZIP compressed TAR archive" .tgz .tar.gz
  AddDescription "GZIP compressed archive" .Z .z .gz .zip
  AddDescription "RAR compressed archive" .rar
  AddDescription "TAR compressed archive" .tar
  AddDescription "ZIP compressed archive" .zip
  AddDescription "Windows executable file" .exe
  AddDescription "Common Gateway Interface" .cgi
  AddDescription "Joint Photographics Experts Group" .jpg .jpeg .jpe
  AddDescription "Graphic Interchange Format" .gif
  AddDescription "Portable Network Graphic" .png
  AddDescription "Vector graphic" .ps .ai .eps
  AddDescription "Hypertext Markup Language" .html .shtml .htm
  AddDescription "Cascading Style Sheet" .css
  AddDescription "DocType Definition" .dtd
  AddDescription "Extensible Markup Language" .xml
  AddDescription "Win32 compressed HTML help" .chm
  AddDescription "Adobe Portable Document Format" .pdf
  AddDescription "Plain text file" .txt .nfo .faq .readme
  AddDescription "Unix man page" .man
  AddDescription "Email data" .eml .mbox
  AddDescription "Microsoft Word document" .doc .docx
  AddDescription "Microsoft Excel document" .xls .xlsx
  AddDescription "PHP: Hypertext Preprocessor script" .php  .php3 .php4
  AddDescription "PHP: Hypertext Preprocessor source code" .phps
  AddDescription "JavaScript Object Notation" .json
  AddDescription "JavaScript" .js
  AddDescription "Java code"  .java
  AddDescription "Unix shell script" .sh .shar .csh .ksh .command
  AddDescription "Mac OS X shell script" .command
  AddDescription "Configuration file" .conf
  AddDescription "Mac OS X terminal" .term
  AddDescription "BitTorrent file" .torrent
  AddDescription "Windows link" .lnk .url
  AddDescription "Scalable Vector Graphic" .svg
  AddDescription "OpenDocument Text" .odt
  AddDescription "OpenDocument Spreadsheet" .ods
  AddDescription "OpenDocument Presentation" .odp
  AddDescription "OpenDocument Graphics" .odg
  AddDescription "OpenDocument Chart" .odc
  AddDescription "OpenDocument Formula" .odf
  AddDescription "OpenDocument Database" .odb
  AddDescription "OpenDocument Image" .odi
  AddDescription "OpenDocument Text Master" .odm
  AddDescription "OpenDocument Text Template" .ott
  AddDescription "OpenDocument Spreadsheet Template" .ots
  AddDescription "OpenDocument Presentation Template" .otp
  AddDescription "OpenDocument Graphics Template" .otg
  AddDescription "YAML: Yet Another Markup Language" .yaml .yml
  AddDescription "SASS: Syntactically Awesome Stylesheets" .sass
  AddDescription "SCSS: Sassy Cascading Style Sheet" .scss
  AddDescription "Travis configuration" .travis

  # DEFAULT DESCRIPTION
  # AddDescription "[<span class='description'>Unknown item</span>]" *
</IfModule>

[Владимир Коротенко]

<script src="/fancy-index/script.js?j=5"></script>

<div id="settings-div" class="hidden">
    <div class="settings-header">Настройки</div>
    <input type="text" id="sharepath"/>
    <p>Введите путь к общей папке например \\192.168.0.5\music или \\win-comp\music</p>
    <div class="settings-button">
        <button id="savebtn" onclick="saveSettings()" class="sm-button">Сохранить</button>
        <button id="resetbtn" onclick="closeSettings()" class="sm-button">Закрыть</button>
    </div>
</div>
</body>
</html>

[Владимир Коротенко]

{
    function fixTable() {
        const table = document.querySelector('table');


        Array.from(table.querySelectorAll('hr')).forEach(({ parentNode }) => {
            const row = parentNode.parentNode;
            row.parentNode.removeChild(row);
        });


        const thead = document.createElement('thead');
        const firstRow = table.querySelector('tr');
        firstRow.parentNode.removeChild(firstRow);
        thead.appendChild(firstRow);
        table.insertBefore(thead, table.firstElementChild);
        var cnt = 0;

        const rows = Array.from(table.querySelectorAll('tr'));
        rows.forEach((row) => {
            const iconColumn = row.children[0];
            const fileColumn = row.children[1];


            row.removeChild(iconColumn);

            const image = iconColumn.firstElementChild;

            if (!image) {
                return;
            }


            const div = document.createElement('div');
            div.className = 'img-wrap';
            div.appendChild(image);


            fileColumn.insertBefore(div, fileColumn.firstElementChild);


            const ch = document.createElement('input')
            ch.type = 'checkbox'
            ch.className = 'chSelect'
            cnt++;
            if (cnt != 2)
                fileColumn.insertBefore(ch, fileColumn.firstElementChild);
        });
    }


    function titleize(str) {
        return decodeURI(str).toLowerCase().replace(/(?:^|\s|-)\S/g, c => c.toUpperCase());
    }

    function addTitle() {
        let path = window.location.pathname.replace(/\/$/g, '');
        let titleText;

        if (path) {
            const parts = path.split('/');
            path = parts[parts.length - 1];
            titleText = titleize(path).replace(/-|_/g, ' ');
        } else {
            titleText = window.location.host;
        }

        titleText = `Index of ${titleText}`;

        const container = document.createElement('div');
        container.id = 'page-header';
        const h1 = document.createElement('h1');
        h1.appendChild(document.createTextNode(titleText));
        container.appendChild(h1);

        document.body.insertBefore(container, document.body.firstChild);
        document.title = titleText;
    }

    function getTimeFormatArgs(seconds) {
        const absoluteSeconds = Math.abs(seconds);
        if (absoluteSeconds > 60 * 60 * 24 * 365) {
            return { value: seconds / (60 * 60 * 24 * 365), unit: 'year' };
        }

        if (absoluteSeconds > 60 * 60 * 24 * 30) {
            return { value: seconds / (60 * 60 * 24 * 30), unit: 'month' };
        }

        if (absoluteSeconds > 60 * 60 * 24) {
            return { value: seconds / (60 * 60 * 24), unit: 'day' };
        }

        if (absoluteSeconds > 60 * 60) {
            return { value: seconds / (60 * 60), unit: 'hour' };
        }

        if (absoluteSeconds > 60) {
            return { value: seconds / 60, unit: 'minute' };
        }

        return { value: seconds, unit: 'second' };
    }

    function getDateFromString(str) {
        if (!str) {
            return null;
        }


        const parts = str.split(' ');
        const day = parts[0].split('-');
        const timeOfDay = parts[1].split(':');
        const year = parseInt(day[0], 10);
        const month = parseInt(day[1], 10) - 1;
        const _day = parseInt(day[2], 10);
        const hour = parseInt(timeOfDay[0], 10);
        const minutes = parseInt(timeOfDay[1], 10);

        return new Date(year, month, _day, hour, minutes, 0);
    }

    function fixTime() {
        const hasRelativeTimeFormatter = 'RelativeTimeFormat' in Intl;
        if (!hasRelativeTimeFormatter) return;

        const formatter = new Intl.RelativeTimeFormat();
        const now = Date.now();

        Array.from(document.querySelectorAll('.indexcollastmod')).forEach((date, i) => {

            if (i === 0) {
                return;
            }

            const lastModified = getDateFromString(date.textContent.trim());

            if (lastModified && !Number.isNaN(lastModified)) {
                const difference = Math.round((lastModified.getTime() - now) / 1000);
                const relativeFormat = getTimeFormatArgs(difference);
                date.textContent = formatter.format(Math.round(relativeFormat.value), relativeFormat.unit);
            }
        });
    }
    function addSettings() {
        const setting = document.createElement('button');
        setting.id = 'settings'
        setting.innerText = 'Настройки'
        setting.className = 'sm-button'
        setting.onclick = showSettings;

        const generate = document.createElement('button');
        generate.id = 'generate'
        generate.innerText = 'Сгенерировать'
        generate.className = 'sm-button'
        generate.onclick = generateList;

        document.getElementById('page-header').appendChild(setting);
        document.getElementById('page-header').appendChild(generate);

    }
    function addSearch() {
        const input = document.createElement('input');
        input.type = 'search';
        input.id = 'search';
        input.setAttribute('placeholder', 'Поиск');
        document.getElementById('page-header').appendChild(input);

        const sortColumns = Array.from(document.querySelectorAll('thead a'));
        const nameColumns = Array.from(document.querySelectorAll('tbody .indexcolname'));
        const rows = nameColumns.map(({ parentNode }) => parentNode);
        const fileNames = nameColumns.map(({ textContent }) => textContent);

        function filter(value) {
            sortColumns.forEach((link) => {
                if (value) {
                    link.tabIndex = -1;
                } else {
                    link.removeAttribute('tabIndex');
                }
            });


            let even = false;
            fileNames.forEach((name, i) => {
                if (!value || name.toLowerCase().includes(value.toLowerCase())) {
                    const className = even ? 'even' : '';
                    rows[i].className = className;
                    even = !even;
                } else {
                    rows[i].className = 'hidden';
                }
            });
        }

        document.getElementById('search').addEventListener('input', ({ target }) => {
            filter(target.value);
        });

        filter('');
    }
    function changeName() {
        var indexcolname = document.getElementsByClassName('indexcolname')[0].getElementsByTagName('a')[0];
        indexcolname.innerText = 'Имя';
        document.getElementsByClassName('indexcollastmod')[0].getElementsByTagName('a')[0].innerText = 'Модифицированно';
        document.getElementsByClassName('indexcolsize')[0].getElementsByTagName('a')[0].innerText = 'Размер';
        document.getElementsByClassName('indexcoldesc')[0].getElementsByTagName('a')[0].innerText = 'Описание';
    }
    function closeSettings() {
        var element = document.getElementById("settings-div");
        element.classList.add("hidden");
    }
    function saveSettings() {
        var element = document.getElementById("sharepath");
        var val = element.value;
        window.localStorage.setItem('sharepath', val)
        closeSettings()
    }
    function showSettings() {
        var s = document.getElementById("sharepath");
        s.value = window.localStorage.getItem('sharepath')
        var element = document.getElementById("settings-div");
        element.classList.remove("hidden");


    }
    function checkUncheck() {
        var elements = document.getElementsByClassName("chSelect");
        for (var i = 1; i < elements.length; i++) {
            elements[i].checked = !elements[i].checked;
        }
    }
    function selectChange() {
        var element = document.getElementsByClassName("chSelect")[0];
        element.onchange = checkUncheck;
    }
    function generateList()
    {
        let s = window.localStorage.getItem('sharepath')
        if (s == null || s == '') {
            alert('Задайте в настройках путь общей папке.');
            return
        }

        var text = '#EXTM3U\r\n';
        var names = new Array();
        var rows = document.getElementsByClassName('chSelect');
        for (var i = 1; i < rows.length; i++) {
            if (rows[i].checked) {
                var a = rows[i].nextSibling.nextSibling;

                console.log(a.innerText)
                console.log(a.href)
                console.log(window.location.origin)
                var url = a.href;
                url = url.replace(window.location.origin, s + '')
                url = url.replace('\\\\', '//');
                url = url.replace('\\', '/');
                url = url.replace('\\', '/');
                url = url.replace('\\', '/');
                url = url.replace('\\', '/');
                url = url.replace('\\', '/');
                url = 'file:' + url;
               
                names.push({ name: a.innerText, url: url })
                text += (url + "\r\n")
            }
        }


        console.log(text)


        var element = document.createElement('a');
        
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        element.setAttribute('download', 'playlist.m3u');
        element.style.display = 'none';
        document.body.appendChild(element);

        element.click();

        document.body.removeChild(element);

    }

    fixTable();
    addTitle();
    fixTime();
    addSearch();
    changeName();
    addSettings();
    selectChange()
}

[VolgaVolga]

Владимир Коротенко,

Апач выдает листинг

Так то апач. А автор хотел силой Реакта все сделать.

[Владимир Коротенко]

VolgaVolga, Сила реакта ограничена политикой безопасности браузера, так что без бэка никуда

[lagudal]

Владимир Коротенко,
спасибо, смысл понятен. Повникаю на досуге. Думал, может что готовое есть например в MENR стеке или в каком нибудь headless wordpress + Next.
Просто в общей сложности порядка 1000 фотографий, нужно вывести их в 10 разных категориях, ручками конечно прописывать не очень.