movableink/ember-pop-over

A pop-over component for Ember apps

ember {{pop-over}}

NOTE: This is still pre-1.0 software and is subject to change.

This pop-over provides a pluggable interface for dealing with pop overs around your site. It has an inteface for registering constraint behaviors and animations.

For use of the pop-over as a tooltip, the following handlebars will do the trick:

<span id="help-me" class="icon-help"></span>
{{#pop-over for="help-me" on="hover" flow="popup"}}
  Hey there!
{{/pop-over}}

Installation

ember install ember-pop-over

Note: This addon requires that you have jQuery support enabled for your application.

Gravity

ember-pop-over has two approaches to positioning elements. gravity is provided as a quick and easy way to position elements according to cardinal directions:

Gravity	Description
n	Positions the pop over above the target.
s	Positions the pop over below the target.
e	Positions the pop over to the right of the target.
w	Positions the pop over to the left of the target.
nw	Positions the pop over in the top left corner of the target.
ne	Positions the pop over in the top right corner of the target.
sw	Positions the pop over in the bottom left corner of the target.
se	Positions the pop over in the bottom right corner of the target.
none	Positions the pop over directly over the target. (Available only using cover).

Flows

Flows provide a mechanism to programatically define how pop overs interact with the page.

The API for flows is designed to provide a clear interface for understanding how a pop over will react when the page is scrolled or resized.

For example, a pop over that always opens to the right of the target would look like:

export function popup() {
  return this.orientRight.andSnapTo(this.center);
}

If you would like the pop over to slide between the top and bottom edge, you can use the andSlideBetween method:

export function right() {
  return this.orientRight.andSlideBetween(this.topEdge, this.bottomEdge);
}

If no flow satisfies the constraints of the page, then the last flow in the cascade will be picked.

Orientation	Description
orientAbove	Orients the pop over above the target
orientLeft	Orients the pop over to the left of the target
orientBelow	Orients the pop over below the target
orientRight	Orients the pop over to the right of the target
orientCenter	Orients the pop over directly over the center of the target (in cover mode)

Behavior	Description
andSnapTo	Attempts to snap to the locations given (in order)
andSlideBetween	Positions the menu in between the locations given (the gravity of the menu is dictated by the positions of the parameters. For example, if the function is called andSlideBetween(this.top, this.bottom), gravity will be reversed.
where	A generic constraint that can pass / fail a constraint depending on the results of the function. This is hot code, and should be very straightforward.

The list of possible locations for a flow depend on whether the flow is vertical or horizontal.

For vertical flows (orientLeft, orientRight), the possible names are:

• topEdge
• center
• bottomEdge

For horizontal flows (orientTop, orientBottom), the possible names are:

• leftEdge
• center
• rightEdge

Recipes

Tooltips:

import PopOver from "ember-pop-over/components/pop-over/component";

var ToolTip = PopOver.extend({
  classNames: ['tool-tip'],
  layoutName: 'components/pop-over',
  on: ['hover', 'focus'],
  flow: 'popup'
});

export default ToolTip;

<span id="help-me" class="icon-help"></span>
{{#tool-tip for="help-me"}}
  Hey there!
{{/tool-tip}}

Dropdown menu:

import PopOver from "ember-pop-over/components/pop-over/component";

var DropDown = PopOver.extend({
  classNames: ['drop-down'],
  layoutName: 'components/pop-over',
  on: ['hover', 'focus', 'hold'],
  flow: 'dropdown'
});

export default DropDown;

<div id="current-user">Me</div>
{{#drop-down for="current-user"}}
  <ul>
    <li>Settings</li>
    <li>Billing</li>
  </ul>
{{/drop-down}}

Writing your own components using {{pop-over}}

The {{pop-over}} component is designed to be used with other components. It provides a programatic API for adding customized targets, and a set of utilities that allow for an easier and more consistent development experience when authoring these addons.

Let's go through the steps of authoring a component that uses a {{pop-over}} by making a {{date-picker}} widget. Some of the implementation details will be ignored to make this tutorial clearer to follow.

First, let's bootstrap the addon:

$ ember addon my-date-picker

After this we'll add ember-pop-over and ember-moment as a dependencies (not a development dependency):

$ cd my-date-picker
$ ember install ember-pop-over
$ ember install ember-moment

Now, we're ready to start authoring the addon. Let's first start by creating the component javascript file.

$ mkdir addon/components
$ touch addon/components/date-picker.js

Using the editor of your choice, add the following bootstrap code to get started:

import Ember from "ember";

var DatePicker = Ember.Component.extend({
  classNames: ['date-picker']
});

export default DatePicker;

Let's define our public API first. This is what you will use to interface with the component in handlebars:

import Ember from "ember";

var DatePicker = Ember.Component.extend({
  value: null,
  icon: null
});

export default DatePicker;

value is the date that is picked and icon is an icon used to display a calendar icon.

We're going to make the date picker a combination of a text field and a configurable icon, so let's start hooking them up so the pop-over knows what will trigger events:

import Ember from "ember";
import nearestChild from "ember-pop-over/computed/nearest-child";

const get = Ember.get;

var DatePicker = Ember.Component.extend({
  classNames: ['date-picker'],

  value: null,
  icon: null,

  popover: nearestChild('pop-over'),

  attachTargets: function () {
    var popover = get(this, 'popover');
    var icon = get(this, 'icon');

    popover.addTarget(icon, {
      on: "click"
    });
  }.on('didInsertElement')
});

export default DatePicker;

Let's walk through the code.

First, we imported nearestChild. This is a computed property that returns the nearest child of a given type. We then use this property to get the pop-over.

Then we add the icon as a target for the pop over that will toggle the menu when clicked.

For the next step, let's start showing the pop over live and doing some iterative development. To do this, we'll need to start fiddling with the app directory.

Create the components and templates/components directories under app at the root of your addon's project.

The first thing to do is expose the component as a public interface by making a file called date-picker.js under components:

import DatePicker from "my-date-picker/components/date-picker";
export default DatePicker;

This simply exposes the date picker as a component consumable by the host application.

Next, let's add a handlebars template for the date picker, under templates/components/date-picker.hbs:

{{input type=text value=displayValue}}<span class="icon-calendar" {{bind-attr id=icon}}>Open</span>
{{#pop-over flow="dropdown" will-change="month" month=month}}
  <header>
    <a class="previous-month" {{action "previousMonth"}}>&lt;</a>
    <div class="month">{{moment firstOfMonth "MMMM"}}</div>
    <a class="next-month" {{action "nextMonth"}}>&gt;</a>
  </header>
  {{calendar-month month=firstOfMonth}}
{{/pop-over}}

With the template we created, we've solidified a few requirements for the component. Let's go back to date-picker.js in the addon directory and suss these out.

First, let's automatically generate an ID for the icon. This way, the pop-over has a unique identifier for triggering on. While we're at it, let's implement the details around month.

import Ember from "ember";
import nearestChild from "ember-pop-over/computed/nearest-child";

const generateGuid = Ember.generateGuid;
const get = Ember.get;

var DatePicker = Ember.Component.extend({
  classNames: ['date-picker'],

  value: null,
  icon: function () {
    return generateGuid();
  }.property(),

  popover: nearestChild('pop-over'),

  attachTargets: function () {
    var popover = get(this, 'popover');
    var icon = get(this, 'icon');

    popover.addTarget(icon, {
      on: "click"
    });
  }.on('didInsertElement'),

  actions: {
    previousMonth: function () {
      var previousMonth = get(this, 'firstOfMonth').clone().subtract(1, 'month');
      set(this, 'month', previousMonth.month());
      set(this, 'year', previousMonth.year());
    },

    nextMonth: function () {
      var nextMonth = get(this, 'firstOfMonth').clone().add(1, 'month');
      set(this, 'month', nextMonth.month());
      set(this, 'year', nextMonth.year());
    }
  },

  month: null,
  year: null,

  firstOfMonth: function () {
    return moment({ year: get(this, 'year'), month: get(this, 'month') });
  }.property('year', 'month')

});

export default DatePicker;

As a default, let's make month be the current month or the month of the selected value:

import Ember from "ember";
import moment from 'moment';
import nearestChild from "ember-pop-over/computed/nearest-child";

const generateGuid = Ember.generateGuid;
const get = Ember.get;

const reads = Ember.computed.reads;

var DatePicker = Ember.Component.extend({
  classNames: ['date-picker'],

  value: null,
  icon: function () {
    return generateGuid();
  }.property(),

  popover: nearestChild('pop-over'),

  attachTargets: function () {
    var popover = get(this, 'popover');
    var icon = get(this, 'icon');

    popover.addTarget(icon, {
      on: "click"
    });
  }.on('didInsertElement'),

  actions: {
    previousMonth: function () {
      var previousMonth = get(this, 'firstOfMonth').clone().subtract(1, 'month');
      set(this, 'month', previousMonth.month());
      set(this, 'year', previousMonth.year());
    },

    nextMonth: function () {
      var nextMonth = get(this, 'firstOfMonth').clone().add(1, 'month');
      set(this, 'month', nextMonth.month());
      set(this, 'year', nextMonth.year());
    }
  },

  month: reads('currentMonth'),
  year: reads('currentYear'),

  firstOfMonth: function () {
    return moment({ year: get(this, 'year'), month: get(this, 'month') });
  }.property('year', 'month'),

  currentMonth: function () {
    return get(this, 'value') ?
           get(this, 'value').getMonth() :
           new Date().getMonth();
  }.property(),

  currentYear: function () {
    return get(this, 'value') ?
           get(this, 'value').getFullYear() :
           new Date().getFullYear();
  }.property(),

  displayValue: function () {
    var value = get(this, 'value');
    return value ? moment(value).format("MM/DD/YYYY") : null;
  }.property('value')
});

export default DatePicker;

With this much, we should be able to rotate through a list of months in the calendar year. Let's test this by commenting out the {{calendar-month}} component:

{{input type=text value=displayValue}}<span class="icon-calendar" {{bind-attr id=icon}}>Open</span>
{{#pop-over flow="dropdown" will-change="month" month=month}}
  <header>
    <a class="previous-month" {{action "previousMonth"}}>&lt;</a>
    <div class="month">{{moment firstOfMonth "MMMM"}}</div>
    <a class="next-month" {{action "nextMonth"}}>&gt;</a>
  </header>
  {{!calendar-month month=firstOfMonth}}
{{/pop-over}}

Now on to the next step! Let's implement the calendar-month component. In calendar-month.js in your addon, let's add code to come up with the days of the week and weeks in the given month.

import Ember from "ember";
import moment from "moment";

const get = Ember.get;

var CalendarMonth = Ember.Component.extend({
  classNames: ['calendar-month'],
  tagName: "table",

  dayNames: function () {
    var firstWeek = get(this, 'weeks.firstObject');
    return firstWeek.map(function (day) {
      return moment(day).format("ddd");
    });
  }.property('weeks'),

  weeks: function () {
    var month = get(this, 'month');
    var day = month.clone().startOf('week');
    var weeks = [];
    var week = [];
    for (var iDay = 0; iDay < 7; iDay++) {
      week.push(day.clone().toDate());
      day.add(1, 'day');
    }
    weeks.push(week);

    while (day.month() === month.month()) {
      week = [];
      for (iDay = 0; iDay < 7; iDay++) {
        week.push(day.clone().toDate());
        day.add(1, 'day');
      }
      weeks.push(week);
    }
    return weeks;
  }.property('month')
});

export default CalendarMonth;

And now let's add the template for that. First, expose the component in the app:

import CalendarMonth from "my-date-picker/components/calendar-month";
export default CalendarMonth;

And then add the template for it:

<thead>
  <tr>
    {{#each dayOfWeek in dayNames}}
      <th>{{dayOfWeek}}</th>
    {{/each}}
  </tr>
</thead>
<tbody>
  {{#each week in weeks}}
    <tr>
      {{#each day in week}}
        {{calendar-day value=day month=month}}
      {{/each}}
    </tr>
  {{/each}}
</tbody>

Hmm. Looks like we have yet another component to write! Let's finish off with that one, and then pop the stack all the way back to finish off the component.

import Ember from "ember";
import moment from "moment";
import nearestParent from "ember-pop-over/computed/nearest-parent";

const get = Ember.get;

const reads = Ember.computed.reads;

var CalendarDay = Ember.Component.extend({
  classNames: ['calendar-day'],

  tagName: "td",
  classNameBindings: ['isSelected:selected', 'isToday', 'isDisabled:disabled'],

  datePicker: nearestParent('date-picker'),
  selection: reads('datePicker.value'),

  isToday: function () {
    return moment(get(this, 'value')).isSame(new Date(), 'day');
  }.property('value'),

  isSelected: function () {
    return moment(get(this, 'value')).isSame(get(this, 'selection'), 'day');
  }.property('value', 'selection'),

  isDisabled: function () {
    return !moment(get(this, 'value')).isSame(get(this, 'month'), 'month');
  }.property('value', 'month'),

  click: function () {
    if (get(this, 'isDisabled')) { return; }
    get(this, 'datePicker').send('selectDate', get(this, 'value'));
  }
});

export default CalendarDay;

<span>{{moment value "D"}}</span>

Now let's pop our stack and finish by writing a handler for selectDate in date-picker.js:

import Ember from "ember";
import moment from 'moment';
import nearestChild from "ember-pop-over/computed/nearest-child";

const generateGuid = Ember.generateGuid;

const get = Ember.get;
const set = Ember.set;

const reads = Ember.computed.reads;

var DatePicker = Ember.Component.extend({
  classNames: ['date-picker'],
  value: null,
  icon: function () {
    return generateGuid();
  }.property(),

  popover: nearestChild('pop-over'),

  attachTargets: function () {
    var popover = get(this, 'popover');
    var icon = get(this, 'icon');

    popover.addTarget(icon, {
      on: "click"
    });
  }.on('didInsertElement'),

  actions: {
    previousMonth: function () {
      var previousMonth = get(this, 'firstOfMonth').clone().subtract(1, 'month');
      set(this, 'month', previousMonth.month());
      set(this, 'year', previousMonth.year());
    },

    nextMonth: function () {
      var nextMonth = get(this, 'firstOfMonth').clone().add(1, 'month');
      set(this, 'month', nextMonth.month());
      set(this, 'year', nextMonth.year());
    },

    selectDate: function (date) {
      set(this, 'value', date);
      get(this, 'popover').deactivate();
    }
  },

  month: reads('currentMonth'),
  year: reads('currentYear'),

  firstOfMonth: function () {
    return moment({ year: get(this, 'year'), month: get(this, 'month') });
  }.property('year', 'month'),

  currentMonth: function () {
    return get(this, 'value') ?
           get(this, 'value').getMonth() :
           new Date().getMonth();
  }.property(),

  currentYear: function () {
    return get(this, 'value') ?
           get(this, 'value').getFullYear() :
           new Date().getFullYear();
  }.property(),

  displayValue: function () {
    var value = get(this, 'value');
    return value ? moment(value).format("MM/DD/YYYY") : null;
  }.property('value')
});

export default DatePicker;

When we deactivate the pop over, we're telling it that all targets are not active anymore. That way, the pop over hides.

To polish it off, let's add styling. Create a file in addons called styles/my-date-picker.css and add the following CSS:

.date-picker .pop-over {
  padding: 20px;
}

.date-picker header {
  height: 25px;
  position: relative;
}
.date-picker .next-month,
.date-picker .previous-month {
  cursor: pointer;
  position: absolute;
  top: 0;
}

.date-picker .next-month {
  right: 0;
}

.date-picker .previous-month {
  left: 0;
}

.date-picker .month {
  text-align: center;
}

.calendar-month {
  border-collapse: collapse;
  border-spacing: 0;
}

.calendar-month th {
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  height: 30px;
  border-bottom: 1px solid #999;
  border-top: 3px solid #FFF;
  margin-bottom: 5px;
}

.calendar-day {
  cursor: pointer;
  text-align: center;
  width: 20px;
  height: 20px;
  padding: 1px;
}

.calendar-day span {
  display: block;
  padding: 5px;
}

.calendar-day.disabled {
  color: #999;
  cursor: default;
}

.calendar-day.is-today span {
  border: 1px solid #666;
}

.calendar-day.selected span {
  border: 1px solid #FFF;
}

If everything went well, you should have a date-picker that behaves like the one here: http://tim-evans.github.io/ember-pop-over/

Running

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

Running Tests

• ember test
• ember test --server

Building

• ember build

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

ember-pop-over's Issues

(v0.3.0) Import Statement from README appears to be incorrect

I upgraded to v0.3.0 from 0.1.31 and started getting this error:

app.js:15 Uncaught Error: Could not find module `ember-pop-over/components/pop-over` imported from `app/components/sort-drop-down-menu`

My import statement was:

import PopOver from "ember-pop-over/components/pop-over";

Changing the import statement to:

import PopOver from "ember-pop-over/components/pop-over/component";

appears to have fixed the issue. I think the change is required due to this eed90d5 commit.

Assuming I'm not doing something wrong it would be great if the README could be updated to help other folks in the future coming to this project (or updating to the latest).

Thanks for a great addon!

Popover placement with position: relative parents

Hey Tim,

I have an issue where I'm trying to use popovers with a button inside of an element chain that has position: relative set on it.

When this blue header (highlighted in red) is set to position: relative the tooltip renders down at the bottom of the page.

Here's how the tooltip renders when the header is position: static:

Am I doing something wrong or missing a configuration param?

Thanks again for all your work.

Broken link in readme.

This doesn't exist: https://tim-evans.github.io/ember-pop-over/

Can I use hover intent for better interaction with dropdown menus?

Currently I have some menus appearing on hover using [hover, hold] but due to the space between the activator button and the dropdown menu, if you're not quick the menu will disappear before your mouse pointer gets there.

Is there a way to utilize the existing hover intent service for this purpose?

dom-ruler not installed with ember-pop-over

After running ember install:npm ember-pop-over the dom-ruler dependency isn't installed. I believe it needs to be installed with a blueprint. The workaround for the time being is ember install:bower dom-ruler.

Triggers deprecation warning in Ember 2.3: Using the injected `container` is deprecated

I believe this module is using the now deprecated direct container access pattern instead of the new getOwner pattern.

DEPRECATION: Using the injected `container` is deprecated. Please use the `getOwner` helper instead to access the owner of this object. [deprecation id: ember-application.injected-container] See http://emberjs.com/deprecations/v2.x#toc_injected-container-access for more details.

http://emberjs.com/deprecations/v2.x/#toc_injected-container-access

Generator is not working on Ember 2.13

I'm getting the following error when running ember install ember-pop-over:

The `ember generate <entity-name>` command requires an entity name to be specified. For more details, use `ember help`.

Also, flow.js file is not generated. I tried creating it manually, but got the following error on Chrome console:

Uncaught Error: Could not find module `my-project/flows` imported from `my-project/initializers/pop-over`

Presence of flow.js at the root of `app`

Hi,

Am I doing a bad manipulation when doing ember install ember-pop-over, because I end up having the file flow.js at the root of my application (app/flow.js). This is quite unusual for an addon to add files like that, is it the desired behavior?

Thanks!

parseActivators never called in target.js `on` computed property

The following pop-over ala 'tooltip' was working great under Ember 1.12 and fail with the following error under Ember 2.1:

Uncaught TypeError: activators.contains is not a function in target.js line 214.

From my understanding, for some reason, the computed property on is never called to execute the method parseActivators() which is responsible of creating an Array with the passed string.

Therefore, when a popup is rendered, the activators is still a string instead of an array.

Since you might know this addon from the inside out, maybe you can quickly help me or have encountered this before.

Thanks!

Below is what is being used to render the tooltip:

// components/tooltip-popup/component.js

import Ember from 'ember';

export default Ember.Component.extend({
  idGenerator: Ember.inject.service('id-generator'),

  classNames: ['tooltipPopup'],

  tooltipText: '',

  uniqueId: function() {
    return this.get('idGenerator').generate();
  }.property()
});

<!-- components/tooltip-popup/template.hbs -->

<div class='tooltipPopup-element' id={{uniqueId}}>
  {{inline-svg 'question-mark.svg' class='tooltipPopup-element-icon'}}
</div>

{{#pop-over for=uniqueId on='hover' class='tooltipPopup-popupMenu'}}
  <div class="popup-menu-tooltip">{{tooltipText}}</div>
{{/pop-over}}

What it suppose to render:

Manually close popover

is there a way to manually close the popover?

Dropdown disappears when set to "on=click"

I am in the process of migrating from ember-popup-menu to this library, since it ember-popup-menu doesn't seem to be maintained anymore. I have many uses where I'm using pop-over on="click". In these cases, the dropdown appears on click, but as soon as the mouse moves out of the target, the dropdown disappears. Is there something else I need to do or is this a bug?

Acceptance tests failing

In the initializer,there is the following line:

let includedModules = Ember.A(keys(require.entries));

When running acceptance tests for an application, the beforeEach fails when running startApp, because require.entries is null or undefined. It results in tests failing with the following error:

beforeEach failed on <test name>: Cannot convert undefined or null to object

Release new version with container deprecation pull request

Hello,

Would you be willing to release a new version that includes that latest accepted pull-request (#26) to fix the container deprecation?

Thanks!

`flows` module not found

After install, I get the error:

Uncaught Error: Could not find module `my-app/flows` imported from `my-app/initializers/pop-over`

I'm assuming this is because the paths in ember-pop-over/app/* are now relative to my-app, and therefore the pop-over initializer cannot import ember-pop-over/addon/system/flow.js.

(v0.3.0) Assertion Failed: Cannot call get with 'element' on an undefined object.

I started getting this error after updating to Ember v0.2.7 (it's possible the error is unrelated to the upgrade).

Here is the stack trace:

app.js:15 Uncaught Error: Assertion Failed: Cannot call get with 'element' on an undefined object.EmberError @ ember.debug.js:19695
assert @ ember.debug.js:6715
assert @ ember.debug.js:19497
get @ ember.debug.js:23972
getElementForTarget @ target.js:16
attach @ target.js:92
poll @ target.js:62
fn @ ember.debug.js:491
invokeWithOnError @ ember.debug.js:999
flush @ ember.debug.js:1054
flush @ ember.debug.js:862
end @ ember.debug.js:176
run @ ember.debug.js:289
_runExpiredTimers @ ember.debug.js:685
Backburner._boundRunExpiredTimers @ ember.debug.js:145
ember.debug.js:51717 Attempting transition to channels

The error occurs in target.js in this function

  function getElementForTarget(target) {
    if (typeof target === 'string') {
      return document.getElementById(target);
    } else if ((0, _emberMetalGet['default'])(target, 'element')) {
      return (0, _emberMetalGet['default'])(target, 'element');
    } else {
      return target;
    }
  }

Somehow target is null which causes the issue. The error only occurs when transitioning between routes. So for example, if I load Route A, then click on a link to go to Route B, the error will occur. If I just load Route B directly (e.g., with a page refresh) there is no error.

I'm wondering if a null check on target is a valid fix for this?

Integrate with liquid-fire

I would like to do some sort of sniffing to see if liquid-fire is installed, then use {{liquid-if}} instead of {{if}}. This would make integration fairly seamless

Is there any particular reason why the `flows.js` file is created directly under the /app folder?

It's kind of bizarre for an addon not having all its content under its own directory, unless I missed some background knowledge behind this decision, otherwise I would suggest to move flows.js file back to a more proper place inside the addon itself.

Thanks.

Remove `nearest-child` and `nearest-parent` computeds.

Nearest child and nearest parent are orthogonal to the way Ember works. Unit tests will fail if they are used in components, as the container is not defined. There is likely a better pattern for passing references between components.

They are also not dependencies of ember-pop-over as it stands. I propose they be lifted into their own microlibrary, or scrapped completely and replaced with a pattern that is more inline with Ember overall.

Our current pattern is as follows:

{{#pop-over for="someId" on="click" as |popover|}}
  <button {{action "close" popover}}>Close</button>
{{/pop-over}}

It's not as clean, but it is more inline with Ember norms. I'd definitely welcome a better pattern.

Fix action target API to work with more complex use cases

Currently, the target API doesn't support date-range inputs very well. Having control of where the pointer is and when to show / hide the menu bundled together would be nice.

I think the overloading / combinatorial aspects of the API also make it harder to understand how it works in some corner cases.

Error using tooltip recipe

Using the tooltip recipe I get the following error:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Steps to reproduce:

1. ember install:npm ember-pop-over
2. ember g ember-pop-over
3. ember g component tool-tip
4. Add the tooltip recipe from the README to app/components/tool-tip.js
5. Add the tooltip handlebars from the README to any template
6. Hover over the tooltip in the browser

[Enhancement] Support absolute placement / positioning

If the popover is inside an element with a overflow:hidden property over, then you cannot use it.

ember-power-select has a renderInPlace option that if false, causes it to use ember-wormhole in order to render its popover to a direct child of body.

Tiling issues (screenshots included)

Our app's calendar currently has a bug where the first time it is opened, the popover is placed too far right, resulting in overflow:

May be a bug with dom-ruler.

Investigate using Casswary constraints for pop overs

See https://github.com/IjzerenHein/kiwi.js for a library

Move `dom-ruler` from bower to npm

Bring structure inline with this RFC: https://github.com/chadhietala/rfcs/blob/packager/active/0002-packager.md

Deprecation warning with ember 2.8.1

Hi

I am in the process of updating to ember 2.8.1

I am now getting the following error from ember-pop-over

`Enumerable#contains` is deprecated, use `Enumerable#includes` instead. [deprecation id: ember-runtime.enumerable-contains] See http://emberjs.com/deprecations/v2.x#toc_enumerable-contains for more details.

Thanks,
Marc

Popover does not resize properly when content size changes

I'm currently using the popover to display a search widget. The widget has some controls that when toggled can cause the popover to expand in size (works great). The issues arises when doing the following:

1. Cause the widget to expand by selecting an option inside of it that adds a div (pushing the popover down)
2. Close the popover by clicking out of it
3. Open the popover
4. Cause the widget to "contract" by selecting an option that remove the div
5. The Popover does not resize itself properly (specifically the popover-compass div)

Note: If the popover starts off at the smaller size then it works fine. The issue only happens when you start at the larger size and then go to the smaller size.

At this point the popover-compass class has a height that is too large and results in a black bar at the bottom of the popover. I know the description is a bit hard to follow so I attached a screenshot of what this looks like:

Is there some way to force a "repaint" of the popover so it will resize itself properly under these circumstances?

Avoid using `mouseEnter` and `mouseLeave` handler methods

A few deprecation warnings are being thrown when running the tests against the current canary build of Ember.

WARN: DEPRECATION: Using mouseEnter event handler methods in components has been deprecated. [deprecation id: ember-views.event-dispatcher.mouseenter-leave-move] See https://emberjs.com/deprecations/v3.x#toc_component-mouseenter-leave-move for more details.

WARN: DEPRECATION: Using mouseLeave event handler methods in components has been deprecated. [deprecation id: ember-views.event-dispatcher.mouseenter-leave-move] See https://emberjs.com/deprecations/v3.x#toc_component-mouseenter-leave-move for more details.

These should be addressed in order to keep the add-on working well with more modern Ember versions.