gistfile1.js

/**
 * Profile view
 */

Nav.ProfileView = SC.View.extend(SC.Animatable, {
	classNames: 'profile-view'.w(),
	// initially positioned off screen
	transitions: {
		left: { duration: .2, timing: SC.Animatable.TRANSITION_EASE_OUT } // with timing curve
	},
	layout: {top: 0, bottom: 0, width: 568, left: -568},
	childViews: 'prompt credentials gmail'.w(),
	
	prompt: SC.LabelView.design(SC.Animatable, {
		classNames: 'profile-view-prompt'.w(),
		transitions: {
			top: { duration: .25, timing: SC.Animatable.TRANSITION_EASE_IN_OUT }
		},
		layout: {top: 200, left: 30},
		finalLayout: {top: 10},
		value: 'Select an account to add'
	}),
	
	credentials: SC.View.design(SC.Animatable, {
		classNames: 'profile-view-credentials'.w(),
		transitions: {
			height: { duration: .25, timing: SC.Animatable.TRANSITION_EASE_IN_OUT }
		},
		layout: {top: 180, height: 0},
		finalLayout: {height: 210},
		childViews: 'form loading'.w(),
		form: SC.FormView.design({
			layout: {left: 10, top: 5, right: 10},
			labelWidth: 100,
			//this causes infinite loop on startup
			//flowPadding: { left: 10, top: 5, right: 10 },
			theme: 'iphone-form',
			classNames: 'profile-view-credentials-form'.w(),
		
			childViews: 'email password submit'.w(),
		  
			email: SC.FormView.row(SC.TextFieldView.design({
				layout: { left: 0, width: 300, height: 44, centerY: 0},
				hint: 'steve@gmail.com'
			}), { classNames: ['first'] }),
			
			password: SC.FormView.row(SC.TextFieldView.design({
				layout: { left: 0, width: 300, height: 44, centerY: 0},
				value: '',
				isPassword: YES
			}), { classNames: ['last'] }),
			
			submit: SC.ButtonView.design({
				controlSize: SC.HUGE_CONTROL_SIZE,
				layout: { width: 100, height: 44, bottom: 5, left: 5 },
				title: 'Done',
				isDefault: YES,
				action: 'Nav.mainPage.mainPane.profileView.submitCredentials'
			})
		}),
		loading: SC.LabelView.design(SC.Animatable, {
			classNames: 'profile-view-credentials-loading'.w(),
			transitions: {
				opacity: { duration: .3, timing: SC.Animatable.TRANSITION_EASE_IN }
			},
			layout: {bottom: 65, height: 44, right: 0, left: 0},
			textAlign: SC.ALIGN_CENTER,
			icon: 'profile-view-credentials-loading-icon',
			value: 'Loading...',
			style: {opacity: 0.0 } // fully transparent
		})

	}),

	gmail: SC.View.design(SC.Animatable, {
		classNames: 'profile-view-account profile-view-gmail'.w(),
		transitions: {
			top: { duration: .25, timing: SC.Animatable.TRANSITION_EASE_IN_OUT }
		},
		layout: {top: 400, left: 30, width: 140, height: 140},
		finalLayout: {top: 30},
	    click: function(evt) {
			this.touchEnd();
		},
		touchStart: function(evt) {
			return YES;
		},
		touchEnd: function(evt) {
			this.adjust('top', this.finalLayout.top);
			this.parentView.prompt.adjust('top', this.parentView.prompt.finalLayout.top);
			this.parentView.credentials.adjust('height', this.parentView.credentials.finalLayout.height);
		}		
	}),
	showView: function() {
		var view = Nav.mainPage.mainPane.profileView;
		this.adjust('left', 200);
	},
	submitCredentials: function() {
		
	},
	hideView: function() {
		this.adjust('left', -568);
	}
});