https://github.com/nlfurniss/ember-simple-wormhole

Ember Octane compatible wrapper around Ember's native `in-element` helper
https://github.com/nlfurniss/ember-simple-wormhole

ember ember-addon

Last synced: about 1 month ago
JSON representation

Ember Octane compatible wrapper around Ember's native `in-element` helper

• Host: GitHub
• URL: https://github.com/nlfurniss/ember-simple-wormhole
• Owner: nlfurniss
• License: mit
• Created: 2021-06-03T06:35:53.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-06-15T15:00:05.000Z (over 1 year ago)
• Last Synced: 2024-12-09T14:06:37.065Z (about 2 months ago)
• Topics: ember, ember-addon
• Language: JavaScript
• Homepage:
• Size: 2.92 MB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[![CI](https://github.com/nlfurniss/ember-simple-wormhole/actions/workflows/CI.yml/badge.svg?branch=master)](https://github.com/nlfurniss/ember-simple-wormhole/actions/workflows/CI.yml)

[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/nlfurniss/ember-simple-wormhole)

# ember-simple-wormhole

This addon provides a component that allows for rendering a block in a DOM element somewhere else on the page. It's inspired by [ember-wormhole](https://github.com/yapplabs/ember-wormhole), but written using Octane idioms and leveraging the Ember helper [in-element](https://github.com/emberjs/ember.js/blob/master/packages/%40ember/-internals/glimmer/lib/syntax/in-element.ts).

## Compatibility

* Ember.js v3.20 or above

* Ember CLI v3.20 or above

* Node.js v10 or above

## Installation

```

ember install ember-simple-wormhole

```

## Usage

### Basic example:

```



  {{!-- Text will appear here --}}



  
This text is rendered in "destination-string"


```

### `renderInPlace` example:

```



  
This text is rendered in "destination-string"

  {{!-- Text will appear here --}}


```

### Placement of destination elements

The destination element must be in the DOM when the wormhole component is invoked, otherwise it will not be found. For use cases such as a modal that could be triggered on multiple routes, consider placing the destination element in the application template to ensure it will always be present. 

### Mutliple wormholes with the same destination element

If multiple `EmberSimpleWormhole`s have the same destination element, content from each wormhole will be appended to the destination and will not override any existing markup.

### FastBoot

This component does not render inside FastBoot, as it's not possible to query the DOM to get the destination element.

## API reference

|  Option  | Type | Description |

|:---|:--------|:------------|

| @to | String/Element | The element into which the inner block should be rendered |

| @renderInPlace | Boolean | Instead of rendering the inner block in another element, it's rendered in line. **Note**: this overrides the `@to` argument |