framework/ember/app/mixins/paneable.js

import Ember from 'ember';

// This mixin defines a "paneable" controller - this is, one that has a
// portion of its interface that can be turned into a pane which slides out
// from the side of the screen. This is useful, for instance, when you have
// nested routes (index > discussion) and want to have the parent
// route's interface transform into a side pane when entering the child route.
export default Ember.Mixin.create({
	needs: ['application'],

	// Whether or not the "paneable" interface element is paned.
	paned: false,

	// Whether or not the pane should be visible on screen.
	paneShowing: false,
	paneHideTimeout: null,

	// Whether or not the pane is always visible on screen, even when the
	// mouse is taken away.
	panePinned: localStorage.getItem('panePinned'),

	// Disable the paneable behaviour completely, regardless of if it is
	// paned, showing, or pinned.
	paneDisabled: false,

	paneIsShowing: function() {
		return this.get('paned') && this.get('paneShowing') && !this.get('paneDisabled');
	}.property('paned', 'paneShowing', 'paneDisabled'),

	paneIsPinned: function() {
		return this.get('paned') && this.get('panePinned') && !this.get('paneDisabled');
	}.property('paned', 'panePinned', 'paneDisabled'),

	// Tell the application controller when we pin/unpin the pane so that
	// other parts of the interface can respond appropriately.
	paneIsPinnedChanged: function() {
		this.set('controllers.application.panePinned', this.get('paneIsPinned'));
	}.observes('paneIsPinned'),

	actions: {
		showPane: function() {
			if (this.get('paned')) {
				clearTimeout(this.get('paneHideTimeout'));
				this.set('paneShowing', true);
			}
		},

		hidePane: function(delay) {
			var controller = this;
			controller.set('paneHideTimeout', setTimeout(function() {
            	controller.set('paneShowing', false);
            }, delay || 250));
		},
		
		togglePinned: function() {
			localStorage.setItem('panePinned', this.toggleProperty('panePinned') || '');
		}
	}
});