← Back to branch summary

~bcsaller/juju-gui/phantom-testing

« back to all changes in this revision

Viewing changes to app/views/topology/relation.js

Fix ambiguous relation selector

When there are ambiguous relations clicking 
to select one or the other does nothing.
This bug affected only our production server,
devel and debug worked well. This is weird,
and I think we are encountering the strange
behavior described in 
http://yuilibrary.com/projects/yui3/ticket/2532993
or similar: in some situation (e.g. our production
server, where js files are minified/compressed)
using the "on" method on NodeList does not work.
I am confused about the real reason for this bug.
However, the documentation says that we should
avoid using NodeList.on, in favor of using event 
delegation, that is exactly what I did in this
branch. Tests are not included: we have a specific 
card for adding tests for the relation module.

R=benji, gary.poster
CC=
https://codereview.appspot.com/7177050

Show diffs side-by-side

added added

removed removed

Lines of Context:
app/views/topology/relation.js
635
635
      menu.append(Templates
636
636
              .ambiguousRelationList({endpoints: endpoints}));
637
637
 
638
 
      // For each endpoint choice, bind an an event to 'click' to
639
 
      // add the specified relation.
640
 
      menu.all('li').on('click', function(evt) {
641
 
        if (evt.currentTarget.hasClass('cancel')) {
642
 
          return;
643
 
        }
644
 
        var el = evt.currentTarget,
645
 
                endpoints_item = [
646
 
                  [el.getData('startservice'), {
647
 
                    name: el.getData('startname'),
648
 
                    role: 'server' }],
649
 
                  [el.getData('endservice'), {
650
 
                    name: el.getData('endname'),
651
 
                    role: 'client' }]];
 
638
      // For each endpoint choice, delegate a click event to add the specified
 
639
      // relation. Use event delegation in order to avoid weird behaviors
 
640
      // encountered when using "on" on a YUI NodeList: in some situations,
 
641
      // e.g. our production server, NodeList.on does not work.
 
642
      menu.one('.menu').delegate('click', function(evt) {
 
643
        var el = evt.target;
 
644
        var endpoints_item = [
 
645
          [el.getData('startservice'), {
 
646
            name: el.getData('startname'),
 
647
            role: 'server' }],
 
648
          [el.getData('endservice'), {
 
649
            name: el.getData('endname'),
 
650
            role: 'client' }]
 
651
        ];
652
652
        menu.removeClass('active');
653
653
        view.addRelationEnd(endpoints_item, view, context);
654
 
      });
 
654
      }, 'li');
655
655
 
656
656
      // Add a cancel item.
657
657
      menu.one('.cancel').on('click', function(evt) {