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

Moschino's Capsule Collection Spring Summer 2016 package

var LiveLooksView = {
	$el : null,
	$parent : $('body'),
	$child : 'LiveLooksDetailView',

	gender : {
		default: 'all',
		actual: null
	},

	squares : null,
	squaresEnterAnimationDelay: 0.1,

	lookDetail : {
		default: 1,
		actual: null,
		url: 'static/templates/look-detail.html'
	},

	quickBuy : {
		c10: null,
		templateId: TEMPLATEINFO.templateId,
		isoCode: TEMPLATEINFO.iso,
		divisionId: 24,
		url: 'static/templates/quick-buy.html'
	},

	lookDetailJSON : {
		'looks': []
	},

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

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

	initGrid : function() {
		this.squaresEnterAnimationDelay = 0.1;
		this.squares.show();

		var _this = this;

		$.each( this.squares, function(i) {
			var currObj = $(this);
			currObj.find('.detail').data('index', i);
			if( is_safari || is_explorer ) currObj.addClass('enter');
			else TweenMax.to( currObj[0], 0.5, { delay: _this.squaresEnterAnimationDelay+=0.1, css: { className: '+=enter' } } );
		} );
	},

	filterGender : function(event) {

		this.$el.find('.filter li a').removeClass('active');
		this.$el.find('.filter li a[data-gender="'+this.gender.actual+'"]').addClass('active');

		_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_lookGenderChosen_'+this.gender.actual ]);

		this.squares = this.gender.actual == 'all' ? this.$el.find('.square') : this.$el.find('.square[data-gender="'+this.gender.actual+'"]').length !== 0 ? this.$el.find('.square[data-gender="'+this.gender.actual+'"]') : this.$el.find('.square[data-gender="nothing"]');
		TweenMax.to( this.$el.find('.square'), 0.5, { css: { className: '-=enter' }, onComplete : $.proxy( function() {
			this.$el.find('.square').hide();
			this.initGrid();
		}, this ) } );
	},

	openQuickbuy : function(event) {
		var _this = this;
		this.quickBuy.c10 = $(event.currentTarget).data('cid');

		this.$parent.find('.loading').fadeIn(500).dequeue();

		_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_lookQuickbuyRequested_'+this.quickBuy.c10 ]);

		$.ajax( {
			url: this.quickBuy.url,
			cache: false,
			crossDomain: true,
			contentType: 'text/html',
			type: 'GET',

			success: $.proxy( function(data) {
				this.$parent.find('.loading').fadeOut(500).dequeue();

				var template = Handlebars.compile(data);

				$('body').append( template( this.quickBuy ) );
				this.initQuickBuy();

			}, this ),

			error: function(data) {
				_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_lookQuickbuyError_'+this.url ]);
			},

			complete: function(data) {
				_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_lookQuickbuyLoaded_'+this.url ]);
				_gaq.push(['_trackPageview', LiveView.pages.sections[LiveView.pages.actual].url+'/'+_this.gender.actual+'/'+_this.quickBuy.c10]);
			}
		} );
	},

	initQuickBuy : function() {
		var $head = $('#quickbuy-frame').contents().find('head');
		var addCss = setTimeout( function() { $head.append( $('<link type="text/css" rel="stylesheet" href="build/css/quickbuy.css" />' ) ); }, 500 );

		var showQuickbuy = setTimeout( function() { $('.quick-buy-ovl').addClass('show'); }, 100);
		$('html').addClass('noscroll');

		$('.quick-buy-ovl .btn-close a').on('click', $.proxy( this.closeQuickBuy, this ) );
	},

	closeQuickBuy : function(event) {
		$('.quick-buy-ovl').removeClass('show');
		var hideQuickbuy = setTimeout( function() {
			$('.quick-buy-ovl').remove();
			$('html').removeClass('noscroll');
		}, 500);
	},

	openDetail : function(event) {
		var _this = this;
		this.$el.find('.loading').fadeIn(500).dequeue();

		_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_lookDetailRequested_'+this.lookDetail.actual ]);

		$.ajax( {
			url: this.lookDetail.url,
			cache: false,
			crossDomain: true,
			contentType: 'text/html',
			type: 'GET',

			success: $.proxy( function(data) {
				this.$el.find('.loading').fadeOut(500).dequeue();

				var template = Handlebars.compile(data);

				this.lookDetailJSON.looks = [];

				if( this.gender.actual == 'all' ) this.lookDetailJSON.looks = looksJSON.looks;
				else {
					for( i = 0; i < looksJSON.looks.length; i++ ) {
						if( looksJSON.looks[i].gender === this.gender.actual ) {
							this.lookDetailJSON.looks.push( looksJSON.looks[i] );
						}
					}
				}

				this.$el.find('.look-detail').append( template( { 'total': this.lookDetailJSON, 'detail': this.lookDetail.actual, 'gender': this.gender.actual } ) );

				this.showDetail();

			}, this ),

			error: function(data) {
				_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_lookDetailError_'+this.url ]);
			},

			complete: function(data) {
				_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_lookDetailLoaded_'+this.url ]);
				_gaq.push(['_trackPageview', LiveView.pages.sections[LiveView.pages.actual].url+'/'+_this.gender.actual+'/'+_this.lookDetail.actual]);
			}
		} );
	},

	showDetail : function() {
		this.$el.find('.content').addClass('hide');
		this.$el.find('.look-detail').addClass('show');

		TweenMax.to( this.$el, 0.5, { height: this.$el.find('.look-detail').height() } );

		LiveLooksDetailView.initialize();
	},

	bindEvents : function() {
		this.$el.find('.filter li a').on('click', { object: 'LiveLooksView' }, $.proxy( RouterView.setGenderUrl, this ) );
		this.$el.find('.square a.detail').on('click', $.proxy( RouterView.setLookUrl, this ) );
		this.$el.find('.square .items li a').on('click', $.proxy( this.openQuickbuy, this ) );
	},

	unbindEvents : function() {
		this.gender.actual = null;
		this.squares = null;
		this.lookDetailJSON.looks = [];

		this.$el.find('.filter li a').off('click', { object: 'LiveLooksView' }, $.proxy( RouterView.setGenderUrl, this ) );
		this.$el.find('.square a.detail').off('click', $.proxy( RouterView.setLookUrl, this ) );
		this.$el.find('.square .items li a').off('click', $.proxy( this.openQuickbuy, this ) );
	}

};