ember-elsewhere

    1.2.1 • Public • Published

    ember-elsewhere

    NPM Ember Observer Score Ember Version

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

    It is similar to ember-wormhole, but is a better choice when your target is within your own Ember app (as opposed to arbitrary, potentially foreign DOM). It is also easier to compose with animations and it's based on 100% public API.

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

    Install

    ember install ember-elsewhere
    

    Components

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

    {{from-elsewhere name="my-right-sidebar"}}

    Anywhere else in your app, declare which component should render in the target -- complete with bound inputs and actions:

    {{to-elsewhere named="my-right-sidebar" send=(component "cool-thing" model=model launch=(action "launchIt"))}}

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

    {{#from-elsewhere name="modal" as |modal|}}
      {{#liquid-bind modal as |currentModal|}}
        <div class="modal-background"></div>
        <div class="modal-container">
          {{component modal}}
        </div>
      {{/liquid-bind}}
    {{/from-elsewhere}}

    Rendering multiple components into a single target

    There might be use cases where you would like to render multiple component into a single target, for example a from-elsewhere "actions" might receive multiple action buttons via to-elsewhere. Instead of from-elsewhere just use the complementary multiple-from-elsewhere component.

    {{multiple-from-elsewhere name="actions"}}
    <!-- ... -->
    {{to-elsewhere named="actions" send=(component "test-button" text="Button1")}}
    {{to-elsewhere named="actions" send=(component "test-button" text="Button3")}}
    {{to-elsewhere named="actions" send=(component "test-button" text="Button2")}}

    Passing additional state through to the target

    When you're using the block form of from-elsewhere, it's entirely up to you what information you pass to the target. It can be more than just a component. Here is a complete example of an animatable modal that supports an onOutsideClick action while providing shared layout for the background and container:

    {{to-elsewhere named="modal"
                   send=(component "warning-message")
                   outsideParams=(hash onOutsideClick=(action "close") 
                                  title="modal title")
                              }}
    {{#from-elsewhere name="modal" as |modal outsideParams|}}
      {{#liquid-bind modal as |currentModal|}}
        <div class="modal-container">
          <div class="modal-background" onclick={{action outsideParams.onOutsideClick}}></div>
          <div class="modal-dialog" >
            <div class="modal-title">{{outsideParams.title}}</div>
            {{component currentModal}}
          </div>
        </div>
      {{/liquid-bind}}
    {{/from-elsewhere}}

    If you plan to send a component, you should use Ember's component helper. The component helper accepts the component name and other properties, such as {{component "my-component-name" someValue="something"}}, which will cover most use cases. However, if you need to provide additional content to use outside of the component scope, that is when you can use the outsideParams attribute.

    Crossing Engines

    Engines deliberately are deliberately isolated from each other, so a to-elsewhere in one engine cannot target a from-elsewhere in another. But you can optionally share the ember-elsewhere service between them to make it work, see https://github.com/ef4/ember-elsewhere/issues/26#issuecomment-432217049

    Ember's native in-element

    Since Ember 3.21 there is also a native in-element helper. This helper offer less functionality than this addon, but may be enough for some use-cases. More details

    Linting

    Running tests

    • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
    • ember test
    • ember test --server

    Running the dummy application

    For more information on using ember-cli, visit http://www.ember-cli.com/.

    Install

    npm i ember-elsewhere

    DownloadsWeekly Downloads

    5,461

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    17.6 kB

    Total Files

    21

    Last publish

    Collaborators

    • vladucu
    • ef4
    • jenweber