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,

  paneEnabled: Ember.computed.not('paneDisabled'),
  paneIsShowing: Ember.computed.and('paned', 'paneShowing', 'paneEnabled'),
  paneIsPinned: Ember.computed.and('paned', 'panePinned', 'paneEnabled'),

  // Tell the application controller when we pin/unpin the pane so that
  // other parts of the interface can respond appropriately.
  paneIsPinnedChanged: Ember.observer('paneIsPinned', function() {
    this.set('controllers.application.panePinned', this.get('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') || '');
    }
  }
});