Slideshow

[Bilder laden] [< Zurueck] [Weiter >] [> Slideshow] [|| Stop]

(function() {

    /* Finde uninitialisierten Wrapper */
    var allWraps = document.getElementsByClassName('galleryWrap');
    var wrap = null;
    var i;
    for (i = 0; i < allWraps.length; i++) {
        if (!allWraps[i].getAttribute('data-ginit')) { wrap = allWraps[i]; }
    }
    if (!wrap) { return; }
    wrap.setAttribute('data-ginit', '1');

    function q(cls) { var e = wrap.getElementsByClassName(cls); return e.length ? e[0] : null; }

    var loadBtn   = q('galleryLoadBtn');
    var prevBtn   = q('galleryPrevBtn');
    var nextBtn   = q('galleryNextBtn');
    var playBtn   = q('galleryPlayBtn');
    var stopBtn   = q('galleryStopBtn');
    var counter   = q('galleryCounter');
    var statusEl  = q('galleryStatus');
    var stage     = q('galleryStage');
    var mainImg   = q('galleryMainImg');
    var imgName   = q('galleryImgName');
    var thumbRow  = q('galleryThumbRow');

    if (!loadBtn || !stage || !mainImg) { return; }

    var images     = new Array();
    var currentIdx = 0;
    var slideTimer = null;
    var DELAY      = 3000;
    var IMG_EXTS   = 'jpg jpeg png gif bmp webp svg';

    function setStatus(msg, color) {
        if (!statusEl) return;
        statusEl.textContent = msg;
        statusEl.style.color = color || '#888';
    }

    function getPageId() {
        var pid = 0;
        if (typeof Deki !== 'undefined') {
            if (Deki.PageId) { pid = Deki.PageId; }
            else if (Deki.Page && Deki.Page.Id) { pid = Deki.Page.Id; }
        }
        return pid;
    }

    function loadImages() {
        var pageId = getPageId();
        if (!pageId) { setStatus('Page-ID nicht gefunden!', '#ff4444'); return; }
        loadBtn.disabled = true;
        setStatus('Lade...', '#7ecfff');
        images = new Array();

        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/@api/deki/pages/' + pageId + '/files?dream.out.format=xml', true);
        xhr.onload = function() {
            loadBtn.disabled = false;
            if (xhr.status !== 200) { setStatus('HTTP ' + xhr.status, '#ff4444'); return; }
            var parser = new DOMParser();
            var xml    = parser.parseFromString(xhr.responseText, 'text/xml');
            var nodes  = xml.getElementsByTagName('file');
            var j;
            for (j = 0; j < nodes.length; j++) {
                var cNodes = nodes[j].getElementsByTagName('contents');
                var nNodes = nodes[j].getElementsByTagName('filename');
                if (!cNodes.length) continue;
                var url  = cNodes[0].getAttribute('href') || '';
                var name = nNodes.length ? nNodes[0].textContent : url;
                var ext  = name.split('.').pop().toLowerCase();
                if (IMG_EXTS.indexOf(ext) === -1) continue;
                var item = new Object();
                item.url = url; item.name = name;
                images.push(item);
            }
            if (images.length === 0) { setStatus('Keine Bilder gefunden.', '#ff8c69'); return; }
            setStatus('');
            loadBtn.style.display = 'none';
            showImage(0);
            buildThumbs();
            stage.style.display = 'block';
            thumbRow.style.display = 'flex';
            prevBtn.style.display = 'inline-block';
            nextBtn.style.display = 'inline-block';
            playBtn.style.display = 'inline-block';
        };
        xhr.onerror = function() { setStatus('API Fehler', '#ff4444'); loadBtn.disabled = false; };
        xhr.send();
    }

    function showImage(idx) {
        currentIdx = idx;
        mainImg.src = '';
        mainImg.src = images[idx].url;
        imgName.textContent = images[idx].name;
        counter.textContent = (idx + 1) + ' / ' + images.length;
        /* Thumbs highlighten */
        var thumbs = thumbRow.getElementsByTagName('img');
        var j;
        for (j = 0; j < thumbs.length; j++) {
            thumbs[j].className = j === idx ? 'gThumb gThumbActive' : 'gThumb';
        }
        /* Aktiven Thumb sichtbar scrollen */
        if (thumbs[idx]) {
            thumbs[idx].scrollIntoView(false);
        }
    }

    function buildThumbs() {
        thumbRow.innerHTML = '';
        var j;
        for (j = 0; j < images.length; j++) {
            var t = document.createElement('img');
            t.className = 'gThumb';
            t.src = images[j].url;
            t.alt = images[j].name;
            t.title = images[j].name;
            (function(idx) { t.onclick = function() { showImage(idx); }; })(j);
            thumbRow.appendChild(t);
        }
    }

    function showNext() { showImage((currentIdx + 1) % images.length); }
    function showPrev() { showImage((currentIdx - 1 + images.length) % images.length); }

    function startSlideshow() {
        playBtn.style.display = 'none';
        stopBtn.style.display = 'inline-block';
        slideTimer = setInterval(function() { showNext(); }, DELAY);
    }

    function stopSlideshow() {
        if (slideTimer) { clearInterval(slideTimer); slideTimer = null; }
        stopBtn.style.display = 'none';
        playBtn.style.display = 'inline-block';
    }

    loadBtn.onclick  = function() { loadImages(); };
    prevBtn.onclick  = function() { showPrev(); };
    nextBtn.onclick  = function() { showNext(); };
    playBtn.onclick  = function() { startSlideshow(); };
    stopBtn.onclick  = function() { stopSlideshow(); };

    document.onkeydown = function(e) {
        if (stage.style.display === 'none') return;
        var k = e.keyCode;
        if (k === 37)      { showPrev(); }
        else if (k === 39) { showNext(); }
        else if (k === 32) { if (slideTimer) { stopSlideshow(); } else { startSlideshow(); } }
    };

})();

NoElements {}