Merge lp:~rockstar/phazr/fix-clickoutside into lp:phazr

[Paul Hummer]

Fix a bug in the "click outside" of the modal overlay.

This branch fixes an odd race condition where the click event that shows overlay gets bubbled up to html, handled by the "click outside" handler, and essentially hides the overlay before it ever actually gets shown.

THIS WAS A TERRIBLE THING TO TRY AND TRACK DOWN. I lost about a day's worth of hard work, and probably a piece of my soul trying to get it figured out.

[lp:~rockstar/phazr/fix-clickoutside]

15. By Paul Hummer on 2011-07-01

Abstract out the attach and detach

16. By Paul Hummer on 2011-07-01

Fixed that one issue (because I am a genius)

[Martin Albisetti (beuno)]

review: Approve

=== modified file 'src/js/phazroverlay/phazroverlay.js'
--- src/js/phazroverlay/phazroverlay.js	2011-06-07 15:29:33 +0000
+++ src/js/phazroverlay/phazroverlay.js	2011-07-01 19:39:29 +0000
@@ -23,6 +23,8 @@
                 closeContainer.one('.' + className + '-close-button'));
         },
         afterBindUI: function() {
+            this.after('renderedChange', this.afterRenderedChange, this);
+            this.after('visibleChange', this.afterVisibleChange, this);
             this.get('closeButton').on('click', this.hide, this);
             Y.on('keyup', function(e) {
                 if (e.keyCode == 27) {
@@ -31,23 +33,41 @@
             }, window, this);
 
             var box = this.get('boundingBox'),
+                className = this.getClassName(),
                 header = box.one('.' + className + '-hd'),
-                className = this.getClassName(),
                 dd = new Y.DD.Drag({
                     node: box,
                     handle: header
                 });
             this.set('dragDelegate', dd);
-
-            Y.one("html").on("modaloutside|click", 
+        },
+        afterRenderedChange: function(e) {
+            if (e.newVal === false) { return; }
+            if (this.get('visible') === true) {
+                this.attachModalOutside();
+            }
+        },
+        afterVisibleChange: function(e) {
+            if (e.newVal === true) {
+                this.attachModalOutside();
+            } else {
+                this.detachModalOutside();
+            }
+        },
+        attachModalOutside: function() {
+            var box = this.get('boundingBox');
+            Y.one("html").on("modaloutside|click",
                 function(e) {
                     var targ = e.target;
                     if (!box.contains(targ)) {
                         this.hide();
                         Y.detach("modaloutside|click");
                     }
-                }, 
+                },
             this);
+        },
+        detachModalOutside: function() {
+            Y.one("html").detach("modaloutside|click");
         }
     };