ember-cli-x-popup

This addon is intended to provide a smart, highly customisable, positional wrapper for popups/tooltips/dialogs.

Installation

ember install ember-cli-x-popup

Usage

This addon consists of two components, namely: {{x-popup}} and {{x-popup-trigger}}.

{{x-popup}} is the core component and can be used in isolation, if visibility is controlled by you, in the following way:

{{#x-popup isOpen=myCustomProperty position="top-center"}}
  ...
    I will show top-center if myCustomProperty is true
  ...
{{/x-popup}}

Alternatively, an optional trigger wrapper is included which will manage visibility for you, based on hover and click states:

  {{#x-popup-trigger as |popup|}}
    <span>My trigger element</span>
    {{#x-popup isOpen=popup.isOpen bottom=100 left=50 x=-50}}
      ...
        I will show left-center on hover and click, after 500ms
      ...
    {{/x-popup}}
  {{/x-popup-trigger}}

API

position

Positions can be set via a preset position, or alternatively with more specific, CSS corresponding, values:

| Preset | Values | |:--------------- |:------------------------------- | | top-center | bottom: 100, left: 50, x: -50 | | top-left | bottom: 100 | | top-right | bottom: 100, right: 0 | | right-center | left: 100, top: 50, y: -50 | | right-bottom | bottom: 0, left: 100 | | right-top | top: 0, left: 100 | | bottom-center | top: 100, left: 50, x: -50 | | bottom-right | top: 100, right: 0 | | bottom-left | top: 100 | | left-center | top: 50, right: 100, y: -50 | | left-top | top: 0, right: 100 | | left-bottom | bottom: 0, right: 100 |

Note that x and y corresponds to translate values in CSS.

unit

Used to calculate positioning, defaults to %, can be any CSS valid unit.

reposition

The addon will detect if the preferred position is possible and display it so, unless it cannot due to the size of the popup content or position of the trigger element in relation to the viewport, in which case it will fallback to the most viable alternative, or in impossible cases error out in the console. It will also binds an .error class. Defaults to true.

pinned

Components can be pinned to keep them open, and pinning will take preference over normal hover states. On devices without mouse events, this is how they are openend.

triggerDelay

Sets the delay on the {{x-popup-trigger}} in ms before showing any popups on hover. Defaults to 300.

delay

Sets the delay in ms on the {{x-popup}} component itself. Not related to any specific gestures. Will compound with value of triggerDelay if both are set. Will also delay on touch by default. Defaults to 300.

isOpen

This is exposed both in the wrapping {{x-popup-trigger}} component and core {{x-popup}} components and can be managed from there programmatically.

forceOpen

Useful to override the open state in both components. Takes preference.

Tips

Animations

The .x-popup element is by default set to display:none. If you would like to animate it in, simply set it to display:block; and manage the visiblity using visibility and opacity,

Example:

.x-popup{
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: transform ease 200ms 0ms, opacity linear 200ms 0ms, visibility linear 200ms 0ms;
  will-change: opacity,transform,visibility;
  &.is-open{
    visibility: visible;
    opacity: 1;
    transition: transform ease 200ms 200ms, opacity linear 200ms 200ms, visibility linear 200ms 200ms;
  }
}

Contributing

Feel free to create a PR for any contributions.