/**
* Mediathek-Functions
*/
o2.mediathekYouTube = (function () {
var settings = {
mediaList: [],
mediaListTotal: 0,
mediaPerPage: 12,
hashVideo: '',
hashTeaser: '',
textMaxLength: 160
};
var pagination = {
newPage: 0,
offset: 0,
maxPage: 0
};
var mediaElementDiv = '
';
var mediaElementDivHidden = '';
var filterItemTmpl = '{{html description}}x';
var paginatorTmpl = '' +
'- <<
' +
'- <
' +
'{{tmpl(pages) "paginatorElementTmpl"}}' +
'- >
' +
'- >>
' +
'
';
var paginatorElementTmpl = '${pageName}';
var root = null;
var mediathekTsrTmpl = '';
var youTubeAPICallTmpl = "http://gdata.youtube.com/feeds/api/videos?q=${searchQuery}&alt=json-in-script&start-index=${startIndex}&max-results=${maxResults}&author=o2deofficial&callback=${getYouTubeVideos}";
var callFilterMedia = false;
var locHash = {
// We use an object here for it is easier to modify compared to an array
filters: {},
lastFilter: null,
remove: function (val) {
delete this.filters[val];
$.bbq.removeState(val);
for (var filterName in this.filters) {
this.lastFilter = filterName;
}
},
add: function (val) {
this.lastFilter = val;
this.filters[val] = 1;
$.bbq.pushState(this.filters);
},
getType: function () {
var h = this.getHash();
if (/^id\-[0-9]/.test(h)) {
return 'video';
} else if (/^ytid\-/.test(h)) {
return 'video';
} else if (/^f/.test(h)) {
return 'filter';
} else {
return false;
}
},
getHash: function () {
return $.param.fragment();
},
getHashParams: function () {
return $.bbq.getState();
}
};
/**
*
*/
var youTubeCall = function (filterString, startIndex, funcName) {
$('script#youTubeCallId').remove();
var script = document.createElement("script");
script.setAttribute("id", "youTubeCallId");
script.type = "text/javascript";
script.src = $.tmpl('youTubeAPICallTmpl', {
searchQuery: filterString,
startIndex: startIndex,
maxResults: settings.mediaPerPage,
getYouTubeVideos: 'o2.mediathekYouTube.' + funcName
}).text();
document.body.appendChild(script);
};
// Build the filter string based on the checked input fields and filter the media list
var filterMedia = function (newPage) {
var allSelectedFilters = "";
$('ul.dropdown-list > li', root).each(function () {
var filterString = "";
// filter for each filter menu, because these where and-filter
$('input:checkbox:checked', this).each(function () {
// build a regexp string
var configuredFilter = $(this).attr('name');
configuredFilter = configuredFilter.substr(2, configuredFilter.length);
filterString = filterString + configuredFilter + ' | ';
});
if (filterString.length > 0) {
filterString = filterString.substring(0, filterString.lastIndexOf(' |'));
allSelectedFilters = allSelectedFilters + filterString + ' | ';
}
});
if (allSelectedFilters.length > 0) {
allSelectedFilters = allSelectedFilters.substring(0, allSelectedFilters.lastIndexOf(' |'));
} else if (settings.mediathekFilter.length > 0) {
allSelectedFilters = settings.mediathekFilter;
}
var offSet = newPage * settings.mediaPerPage;
pagination.offSet = offSet;
pagination.newPage = newPage;
if (settings.hashVideo.length > 0) {
if (allSelectedFilters.length > 0) {
allSelectedFilters = allSelectedFilters + ' | ' + settings.hashVideo;
}
}
youTubeCall(allSelectedFilters, offSet + 1, 'filterChannelVideos');
};
var loadInitialVideo = function (hash, callFilterMediaFunction) {
settings.hashVideo = hash.substring(5, hash.length);
if (callFilterMediaFunction) {
filterMedia(0);
} else {
callFilterMedia = true;
}
};
// Load and insert the media elements
var loadMediaElements = function (newPage, maxPage, offSet) {
var dfd = $.Deferred();
var remainingTeasers = 0;
var loading = $('.loading', root);
var mc = $('#mediacontent', root);
var nor = $('#noresults', root);
if (settings.mediaListTotal === 0) {
$('#mediacounter', root).html('(0)');
mc.hide();
nor.show();
loading.hide();
} else if (typeof settings.mediaList === 'undefined') {
$('#mediacounter', root).html('(0)');
mc.hide();
nor.show();
loading.hide();
} else {
nor.hide();
mc.show();
$('.mediaelement', root).each(function (i) {
var mediaElem = $(this);
if (offSet + i < settings.mediaListTotal) {
var url = '';
var mediaId = settings.mediaList[i].id.$t;
if (mediaId.lastIndexOf('/') !== -1) {
url = 'http://www.youtube.com/embed/' + mediaId.substr(mediaId.lastIndexOf('/') + 1, mediaId.length);
} else {
url = settings.mediaList[i].media$group.media$content[0].url;
}
if (jQuery.data(document.body, url) === undefined) {
remainingTeasers++;
loading.show();
if (mediaId.lastIndexOf('/') !== -1) {
mediaId = 'ytid-' + mediaId.substr(mediaId.lastIndexOf('/') + 1, mediaId.length);
} else {
var mediaPos = offSet + i;
mediaId = 'ytid-' + mediaPos;
}
var allMediaText = settings.mediaList[i].content.$t;
if (allMediaText.length > settings.textMaxLength) {
allMediaText = allMediaText.substr(0, 156) + '...';
}
var teaser = $.tmpl('mediathekTsrTmpl', {
mediaThumbnail: settings.mediaList[i].media$group.media$thumbnail[0].url,
playThumbnail: window.location.protocol + '//' + window.location.host + '/resource/img/video_play.png',
mediaHeadline2: settings.mediaList[i].title.$t,
mediaText: allMediaText,
mediaVideo: url,
mediaVideoId: mediaId,
tsrHeight: 'height3'
});
remainingTeasers--;
mediaElem.html(teaser);
// Save the Mark-Up for the next time
jQuery.data(document.body, url, teaser);
// TODO ONLY for DEBUG
// $('ul.related-links',mediaElem).append('' + o2.mediathek.settings.mediaList[offSet + i].category + '');
if (remainingTeasers === 0) {
dfd.resolve();
loading.hide();
}
} else {
mediaElem.html(jQuery.data(document.body, url));
// TODO ONLY for DEBUG
// $('ul.related-links',mediaElem).append('' + o2.mediathek.settings.mediaList[offSet + i].category + '');
if (remainingTeasers === 0) {
dfd.resolve();
}
}
} else {
mediaElem.children().remove();
}
});
var to = (offSet + settings.mediaPerPage) > settings.mediaListTotal ? settings.mediaListTotal : (offSet + settings.mediaPerPage);
$('#mediacounter', root).html('(' /*+ settings.mediaList.length + ' von '*/ + (offSet + 1) + ' bis ' + to + ' von ' + settings.mediaListTotal + ')');
}
buildPageinator(newPage, maxPage);
return dfd.promise();
};
// Build the Pages for single page navigation
var buildSinglePagesPaginator = function (newPage, maxPage) {
var pages = [];
var isActive = false;
// Define the borders for start and end
var startPage = newPage - 2;
var endPage;
if (startPage < 0) {
startPage = 0;
endPage = newPage + 3;
} else {
endPage = startPage + 5;
}
if (endPage > maxPage) {
endPage = maxPage + 1;
}
// Build all items for single pages
for (var i = startPage; i < endPage; i = i + 1) {
if (i === newPage) {
isActive = true;
}
else {
isActive = false;
}
pages.push({isActive: isActive, pageName: i + 1, targetPage: i });
}
return pages;
};
// insert the filteritem in the filteritemlist, if the input is checked
var checkFilterItem = function (input) {
var filterId = $(input).attr('id');
if ($(input).is(':checked')) {
// Add filter to the filter hash
locHash.add(filterId);
$('#mediafilteritems ul', root).append($.tmpl('filterItemTmpl', {
// Get the Text of the Label-Tag form the Drop-Down-Filter-List
description: $(input).next().html(),
name: $(input).attr('name')
// Append a click event which removes the item and trigger the filtering
}).bind('click', function (e) {
e.preventDefault();
// uncheck item and remove class from parent
$(input).attr('checked', false).parent().removeClass('checked');
// Remove filter from filter hash and trigger the hashchange event
locHash.remove(filterId);
// and filterMedia
filterMedia(0);
// Remove item on click
$(this).remove();
}));
} else {
// Remove, if the input isn't checked anymore
locHash.remove(filterId);
$('#mediafilteritems ul a#filter' + $(input).attr('name'), root).parent().remove();
}
};
// Init the filter item list, all checked inputs are listed in the filter item list
var initFilterItems = function () {
$('ul.dropdown-list input:checkbox:checked', root).each(function () {
checkFilterItem(this);
});
};
/**
*
*/
var getHashChannelVideo = function (allYouTubeMedia) {
if (allYouTubeMedia && allYouTubeMedia.feed) {
if (typeof allYouTubeMedia.feed.entry !== 'undefined') {
var url = '';
var mediaId = allYouTubeMedia.feed.entry[0].id.$t;
if (mediaId.lastIndexOf('/') !== -1) {
url = 'http://www.youtube.com/embed/' + mediaId.substr(mediaId.lastIndexOf('/') + 1, mediaId.length);
} else {
url = allYouTubeMedia.feed.entry[0].media$group.media$content[0].url;
}
if (mediaId.lastIndexOf('/') !== -1) {
mediaId = 'ytid-' + mediaId.substr(mediaId.lastIndexOf('/') + 1, mediaId.length);
} else {
var mediaPos = settings.mediaPerPage;
mediaId = 'ytid-' + mediaPos;
}
settings.hashTeaser = $.tmpl('mediathekTsrTmpl', {
mediaThumbnail: allYouTubeMedia.feed.entry[0].media$group.media$thumbnail[0].url,
playThumbnail: window.location.protocol + '//' + window.location.host + '/resource/img/video_play.png',
mediaHeadline2: allYouTubeMedia.feed.entry[0].title.$t,
mediaText: allYouTubeMedia.feed.entry[0].content.$t,
mediaVideo: url,
mediaVideoId: mediaId,
tsrHeight: 'height3'
});
if (settings.hashTeaser.length > 0) {
var hiddenMediaElem = $('#mediacontent').append(mediaElementDivHidden);
if ($('#mediacontent').children().length === settings.mediaPerPage + 1) {
$('#mediacontent').children().last().html(settings.hashTeaser);
}
var videoTeaser = $('#ytid-' + settings.hashVideo);
videoTeaser.find('a.wmLightbox').trigger('click');
locHash.remove('ytid-' + settings.hashVideo);
settings.hashVideo = '';
settings.hashTeaser = '';
if ($('#mediacontent').children().length === settings.mediaPerPage + 1) {
$('#mediacontent').children().last().remove();
}
}
} else {
settings.mediaList = [];
settings.mediaListTotal = 0;
}
}
};
/**
* the callback function called from the youTubeAPI src to fill the mediaList with the youtube videos information
*/
var filterChannelVideos = function (allYouTubeMedia) {
if (allYouTubeMedia && allYouTubeMedia.feed) {
if (typeof allYouTubeMedia.feed.entry !== 'undefined') {
settings.mediaList = allYouTubeMedia.feed.entry;
settings.mediaListTotal = allYouTubeMedia.feed.openSearch$totalResults.$t;
} else {
settings.mediaList = [];
settings.mediaListTotal = 0;
}
}
var maxMedia = 0;
if (settings.mediaListTotal > 0) {
maxMedia = settings.mediaListTotal - 1;
}
var mediaPerPage = settings.mediaPerPage;
var maxPage = (maxMedia - maxMedia % mediaPerPage) / mediaPerPage;
var offSet = pagination.newPage * mediaPerPage;
if (offSet > maxMedia) {
offSet = maxMedia - maxMedia % mediaPerPage;
}
pagination.offSet = offSet;
pagination.maxPage = maxPage;
if (settings.hashVideo.length > 0 && settings.mediaListTotal > 0) {
// When all teasers are loaded, trigger the lightbox of the teaser link
$.when(loadMediaElements(pagination.newPage, pagination.maxPage, pagination.offSet)).then(function () {
youTubeCall(settings.hashVideo, 1, 'getHashChannelVideo');
});
} else {
loadMediaElements(pagination.newPage, pagination.maxPage, pagination.offSet);
}
};
var init = function (options) {
settings = $.extend(true, {}, settings, options);
if (typeof settings.mediathekFilter === 'undefined') {
settings.mediathekFilter = '';
}
$.template('filterItemTmpl', filterItemTmpl);
$.template('paginatorElementTmpl', paginatorElementTmpl);
$.template('paginatorTmpl', paginatorTmpl);
$.template('mediathekTsrTmpl', mediathekTsrTmpl);
$.template('youTubeAPICallTmpl', youTubeAPICallTmpl);
root = $('#mediathek');
//Insert the container divs for the mediathek-teasers
for (var i = 0; i < settings.mediaPerPage; i = i + 1) {
$('#mediacontent').prepend(mediaElementDiv);
}
$('#mediafilteritems', root).append($(''));
var loading = $('.loading', root);
loading.show();
filterMedia(0);
initFilterItems();
$('ul.dropdown-list input', root).bind('change', function () {
filterMedia(0);
checkFilterItem(this);
});
if (locHash.getType() !== 'video') {
callFilterMedia = true;
}
// Bind the hashchange event
$(window).bind('hashchange', function (e) {
var params = locHash.getHashParams();
$.each(params, function (filter) {
if (locHash.getType() === 'video') {
loadInitialVideo(filter, callFilterMedia);
} else {
var $filter = $('#' + filter);
if ($filter) {
// on page init just change the checked attribute of the filters
if (e.init) {
$filter.attr('checked', true);
// all other event types (click, manual hash change)
} else {
if ($filter.is(':checked') === false) {
$filter.trigger('click');
}
}
}
}
});
});
$('a.reset-filter', root).bind('click', function (e) {
e.preventDefault();
$('#' + locHash.lastFilter).trigger('click').trigger('change');
});
// initially trigger the hashchange event
$(window).trigger({type: 'hashchange', init: true});
};
// Build the Pageinator for the navigation in the medialist
var buildPageinator = function (newPage, maxPage) {
var first = last = next = prev = { isDisabled: true, targetPage: 0};
// Build First and Previous
if (newPage > 0) {
prev = {isDisabled: false, targetPage: newPage - 1};
first = {isDisabled: false, targetPage: 0};
}
// Build Next and Last
if (newPage < maxPage) {
next = {isDisabled: false, targetPage: newPage + 1};
last = {isDisabled: false, targetPage: maxPage};
}
// Build Singlepages
var pages = buildSinglePagesPaginator(newPage, maxPage);
$('#mediapaginator > *', root).remove();
$('#mediapaginator', root).append($.tmpl('paginatorTmpl', {
first: first,
prev: prev,
last: last,
next: next,
pages: pages
}));
};
return {
init: init,
loadInitialVideo: loadInitialVideo,
filterMedia: filterMedia,
buildPageinator: buildPageinator,
buildSinglePagesPaginator: buildSinglePagesPaginator,
initFilterItems: initFilterItems,
checkFilterItem: checkFilterItem,
filterChannelVideos: filterChannelVideos,
youTubeCall: youTubeCall,
getHashChannelVideo: getHashChannelVideo
};
}());