SelectView.js

SelectView.js

UI.SelectView = Em.ContainerView.extend({
	childViews: ['display', 'button', 'popup'],
	viewName: 'selectView',
	classNames: ["ember-selectview"],
	attributeBindings: ['tabindex', 'unselectable'],
	unselectable: 'on',
	tabindex: 0,

	label: function()
	{
		var selection = this.get('popup').get('selection');
		//console.log(selection, selection.get('length'));
		if (selection.get('length') == 0) return "-";
		return selection.objectAt(0).get('content').get('name');
	}.property('popup.selection.@each').cacheable(),

	display: Em.View.extend({
		textBinding: "parentView.label",
		classNames: ['ember-selectview-display'],
		text: function(key, value)
		{
			if (value !== undefined)
			{
				var self = this;
				setTimeout(function() { self.$().html(value) }, 0);
				return value;
			}
			return this.get('parentView.label');
		}.property().cacheable(),

	}),

	popup: UI.ListView.create({
		isVisible: false,
		contentBinding: 'parentView.content',
		valueBinding: 'parentView.value',
		templateBinding: "parentView.template"
	}),

	button: Em.View.extend({
		template: Em.Handlebars.compile("⇩"),
		classNames: ['ember-selectview-button']
	}),

	beforePopupShow: Em.beforeObserver(function(){
		var popup = this.get('popup');
		if (!popup.get('isVisible'))
		{
			var offset = this.$().offset();
			var height = this.$().height();
			popup.$().css({top: height + offset.top + 1, left: offset.left});
		}
	}, 'popup.isVisible'),

	afterPopupShow: Em.observer(function(){
		var self = this;
		var popup = this.get('popup');
		if (popup.get('isVisible')) { setTimeout(function(){ popup.$().focus(); }, 0); }
	}, 'popup.isVisible'),

	/**
	*	Hide popup if popup loses focus, but it can lose focus because it was clicked and
	*	focus was set to selectview
	**/
	onPopupFocusChange: Em.observer(function(){
		var popup = this.get('popup');
		
		if ((popup.get('isVisible') && !popup.get('hasFocus') && !this.$().is(":focus")))
		{
			popup.set('isVisible', false);
		}
		

	}, 'popup.hasFocus'),

	mouseDown: function(e){
		var popup = this.get('popup');

		if (!popup.get('hasFocus'))
			popup.set("isVisible", !popup.get('isVisible'));
	},

	afterSelectionChange: Em.observer(function (){
		var popup = this.popup;
		setTimeout(function(){ popup.$().blur(); }, 0);
	}, 'value')

})