moschino-ccss16
Version:
Moschino's Capsule Collection Spring Summer 2016 package
211 lines (168 loc) • 8.5 kB
JavaScript
var LiveLooksDetailView = {
$el : null,
$parent : 'LiveLooksView',
slider : null,
slideLength: -1,
firstTime : true,
detail : {
url: 'static/templates/image-zoom.html'
},
initialize : function() {
this.$el = $('.body section .look-detail');
this.initGallery();
LiveView.preloadImage();
// BIND ALL PAGE EVENT
this.bindEvents();
},
initGallery : function() {
this.slideLength = this.$el.find('.handle article').length;
this.resizeSlider();
if( this.slideLength > 1 ) {
if( window[window[window[LiveView.pages.sections[LiveView.pages.actual].view].$child].$parent].lookDetail.actual > this.slideLength ) window[window[window[LiveView.pages.sections[LiveView.pages.actual].view].$child].$parent].lookDetail.actual = window[window[window[LiveView.pages.sections[LiveView.pages.actual].view].$child].$parent].lookDetail.default;
this.$el.find('.handle article').removeClass('selected');
this.$el.find('.arrows, .pager').removeClass('hidden');
this.slider = new Dragdealer( this.$el.find('.slider').attr('id'), {
steps: this.slideLength,
speed: 0.3,
loose: true,
vertical: false,
callback: $.proxy( function(x, y) {
if( this.firstTime ) {
this.firstTime = false;
this.updateContent();
}
else RouterView.setLookUrl();
}, this )
});
this.slider.setStep(window[window[window[LiveView.pages.sections[LiveView.pages.actual].view].$child].$parent].lookDetail.actual, 0, true);
} else {
this.updateContent();
}
},
resizeSlider : function() {
var _sliderW = this.slideLength*this.$el.find('.slider').width();
this.$el.find('.handle').css({ 'width': _sliderW });
this.$el.find('article').css( 'width', this.$el.find('.slider').width() );
},
moveSlide : function(event) {
event.preventDefault();
var _id = $(event.target).parent().index();
this.slider.setStep(_id+1, 0, false);
_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_lookDetail_slideRequested_'+_id ]);
},
changeSlide : function(event) {
event.preventDefault();
var _id = this.slider.getStep()[0],
_direction = $(event.currentTarget).parent().attr('class');
if(_direction == 'prev') {
if( _id == 1 ) _id = this.slideLength;
else _id--;
} else {
if( _id < this.slideLength ) _id++;
else _id = 0;
}
if( this.slider !== null ) this.slider.setStep(_id, 0, false);
_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_lookDetail_slideMove_'+_direction ]);
},
updateContent : function(index) {
var sourceLookGender = '{{{gender}}}',
sourceLookIndex = 'Look <span class="index">{{{number}}}</span>',
sourceLookCounter = '<span class="index">{{{number}}}</span> of <span class="total">{{total}}</span>',
sourceItemsList = '{{#each items}}<li class="clearfix"><a href="javascript:void(0)" title="{{name}}" data-cid="{{c10}}"><span class="name">{{name}}</span><span class="shop-now">SHOP NOW</span></a></li>{{/each}}';
var templateLookGender = Handlebars.compile(sourceLookGender),
templateLookIndex = Handlebars.compile(sourceLookIndex),
templateLookCounter = Handlebars.compile(sourceLookCounter),
templateItemsList = Handlebars.compile(sourceItemsList);
var dataLookGender = { 'gender': looksJSON.looks[window[window[window[LiveView.pages.sections[LiveView.pages.actual].view].$child].$parent].lookDetail.actual-1].gender },
dataLookIndex = { 'number': window[window[window[LiveView.pages.sections[LiveView.pages.actual].view].$child].$parent].lookDetail.actual },
dataLookCounter = { 'number': window[window[window[LiveView.pages.sections[LiveView.pages.actual].view].$child].$parent].lookDetail.actual, 'total': this.slideLength },
dataItemsList = { 'items': looksJSON.looks[window[window[window[LiveView.pages.sections[LiveView.pages.actual].view].$child].$parent].lookDetail.actual-1].items };
this.$el.find('.basic-infos .gender').html( templateLookGender( dataLookGender ) );
this.$el.find('.basic-infos h3').html( templateLookIndex( dataLookIndex ) );
this.$el.find('.look-counter').html( templateLookCounter( dataLookCounter ) );
this.$el.find('.items-list').html( templateItemsList( dataItemsList ) );
},
backGallery : function(event) {
this.$el.prev().removeClass('hide');
this.firstTime = true;
this.unbindEvents();
TweenMax.to( this.$el, 1, { css: { className: '-=show' }, onComplete: $.proxy( function() {
this.$el.html('');
this.$el = null;
}, this ) } );
TweenMax.to( this.$el.parent().parent(), 0.5, { height: this.$el.parent().find('.content').height(), onComplete: $.proxy( function() {
this.$el.parent().parent().removeAttr('style');
}, this ) } );
_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_backToLookFrom_Gender_'+window[window[window[LiveView.pages.sections[LiveView.pages.actual].view].$child].$parent].gender.actual+'Look_'+window[window[window[LiveView.pages.sections[LiveView.pages.actual].view].$child].$parent].lookDetail.actual ]);
RouterView.setGenderUrl();
},
openImage : function(event) {
var _imgInfo = { source: $(event.currentTarget).data('open') };
window[this.$parent].$parent.find('.loading').fadeIn(500).dequeue();
_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_openImageRequested_'+_imgInfo.source ]);
$.ajax({
url: this.detail.url,
cache: false,
crossDomain: true,
contentType: 'text/html',
type: 'GET',
success: $.proxy( function(data) {
window[this.$parent].$parent.find('.loading').fadeOut(500).dequeue();
var template = Handlebars.compile(data);
var params = _imgInfo;
window[this.$parent].$parent.append( template( params ) );
$('html').addClass('noscroll');
$('body').on( 'click', '.global-ovl .btn-close a', $.proxy( _this.closeImage, _this) );
this.initPanZoom();
var showOvl = setTimeout( function() {
$('.global-ovl').addClass('enter');
}, 200);
}, this ),
error: function(data) {
_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_openImageError_'+this.url ]);
},
complete: function(data) {
_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_openImageLoaded_'+this.url ]);
}
});
$(window).on('resize.panzoom', $.proxy( function() {
this._panzoom.panzoom('destroy');
$('.global-ovl .content .scroller .image img').css({ 'margin': '0' });
this.initPanZoom();
}, this ) );
},
initPanzoom : function(event) {
this._panzoom = $('.global-ovl .content .scroller .image img').panzoom({
minScale: 1,
maxScale: GetClientWindowSize('width') > 767 ? 4 : 3,
contain: 'invert'
});
$('.global-ovl .content .scroller .image img').css({ 'margin': '0 auto' });
this._panzoom.parent().on('mousewheel.focal', $.proxy( function( e ) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
this._panzoom.panzoom('zoom', zoomOut, {
increment: 0.1,
animate: true,
transition: true,
focal: e
});
}, this) );
},
bindEvents : function() {
this.$el.find('.btn-back-gallery a').on('click', $.proxy( this.backGallery, this ) );
this.$el.find('.btn-view-item a').on('click', $.proxy( this.goToItemsView, this ) );
this.$el.find('.pager li a').on('click', $.proxy( this.moveSlide, this ) );
this.$el.find('.arrows li a').on('click', $.proxy( this.changeSlide, this ) );
this.$el.find('.btn-zoom a').on('click', $.proxy( this.openImage, this ) );
this.$el.on('click', '.items-list li a', $.proxy( window[window[window[LiveView.pages.sections[LiveView.pages.actual].view].$child].$parent].openQuickbuy, window[window[window[LiveView.pages.sections[LiveView.pages.actual].view].$child].$parent] ) );
},
unbindEvents : function() {
this.$el.find('.btn-back-gallery a').off('click', $.proxy( this.backGallery, this ) );
this.$el.find('.btn-view-item a').off('click', $.proxy( this.goToItemsView, this ) );
this.$el.find('.pager li a').off('click', $.proxy( this.moveSlide, this ) );
this.$el.find('.arrows li a').off('click', $.proxy( this.changeSlide, this ) );
this.$el.find('.btn-zoom a').off('click', $.proxy( this.openImage, this ) );
}
};