https://mumbaipressclub.com/assets/js/jquery.youtubevideogallery.js

1/**
2 * youtubeVideoGallery plugin for jquery
3 * Simple video gallery for youtube, for more details see http://plugins.jquery.com/youtubevideogallery
4 *
5 * @author clanceyp
6 * @see http://plugins.jquery.com/youtubevideogallery/
7 * @version 1.3.0
8 *
9 */
10
11
12;(function($) {
13"use strict";
14
15    $.fn.extend({
16        youtubeVideoGallery:function(options) {
17            var version = '1.3.0',
18                isLegacyIE = (/\bMSIE [4|5|6|7]/.test(navigator.userAgent)),
19                defaults = {
20                    assetFolder : '',
21                    fancybox : {
22                        arrows : false,
23                        closeBtn : true,
24                        closeEffect : 'fade',
25                        helpers : {
26                            media : {},
27                            buttons : {}
28                        },
29                        openEffect : 'fade'
30                    },
31                    forceLegacyIE:false,
32                    iframeTemplate:'<iframe title="Youtube video player" id="youtube-videogallery-iframe" style="height:{options.innerHeight}px;width:{options.innerWidth}px;" frameborder="0" src="about:blank" />',
33                    innerHeight:344,
34                    innerWidth:425,
35                    newWindow: '(opens in a new window)',
36                    playButton: '/public/assets/images/[email protected]',
37                    plugin:'self',
38                    style:'',
39                    title:'default',
40                    thumbWidth:150,
41                    videos:[],
42                    urlImg : 'http://img.youtube.com/vi/$id/0.jpg',
43                    urlEmbed : 'http://www.youtube.com/embed/$id',
44                    urlLink : 'http://www.youtube.com/watch?v=$id'
45                };
46
47            this.test = {};
48            this.version = version;
49
50            function log(message){
51                if ('console' in window && window.console.log){
52                    window.console.log(message);
53                }
54            }
55            function getVideoLinks($this){
56                var arr = [],
57                    a = $this.find("a");
58                a.each(function(i, el){
59                    arr.push({
60                        id: getId( $(el).attr('href') ),
61                        title:$(el).text()
62                    });
63                });
64                return arr;
65            }
66            function getIdFromEntry(obj){
67                if (typeof obj === 'string'){
68                    return getId(obj);
69                } else if (obj.id && typeof obj.id === 'string'){
70                    return obj.id;
71                } else if (obj.link && obj.link.length ){
72                    for ( var i = 0, l = obj.link.length; i < l ; i++){
73                        if (obj.link[i].type === 'text/html'){
74                            return getId(obj.link[i].href)
75                        }
76                    }
77                }
78                log('could not find ID from object, maybe an unsupported API?')
79                return '';
80            }
81            function getId(href){
82                var id = '';
83                if (!!href && href.indexOf('www.youtube.com/v/') > 0) {
84                    id = getBefore(href.split('www.youtube.com/v/')[1], '?')
85                } else if (!!href && href.indexOf('/embed/') > 0){
86                    id = getBefore(href.split('/embed/')[1], '?');
87                } else if (!!href && href.indexOf('?v=') > 0){// this could be version if API call!!
88                    id = getBefore(href.split('?v=')[1],'&');
89                } else if (!!href && href.indexOf('video:') > 0){
90                    id = getBefore(href.split('video:')[1], ':');
91                } else if (!!href){
92                    id = href;
93                }
94                return id;
95            }
96            function getBefore(str, before){
97                if (!!str && str.indexOf(before)){
98                    str = str.split(before)[0];
99                }
100                return str;
101            }
102            function getIframeTemplate(innerWidth, innerHeight){
103                var str = options.iframeTemplate;
104                return str.replace('{options.innerHeight}', innerHeight).replace('{options.innerWidth}', innerWidth);
105            }
106            function open(e){
107                var el = e.currentTarget;
108                e.preventDefault();

109                $('div.youtube-videogallery-bodycover').css( { 'height':$(document).height()} );
110                $('div.youtube-videogallery-display').css({
111                    'marginLeft':-options.innerWidth/2,
112                    'marginTop':-options.innerHeight/2
113                });
114                $('#youtube-videogallery-iframe').attr( 'src', options.urlEmbed.replace("$id", $(el).attr('data-youtube-id') ) );
115                $('body').addClass('youtube-videogallery-active');
116            }
117            function close(e){
118                $('#youtube-videogallery-iframe').attr( 'src', 'about:blank');
119                $('body').removeClass('youtube-videogallery-active');
120            }
121            function setButtonMargin(w, h, context){
122                if (w === 0 || h === 0){
123                    $(context).find("img.youtube-videogallery-play").remove();
124                    return;
125                }
126                $(context).find("img.youtube-videogallery-play").css({
127                    'marginLeft':-w/2 +'px',
128                    'marginTop':-h/2 +'px'
129                });
130            }
131            function getStyle(style){
132                if (!!style){
133                    return "youtube-videogallery-" + style;
134                }
135                return '';
136            }
137            function getTitleStyle(title){
138                return title === 'full' ? 'youtube-videogallery-allowtitle' : '';
139            }
140            function getVideosFromFeed(data){
141                var videos = [],
142                    items = (data && data.data && data.data.items) ? data.data.items
143                       : (data && data.feed && data.feed.entry) ? data.feed.entry : [];
144                $( items ).each(function(i, item){
145                    var id = getIdFromEntry(item);
146                    videos.push({
147                        id: getIdFromEntry(item),
148                        title: item.title.$t || item.title
149                    });
150                });
151                return videos;
152            }
153            /**
154             * this.test = object
155             *
156             * Test object to expose private methods to a test API.
157             * This allows us to test private methods, without
158             * exposing them (e.g. they can't be overwritten)
159             *
160             */
161            this.test = {
162                getBefore:getBefore,
163                getId:getId,
164                getVideoLinks:getVideoLinks,
165                getIframeTemplate:getIframeTemplate,
166                getTitleStyle:getTitleStyle,
167                getStyle:getStyle,
168                getVideosFromFeed:getVideosFromFeed,
169                getIdFromEntry:getIdFromEntry
170            };
171            function load($this, options) {
172                var videos = ( options.videos.length ) ? options.videos : getVideoLinks($this),
173                    html = '',
174                    href, src, titleSpan, video,
175                    playButtonSrc = (!!options.assetFolder) ? options.assetFolder +'/'+ options.playButton : options.playButton ,
176                    img = document.createElement('img');
177                img.onload = function(){
178                    setButtonMargin(this.width, this.height, $this);
179                };
180                img.onerror = function(){
181                    setButtonMargin(0, 0, $this);
182                };
183                img.src = playButtonSrc+'?'+ +(new Date());
184
185                for (var i = 0, l = videos.length; i < l; i++){
186                    video = videos[i];
187                    if (!video.id){continue;}
188                    href = options.urlLink.replace("$id", video.id);
189                    src = options.urlImg.replace("$id", video.id);
190                    titleSpan = (!!video.title && options.title !== 'none') ? '<span class="youtube-videogallery-title">'+ video.title +'</span>' : '';
191
192                    html+= '<li class="youtube-videogallery-item"><a title="'+video.title+'" data-youtube-id="'+ video.id +'" href="'+ href +'" class="youtube-videogallery-link" style="width:'+options.thumbWidth+'px"><img class="youtube-videogallery-play" src="'+ playButtonSrc +'" title="play" /><img class="youtube-videogallery-img" src="'+ src +'" style="width:'+options.thumbWidth+'px" />'+ titleSpan +'</a></li>';
193                }
194                $this.empty()
195                    .append(html)
196                    .addClass('youtube-videogallery-container')
197                    .addClass( getStyle( options.style ) )
198                    .addClass( getTitleStyle( options.title ) );
199
200                if (options.supported && options.plugin === 'colorbox' && $.colorbox){
201                    $this.find("a.youtube-videogallery-link").each(function(i, el){
202                        $(el)
203                            .attr('href', options.urlEmbed.replace("$id", $(el).attr('data-youtube-id') ) )
204                            .attr('aria-controls','youtube-videogallery-iframe')
205                            .colorbox({iframe:true, innerWidth:options.innerWidth, innerHeight:options.innerHeight});
206                    });
207                } else if (options.supported && options.plugin === 'fancybox' && !!$().fancybox){
208                    $this.find("a.youtube-videogallery-link").each(function(i, el){
209                        $(el)
210                            .attr('rel', 'media-gallery')
211                            .fancybox(options.fancybox);
212                    });
213                } else if (options.supported && options.plugin === 'self'){
214                    if (!$('div.youtube-videogallery-bodycover').length){
215                        $('body')
216                            .append('<div class="youtube-videogallery-bodycover"/>')
217                            .append('<div class="youtube-videogallery-display">'+ getIframeTemplate(options.innerWidth, options.innerHeight) +'</div>');

218                        $('div.youtube-videogallery-bodycover').on('click',close);
219                        $(document).on('keydown', function(e) {
220                            if (e.which === 27) {
221                                close();
222                            }
223                        });
224                    }
225                    $this.find("a.youtube-videogallery-link").on('click',open);
226                } else {
227                    $this.find("a.youtube-videogallery-link")
228                        .attr('target','_blank')
229                        .append('<span class="youtube-videogallery-screen-reader-only">'+options.newWindow+'</span>')
230                        .each(function(i, el){
231                            $(el).attr('title', $(el).attr('title')+' '+ options.newWindow);
232                        });
233                }
234                return $this;
235
236            }
237
238            // Set options
239            options =  $.extend(defaults, options);
240            options.supported = (
241            /* don't show lightbox if: old untested jquery version, or the lightbox is bigger than the viewport */
242                    !!$().on &&
243                    ( $(window).width() > options.innerWidth || $(window).height() > options.innerHeight)
244                );
245            options.plugin = (isLegacyIE && !options.forceLegacyIE) ? 'none' : options.plugin;// by default turn off plugins for IE<=7
246
247            // it's an API, load promise and return the original object for chaining
248            if (!!options.apiUrl){
249                var $this = this,
250                    apiUrl = options.apiUrl,
251                    jqxhr = $.ajax({
252                        url:apiUrl,
253                        dataType:"jsonp",
254                        beforeSend:function(){
255                            if (!options.apiFallbackUrl){
256                                return;
257                            }
258                            $this.each(function(i, el){
259                                $(el).empty()
260                                    .append('<li><a /></li>')
261                                    .find('a')
262                                    .attr('href', options.apiFallbackUrl)
263                                    .text(options.apiFallbackUrl);
264                            });
265                        }})
266                        .done(function(data) {
267                            options.videos = getVideosFromFeed(data);
268                            $this.each(function(i, el){
269                               load($(el), options);
270                            });
271                        })
272                        .fail(function(){
273                            log('Error getting youtube API requested by jQuery.youtubeVideoGallery: '+ apiUrl);
274                        });
275                return $this;
276            }
277            return this.each(function(i, el){
278                load($(el), options);
279            });
280        }
281    });
282
283})(window.jQuery);