655 lines
25 KiB
JavaScript
655 lines
25 KiB
JavaScript
|
/**
|
||
|
|
* Modal Gallery Code
|
||
|
|
*
|
||
|
|
* This is also reliant on the 'Center Plugin' in the plugins.js file
|
||
|
|
*
|
||
|
|
* Adam Scoble
|
||
|
|
* ascoble@igloo.com.au
|
||
|
|
*
|
||
|
|
* .gallery-heading - put this on a tag to have its contents used as the modal heading - otherwise put a span.gallery-heading around some text
|
||
|
|
* .gallery-copy - put this on a tag to have its contents included in the modal popup, works on ULs as well
|
||
|
|
* data-gallery="true" - put this on an anchor tag to be included in the gallery
|
||
|
|
*
|
||
|
|
* Markup below:
|
||
|
|
*
|
||
|
|
* Video gallery item:
|
||
|
|
* <a class="slide1" data-gallery="true" data-gallery-type="video" data-gallery-src="39910" href="#"><p class="gallery-copy">This will appear in the gallery.</p><p class="gallery-copy gallery-hidden">This will appear in the gallery.</p></a>
|
||
|
|
*
|
||
|
|
* Image gallery item:
|
||
|
|
* <a class="slide1" data-gallery="true" data-gallery-heading="Modal Heading" data-gallery-type="image" data-gallery-src="link-to-image-file.jpg" href="#">Link</a>
|
||
|
|
*
|
||
|
|
* Image with text gallery item:
|
||
|
|
* <a class="slide1" data-gallery="true" data-gallery-heading="Modal Heading" data-gallery-type="image" data-gallery-src="link-to-image-file.jpg" href="#"><p class="gallery-copy">This will appear in the gallery.</p><p>This won't appear in the gallery.</p><p class="gallery-copy gallery-hidden">This will appear in the gallery.</p></a>
|
||
|
|
*
|
||
|
|
* Text gallery item:
|
||
|
|
* <a class="slide1" data-gallery="true" data-gallery-type="text" href="#"><p class="gallery-copy">This will appear in the gallery.</p><span class="gallery-heading">This will be the gallery heading</span></p></a>
|
||
|
|
*
|
||
|
|
* Fullscreen item !! IMPORTANT: Fullscreen items shouldn't have the data-gallery="true" attribute !!:
|
||
|
|
* <a data-gallery-type="fullscreen" data-gallery-src="39910" href="#">This will be a fullscreen video item</a>
|
||
|
|
*
|
||
|
|
* To call a new gallery use:
|
||
|
|
* var newGallery = new Gallery();
|
||
|
|
* Additionally you can use a different selector (for different slides, etc.):
|
||
|
|
* var newGallery = new Gallery({ gallerySearchString : '#slide1'});
|
||
|
|
*/
|
||
|
|
|
||
|
|
window.Mazda = window.Mazda || {};
|
||
|
|
|
||
|
|
(function ($, window, document, undefined) {
|
||
|
|
function Gallery(options){
|
||
|
|
this.items = []; // Array that stores all gallery items, populated in _init()
|
||
|
|
this.config = $.extend({}, this.defaults, options || {});
|
||
|
|
this.overlay;
|
||
|
|
this.modal;
|
||
|
|
this.currentItemIndex;
|
||
|
|
this.closeButton;
|
||
|
|
this.headingSpan;
|
||
|
|
this.currentItemSpan;
|
||
|
|
this.totalItemsSpan;
|
||
|
|
this.active = false;
|
||
|
|
this.videoCanClose = true;
|
||
|
|
this.specsLoaded = false;
|
||
|
|
|
||
|
|
this._init();
|
||
|
|
}
|
||
|
|
|
||
|
|
Gallery.prototype = {
|
||
|
|
defaults: {
|
||
|
|
gallerySearchString: 'div', // Selector string used to create gallery links
|
||
|
|
galleryItems: true,
|
||
|
|
specWindow: true,
|
||
|
|
fadeTime: 200 // Animation length of overlay fade in and modal fade in (2 x this value is total animation time)
|
||
|
|
},
|
||
|
|
_init : function(){
|
||
|
|
if(this.config.galleryItems){
|
||
|
|
this._BuildGalleryItems();
|
||
|
|
}
|
||
|
|
|
||
|
|
this._BuildFullscreenItems();
|
||
|
|
this._BuildModalAndOverlay();
|
||
|
|
|
||
|
|
if(this.config.specWindow){
|
||
|
|
this._BuildSpecItems();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_BuildGalleryItems : function(){
|
||
|
|
var self = this,
|
||
|
|
$galleryItems = $(this.config.gallerySearchString + ' [data-gallery]');
|
||
|
|
|
||
|
|
if($galleryItems.length){
|
||
|
|
$galleryItems.each(function(index, elem){
|
||
|
|
var galleryItem = new GalleryItem(index, elem);
|
||
|
|
self.items.push(galleryItem);
|
||
|
|
$(elem).on('click', function(event){
|
||
|
|
event.preventDefault();
|
||
|
|
self.show(this);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
// console.log("Modal-Gallery Error #0001: Please update your gallery search string to match your data attribute");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_BuildFullscreenItems : function(){
|
||
|
|
var self = this,
|
||
|
|
$fullscreenItems = $(this.config.gallerySearchString + ' [data-gallery-type="fullscreen"]');
|
||
|
|
if($fullscreenItems.length){
|
||
|
|
$fullscreenItems.each(function(index, elem){
|
||
|
|
$(elem).on('click', function(event){
|
||
|
|
event.preventDefault();
|
||
|
|
self.playFullScreenVideo(this);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//This is for all modal video links if the modal is disabled, they will instead show as full screen.
|
||
|
|
if(!this.config.galleryItems){
|
||
|
|
var $galleryItems = $(this.config.gallerySearchString + ' [data-gallery-type="video"]');
|
||
|
|
|
||
|
|
if($galleryItems.length){
|
||
|
|
$galleryItems.each(function(index, elem){
|
||
|
|
$(elem).on('click', function(event){
|
||
|
|
event.preventDefault();
|
||
|
|
self.playFullScreenVideo(this);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_BuildSpecItems : function(){
|
||
|
|
var self = this,
|
||
|
|
$specItems = $(this.config.gallerySearchString + ' [data-gallery-type="specs"]');
|
||
|
|
|
||
|
|
if($specItems.length){
|
||
|
|
$specItems.each(function(index, elem){
|
||
|
|
$(elem).on('click', function(event){
|
||
|
|
event.preventDefault();
|
||
|
|
self.showSpecWindow();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_BuildModalAndOverlay : function(){
|
||
|
|
this.overlay = $('#gallery-overlay');
|
||
|
|
this.modal = $('#gallery-modal');
|
||
|
|
|
||
|
|
var $body = $('body');
|
||
|
|
|
||
|
|
if(!this.overlay.length){
|
||
|
|
var overlayMarkup = $('<div id="gallery-overlay"></div>');
|
||
|
|
$body.append(overlayMarkup);
|
||
|
|
this.overlay = $('#gallery-overlay');
|
||
|
|
} else {
|
||
|
|
// console.log("Modal-Gallery Warning: Overlay already exists, using existing overlay");
|
||
|
|
}
|
||
|
|
|
||
|
|
if(!this.modal.length){
|
||
|
|
//This is the markup for the specifications table
|
||
|
|
// var specMarkup = $('#tmpl-specs').html();
|
||
|
|
var modalMarkup = $('<div id="gallery-modal"><h3></h3><div class="gallery-content"></div><div class="gallery-footer"><span class="current-item"></span><span class="slash"> / </span><span class="total-items"></span></div><a class="prev" href="#"></a><a class="next" href="#"></a><a class="close" href="#"></a></div>');
|
||
|
|
var specsUrl = $(".specs-page").attr("data-specs-url");
|
||
|
|
$body.append(modalMarkup);
|
||
|
|
this.modal = $('#gallery-modal');
|
||
|
|
this._fetchSpecs(specsUrl);
|
||
|
|
} else {
|
||
|
|
// console.log("Modal-Gallery Warning: Modal already exists, using existing modal");
|
||
|
|
}
|
||
|
|
|
||
|
|
this._RemoveTableWhitespace();
|
||
|
|
|
||
|
|
this.modal = $('#gallery-modal');
|
||
|
|
this.headingSpan = $('#gallery-modal h3');
|
||
|
|
this.contentContainer = $('#gallery-modal div.gallery-content');
|
||
|
|
this.currentItemSpan = $('#gallery-modal span.current-item');
|
||
|
|
this.slashSpan = $('#gallery-modal span.slash');
|
||
|
|
this.totalItemsSpan = $('#gallery-modal span.total-items');
|
||
|
|
this.prevButton = $('#gallery-modal a.prev');
|
||
|
|
this.nextButton = $('#gallery-modal a.next');
|
||
|
|
this.closeButton = $('#gallery-modal a.close');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The below code uses a short plugin contained in plugin.js
|
||
|
|
*/
|
||
|
|
this.modal.center();
|
||
|
|
var self = this;
|
||
|
|
$(window).bind('resize', function() {
|
||
|
|
self.modal.center();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
_RemoveTableWhitespace : function(){
|
||
|
|
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g'),
|
||
|
|
tbhtml = $('.specifications-set table');
|
||
|
|
|
||
|
|
tbhtml.each(function(index, elem){
|
||
|
|
var $elem = $(elem),
|
||
|
|
html = $elem.html();
|
||
|
|
$elem.html(html.replace(expr, '><'));
|
||
|
|
});
|
||
|
|
|
||
|
|
},
|
||
|
|
_ToggleClickListeners : function(){
|
||
|
|
var self = this,
|
||
|
|
specModal = this.modal.hasClass('specs');
|
||
|
|
|
||
|
|
this.active = !this.active;
|
||
|
|
|
||
|
|
if(this.active){
|
||
|
|
this.overlay.on('click', function(e){
|
||
|
|
self.hide();
|
||
|
|
e.preventDefault();
|
||
|
|
});
|
||
|
|
|
||
|
|
this.closeButton.on('click', function(e){
|
||
|
|
self.hide();
|
||
|
|
e.preventDefault();
|
||
|
|
});
|
||
|
|
this.prevButton.on('click', function(e){
|
||
|
|
self._GoToPrevItem();
|
||
|
|
e.preventDefault();
|
||
|
|
});
|
||
|
|
this.nextButton.on('click', function(e){
|
||
|
|
self._GoToNextItem();
|
||
|
|
e.preventDefault();
|
||
|
|
});
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.overlay.off('click');
|
||
|
|
this.closeButton.off('click');
|
||
|
|
this.prevButton.off('click');
|
||
|
|
this.nextButton.off('click');
|
||
|
|
|
||
|
|
// if(specModal){
|
||
|
|
// $tabSet.find('a').each(function(index, elem){
|
||
|
|
// $(elem).off('click');
|
||
|
|
// });
|
||
|
|
|
||
|
|
// $tableTabs.find('a').each(function(index, elem){
|
||
|
|
// $(elem).off('click');
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
_GetIndexFromElement : function(element){
|
||
|
|
var index,
|
||
|
|
elem = element;
|
||
|
|
jQuery.each(this.items, function(i, item){
|
||
|
|
if(item.elem == elem){
|
||
|
|
index = i;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return index;
|
||
|
|
},
|
||
|
|
_CheckNavigationDisabledClass : function(index){
|
||
|
|
var firstSlide = (index === 0) ? true : false,
|
||
|
|
lastSlide = (index == this.items.length - 1) ? true : false;
|
||
|
|
|
||
|
|
if(firstSlide && lastSlide) {
|
||
|
|
this.slashSpan.addClass('hide');
|
||
|
|
this.prevButton.addClass('hide');
|
||
|
|
this.nextButton.addClass('hide');
|
||
|
|
} else if(firstSlide){
|
||
|
|
this.slashSpan.removeClass('hide');
|
||
|
|
this.prevButton.removeClass('hide');
|
||
|
|
this.nextButton.removeClass('hide');
|
||
|
|
this.prevButton.addClass('disabled');
|
||
|
|
this.nextButton.removeClass('disabled');
|
||
|
|
} else if(lastSlide){
|
||
|
|
this.slashSpan.removeClass('hide');
|
||
|
|
this.nextButton.removeClass('hide');
|
||
|
|
this.prevButton.removeClass('hide');
|
||
|
|
this.nextButton.addClass('disabled');
|
||
|
|
this.prevButton.removeClass('disabled');
|
||
|
|
} else {
|
||
|
|
this.slashSpan.removeClass('hide');
|
||
|
|
this.prevButton.removeClass('hide');
|
||
|
|
this.nextButton.removeClass('hide');
|
||
|
|
this.prevButton.removeClass('disabled');
|
||
|
|
this.nextButton.removeClass('disabled');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_GetItemMediaMarkup : function(index){
|
||
|
|
var markup;
|
||
|
|
if ( this.items[index].type == 'image' && this.items[index].src) {
|
||
|
|
markup = '<img class="gallery-media" src="' + this.items[index].src + '" />';
|
||
|
|
} else if ( this.items[index].type == 'video' && this.items[index].src){
|
||
|
|
markup = '<div id="movideo-holder"></div>';
|
||
|
|
} else {
|
||
|
|
markup = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
return markup;
|
||
|
|
},
|
||
|
|
_GoToPrevItem : function(){
|
||
|
|
var index = (this.currentItemIndex > 0) ? this.currentItemIndex - 1 : 0;
|
||
|
|
|
||
|
|
this._GoToItem(index);
|
||
|
|
},
|
||
|
|
_GoToNextItem : function(){
|
||
|
|
var index = (this.currentItemIndex != this.items.length - 1) ? this.currentItemIndex + 1 : this.items.length - 1;
|
||
|
|
this._GoToItem(index);
|
||
|
|
},
|
||
|
|
_GoToItem : function(index){
|
||
|
|
if(index != this.currentItemIndex && this.videoCanClose){
|
||
|
|
this._destroyVideo();
|
||
|
|
|
||
|
|
var item = this.items[index],
|
||
|
|
mediaMarkup = this._GetItemMediaMarkup(index);
|
||
|
|
|
||
|
|
this._CheckNavigationDisabledClass(index);
|
||
|
|
|
||
|
|
this.currentItemIndex = index;
|
||
|
|
|
||
|
|
this.headingSpan.empty().html(item.heading);
|
||
|
|
|
||
|
|
this.contentContainer.empty().html(mediaMarkup + item.copyMarkup);
|
||
|
|
|
||
|
|
if(this.items[index].type == 'video' && this.items[index].src){
|
||
|
|
this._ieBlockVideoClose();
|
||
|
|
|
||
|
|
var movId = this.items[index].src;
|
||
|
|
|
||
|
|
this._callMovideoPlayer(movId);
|
||
|
|
}
|
||
|
|
|
||
|
|
if(this.items.length > 1){
|
||
|
|
this.currentItemSpan.empty().html((item.index + 1).toString());
|
||
|
|
} else {
|
||
|
|
this.currentItemSpan.empty();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
show : function(element){
|
||
|
|
var self = this,
|
||
|
|
elem = element;
|
||
|
|
|
||
|
|
if(!this.active){
|
||
|
|
this.modal.center();
|
||
|
|
var index = this._GetIndexFromElement(elem);
|
||
|
|
|
||
|
|
this._ToggleClickListeners();
|
||
|
|
this._CheckNavigationDisabledClass(index);
|
||
|
|
|
||
|
|
var itemLength = this.items.length;
|
||
|
|
if(itemLength > 1){
|
||
|
|
this.totalItemsSpan.empty().html(itemLength);
|
||
|
|
} else {
|
||
|
|
this.totalItemsSpan.empty();
|
||
|
|
}
|
||
|
|
|
||
|
|
this.overlay.css('filter', 'alpha(opacity=50)');
|
||
|
|
this.overlay.fadeIn(self.config.fadeTime, function(){
|
||
|
|
if(self.active){ // Allows the gallery to be closed while opening
|
||
|
|
self.modal.fadeIn(self.config.fadeTime, function(){
|
||
|
|
self._GoToItem(index);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(window).trigger('Gallery:show', this);
|
||
|
|
|
||
|
|
this.initKeyStrokes();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hide : function(){
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if(this.active && this.videoCanClose){
|
||
|
|
this._ToggleClickListeners();
|
||
|
|
|
||
|
|
this.currentItemIndex = null;
|
||
|
|
|
||
|
|
this._destroyVideo();
|
||
|
|
|
||
|
|
this.modal.fadeOut(self.config.fadeTime, function(){
|
||
|
|
self.headingSpan.empty();
|
||
|
|
self.contentContainer.empty();
|
||
|
|
self.currentItemSpan.empty();
|
||
|
|
if(!self.active){ // Allows the gallery to be opened while closing
|
||
|
|
self.overlay.fadeOut(self.config.fadeTime, function(){
|
||
|
|
if(self.modal.hasClass('fullscreen')){
|
||
|
|
self.modal.removeClass('fullscreen');
|
||
|
|
self.modal.center();
|
||
|
|
}
|
||
|
|
|
||
|
|
if(self.modal.hasClass('specs')){
|
||
|
|
self.modal.removeClass('specs');
|
||
|
|
self.modal.center();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
self.disableNav();
|
||
|
|
$(window).trigger('Gallery:hide', this);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
initKeyStrokes : function(){
|
||
|
|
var gallery = this;
|
||
|
|
|
||
|
|
$(document).bind('keydown.theStrokes', function(e){
|
||
|
|
var direction = {left: 37, up: 38, right: 39, down: 40 }
|
||
|
|
switch (e.keyCode) {
|
||
|
|
case direction.left:
|
||
|
|
gallery._GoToPrevItem();
|
||
|
|
break;
|
||
|
|
case direction.right:
|
||
|
|
gallery._GoToNextItem();
|
||
|
|
break;
|
||
|
|
};
|
||
|
|
});
|
||
|
|
},
|
||
|
|
disableNav : function(){
|
||
|
|
$(document).unbind('keydown.theStrokes');
|
||
|
|
},
|
||
|
|
playFullScreenVideo : function(elem){
|
||
|
|
this.modal.addClass('fullscreen');
|
||
|
|
this.modal.center();
|
||
|
|
|
||
|
|
var self = this,
|
||
|
|
element = elem;
|
||
|
|
|
||
|
|
if(!this.active){
|
||
|
|
|
||
|
|
this._ieBlockVideoClose();
|
||
|
|
|
||
|
|
this._ToggleClickListeners();
|
||
|
|
|
||
|
|
this.overlay.css('filter', 'alpha(opacity=50)');
|
||
|
|
this.overlay.fadeIn(self.config.fadeTime, function(){
|
||
|
|
if(self.active){ // Allows the gallery to be closed while opening
|
||
|
|
self.modal.fadeIn(self.config.fadeTime, function(){
|
||
|
|
var mediaMarkup = '<div id="movideo-holder"></div>',
|
||
|
|
movId = $(element).data().gallerySrc;
|
||
|
|
|
||
|
|
self.contentContainer.empty().html(mediaMarkup);
|
||
|
|
|
||
|
|
self._callMovideoPlayer(movId);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
$(window).trigger('Gallery:show', this);
|
||
|
|
},
|
||
|
|
showSpecWindow : function(){
|
||
|
|
this.modal.addClass('specs');
|
||
|
|
this.modal.center();
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
if(!this.active){
|
||
|
|
|
||
|
|
this._ToggleClickListeners();
|
||
|
|
|
||
|
|
this.overlay.css('filter', 'alpha(opacity=50)');
|
||
|
|
this.overlay.fadeIn(self.config.fadeTime, function(){
|
||
|
|
if(self.active){ // Allows the gallery to be closed while opening
|
||
|
|
self.modal.fadeIn(self.config.fadeTime, function(){
|
||
|
|
self.contentContainer.empty();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
$(window).trigger('Gallery:show', this);
|
||
|
|
},
|
||
|
|
_fetchSpecs: function(specsUrl) {
|
||
|
|
var specsUrl = specsUrl;
|
||
|
|
$.ajax({
|
||
|
|
url: specsUrl,
|
||
|
|
method: 'GET',
|
||
|
|
dataType: 'html',
|
||
|
|
async: true,
|
||
|
|
success: $.proxy(this._appendSpecs, this)
|
||
|
|
});
|
||
|
|
$('#gallery-modal')
|
||
|
|
.addClass('specs-loading')
|
||
|
|
.prepend('<div id="specs-loading">Loading Full Specifications...</div>');
|
||
|
|
},
|
||
|
|
_appendSpecs: function(html) {
|
||
|
|
var self = this;
|
||
|
|
$('#gallery-modal')
|
||
|
|
.prepend(html)
|
||
|
|
.removeClass('specs-loading')
|
||
|
|
.find('#specs-loading')
|
||
|
|
.remove();
|
||
|
|
self.specsLoaded = true;
|
||
|
|
self._bindSpecs();
|
||
|
|
|
||
|
|
},
|
||
|
|
_bindSpecs: function() {
|
||
|
|
// console.log('bdingin specs');
|
||
|
|
var $setContainer = $('#specifications-module'),
|
||
|
|
$tabContainers = $('.specifications-set'),
|
||
|
|
$tabSet = $setContainer.find('ul.tab-set li'),
|
||
|
|
$tableTabs = $tabContainers.find('ul.table-tabs li');
|
||
|
|
|
||
|
|
$tabSet.find('a').each(function(index, elem){
|
||
|
|
var $elem = $(elem);
|
||
|
|
$elem.on('click', function(event){
|
||
|
|
event.preventDefault();
|
||
|
|
$tabContainers.hide();
|
||
|
|
|
||
|
|
var href = $elem.attr('href');
|
||
|
|
href = href.substring(href.indexOf('#'));
|
||
|
|
|
||
|
|
var $targetTabContainer = $setContainer.find(href);
|
||
|
|
|
||
|
|
$targetTabContainer.show();
|
||
|
|
|
||
|
|
$tabSet.removeClass('current');
|
||
|
|
$elem.parent().addClass('current');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$tableTabs.find('a').each(function(index, elem){
|
||
|
|
var $elem = $(elem),
|
||
|
|
$currentSet = $elem.parents('.specifications-set'),
|
||
|
|
$currentTableTabs = $currentSet.find('ul.table-tabs li'),
|
||
|
|
$tables = $currentSet.find('table:not(.table-headings)');
|
||
|
|
$elem.on('click', function(event){
|
||
|
|
event.preventDefault();
|
||
|
|
$tables.hide();
|
||
|
|
|
||
|
|
var href = $elem.attr('href');
|
||
|
|
href = href.substring(href.indexOf('#') + 1);
|
||
|
|
|
||
|
|
var $targetTable = $currentSet.find('.' + href);
|
||
|
|
|
||
|
|
$targetTable.show();
|
||
|
|
|
||
|
|
$currentTableTabs.removeClass('current');
|
||
|
|
$elem.parent().addClass('current');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
},
|
||
|
|
_callMovideoPlayer : function(movId){
|
||
|
|
this.player = $('#movideo-holder').player({
|
||
|
|
apiKey:'movideoIgloo',
|
||
|
|
iosAppAlias: 'ipad-application',
|
||
|
|
flashAppAlias: 'universal-flash',
|
||
|
|
mediaId:movId,
|
||
|
|
autoPlay: true
|
||
|
|
});
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* Pausing the movideo player before we hide the modal in <=IE9. The player seems to be
|
||
|
|
* firing progress events even after the modal is closed, which is causing errors in IE.
|
||
|
|
* So we pause the player to stop those progress events firing.
|
||
|
|
*/
|
||
|
|
_ieBlockVideoClose : function(){
|
||
|
|
var self = this,
|
||
|
|
isFlashEnabled = MOVIDEO.utils.getDevice().flashEnabled,
|
||
|
|
lessThanIE9 = $('html').hasClass('lt-ie9');
|
||
|
|
if(isFlashEnabled && lessThanIE9){
|
||
|
|
this.videoCanClose = false;
|
||
|
|
|
||
|
|
this.modal.bind("playerplay", function(event, data) {
|
||
|
|
self.videoCanClose = true;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
_destroyVideo: function() {
|
||
|
|
|
||
|
|
// console.log('_destroyVideo: attempting');
|
||
|
|
if (this.contentContainer.find('#movideo-holder').length) {
|
||
|
|
// console.log('_destroyVideo: destroyiung');
|
||
|
|
this.player.player('stop');
|
||
|
|
this.player = null;
|
||
|
|
this.contentContainer.find('#movideo-holder').trigger('playerremoved').remove();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function GalleryItem(index, elem){
|
||
|
|
this.index = index;
|
||
|
|
this.elem = elem;
|
||
|
|
this.$elem = $(elem);
|
||
|
|
this.data = this.$elem.data();
|
||
|
|
this.heading = '';
|
||
|
|
this.type = '';
|
||
|
|
this.src = '';
|
||
|
|
this.copyMarkup = '';
|
||
|
|
|
||
|
|
this._init();
|
||
|
|
}
|
||
|
|
|
||
|
|
GalleryItem.prototype = {
|
||
|
|
_init : function(){
|
||
|
|
this._GetElementData();
|
||
|
|
},
|
||
|
|
_GetElementData : function(){
|
||
|
|
this.heading = this._GetElementHeading();
|
||
|
|
this.type = this._GetElementType();
|
||
|
|
this.src = this._GetElementSrc();
|
||
|
|
this.copyMarkup = this._GetCopyMarkup();
|
||
|
|
},
|
||
|
|
_GetElementHeading : function(){
|
||
|
|
var $heading = this.$elem.find('.gallery-heading'),
|
||
|
|
heading;
|
||
|
|
|
||
|
|
if(this.data.galleryHeading){
|
||
|
|
heading = this.data.galleryHeading;
|
||
|
|
} else if($heading.length){
|
||
|
|
heading = $heading.html();
|
||
|
|
} else {
|
||
|
|
heading = '';
|
||
|
|
}
|
||
|
|
return heading;
|
||
|
|
},
|
||
|
|
_GetElementType : function(){
|
||
|
|
var type = (this.data.galleryType) ? this.data.galleryType : 'image';
|
||
|
|
return type;
|
||
|
|
},
|
||
|
|
_GetElementSrc : function(){
|
||
|
|
var src = (this.data.gallerySrc) ? this.data.gallerySrc : '';
|
||
|
|
return src;
|
||
|
|
},
|
||
|
|
_GetCopyMarkup : function(){
|
||
|
|
var $paragraphs = this.$elem.find('.gallery-copy'),
|
||
|
|
copyMarkup = '';
|
||
|
|
if($paragraphs){
|
||
|
|
$paragraphs.each(function(index, elem){
|
||
|
|
var paragraphWithoutBreaks = $(elem).html().replace(/<br\s?\/?>/gi, ' ');
|
||
|
|
if ($(elem).is('ul')){
|
||
|
|
copyMarkup += '<ul>' + paragraphWithoutBreaks + '</ul>';
|
||
|
|
} else {
|
||
|
|
copyMarkup += '<p>' + paragraphWithoutBreaks + '</p>';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
copyMarkup = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
return copyMarkup;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// expose constructor to the global object
|
||
|
|
window.Mazda.Gallery = Gallery;
|
||
|
|
|
||
|
|
// var gaz1 = new Gallery({gallerySearchString: '#frame1'});
|
||
|
|
// var gaz2 = new Gallery({gallerySearchString: '#frame2'});
|
||
|
|
// var gaz3 = new Gallery({gallerySearchString: '#frame3'});
|
||
|
|
// var gaz4 = new Gallery({gallerySearchString: '#frame4'});
|
||
|
|
// var gaz5 = new Gallery({gallerySearchString: '#frame5'});
|
||
|
|
// var gaz6 = new Gallery({gallerySearchString: '#frame6'});
|
||
|
|
// var gaz7 = new Gallery({gallerySearchString: '#frame7'});
|
||
|
|
// var gaz8 = new Gallery({gallerySearchString: '#frame8'});
|
||
|
|
// var gaz9 = new Gallery({gallerySearchString: '#frame9'});
|
||
|
|
// var gaz10 = new Gallery({gallerySearchString: '#frame10'});
|
||
|
|
// var gaz11 = new Gallery({gallerySearchString: '#frame11'});
|
||
|
|
// var gaz12 = new Gallery({gallerySearchString: '#frame12'});
|
||
|
|
// var gaz13 = new Gallery({gallerySearchString: '#frame13'});
|
||
|
|
// var gaz14 = new Gallery({gallerySearchString: '#frame14'});
|
||
|
|
// var gaz15 = new Gallery({gallerySearchString: '#frame15'});
|
||
|
|
// var gaz16 = new Gallery({gallerySearchString: '#frame16'});
|
||
|
|
// var gaz17 = new Gallery({gallerySearchString: '#frame17'});
|
||
|
|
// var gaz18 = new Gallery({gallerySearchString: '#frame18'});
|
||
|
|
// var gaz19 = new Gallery({gallerySearchString: '#frame19'});
|
||
|
|
|
||
|
|
})(jQuery, window, document);
|
||
|
|
|