moschino-ccss16/dev/js/views/LiveFashionView.js

Moschino's Capsule Collection Spring Summer 2016 package

var LiveFashionView = {
	$el : null,
	slider: null,
	slideLength: -1,
	initialSlide: 0,

	initialize : function() {
		this.$el = $('.body section');
		this.$el.addClass('show');

		this.initGallery();

		// BIND ALL PAGE EVENT
		this.bindEvents();
	},

	initGallery : function() {
		this.slideLength = this.$el.find('.handle article').length;

		this.resizeSlider();

		if( this.slideLength > 1 ) {
			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
			});

			this.slider.setStep(this.initialSlide, 0, true);
		}
	},

	resizeSlider : function() {
		var _sliderW = this.slideLength*GetClientWindowSize('width');

		this.$el.find('.handle').css({ 'width': _sliderW });
		this.$el.find('article').css( 'width', GetClientWindowSize('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_fashionShow_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_fashionShow_slideMove_'+_direction ]);
	},

	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('.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 ) );
	},

	unbindEvents : function() {
		this.slider = null;
		this.slideLength = -1;

		this.$el.find('.pager li a').off('click', $.proxy( this.moveSlide, this ) );
		this.$el.find('.arrows li a').off('click', $.proxy( this.changeSlide, this ) );
	}

};