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

Moschino's Capsule Collection Spring Summer 2016 package

var LiveItemsView = {
	$el : null,
	$parent : $('body'),

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

	squares : null,
	squaresEnterAnimationDelay: 0.1,

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

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

		this.registerHelperCompare();

		// 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_itemsGenderChosen_'+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) {
		this.quickBuy.c10 = $(event.currentTarget).data('cid');

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

		_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_itemsQuickbuyRequested_'+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_itemsQuickbuyError_'+this.url ]);
			},

			complete: function(data) {
				_gaq.push(['_trackEvent', 'CustomTemplateEvents', 'MOSCHINO_CC_SS16', 'live_itemsQuickbuyLoaded_'+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);
	},

	registerHelperCompare : function() {
		Handlebars.registerHelper('equal', function(lvalue, rvalue, options) {
			if (arguments.length < 3) throw new Error("Handlebars Helper equal needs 2 parameters");
			if( lvalue!=rvalue ) return options.inverse(this);
			else return options.fn(this);
		});
	},

	bindEvents : function() {
		this.$el.find('.filter li a').on('click', { object: 'LiveItemsView' }, $.proxy( RouterView.setGenderUrl, this ) );
		this.$el.find('.square .quick-buy').on('click', $.proxy( this.openQuickbuy, this ) );
	},

	unbindEvents : function() {
		this.gender.actual = null;
		this.squares = null;

		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 ) );
	}

};