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.