npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-elsewhere

v2.0.0

Published

Render elsewhere in the DOM, with nice composition, animation, etc. Based on 100% public API.

Downloads

10,263

Readme

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":

<FromElsewhere @name="my-right-sidebar" />

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

<ToElsewhere @named="my-right-sidebar" @send=(component "cool-thing" model=model launch=(action "launchIt"))/>

For fancier behaviors, you can use the block form of <FromElsewhere>, 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:

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

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 <FromElsewhere> "actions" might receive multiple action buttons via <ToElsewhere>. Instead of <FromElsewhere/> just use the complementary <MultipleFromElsewhere> component.

<MultipleFromElsewhere @name="actions"/>
<!-- ... -->
<ToElsewhere @named="actions" @send={{component "test-button" text="Button1"}} />
<ToElsewhere @named="actions" @send={{component "test-button" text="Button2"}} />
<ToElsewhere @named="actions" @send={{component "test-button" text="Button3"}} />

Passing additional state through to the target

When you're using the block form of <FromElsewhere>, 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:

<ToElsewhere @named="modal"
             @send={{component "warning-message"}}
             @outsideParams={{hash onOutsideClick=this.close 
                                   title="modal title"}} />
<FromElsewhere @name="modal" as |modal outsideParams|>
  {{#liquid-bind modal as |currentModal|}}
    <div class="modal-container">
      <div class="modal-background" {{on "click" outsideParams.onOutsideClick}}></div>
      <div class="modal-dialog" >
        <div class="modal-title">{{outsideParams.title}}</div>
        <currentModal />
      </div>
    </div>
  {{/liquid-bind}}
</FromElsewhere>

If you plan to send a component, you can 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 <ToElsewhere> in one engine cannot target a <FromElsewhere> 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

  • ember server
  • Visit your app at http://localhost:4200.

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/.