https://www.chi.ac.uk/wp-content/plugins/wp-media-folder/assets/js/gif/play_gif.js?ver=6.2.8

1/*
2 WP Gif Player, an easy to use GIF Player for Wordpress
3 Copyright (C) 2016 David Bedenknecht (http://www.sketchmouse.com/page/contact)
4
5 This program is free software: you can redistribute it and/or modify
6 it under the terms of the GNU General Public License as published by
7 the Free Software Foundation, either version 3 of the License, or
8 (at your option) any later version.
9
10 This program is distributed in the hope that it will be useful,
11 but WITHOUT ANY WARRANTY; without even the implied warranty of
12 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13 GNU General Public License for more details.
14
15 You should have received a copy of the GNU General Public License
16 along with this program.  If not, see <http://www.gnu.org/licenses/>.
17 */
18jQuery(function () {
19    //gifs HAVE to be preloaded, otherwise nothing happens for ages when user clicks play!
20    var gifs = []; //Array that will hold all gifs as Images
21    var gif_urls = [];//array holds all GIF Urls
22    var player_wrap = jQuery('.gif_wrap');
23    var showing_btn = jQuery('span.play_gif'); //Play "Button" - purely css
24    var playing = false;
25    var first_load = true;
26    var stop_load = false;
27    var last_viewed = null; //index of gif that was last played
28
29    //first spinner which is shown before the window has fully loaded
30    var spinnerPreload;
31    var spinnerLoading;
32    var spinnerOptions = {
33        lines: 13,
34        length: 12,
35        width: 8,
36        radius: 18,
37        trail: 100,
38        speed: 1.3,
39        color: '#fff',
40        className: 'gif_spinner'
41    };
42    spinnerPreload = new Spinner(spinnerOptions);
43    spinnerLoading = new Spinner(spinnerOptions);
44
45    //Preloads one gif as an image object
46    function preload_gif(url, idx) {
47        if (!gifs[idx]) {//if there not already an image at that idx in gifs, create one
48            var img = new Image();
49            img.src = url;
50            img.className = '_showing';
51            gifs[idx] = img;
52            first_load = true;
53            return img;
54        } else {
55            first_load = false;
56            return gifs[idx];
57        }
58    }
59
60    //Save all GIF urls
61    jQuery('._showing.frame').each(function () {
62        var s = jQuery(this);
63        if (s.attr('src')) {
64            if (s.attr('data-lazy-src')) {//unfassbar.es -> lazy load enabled
65                gif_urls.push(s.attr('data-lazy-src').replace('_still_tmp.jpeg', '.gif'));
66            } else {
67                if (typeof s.attr('src') !== 'undefined' && s.attr('src') !== false) {
68                    gif_urls.push(s.attr('src').replace('_still_tmp.jpeg', '.gif'));
69                } else {
70                    gif_urls.push(s.src.replace('_still_tmp.jpeg', '.gif'));
71                }
72            }
73        } else if (s.data('cfsrc')) { //CloudFlare sets the "src" as 'data-cfsrc="..."'
74            gif_urls.push(s.data('cfsrc').replace('_still_tmp.jpeg', '.gif'));
75        }
76    });
77
78    jQuery(document).ready(function () {
79        //start preloading spinner
80        spinnerPreload.spin();//start Spinner
81        if (jQuery('.gif_wrap').length) {
82            jQuery('.gif_wrap')[0].appendChild(spinnerPreload.el);//only show on first gif (if we wanted to show it on all gifs, we'd have to instantiate a new spinner for each)
83        }
84    });
85
86
87    jQuery(window).on('load', function () {
88        spinnerPreload.stop(); //stop spinner when all images have loaded and play button should be clickable
89
90        var showing_btn_idx = "";
91        var gif_img;
92        var displayedImgSrc;
93        var hiddenImgSrc;
94
95        //Button is hidden before whole DOM tree is loaded, otherwise it jumps from top to center of .gif_wrap
96        showing_btn.css('visibility', 'visible'); //show GIF Play Button
97
98        function play(idx) {
99            //Img / GIF sources
100            displayedImgSrc = jQuery('._showing')[idx].src;
101            hiddenImgSrc = jQuery('._hidden')[idx].src;
102            //Index of last played element
103            last_viewed = idx;
104            showing_btn_idx = showing_btn[idx]; //specific GIF Button for this clicked element
105            if (playing == false) { //hide first frame and GIF button
106                playing = true;
107                showing_btn_idx.style.visibility = 'hidden';
108            } else { //display first frame and GIF button
109                playing = false;

110                showing_btn_idx.style.visibility = 'visible';
111            }
112
113
114            if (displayedImgSrc == gifs[idx].src && !first_load) { //if the gif is already showing
115                displayedImgSrc = hiddenImgSrc;
116                hiddenImgSrc = gifs[idx].src;
117
118                if (playing == false) //if the the gif that was played is clicked again and stops last_view has to be set to null, otherwise two gifs start at the same time
119                    last_viewed = null;
120                else
121                    last_viewed = idx;
122            } else if (hiddenImgSrc == gifs[idx].src) { // if still is showing
123                hiddenImgSrc = displayedImgSrc;
124                displayedImgSrc = gifs[idx].src;
125
126            }
127            jQuery('._showing')[idx].src = displayedImgSrc;
128            jQuery('._hidden')[idx].src = hiddenImgSrc;
129        }
130
131        jQuery('.gif_wrap').click(function (event) {
132            var self = this;
133            var idx = jQuery('.gif_wrap').index(this); //returns index of clicked div
134
135            if (!gifs[idx]) {
136                first_load = true;
137                //target is gif_wrap
138                spinnerLoading.spin();//start Spinner
139                self.appendChild(spinnerLoading.el);
140            }
141            //This is to check if the user clicked again before the gif was fully loaded.
142            //If so, we need to stop the onload Event for the image by setting first_load to false.
143            //Preload the gif onclick
144            if (first_load) {
145                stop_load = true;
146                gif_img = preload_gif(gif_urls[idx], idx);
147                gif_img.onload = function () { //could possibly cause errors (asynch. http://stackoverflow.com/questions/20613984/jquery-or-javascript-check-if-image-loaded)
148                    spinnerLoading.stop();
149                    first_load = false; //set first_load to false, otherwise, if a gif is clicked twice the src of the still is overwritten.
150                };
151
152                //append gif as img src
153                jQuery(self).children('img').attr('src', gif_img.src);
154            }
155
156            if (!last_viewed && last_viewed != 0) {
157                last_viewed = idx; //last_viewed != 0 has to be included because !0 is true
158            }
159            if (idx == last_viewed) { //the index of the gif_wrap element that's just been clicked is the same as idx of last click
160                play(idx);
161            } else { //idx of element that's just been clicked differs from element that's last been clicked
162                if (playing) {
163                    showing_btn_idx = showing_btn[last_viewed]; //play button of last played gif
164                    showing_btn_idx.style.visibility = 'visible';
165                    if (jQuery('._showing')[last_viewed].src == gifs[last_viewed].src) { //if the gif is already showing
166                        var tmpSrc = jQuery('._showing')[last_viewed].src;
167                        jQuery('._showing')[last_viewed].src = jQuery('._hidden')[last_viewed].src;
168                        jQuery('._hidden')[last_viewed].src = tmpSrc;
169                    }
170                    playing = false;
171                    play(idx);
172                }
173            }
174        });
175        player_wrap.mouseenter(function () {
176            player_wrap.css('cursor', 'pointer');
177        }); //change mouse on enter, when leaving mouse changes on default
178    });
179});