integration/v2/js/slideshow.js
author veltr
Fri, 28 Jun 2013 15:47:00 +0200
changeset 206 24607434c13b
parent 203 df9a887eae92
child 219 6667fb5455d0
permissions -rw-r--r--
Added keyboard control on slideshow
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
     1
$(function() {
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
     2
    
134
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
     3
    var currentSlide = 0, jqwin = $(window), jqcaption = $(".caption"),
190
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
     4
        margin = 50,
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
     5
        jqimgcontainer = $(".image-container"),
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
     6
        jqmainimg = $(".main-image"),
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
     7
        jqbackdrop = $(".backdrop"),
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
     8
        jqpath = $(".clip-path"),
134
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
     9
        lastSlide = null;
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    10
    
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    11
    function showSlide() {
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    12
        var slide = slides[currentSlide];
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    13
        
134
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    14
        if (slide !== lastSlide) {
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    15
            jqcaption.find("h2").text(slide.title);
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    16
            jqcaption.find("h3").text(slide.author);
190
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    17
            var captiondiv = jqcaption.find(".caption-description");
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    18
            captiondiv.empty();
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    19
            slide.description.split(/\s*[\r\n]\s*/gm).forEach(function(p) {
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    20
                captiondiv.append($("<p>").text(p));
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    21
            });
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    22
            jqmainimg.attr("xlink:href", slide.image.src);
134
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    23
            jqbackdrop.attr("src", slide.image.src);
190
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    24
            jqpath.attr("d", slide.path);
134
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    25
        }
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    26
        
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    27
        lastSlide = slide;
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    28
        
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    29
        if (slide.image && slide.image.width) {
190
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    30
            var pathcoords = slide.path.match(/[\d\.]+/g),
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    31
                pathx = pathcoords.filter(function(p,i) {
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    32
                    return !(i%2);
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    33
                }),
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    34
                pathy = pathcoords.filter(function(p,i) {
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    35
                    return (i%2);
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    36
                }),
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    37
                minpx = Math.min.apply(Math,pathx),
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    38
                maxpx = Math.max.apply(Math,pathx),
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    39
                minpy = Math.min.apply(Math,pathy),
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    40
                maxpy = Math.max.apply(Math,pathy),
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    41
                ww = jqwin.width(),
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    42
                wh = jqwin.height(),
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    43
                cw = jqcaption.outerWidth(),
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    44
                ch = jqcaption.outerHeight(),
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    45
                wi = slide.image.width,
190
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    46
                hi = slide.image.height,
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    47
                wp = wi * (maxpx - minpx),
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    48
                hp = hi * (maxpy - minpy),
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    49
                w1 = ww - 2 * margin, w2 = w1 - cw
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    50
                h1 = wh - 2 * margin, h2 = h1 - ch,
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    51
                ra = Math.max(
190
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    52
                    Math.min((h1 / hp), (w2 / wp)),
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    53
                    Math.min((h2 / hp), (w1 / wp))
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    54
                ),
190
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    55
                wa = wp * ra, ha = hp * ra,
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    56
                rb = Math.max(ww / wi, wh / hi),
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    57
                wb = wi * rb, hb = hi * rb,
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    58
                xb = (ww - wb) / 2, yb = (wh - hb) / 2;
190
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    59
            jqimgcontainer.css({
134
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    60
                width: wa,
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    61
                height: ha
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    62
            });
190
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
    63
            jqimgcontainer[0].setAttribute("viewBox", [minpx,minpy,(maxpx-minpx),(maxpy-minpy)].join(" "));
134
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    64
            jqbackdrop.css({
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    65
                width: wb,
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    66
                height: hb,
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    67
                left: xb,
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    68
                top: yb
9caa840b2d92 Slideshow fixes
veltr
parents: 120
diff changeset
    69
            });
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    70
            
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    71
        }
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    72
    }
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    73
    
206
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    74
    var playInterval, playing = false;
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    75
    
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    76
    function toggleSlideShow() {
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    77
        clearInterval(playInterval);
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    78
        playing = !playing;
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    79
        var jqppbtn = $(".play-pause");
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    80
        if (playing) {
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    81
            jqppbtn.addClass("pause");
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    82
            playInterval = setInterval(nextSlide,4000,false);
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    83
        } else {
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    84
            jqppbtn.removeClass("pause");
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    85
        }
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    86
        return false;
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    87
    }
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    88
    
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    89
    function nextSlide(resetInterval) {
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    90
        if (!!resetInterval && playing) {
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    91
            playing = false;
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    92
            toggleSlideShow();
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    93
        }
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    94
        currentSlide = (currentSlide + 1) % slides.length;
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    95
        showSlide();
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    96
        return false;
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    97
    }
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
    98
    
206
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
    99
    function prevSlide(resetInterval) {
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   100
        if (!!resetInterval && playing) {
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   101
            playing = false;
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   102
            toggleSlideShow();
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   103
        }
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   104
        currentSlide = (currentSlide > 0 ? currentSlide - 1 : slides.length - 1);
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   105
        showSlide();
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   106
        return false;
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   107
    }
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   108
    
203
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   109
    var hideTO, isInArrow = false, jqControls = $(".arrow-wrap,.top-controls");
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   110
    function resetTO() {
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   111
        clearTimeout(hideTO);
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   112
        if (!isInArrow) {
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   113
            hideTO = setTimeout(function() {
203
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   114
                jqControls.hide();
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   115
            }, 1000);
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   116
        }
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   117
    }
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   118
    $("body").mousemove(function() {
203
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   119
        jqControls.show();
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   120
        resetTO();
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   121
        return false;
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   122
    });
203
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   123
    jqControls.hover(function() {
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   124
        isInArrow = true;
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   125
        resetTO();
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   126
    }, function() {
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   127
        isInArrow = false;
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   128
        resetTO();
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   129
    });
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   130
    
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   131
    $(".left-arrow").click(prevSlide);
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   132
    $(".right-arrow").click(nextSlide);
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   133
    
203
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   134
    function fullScreen() {
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   135
        var isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || false;
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   136
        if (isFull) {
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   137
            (document.cancelFullScreen || document.mozCancelFullScreen || document.webkitCancelFullScreen || function(){}).call(document);
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   138
        } else {
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   139
            (document.body.requestFullScreen || document.body.mozRequestFullScreen || document.body.webkitRequestFullScreen || function(){}).call(document.body);
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   140
        }
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   141
        showSlide();
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   142
        return false;
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   143
    }
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   144
    
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   145
    $(".full-screen").click(fullScreen);
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   146
           
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   147
    if ( typeof document.fullScreen === "undefined"
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   148
        && typeof document.mozFullScreen === "undefined"
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   149
        && typeof document.webkitIsFullScreen === "undefined") {
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   150
        $(".full-screen").remove();
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   151
    }
206
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   152
        
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   153
    $(".play-pause").click(toggleSlideShow);
203
df9a887eae92 Added FullScreen and Play to Slideshow
veltr
parents: 190
diff changeset
   154
    
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   155
    slides.forEach(function(slide, k) {
190
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
   156
        if (!slide.path) {
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
   157
            slide.path = "M0 0L1 0L1 1L0 1Z"
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
   158
        }
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   159
        slide.image = new Image();
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   160
        slide.image.onload = function() {
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   161
            if (k === currentSlide) {
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   162
                showSlide();
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   163
            }
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   164
        };
190
ebb8b58fc2b8 Added fragment handling in slideshow
veltr
parents: 134
diff changeset
   165
        slide.image.src = imgurlbase + slide.src;
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   166
    });
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   167
    
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   168
    showSlide();
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   169
    
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   170
    jqwin.resize(showSlide);
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   171
    
206
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   172
    $(document).keydown(function(e) {
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   173
        if (e.keyCode === 122) { // F11
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   174
            fullScreen();
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   175
            return false;
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   176
        }
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   177
        if (e.keyCode === 32) { // Space
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   178
            jqControls.show();
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   179
            resetTO();
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   180
            toggleSlideShow();
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   181
            return false;
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   182
        }
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   183
        if (e.keyCode === 37) { // Left-Arrow
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   184
            prevSlide(true);
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   185
            return false;
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   186
        }
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   187
        if (e.keyCode === 39) { // Right-Arrow
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   188
            nextSlide(true);
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   189
            return false;
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   190
        }
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   191
    });
24607434c13b Added keyboard control on slideshow
veltr
parents: 203
diff changeset
   192
    
120
b1e22c229870 Added slideshow
veltr
parents:
diff changeset
   193
});