Ember-sidebars NPM

ember-sidebars

This addon makes it easy to manage sidebars, toolbars, or any piece of DOM that you want to lift outside your normal route hiearchy.

It is similar to ember-wormhole, but is more suitable when your target is your own Ember component (as opposed to arbitrary, potentially foreign DOM).

The best documentation is the sample application in tests/dummy, which is also running at http://ef4.github.io/ember-sidebars/.

Install

ember install ember-sidebars

Components

Create a sidebar named "my-right-sidebar":

{{show-sidebar name="my-right-sidebar"}}

From elsewhere, declare which component should render in the sidebar -- complete with bound inputs and actions:

{{in-sidebar name="my-right-sidebar" show=(component "cool-thing" model=model launch=(action "launchIt"))}}

For fancier behaviors, you can use {{#with-sidebar}} instead of {{show-sidebar}} which gives you an opportunity to extend the sidebar's behavior in arbitrary ways. For example, this lets your sidebar animate as its content changes:

{{#with-sidebar name="my-right-sidebar" as |sidebar|}}
  <div class="topbar">
    {{#liquid-bind sidebar as |currentSidebar|}}
      {{component currentSidebar}}
    {{/liquid-bind}}
  </div>
{{/with-sidebar}}

ember-sidebars is also a great way to do modals, since modals are just another thing that you want to render "elsewhere" in the DOM. Here is a gist with an example.

Passing additional state through to sidebar

Sometime you may want to pass an action or value into the sidebar that is accessible outside the closed-over component. There is an optional hooks argument for that.

{{in-sidebar name="modal" component=(component "warning-message") hooks=(hash onOutsideClick=(action "close"))}}

{{#with-sidebar name="modal" as |modalContent hooks|}}
  <div class="modal-container" onclick={{action hooks.onOutsideClick}}>
    <div class="modal-dialog" >
      {{component modalContent}}
    </div>
  </div>    
{{/with-sidebar}}

A more comprehensive example of the above modal behavior is available here.