[Summary view] [Print] [Text view]

   1  /**
   2   * @provides javelin-behavior-lightbox-attachments
   3   * @requires javelin-behavior
   4   *           javelin-stratcom
   5   *           javelin-dom
   6   *           javelin-mask
   7   *           javelin-util
   8   *           phabricator-busy
   9   */
  10  
  11  JX.behavior('lightbox-attachments', function (config) {
  12  
  13    var lightbox     = null;
  14    var prev         = null;
  15    var next         = null;
  16    var downloadForm = JX.$H(config.downloadForm).getFragment().firstChild;
  17  
  18    function loadLightBox(e) {
  19      if (!e.isNormalClick()) {
  20        return;
  21      }
  22  
  23      if (JX.Stratcom.pass()) {
  24        return;
  25      }
  26      e.prevent();
  27  
  28      var links = JX.DOM.scry(document, 'a', 'lightboxable');
  29      var phids = {};
  30      var data;
  31      for (var i = 0; i < links.length; i++) {
  32        data = JX.Stratcom.getData(links[i]);
  33        phids[data.phid] = links[i];
  34      }
  35  
  36      // Now that we have the big picture phid situation sorted out, figure
  37      // out how the actual node the user clicks fits into that big picture
  38      // and build some pretty UI to show the attachment.
  39      var target      = e.getNode('lightboxable');
  40      var target_data = JX.Stratcom.getData(target);
  41      var total       = JX.keys(phids).length;
  42      var current     = 1;
  43      var past_target = false;
  44      for (var phid in phids) {
  45        if (past_target) {
  46          next = phids[phid];
  47          break;
  48        } else if (phid == target_data.phid) {
  49          past_target = true;
  50        } else {
  51          prev = phids[phid];
  52          current++;
  53        }
  54      }
  55  
  56      var img_uri = '';
  57      var extra_status = '';
  58      var name_element = '';
  59      // for now, this conditional is always true
  60      // revisit if / when we decide to add non-images to lightbox view
  61      if (target_data.viewable) {
  62        img_uri = target_data.uri;
  63      } else {
  64        img_uri = config.defaultImageUri;
  65        extra_status = ' Image may not be representative of actual attachment.';
  66        name_element = JX.$N('div',
  67                             { className : 'attachment-name' },
  68                             target_data.name
  69                            );
  70      }
  71  
  72      var img = JX.$N('img',
  73                      {
  74                        className : 'loading',
  75                        alt       : target_data.name,
  76                        title     : target_data.name
  77                      }
  78                     );
  79  
  80      lightbox = JX.$N('div',
  81                       {
  82                         className : 'lightbox-attachment',
  83                         sigil: 'lightbox-attachment'
  84                       },
  85                       img
  86                      );
  87      JX.DOM.appendContent(lightbox, name_element);
  88  
  89      var closeIcon = JX.$N('a',
  90                           {
  91                             className : 'lightbox-close',
  92                             href : '#'
  93                           }
  94                          );
  95      JX.DOM.listen(closeIcon, 'click', null, closeLightBox);
  96      JX.DOM.appendContent(lightbox, closeIcon);
  97      var leftIcon = '';
  98      if (next) {
  99        leftIcon = JX.$N('a',
 100                         {
 101                           className : 'lightbox-right',
 102                           href : '#'
 103                         }
 104                        );
 105        JX.DOM.listen(leftIcon,
 106                      'click',
 107                      null,
 108                      JX.bind(null, loadAnotherLightBox, next)
 109                     );
 110      }
 111      JX.DOM.appendContent(lightbox, leftIcon);
 112      var rightIcon = '';
 113      if (prev) {
 114        rightIcon = JX.$N('a',
 115                          {
 116                            className : 'lightbox-left',
 117                            href : '#'
 118                          }
 119                         );
 120        JX.DOM.listen(rightIcon,
 121                      'click',
 122                      null,
 123                      JX.bind(null, loadAnotherLightBox, prev)
 124                     );
 125      }
 126      JX.DOM.appendContent(lightbox, rightIcon);
 127  
 128      var statusSpan = JX.$N('span',
 129                             {
 130                               className: 'lightbox-status-txt'
 131                             },
 132                             'Image '+current+' of '+total+'.'+extra_status
 133                             );
 134  
 135      var downloadSpan = JX.$N('span',
 136                              {
 137                                className : 'lightbox-download'
 138                              });
 139      var statusHTML = JX.$N('div',
 140                             {
 141                               className : 'lightbox-status'
 142                             },
 143                             [statusSpan, downloadSpan]
 144                            );
 145      JX.DOM.appendContent(lightbox, statusHTML);
 146      JX.DOM.alterClass(document.body, 'lightbox-attached', true);
 147      JX.Mask.show('jx-dark-mask');
 148  
 149      downloadForm.action = target_data.dUri;
 150      downloadSpan.appendChild(downloadForm);
 151  
 152      document.body.appendChild(lightbox);
 153  
 154      JX.Busy.start();
 155      img.onload = function() {
 156        JX.DOM.alterClass(img, 'loading', false);
 157        JX.Busy.done();
 158      };
 159  
 160      img.src = img_uri;
 161    }
 162  
 163    // TODO - make this work with KeyboardShortcut, which means
 164    // making an uninstall / de-register for KeyboardShortcut
 165    function lightBoxHandleKeyDown(e) {
 166      if (!lightbox) {
 167        return;
 168      }
 169      var raw = e.getRawEvent();
 170      if (raw.altKey || raw.ctrlKey || raw.metaKey) {
 171        return;
 172      }
 173      if (JX.Stratcom.pass()) {
 174        return;
 175      }
 176  
 177      var handler = JX.bag;
 178      switch (e.getSpecialKey()) {
 179        case 'esc':
 180          handler = closeLightBox;
 181          break;
 182        case 'right':
 183        if (next) {
 184            handler = JX.bind(null, loadAnotherLightBox, next);
 185          }
 186          break;
 187        case 'left':
 188          if (prev) {
 189            handler = JX.bind(null, loadAnotherLightBox, prev);
 190          }
 191          break;
 192      }
 193      return handler(e);
 194    }
 195  
 196    function closeLightBox(e) {
 197      if (!lightbox) {
 198        return;
 199      }
 200      e.prevent();
 201      JX.DOM.remove(lightbox);
 202      JX.Mask.hide();
 203      JX.DOM.alterClass(document.body, 'lightbox-attached', false);
 204      lightbox = null;
 205      prev     = null;
 206      next     = null;
 207    }
 208  
 209    function loadAnotherLightBox(el, e) {
 210      if (!el) {
 211        return;
 212      }
 213      e.prevent();
 214      closeLightBox(e);
 215      el.click();
 216    }
 217  
 218    JX.Stratcom.listen(
 219      'click',
 220      ['lightboxable', 'tag:a'],
 221      loadLightBox);
 222  
 223    JX.Stratcom.listen(
 224      'keydown',
 225      null,
 226      lightBoxHandleKeyDown);
 227  
 228    // When the user clicks the background, close the lightbox.
 229    JX.Stratcom.listen(
 230      'click',
 231      'lightbox-attachment',
 232      function (e) {
 233        if (!lightbox) {
 234          return;
 235        }
 236        if (e.getTarget() != e.getNode('lightbox-attachment')) {
 237          // Don't close if they clicked some other element, like the image
 238          // itself or the next/previous arrows.
 239          return;
 240        }
 241        closeLightBox(e);
 242        e.kill();
 243      });
 244  
 245  });