How to position a modal relative to clicked action in ember.js

Question

I have a emberjs application where a person can:

click a link modal pops up change something click away modal save changes

I created the modal much like described here , with events on a route. I can parse ember object into the route but I cannot seem to get the clicked DOM element. I want to get the clicked DOM element because I need its position. I want to position a popup relative to the clicked DOM element.

my action in .hbs file looks like:

<a {{action open option}} class='choose-template'>Choose Template</a>

and this action is handled by a route

events: {
  open: function(option) {

    this.controller.set('field_option', option);
    this.render('modal', // the view to render
      {
          into: 'application', // the template to render into
          outlet: 'modal'  // the name of the outlet in that template

      }
    );
  },

  close: function() {
    this.render('nothing',
      { into: 'application', outlet: 'modal' });
  }
}

I handle the model positioning in App.ModalView.didInsertElement() . Here I want to use the link DOM elment to make the modal position itself relative to the clicked link.

Answer 1

If you don't intercept the action events in a view they bubble up all the way to the route where no no event is available. So to get your event an thus the elements position from which it originated you should define and capture your action events in a view .

So instead of having your event handler in your route create them in your view :

Example:

App.ModalView = Ember.View.extend({
  open: function(event) {
    // here your then have access to your event

    // Example on getting the position
    var posX = this.$().position().left,posY = this.$().position().top;
    console.log((event.pageX - posX) + ' , ' + (event.pageY - posY));

    // and then you could invoke the functions you want on your controller by
    this.get('controller').send('open', andhereparameters);
  },

  close: function(event) {
    // here your then have access to your event
    // same as above
  }
});

Update:

Just one more note, by default the target for your actions is the controller, so if you want to target the view instead you should define it:

<a {{action open option target="view"}} class='choose-template'>Choose Template</a>

Hope it helps.