Driftkort | Dokument / Nedladdningar

Detta är koden som hämtar datat från databasen och visar det i front-end på artikeln.

<?php 
$files = rwmb_meta('ladda_upp_filer');

// Säkerställ att $files är en array innan vi fortsätter
if (is_array($files)) {
    // Sortera filerna alfabetiskt efter deras namn
    usort($files, function($a, $b) {
        return strcmp($a['name'], $b['name']);
    });
}

// Funktion för att hämta rätt ikon baserat på filens ändelse
function get_file_icon($extension) {
    switch(strtolower($extension)) {
        case 'pdf':
            return '<i class="fa fa-file-pdf-o"></i>';
        case 'doc':
        case 'docx':
            return '<i class="fa fa-file-word-o"></i>';
        case 'xls':
        case 'xlsx':
            return '<i class="fa fa-file-excel-o"></i>';
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            return '<i class="fa fa-file-image-o"></i>';
        case 'zip':
        case 'rar':
            return '<i class="fa fa-file-archive-o"></i>';
        case 'mp3':
        case 'wav':
            return '<i class="fa fa-file-audio-o"></i>';
        case 'mp4':
        case 'mov':
        case 'avi':
            return '<i class="fa fa-file-video-o"></i>';
        default:
            return '<i class="fa fa-file-o"></i>';
    }
}
?>

<!-- Inkludera Font Awesome för filikoner -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Anpassade stilar för att ta bort understrykning och justera ikon -->
<style>
    #fileList li {
        list-style: none; /* Ta bort punktlistor */
        margin-bottom: 10px; /* Lägg till mellanrum mellan listobjekt */
    }

    #fileList a {
        text-decoration: none; /* Ta bort understrykning */
        display: inline-flex; /* Justera objekt horisontellt */
        align-items: center; /* Justera ikon och text vertikalt */
    }

    #fileList i {
        margin-right: 8px; /* Avstånd mellan ikon och text */
    }

    #fileList a.fileTitle, #fileList a.fileName {
        vertical-align: middle; /* Justera ikonen med mitten av texten */
        word-wrap: break-word; /* Se till att långa ord bryts till nästa rad */
    }
</style>

<button id="toggleDisplay">Växla till filnamn</button>

<ul id="fileList">
    <?php if (is_array($files)) : ?>
        <?php foreach ($files as $file) : ?>
            <li>
                <?php 
                $file_url = $file['url'];
                $file_name = $file['name'];
                $file_title = $file['title'];
                $file_extension = pathinfo($file_url, PATHINFO_EXTENSION);
                $file_icon = get_file_icon($file_extension); // Hämta ikonen baserat på filändelsen
                ?>
                <a href="<?= $file_url; ?>" class="fileTitle"><?= $file_icon . ' ' . $file_title; ?> (<?= $file_extension; ?>)</a>
                <a href="<?= $file_url; ?>" class="fileName" style="display: none;"><?= $file_icon . ' ' . $file_name; ?></a>
            </li>
        <?php endforeach; ?>
    <?php else : ?>
        <li>Inga filer hittades.</li>
    <?php endif; ?>
</ul>

<script>
    document.getElementById('toggleDisplay').addEventListener('click', function() {
        var fileTitles = document.querySelectorAll('.fileTitle');
        var fileNames = document.querySelectorAll('.fileName');
        var showFileNames = fileNames[0].style.display === 'none';
        var button = document.getElementById('toggleDisplay');
        
        fileTitles.forEach(function(fileTitle) {
            fileTitle.style.display = showFileNames ? 'none' : 'inline';
        });
        
        fileNames.forEach(function(fileName) {
            fileName.style.display = showFileNames ? 'inline' : 'none';
        });
        
        button.textContent = showFileNames ? 'Växla till titel' : 'Växla till filnamn';
    });
</script>