Close lightbox when clicking on image-frame

Summary: Ref T3612. Moves the listener to the frame of the image.

Test Plan: Click on image, no close, click on grey frame, closes image. Test image and document, clicking on arrows.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Maniphest Tasks: T3612

Differential Revision: https://secure.phabricator.com/D16959

resources/celerity/map.php

@@ -9,8 +9,8 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => '0b64e988',
     'conpherence.pkg.js' => '6249a1cf',
-    'core.pkg.css' => '4107e0f7',
-    'core.pkg.js' => '1602cd3d',
+    'core.pkg.css' => 'e5fbe031',
+    'core.pkg.js' => '426f2dac',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'a4ba74b5',
     'differential.pkg.js' => '634399e9',
@@ -151,7 +151,7 @@ return array(
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-info-view.css' => 'ec92802a',
     'rsrc/css/phui/phui-invisible-character-view.css' => '6993d9f0',
-    'rsrc/css/phui/phui-lightbox.css' => 'cbc9b891',
+    'rsrc/css/phui/phui-lightbox.css' => '67a017b2',
     'rsrc/css/phui/phui-list.css' => '9da2aa00',
     'rsrc/css/phui/phui-object-box.css' => '6b487c57',
     'rsrc/css/phui/phui-object-item-list-view.css' => '87278fa0',
@@ -505,7 +505,7 @@ return array(
     'rsrc/js/core/behavior-hovercard.js' => 'bcaccd64',
     'rsrc/js/core/behavior-keyboard-pager.js' => 'a8da01f0',
     'rsrc/js/core/behavior-keyboard-shortcuts.js' => '01fca1f0',
-    'rsrc/js/core/behavior-lightbox-attachments.js' => 'e62f3c48',
+    'rsrc/js/core/behavior-lightbox-attachments.js' => '24afe1a8',
     'rsrc/js/core/behavior-line-linker.js' => '1499a8cb',
     'rsrc/js/core/behavior-more.js' => 'a80d0378',
     'rsrc/js/core/behavior-object-selector.js' => 'e0ec7f2f',
@@ -651,7 +651,7 @@ return array(
     'javelin-behavior-history-install' => '7ee2b591',
     'javelin-behavior-icon-composer' => '8499b6ab',
     'javelin-behavior-launch-icon-composer' => '48086888',
-    'javelin-behavior-lightbox-attachments' => 'e62f3c48',
+    'javelin-behavior-lightbox-attachments' => '24afe1a8',
     'javelin-behavior-line-chart' => 'e4232876',
     'javelin-behavior-load-blame' => '42126667',
     'javelin-behavior-maniphest-batch-editor' => '782ab6e7',
@@ -869,7 +869,7 @@ return array(
     'phui-info-view-css' => 'ec92802a',
     'phui-inline-comment-view-css' => '5953c28e',
     'phui-invisible-character-view-css' => '6993d9f0',
-    'phui-lightbox-css' => 'cbc9b891',
+    'phui-lightbox-css' => '67a017b2',
     'phui-list-view-css' => '9da2aa00',
     'phui-object-box-css' => '6b487c57',
     'phui-object-item-list-view-css' => '87278fa0',
@@ -1106,6 +1106,15 @@ return array(
       'javelin-workflow',
       'javelin-util',
     ),
+    '24afe1a8' => array(
+      'javelin-behavior',
+      'javelin-stratcom',
+      'javelin-dom',
+      'javelin-mask',
+      'javelin-util',
+      'phuix-icon-view',
+      'phabricator-busy',
+    ),
     '2926fff2' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -2120,15 +2129,6 @@ return array(
       'javelin-workflow',
       'javelin-magical-init',
     ),
-    'e62f3c48' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-      'javelin-dom',
-      'javelin-mask',
-      'javelin-util',
-      'phuix-icon-view',
-      'phabricator-busy',
-    ),
     'e9581f08' => array(
       'javelin-behavior',
       'javelin-stratcom',

webroot/rsrc/css/phui/phui-lightbox.css

@@ -43,7 +43,6 @@
 .lightbox-comment-frame {
   position: absolute;
   top: -19999px;
-  bottom: 0;
   right: 0;
   opacity: 0;
   transition: all 0.3s;

webroot/rsrc/js/core/behavior-lightbox-attachments.js

@@ -121,6 +121,7 @@ JX.behavior('lightbox-attachments', function (config) {
       JX.$N('div',
         {
           className : 'lightbox-image-frame',
+          sigil : 'lightbox-image-frame',
         },
         img
       );
@@ -324,12 +325,12 @@ JX.behavior('lightbox-attachments', function (config) {
   // When the user clicks the background, close the lightbox.
   JX.Stratcom.listen(
     'click',
-    'lightbox-attachment',
+    'lightbox-image-frame',
     function (e) {
       if (!lightbox) {
         return;
       }
-      if (e.getTarget() != e.getNode('lightbox-attachment')) {
+      if (e.getTarget() != e.getNode('lightbox-image-frame')) {
         // Don't close if they clicked some other element, like the image
         // itself or the next/previous arrows.
         return;