Backbone APP

app.js

(function($,_,global) {
	var App = {
		init: function() {
			var class_name = $('#page').attr('class');
			switch (class_name) {
				case 'hp'		: {
					new App.View.Home.Boxed();
					new App.View.Home.Cover();
					new App.View.Home.Perfume();
				}
				break;
				case 'gallery'	: new App.View.Gallery(); break;
				case 'fashion'	: new App.View.Fashion(); break;
				case 'adv'      : new App.View.Adv(); break;
                case 'special'  : new App.View.Special(); break;
                case 'chameleon'  : new App.View.Chameleon(); break;
                case 'christmas'  : new App.View.Christmas(); break;
			}

			if(global.page_router) {
					new page_router();
					Backbone.history.start();
			}

			if(Response.band(768))
				new App.HeaderDesktop();
			else
				new App.HeaderMobile();

			new App.Footer();
			new App.Validate();

			setTimeout(function() { window.scrollTo(0, 1); }, 100);

			global.Utils.setInputPlaceholder();
		},
		View: {
			Home: {}
		},
		Collection: {
			JsonGal: {}
		},
		Model: {
			JsonItem: {}
		}
	};

	App.View.Home = Backbone.View.extend({
		initialize: function() {
			var that = this;
			Response.action(this.onResize);
			$('#hpslider div > article').touchwipe({
				wipeLeft: function() { $('#hpslider a.nextframe').click(); },
				wipeRight: function() { $('#hpslider a.prevframe').click(); },
				min_move_x: 20,
				min_move_y: 20,
				preventDefaultEvents: false
			});

			

			new App.Keyboard();

		},
		onResize: function(e) {
			var $win = $(window);



			$('img[data-landscape]').each(function() { // NEEDS REFACTORING
				if($win.height() < $win.width() && $(this).attr('src') != $(this).data('landscape') )
					$(this).attr('src', $(this).data('landscape'));
				else if ($win.height() >= $win.width() && $(this).attr('src') != $(this).data('portrait'))
					$(this).attr('src', $(this).data('portrait'));
			});
		},
		keyboardControl: function(e) {
			alert(e);
		}
	});

	App.View.Home.Boxed = App.View.Home.extend({
		el: 'article.boxed',
		initialize: function() {


			_.bindAll(this);

			//App.View.Home.Boxed.__super__.initialize();
			App.View.Home.prototype.initialize.call(this);

			var that = this;
			
			this.win = $(window);
			this.h = {
				header : this.$el.parents('#page').find('header').height(),
				footer: this.$el.parents('#page').find('footer').height()
			};
			this.$el.find('figure img').attr('style','');



			$(window).on('resize', function() {
				that.responsive();
			});
			this.responsive();

			this.$el.find('figure img').on("load",function(){
				that.responsive();
			});
			
		},
		responsive: function() {
			var that = this,
				orientation,
				$image = this.$el.find('.box figure img'),
				mainHeight = this.$el.find('.box').height(),
				innerHeight = 782 + this.$el.find('.box > div > div').height(),
				margin = (mainHeight - innerHeight) /2;


			$image.each(function() {

				if(that.win.height()> that.win.width()) {//portrait
					if($(this).attr('src') != $(this).data('p')) {
						$(this).attr('src',$(this).data('p'));
						
					}
					orientation = "p";
						
				} else {
					if($(this).attr('src') != $(this).data('l')) {
						$(this).attr('src',$(this).data('l'));
						
					}
					orientation = "l";
						
				}
			});
			

			if(mainHeight > innerHeight && orientation != 'p') {
				this.$el.find('div.box >div').css({
					'margin-top': margin,
					'margin-bottom': margin
				});
			} else {
				this.$el.find('div.box >div').css({
					'margin-top' : 0,
					'margin-bottom': 0
				});
				$image.height(mainHeight- this.$el.find('.box > div > div').height()).width('auto');
			}
			
		}
	});
	
	
	App.View.Home.Perfume = App.View.Home.extend({
		el: 'article.perfume',
		initialize: function() {
		    _.bindAll(this);
		    
		    var view = this;
		    view.win = $(window);
		    
		    view.cover = $('.cover', view.$el);
		    view.bg = $('.bg', view.cover);
		    
		    view.product = $('.product', view.$el);
		    
		    Response.action(function () {
		        view.onResizeCover();
		    });
		    
		    // fix webkit reload img cached problem
		    view.win.load(function () {
		    	$(this).trigger('resize');
		    });
		},
		onResizeCover: function () {
		    ratio = this.bg.height() / this.bg.width();
		    
		    parentWidth = this.cover.width();
		    parentHeight = this.cover.height();
		    
		    if ((parentHeight / parentWidth) > ratio) {
		        imgWidth = parentHeight / ratio;
		        imgHeight = parentHeight;
		    } else {
		        imgWidth = parentWidth;
		        imgHeight = 'auto';
		    }
		    
		    
		    this.bg.css({
		        width: imgWidth,
		        height: imgHeight
		    });
		    
		    this.bg.animate({
		        left: (parentWidth - imgWidth) / 2,
		        top: (parentHeight - this.bg.height()) / 2
		    }, 10);
		}
	});

	App.View.Home.Cover = Backbone.View.extend({
		el: 'article.cover',
		initialize: function() {
			var that = this;
			_.bindAll(this);

			this.win = $(window);

			that.responsive();
			this.$el.find('figure img').on("load",function(){
					that.responsive();
			});
			$(window).on('resize', function() {
				that.responsive();
			});
			
		},
		responsive: function() {
			var that = this,
				orientation = "",
				boxHeight = this.$el.find('.box').height(),
				innerBoxHeight = this.$el.find('.box > div').height(),
				imageHeight = this.$el.find('.box > div img').height(),
				margin = (boxHeight - imageHeight)/2,
				marginPortrait = (boxHeight - innerBoxHeight)/2;


			$image = this.$el.find('.box > div img');

			$image.each(function() {

				if(that.win.height() > that.win.width()) {//portrait
					if($(this).attr('src') != $(this).data('p')) {
						$(this).attr('src',$(this).data('p'));
						
					}
					orientation = "p";
						
				} else {
					if($(this).attr('src') != $(this).data('l')) {
						$(this).attr('src',$(this).data('l'));
						
					}
					orientation = "l";
						
				}
			});

			if(boxHeight > imageHeight && orientation == 'l' && Response.band(768)) {
				this.$el.find('.box > div').css('margin-top',margin);
				this.$el.removeClass('media-query-height');
			} else if(boxHeight > innerBoxHeight && orientation == 'p') {

				this.$el.find('.box > div').css('margin-top',marginPortrait);
				this.$el.removeClass('media-query-height');
			} else {

				this.$el.find('.box > div').css('margin-top',0);
				if(Response.wave(0,850) && Response.band(768))
					this.$el.addClass('media-query-height');
			}
		}

	});

	App.Keyboard = Backbone.View.extend({
		el: 'body',
		events: {
			'keydown' : 'keyDown'
		},
		event2key : {
		  '37':'left',
		  '39':'right',
		  '38':'up',
		  '40':'down',
		  '13':'enter',
		  '27':'esc',
		  '32':'space',
		  '107':'+',
		  '109':'-',
		  '33':'pageUp',
		  '34':'pageDown'
		},
		keyDown: function(e) {
			var key = this.event2key[e.which || e.keyCode];
			switch(key) {
				case 'left' : $('#hpslider a.prevframe').click(); break;
				case 'right':  $('#hpslider a.nextframe').click(); break;
			}
		}
	});

	App.Validate = Backbone.View.extend({
		el: '.validate',
		events: {
			'submit' : 'checkRequired'
		},
		checkRequired: function(e) {
			e.preventDefault();


			var $form = $(e.currentTarget),
				$required = $form.find('input[required]'),
				$errors = $form.find('.error'),
				that = this,
				valid = false;

			$.each($required, function() {

				var type = $(this).attr('type');

				switch(type) {
					case 'email' : {
						if(!that.validateMail(this)) {
							// console.log($errors.find('.email'));
							$errors.find('.'+type).css('display', 'block');
							valid = false;
							return false;
						} else {
							$errors.find('.'+type).hide();
							valid = true;
						}
					} break;
					case 'checkbox' : {
						if(!that.validateCheckbox(this)) {
							$errors.find('.'+type).css('display', 'block');
							valid= false;
							return false;
						} else {
							$errors.find('.'+type).hide();
							valid=true;
						}
					} break;
				}
			});

			if (valid)
				that.success($form);

		},
		validateMail: function(el) {
			// console.log($(el).val());
			return $(el).val() !== "" && $(el).val().match(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/);
		},
		validateCheckbox: function(el) {
			return $(el).is(':checked');
		},
		success: function($form) {
			$.ajax({
				type: 'POST',
				url: $form.attr('action'),
				data: $form.serialize()
			}).done(function(data){
				$form.parent().empty().append(data);
			}).fail(function(){
				// console.log('Something goes wrong');
			});
			return false;
		}

	});

	App.HeaderDesktop = Backbone.View.extend({
		el:'header',
		initialize: function() {
		},
		events: {
			'mouseleave .showall' : 'fixDefaultSubmenu',
			'mouseover .non-default' : 'hideDefaultSubmenu',
			'mouseover .default' : 'showDefaultSubmenu'
		},
		fixDefaultSubmenu: function(e){
			$(e.currentTarget)
				// mostro il submenu di default
				.find(".default > div")
				.removeAttr("style")
				.end()
				// metto la freccia a default
				.find(".default > a")
				.addClass("with-child")
				.css("color","#4a575f")
				.end()
				// cerco non-default e tolgo la freccia
				.find(".non-default > a")
				.removeClass("with-child")
				.css("color","#b2b2b2")
				.end()
				// cerco non-default e nascondo il suo submenu
				.parent()
				.find(".non-default > div")
				.hide();
		},
		hideDefaultSubmenu: function(e) {
			$(e.currentTarget)
				// metto la freccia a non-default
				.find("> a")
				.addClass("with-child")
				.css("color","#4a575f")
				.end()
				// mostro il submenu di non-default
				.find("> div")
				.removeAttr("style")
				.end()
				// cerco default e tolgo la freccia
				.parent()
				.find(".default > a")
				.removeClass("with-child")
				.css("color","#b2b2b2")
				.end()
				// cerco default e nascondo il suo submenu
				.parent()
				.find(".default > div")
				.hide();
		},
		showDefaultSubmenu: function(e) {
			$(e.currentTarget)
				// metto la freccia a default
				.find("> a")
				.addClass("with-child")
				.css("color","#4a575f")
				.end()
				// mostro il submenu di default
				.find("> div")
				.removeAttr("style")
				.end()
				// cerco non-default e tolgo la freccia
				.parent()
				.find(".non-default > a")
				.removeClass("with-child")
				.css("color","#b2b2b2")
				.end()
				// cerco non-default e nascondo il suo submenu
				.parent()
				.find(".non-default > div")
				.hide();
		}
	});

	App.HeaderMobile = Backbone.View.extend({
		el: 'header',
		events: {
			'click #menu-trigger': 'toggleMenu',
			'click nav ul li a' : 'toggleOpen',
			'click nav ul li div ul li' : 'toggleOpen'
		},
		initialize: function() {
			this.$nav = this.$el.find('nav');
		},
		toggleMenu: function() {
			this.$nav.find('> ul').toggleClass('open');
		},
		toggleOpen: function(e) {
			var $cur = $(e.currentTarget).next();
			$cur.toggleClass('open');
		}

	});

	App.ScrollTop = Backbone.View.extend({
		el:'.go-top',
		initialize: function() {
		},
		events: {
			'click a' : 'upToTheTop'
		},
		upToTheTop: function(e){
			e.preventDefault();

			$("html, body").animate({
				scrollTop:0
			}, 'slow');
		}
	});

	App.Footer = Backbone.View.extend({
		el:'footer',
		initialize: function() {
			$('select.styled').each(function() {
				$(this).selectBox();
			});
		},
		events: {
			'click #nl-trigger' : 'toggleOpen',
			'click .nl-baguette a.ico-close': 'toggleOpen'
		},
		toggleOpen: function(e) {
			e.preventDefault();
			this.$el.find('.nl-baguette').toggleClass('open');
		}
	});

	App.Scroller = Backbone.View.extend({
		el: '#scroller',
		events: {
			'click .next' : 'next',
			'click .prev': 'prev'
		},
		initialize: function(id) {
			//if(!iScroll)
			//	alert('Needs iScroll');
			if( !$("#"+id).size() ){
				return false;
			}

			var image_width = Response.band(0,767) ? 73 : 400;
			this.size = this.$el.find('li').size();

			this.$el.find('ul').width(this.size * image_width);


			if(!$.browser.msie)
				this.iScroll = new iScroll(id, {vScrollbar:false});
			
			this.idx = 1;

			
		},
		prev: function(e) {
			e.preventDefault();
			this.idx = (this.idx > 1 ) ? --this.idx : 1;
			// console.log(this.idx);
			if(this.iScroll)
				this.iScroll.scrollToElement('li:nth-child('+this.idx+')',500);
			else {
				var offset = -(this.$el.find('li:nth-child('+this.idx+')').offset().left-this.$el.find('ul').offset().left);
				this.$el.find('ul').animate({'left':offset});
			}

		},
		next: function(e) {
			e.preventDefault();
			this.idx = (this.idx <= this.size  ) ? ++this.idx : this.size;
			if(this.iScroll)
				this.iScroll.scrollToElement('li:nth-child('+this.idx+')',500);
			else {
				var offset = -(this.$el.find('li:nth-child('+this.idx+')').offset().left-this.$el.find('ul').offset().left);
				this.$el.find('ul').animate({'left':offset});
			}

			
		}
	});

	App.Video = Backbone.View.extend({
		el: ".jp-video",
		events: {
			'click a.trigger-play':'play'
		},
		options: {
			ratio: 16/9
		},
		initialize: function(options) {


			if( !this.$el.size() ){
				return false;
			}

			var that = this;
			_.bindAll(this);

			this.$el.each(function(idx, value) {
				that.parse(value);
			});
		},
		parse: function(el) {
			var $el = $(el),
				that = this;
			$el.find('.jp-jplayer').jPlayer({
				ready: function () {
					$(this).jPlayer("setMedia", {
						m4v: $el.data('mp4'),
						webmv: $el.data('webm'),
						poster: $el.data('poster')
					});
				},
				swfPath: $el.data('swf'),
				supplied: "m4v, webmv, webm",
				cssSelectorAncestor: "#"+$el.attr('id'),
				size: {
					width: "100%",
					height: "100%"
				},
				nativeVideoControls: {
					ipad: /ipad/,
					iphone: /iphone/,
					android_pad: /android [0-3](?!.*?mobile)/,
					android_phone: /android.*?mobile/,
					blackberry: /blackberry/,
					windows_ce: /windows ce/,
					webos: /webos/,
					firefox: /firefox/
				},
				resize: function(e){
					if (e.jPlayer.status.cssClass != "jp-video-full"){
						that.onResize();
					}
				},
				play: function() {
					if($el.find('a.trigger-play').size())
						$el.find('a.trigger-play').hide();
				},
				pause: function() {
					if($el.find('a.trigger-play').size())
						$el.find('a.trigger-play').show();
				},
				ended: function() {
					$(this).jPlayer("playHead", 0);
				}
			});
		},
		play: function(e) {
			e.preventDefault();
			var $player = $(e.currentTarget).parents('.jp-video').find('.jp-jplayer');
			$player.jPlayer("play");
		},
		onResize: function() {
			console.log(this.options.ratio);
			var $video = this.$el,
				that = this;
			$video.each( function() {
				$(this).find('.jp-jplayer').height($video.width()*1/that.options.ratio).css('vertical-align','middle');
				$(this).find('.jp-jplayer > img').height($video.width()*1/that.options.ratio).css('vertical-align','middle');
				$(this).find('.jp-jplayer > video').height($video.width()*1/that.options.ratio).css('vertical-align','middle');
			});
			
		}
	});

	App.View.Fashion = Backbone.View.extend({
		el: '#page.fashion',
		initialize: function() {
			_.bindAll(this);
			
			Response.action(this.onResize);

			new App.Scroller('scroller');
			this.video = new App.Video();
			new App.ScrollTop();

		},
		onResize: function() {
			this.win = $(window);
			var $centered = $('.centered');
			this.$cover = $('.cover');
			if(Response.band(767)) {
				this.$el.find('.height-100').height(this.win.height());
			} else {
				if(this.win.height() > this.win.width()) //portrait
					this.$el.find('.height-100').height(this.win.height()-40);
				else {
					//do nothing
				}
			}
			
			$centered.css({
				'margin-left' : -$centered.width()/2,
				'margin-top'  : -$centered.height()/2
			});

			//this.$el.find('.jp-video').attr('style','');

			var win_ratio = this.win.width() / this.win.height(),
				cover_ratio = 1.74;

			

			if (win_ratio < cover_ratio) {
				this.$cover.removeClass('fitWidth').addClass('fitHeight');
				if(Response.band(767)) {
					this.$cover.attr('style','');
					this.$cover.css ( {'margin-left' : -this.win.height()*cover_ratio/2 }); // this maybe works better
				} else {
					var cover_height = this.win.height()-this.$el.find('.bar-bottom-fixed').height();
					this.$cover.height(cover_height);
					this.$cover.css ( {'margin-left' : -cover_height*cover_ratio/2 });

				}
			}
			else {
				this.$cover.removeClass('fitHeight').addClass('fitWidth');
				this.$cover.attr('style','');
			}

			this.$cover.removeAttr('width').removeAttr('height');

			
			this.video.onResize();
			
		}
	});

	App.View.Gallery = Backbone.View.extend({
		el: '#page.gallery',
		initialize: function() {
			_.bindAll(this);
			
			this.win = $(window);
			this.header = $('header', this.$el);
			this.banner = $('.height-100', this.$el);
			this.breadcrumbs = $('.breadcrumbs', this.$el);
			this.banner.title = $('h1', this.banner);
			this.banner.img = $('.product img', this.banner);
			this.menu = $('.bar-bottom-fixed', this.$el);
			this.timer = false;
			this.centered = $('.centered');
			
			Response.action(this.onResize);
			
			// fix webkit reload img cached problem
			this.win.load(function () {
				$(this).trigger('resize');
			});
			
			this.video = new App.Video();
			new App.Scroller("scroller");
			new App.ScrollTop();
			
			// centro il titolo in altezza nello spazio che rimane (30 sono i px di sovrapposizione tra prodotto e whitebar)
			// var that = this;
			// $(".bar-bottom-fixed .product img").on("load",function(){
			// that.resizeProduct();
			// that.verticalCenterTitle();
			// });
		},
		onResize: function(){
			this.centered.css({
				'margin-left' : -this.centered.width()/2,
				'margin-top'  : -this.centered.height()/2
			});
			
			// video ridimensionamento
			this.video.onResize();
			
			// il blocco avrà l'altezza come la viewport
			if(Response.band(767)) {
				this.$el.find('.height-100').height(this.win.height());
			} else {
				this.$el.find('.height-100').height(this.win.height() - (this.menu.height() - 10));
			}
			
			var parentWidth = this.win.height(),
				parentHeight = this.win.height() - this.header.height() - this.breadcrumbs.height() - this.banner.title.outerHeight() - this.menu.height();
			
			var imgWidth = this.banner.img.width(),
				imgHeight = this.banner.img.height();

			var ratio = imgHeight / imgWidth;
			
			imgWidth = parentHeight / ratio;
			
			if (imgWidth < 90) return false;
			
			this.banner.img.css({
				width: imgWidth
			});

			// this.verticalCenterTitle();
			// this.resizeProduct();

		}
		

	});

	App.View.Adv= Backbone.View.extend({
		el:'#page.adv',
		events: {

		},
		initialize: function() {
			_.bindAll(this);
			this.video = new App.Video({'ratio':800/563}); //same as the photo

			$('.gal-ajax-block').each(function(){
				new App.View.JsonGal($(this));
			});
			

			Response.action(this.onResize);
		},
		onResize: function() {
			this.video.onResize();
		}
	});
        
    App.View.Special = App.View.Adv.extend({
    	initialize: function() {
    		_.bindAll(this);
			this.video = new App.Video(); //same as the photo

			$('.gal-ajax-block').each(function(){
				new App.View.JsonGal($(this));
			});
			

			Response.action(this.onResize);
    	}
    });
    App.View.Chameleon = App.View.Adv.extend({
    	initialize: function() {
    		_.bindAll(this);
			this.video = new App.Video(); 

			Response.action(this.onResize);
    	}
    });
    App.View.Christmas = App.View.Fashion.extend({
    	el: '#page.christmas',
    	initialize: function() {
    		_.bindAll(this);
			this.video = new App.Video(); 
			$('.gal-ajax-block').each(function(){
				new App.View.JsonGal($(this));
			});
			Response.action(this.onResize);
    	}
    });


	$(document).ready(function() {
		App.init();
	});



	App.Collection.JsonGal = Backbone.Collection.extend(); //aggiunngi lenght come attributo

	

	//view of HTML
	App.View.JsonGal = Backbone.View.extend({
		options: {
			idx:0
		},
		events: {
			'click a.prev' : 'prev',
			'click a.next' : 'next'
		},
		initialize: function($el) {
			this.$el = $el;

			_.bindAll(this);

			var json= window[$el.data('json')],
				jsonGalItems = new App.View.JsonGalItems(json);

			this.size = jsonGalItems.size;

			this.$el.find('.gal-ajax')
				.find('ul').html(jsonGalItems.$el.html()).css({'width':(jsonGalItems.size*100)+'%'})
				.find('ul').touchwipe({
					wipeLeft: function() { $el.find('a.next').click(); },
					wipeRight: function() { $el.find('a.prev').click(); },
					min_move_x: 20,
					min_move_y: 20,
					preventDefaultEvents: false
				});

			
			Response.action(this.resize);
		},
		resize: function() {
			if(Response.band(768)) {
				this.$el.find('.gal-ajax').find('li').css({'width':'800px'});
			} else {
				this.$el.find('.gal-ajax').find('li').css({'width':(100/this.size)+'%'})
			}
		},
		scrollTo: function(idx) {
			if(Modernizr.csstransitions) {
				this.$el.find('.gal-ajax')
					.find('ul').css({'margin-left': -(idx*100)+'%'});
			} else {
				this.$el.find('.gal-ajax')
					.find('ul').animate({'margin-left': -(idx*100)+'%'},1000);
			}
		},
		loadImg: function(idx) {

			var $img = this.$el.find('img').eq(idx);

			if($img.attr('src') != $img.data('src'))
				$img.attr('src', $img.data('src'));
		},
		prev: function(e) {
			e.preventDefault();
			if(this.options.idx-1 >= 0) {
				this.options.idx--;
				this.scrollTo(this.options.idx);
				this.loadImg(this.options.idx);
			}
		},
		next: function(e) {
			e.preventDefault();
			if(this.options.idx+1 < this.size) {
				this.options.idx++;
				this.scrollTo(this.options.idx);
				this.loadImg(this.options.idx);
			}
		}

	});
	
	//view of collection
	App.View.JsonGalItems = Backbone.View.extend({
		tagName: 'ul',
		initialize: function(json) {
			_.bindAll(this);
			this.collection = new App.Collection.JsonGal(json);
			this.size = this.collection.length;
			this.render();
		},
		render: function() {
			var that = this;
			this.$el.empty();

			_.each(this.collection.models,function(item,idx){
				var hasDescription = item.get('description') ? true : false,
					li = new App.View.JsonGalItem({model: item, length: that.size, hasDescription: hasDescription}).render().$el.html(),
					$li = $(li);


				if(idx < 2) {
					$li.find('img').attr('src',$li.find('img').data('src'));
				}
				this.$el.append($li);

			},this);

			return this;
		}
	});
	//view of model
	App.View.JsonGalItem = Backbone.View.extend({
		tagName: 'li',
		initialize: function() {
			_.bindAll(this);
			
			if(Response.band(0,768)) {
				this.model.set('src',this.model.get('src_mobile'));
			}

			if(!this.options.hasDescription) {
				this.template = _.template($('#tmpl-item').html());
			} else {
				this.template = _.template($('#tmpl-item-description').html());
			}
		},
		render: function() {

			this.$el.html(
				this.template(
					this.model.toJSON()
				)
			);

			return this;
		}
	});

	



})(jQuery,_,this);