{"id":86,"date":"2024-10-22T12:45:02","date_gmt":"2024-10-22T10:45:02","guid":{"rendered":"https:\/\/blog.hwr-berlin.de\/data-lib\/?page_id=86"},"modified":"2024-11-06T12:57:14","modified_gmt":"2024-11-06T11:57:14","slug":"landingpage","status":"publish","type":"page","link":"https:\/\/blog.hwr-berlin.de\/data-lib\/","title":{"rendered":"LandingPage"},"content":{"rendered":"\n<div id=\"landingbox\" class=\"wp-block-group marquee has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60)\">\n<div class=\"wp-block-columns are-vertically-aligned-center marquee-text is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-cb46ffcb wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/blog.hwr-berlin.de\/data-lib\/wp-content\/uploads_data-lib\/2024\/10\/ic_image_red.svg\" alt=\"\" class=\"wp-image-130\" style=\"width:75px\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/blog.hwr-berlin.de\/data-lib\/wp-content\/uploads_data-lib\/2024\/10\/ic_music_red.svg\" alt=\"\" class=\"wp-image-131\" style=\"width:75px\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-cb46ffcb wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/blog.hwr-berlin.de\/data-lib\/wp-content\/uploads_data-lib\/2024\/10\/ic_text-file_red.svg\" alt=\"\" class=\"wp-image-132\" style=\"width:75px\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized wp-container-content-9cfa9a5a\"><img decoding=\"async\" src=\"https:\/\/blog.hwr-berlin.de\/data-lib\/wp-content\/uploads_data-lib\/2024\/10\/ic_video_red.svg\" alt=\"\" class=\"wp-image-133\" style=\"width:75px\"\/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<style>\n.results img {\n    height: 100px;\n    width: auto;\n    max-width: 100%;\n}\n\n#media-table {\n    width: 100%;\n    border-collapse: collapse;\n    text-align: left;\n    margin-top: 20px;\n}\n\n#media-table th, #media-table td {\n    padding: 10px;\n    border: 0px solid #ddd;\n}\n\n#media-table tr:nth-child(even) {\n    background-color: #e0e0e0;\n}\n\n#media-table tr:nth-child(odd) {\n    background: rgb(215,215,215);\n    background: linear-gradient(90deg, rgba(215,215,215,1) 0%, rgba(224,224,224,1) 50%, rgba(215,215,215,1) 100%);\n}\n\n#media-table td img, #media-table td video {\n    max-width: 200px;\n    max-height: 50px;\n    cursor: pointer;\n}\n\n#lightbox {\n    display: none;\n    position: fixed;\n    left: 0;\n    top: 0;\n    width: 100vw;\n    height: 100vh;\n    background-color: rgba(0, 0, 0, 0.8);\n    justify-content: center;\n    align-items: center;\n    z-index: 1000;\n}\n\n#lightbox-content {\n    position: relative;\n    max-width: 1000px;\n    width: 90%;\n    max-height: 90%;\n    overflow: auto;\n    text-align: center;\n    padding: 20px;\n    color: #fff;\n}\n\n#lightbox-content p a{\n    color: #fff !important;\n}\n\n#lightbox-content img{\n    max-width: 90%;\n    max-height: 50vh;\n}\n\n#lightbox-content video{\n    max-width: 100%;\n    height: auto;\n}\n\n#lightbox-content iframe{\n    height: 1000px;\n    max-height: 100vh;\n    width: 100%;\n}\n\n#lightbox-toolbox {\n    position: fixed;\n    top: 10px;\n    right: 10px;\n    z-index: 1010;\n    display: flex;\n    gap: 5px;\n}\n\n.lightbox-button {\n    background: #fff;\n    border: none;\n    padding: 5px 10px;\n    cursor: pointer;\n}\n\n.lightbox-nav {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    background: #fff;\n    border: none;\n    padding: 5px;\n    cursor: pointer;\n    z-index: 1001;\n}\n\n.lightbox-prev {\n    left: 10px;\n}\n\n.lightbox-next {\n    right: 10px;\n}\n\n#copy-info {\n    display: none;\n    position: fixed;\n    top: 10px;\n    right: 10px;\n    background: #333;\n    color: #fff;\n    padding: 10px;\n    border-radius: 5px;\n}\n\n#filter-controls {\n    margin-bottom: 20px;\n}\n\n#filter-controls select, \n#filter-controls input, \n#filter-controls button {\n    padding: 5px;\n    margin-right: 10px;\n}\n\n#file-type-filter {\n    border-radius: 20px;\n    border: 1px solid #999;\n    height: 30px;\n    width: 150px;\n    padding: 0px !important;\n    text-align: center;\n    color: #444;\n}\n\n#text-filter {\n    border-radius: 20px;\n    border: 1px solid #999;\n    height: 30px;\n    width: 200px;\n    padding: 0px !important;\n    text-align: center;\n    color: #444;\n}\n\n#text-filter::placeholder {\n    color: #444;\n}\n\n#text-filter:focus {\n    border: 1px solid #d50c2f;\n    outline-style: none;\n}\n\n#text-filter:focus::placeholder {\n    color: #ccc;\n}\n\n#reset-filter {\n    border-radius: 20px;\n    border: 1px solid #999;\n    height: 30px;\n    width: 100px;\n    padding: 0px !important;\n    text-align: center;\n    background: #333;\n    color: #fff;\n    font-size: 0.8em;\n}\n\n#reset-filter:hover {\n    background: #d50c2f;\n}\n\nvideo {\n    border-radius: 5px;\n}\n\ntable {\n    font-size: 0.9em;\n}\n\nth {\n    background: #016075;\n    color: #fff;\n}\n\ntd {\n    width: 10px;\n}\n<\/style>\n<div id=\"copy-info\">Link in die Zwischenablage kopiert!<\/div>\n\n<table id=\"media-table\">\n    <thead>\n        <tr>\n            <th>Bild<\/th>\n            <th>Dateiname<\/th>\n            <th>Alt-Text<\/th>\n            <th>Beschriftung<\/th>\n            <th>Beschreibung<\/th>\n            <th>Quell-Link<\/th>\n            <th>Download<\/th>\n        <\/tr>\n    <\/thead>\n    <tbody>\n        <!-- Medieninhalte werden hier eingef\u00fcgt -->\n    <\/tbody>\n<\/table>\n\n<div id=\"lightbox\">\n    <div id=\"lightbox-toolbox\">\n        <button id=\"lightbox-close\" class=\"lightbox-button\">Schlie\u00dfen<\/button>\n        <button id=\"lightbox-copy\" class=\"lightbox-button\">Kopieren<\/button>\n        <button id=\"lightbox-download\" class=\"lightbox-button\">Download<\/button>\n    <\/div>\n    <button class=\"lightbox-prev\">\u2039<\/button>\n    <div id=\"lightbox-content\"><\/div>\n    <button class=\"lightbox-next\">\u203a<\/button>\n<\/div>\n\n<script>\nasync function fetchAllMedia() {\n    const mediaTableBody = document.querySelector('#media-table tbody');\n    const copyInfo = document.getElementById('copy-info');\n    const fileTypeFilter = document.getElementById('file-type-filter');\n    const textFilter = document.getElementById('text-filter');\n    const resetFilterButton = document.getElementById('reset-filter');\n    const lightbox = document.getElementById('lightbox');\n    const lightboxContent = document.getElementById('lightbox-content');\n    const lightboxClose = document.getElementById('lightbox-close');\n    const lightboxCopy = document.getElementById('lightbox-copy');\n    const lightboxDownload = document.getElementById('lightbox-download');\n    const lightboxPrev = document.querySelector('.lightbox-prev');\n    const lightboxNext = document.querySelector('.lightbox-next');\n    let page = 1;\n    let hasMoreMedia = true;\n    let allMedia = [];\n    let filteredMedia = [];\n    let currentMediaIndex = 0;\n\n    while (hasMoreMedia) {\n        try {\n            const response = await fetch(`https:\/\/blog.hwr-berlin.de\/data-lib\/wp-json\/wp\/v2\/media?per_page=50&page=${page}`);\n            if (!response.ok) throw new Error(\"Fehler beim Abrufen der Medien\");\n            const data = await response.json();\n            if (data.length === 0) {\n                hasMoreMedia = false;\n                break;\n            }\n            allMedia = allMedia.concat(data);\n            page++;\n        } catch (error) {\n            console.error(\"Fehler beim Abrufen der Medien:\", error);\n            hasMoreMedia = false;\n        }\n    }\n\n    function stripHtmlAndUrls(html) {\n        const text = new DOMParser().parseFromString(html, 'text\/html').body.textContent || \"\";\n        return text.replace(\/https?:\\\/\\\/\\S+\/g, '').trim();\n    }\n\n    function getFileType(media) {\n        const fileExt = media.source_url.split('.').pop().toLowerCase();\n        if (['png', 'jpg', 'jpeg', 'gif'].includes(fileExt)) return 'image';\n        if (fileExt === 'svg') return 'icon';\n        if (['ppt', 'pptx'].includes(fileExt)) return 'presentation';\n        if (fileExt === 'pdf') return 'document';\n        if (['mp4', 'ogg', 'webm'].includes(fileExt)) return 'video';\n        return '';\n    }\n\n    function displayMedia(mediaList) {\n        mediaTableBody.innerHTML = '';\n\n        const sortedMedia = {\n            icon: [],\n            image: [],\n            document: [],\n            presentation: [],\n            video: []\n        };\n\n        mediaList.forEach(media => {\n            const fileType = getFileType(media);\n            sortedMedia[fileType]?.push(media);\n        });\n\n        const sectionOrder = ['icon', 'image', 'document', 'presentation', 'video'];\n        const sectionLabels = {\n            icon: 'Icons\/Logos',\n            image: 'Bilder',\n            document: 'Dokumente',\n            presentation: 'Pr\u00e4sentationen',\n            video: 'Videos'\n        };\n\n        sectionOrder.forEach(type => {\n            if (sortedMedia[type].length > 0) {\n                const separatorRow = document.createElement('tr');\n                const separatorCell = document.createElement('td');\n                separatorCell.colSpan = 7;\n                separatorCell.style.fontWeight = 'bold';\n                separatorCell.style.textAlign = 'center';\n                separatorCell.style.backgroundColor = '#02a0c2';\n                separatorCell.style.color = '#fff';\n                separatorCell.textContent = sectionLabels[type];\n                separatorRow.appendChild(separatorCell);\n                mediaTableBody.appendChild(separatorRow);\n\n                sortedMedia[type].forEach(media => {\n                    const mediaRow = document.createElement('tr');\n                    const imageCell = document.createElement('td');\n                    let mediaElement = null;\n\n                    switch(type) {\n                        case 'icon':\n                        case 'image':\n                            mediaElement = document.createElement('img');\n                            mediaElement.src = media.source_url;\n                            mediaElement.alt = media.alt_text || 'Media Image';\n                            mediaElement.addEventListener('click', () => {\n                                currentMediaIndex = filteredMedia.indexOf(media);\n                                openLightbox(filteredMedia, currentMediaIndex);\n                            });\n                            break;\n                        case 'video':\n                            mediaElement = document.createElement('video');\n                            mediaElement.src = media.source_url;\n                            mediaElement.muted = true;\n                            mediaElement.addEventListener('click', (event) => {\n                                event.stopPropagation();\n                                currentMediaIndex = filteredMedia.indexOf(media);\n                                openLightbox(filteredMedia, currentMediaIndex);\n                            });\n                            break;\n                        case 'presentation':\n                            mediaElement = document.createElement('img');\n                            mediaElement.src = 'https:\/\/blog.hwr-berlin.de\/data-lib\/wp-content\/uploads_data-lib\/2024\/10\/powerpoint_logo.svg';\n                            mediaElement.alt = 'Pr\u00e4sentation';\n                            mediaElement.addEventListener('click', () => {\n                                currentMediaIndex = filteredMedia.indexOf(media);\n                                openLightbox(filteredMedia, currentMediaIndex);\n                            });\n                            break;\n                        case 'document':\n                            mediaElement = document.createElement('img');\n                            mediaElement.src = 'https:\/\/blog.hwr-berlin.de\/data-lib\/wp-content\/uploads_data-lib\/2024\/10\/pdf_logo.svg';\n                            mediaElement.alt = 'Dokument';\n                            mediaElement.addEventListener('click', () => {\n                                currentMediaIndex = filteredMedia.indexOf(media);\n                                openLightbox(filteredMedia, currentMediaIndex);\n                            });\n                            break;\n                    }\n\n                    if (mediaElement) {\n                        mediaElement.style.cursor = 'pointer';\n                        imageCell.appendChild(mediaElement);\n                    }\n\n                    const fileNameCell = document.createElement('td');\n                    fileNameCell.textContent = stripHtmlAndUrls(media.title.rendered) || 'Unbenannter Datei';\n\n                    const altTextCell = document.createElement('td');\n                    altTextCell.textContent = stripHtmlAndUrls(media.alt_text) || 'Kein Alt-Text';\n\n                    const captionCell = document.createElement('td');\n                    captionCell.textContent = stripHtmlAndUrls(media.caption?.rendered) || 'Keine Beschriftung';\n\n                    const descriptionCell = document.createElement('td');\n                    descriptionCell.textContent = stripHtmlAndUrls(media.description?.rendered) || 'Keine Beschreibung';\n\n                    const sourceLinkCell = document.createElement('td');\n                    const sourceLink = document.createElement('a');\n                    sourceLink.href = media.source_url;\n                    sourceLink.textContent = 'Link kopieren';\n                    sourceLink.style.cursor = 'pointer';\n                    sourceLink.addEventListener('click', async (event) => {\n                        event.preventDefault();\n                        await navigator.clipboard.writeText(media.source_url);\n                        showCopyInfo();\n                    });\n                    sourceLinkCell.appendChild(sourceLink);\n\n                    const downloadCell = document.createElement('td');\n                    const downloadButton = document.createElement('button');\n                    downloadButton.textContent = 'Download';\n                    downloadButton.style.cursor = 'pointer';\n                    downloadButton.addEventListener('click', () => {\n                        const link = document.createElement('a');\n                        link.href = media.source_url;\n                        link.download = media.title.rendered || 'Media File';\n                        link.click();\n                    });\n                    downloadCell.appendChild(downloadButton);\n\n                    mediaRow.appendChild(imageCell);\n                    mediaRow.appendChild(fileNameCell);\n                    mediaRow.appendChild(altTextCell);\n                    mediaRow.appendChild(captionCell);\n                    mediaRow.appendChild(descriptionCell);\n                    mediaRow.appendChild(sourceLinkCell);\n                    mediaRow.appendChild(downloadCell);\n\n                    mediaTableBody.appendChild(mediaRow);\n                });\n            }\n        });\n\n        filteredMedia = mediaList;\n    }\n\n    function openLightbox(mediaList, index) {\n        const media = mediaList[index];\n        const content = getLightboxContent(media);\n        lightboxContent.innerHTML = content;\n        lightbox.style.display = 'flex';\n\n        lightboxCopy.onclick = async () => {\n            await navigator.clipboard.writeText(media.source_url);\n            showCopyInfo();\n        };\n\n        lightboxDownload.onclick = () => {\n            const link = document.createElement('a');\n            link.href = media.source_url;\n            link.download = media.title.rendered || 'Media File';\n            link.click();\n        };\n    }\n\n    function getLightboxContent(media) {\n        const fileType = getFileType(media);\n        let content = '';\n        switch(fileType) {\n            case 'image':\n            case 'icon':\n                content = `<img decoding=\"async\" src=\"${media.source_url}\" alt=\"${media.alt_text || 'Media Image'}\">`;\n                break;\n            case 'video':\n                content = `<video src=\"${media.source_url}\" controls autoplay><\/video>`;\n                break;\n            case 'presentation':\n                content = `\n                    <img decoding=\"async\" src=\"https:\/\/blog.hwr-berlin.de\/data-lib\/wp-content\/uploads_data-lib\/2024\/10\/powerpoint_logo.svg\" alt=\"Pr\u00e4sentation Platzhalter\">\n                    <p><a href=\"${media.source_url}\" download=\"${media.title.rendered || 'Media File'}\">Zum \u00d6ffnen bitte herunterladen<\/a><\/p>\n                `;\n                break;\n            case 'document':\n                content = `<iframe src=\"${media.source_url}\" frameborder=\"0\"><\/iframe>`;\n                break;\n        }\n        return content;\n    }\n\n    function stopVideoPlayback() {\n        const videoElement = lightboxContent.querySelector('video');\n        if (videoElement) {\n            videoElement.pause();\n            videoElement.currentTime = 0;\n        }\n    }\n\n    function showCopyInfo() {\n        copyInfo.style.display = 'block';\n        setTimeout(() => {\n            copyInfo.style.display = 'none';\n        }, 1000);\n    }\n\n    function applyFilters() {\n        const selectedType = fileTypeFilter.value;\n        const searchText = textFilter.value.toLowerCase();\n\n        if (selectedType || searchText) {\n            filteredMedia = allMedia.filter(media => {\n                const fileType = getFileType(media);\n                const matchesType = !selectedType || fileType === selectedType;\n                const matchesText = media.title.rendered.toLowerCase().includes(searchText) ||\n                    (media.alt_text || '').toLowerCase().includes(searchText) ||\n                    stripHtmlAndUrls(media.description?.rendered || '').toLowerCase().includes(searchText);\n                return matchesType && matchesText;\n            });\n        } else {\n            filteredMedia = allMedia.slice(); \/\/ No filter: all media available\n        }\n\n        displayMedia(filteredMedia);\n    }\n\n    function navigateLightbox(direction) {\n        stopVideoPlayback();\n        if (direction === 'prev') {\n            currentMediaIndex = (currentMediaIndex > 0) ? currentMediaIndex - 1 : filteredMedia.length - 1;\n        } else if (direction === 'next') {\n            currentMediaIndex = (currentMediaIndex < filteredMedia.length - 1) ? currentMediaIndex + 1 : 0;\n        }\n        openLightbox(filteredMedia, currentMediaIndex);\n    }\n\n    document.addEventListener('keydown', (event) => {\n        if (lightbox.style.display === 'flex') {\n            switch (event.key) {\n                case 'Escape':\n                    lightboxClose.click();\n                    break;\n                case 'ArrowLeft':\n                    navigateLightbox('prev');\n                    break;\n                case 'ArrowRight':\n                case ' ':\n                    navigateLightbox('next');\n                    break;\n            }\n        }\n    });\n\n    fileTypeFilter.addEventListener('change', applyFilters);\n    textFilter.addEventListener('input', applyFilters);\n\n    resetFilterButton.addEventListener('click', () => {\n        fileTypeFilter.value = '';\n        textFilter.value = '';\n        displayMedia(allMedia);\n    });\n\n    lightboxClose.addEventListener('click', () => {\n        stopVideoPlayback();\n        lightbox.style.display = 'none';\n    });\n\n    lightboxPrev.addEventListener('click', () => {\n        navigateLightbox('prev');\n    });\n\n    lightboxNext.addEventListener('click', () => {\n        navigateLightbox('next');\n    });\n\n    displayMedia(allMedia);\n}\n\ndocument.addEventListener('DOMContentLoaded', fetchAllMedia);\n<\/script>\n\n\n\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Link in die Zwischenablage kopiert! Bild Dateiname Alt-Text Beschriftung Beschreibung Quell-Link Download Schlie\u00dfen Kopieren Download \u2039 \u203a<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-86","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blog.hwr-berlin.de\/data-lib\/wp-json\/wp\/v2\/pages\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.hwr-berlin.de\/data-lib\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.hwr-berlin.de\/data-lib\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hwr-berlin.de\/data-lib\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hwr-berlin.de\/data-lib\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":242,"href":"https:\/\/blog.hwr-berlin.de\/data-lib\/wp-json\/wp\/v2\/pages\/86\/revisions"}],"predecessor-version":[{"id":584,"href":"https:\/\/blog.hwr-berlin.de\/data-lib\/wp-json\/wp\/v2\/pages\/86\/revisions\/584"}],"wp:attachment":[{"href":"https:\/\/blog.hwr-berlin.de\/data-lib\/wp-json\/wp\/v2\/media?parent=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}