[Summary view] [Print] [Text view]

   1  /**
   2   * @provides javelin-behavior-pholio-mock-edit
   3   * @requires javelin-behavior
   4   *           javelin-stratcom
   5   *           javelin-dom
   6   *           javelin-workflow
   7   *           phabricator-phtize
   8   *           phabricator-drag-and-drop-file-upload
   9   *           phabricator-draggable-list
  10   */
  11  JX.behavior('pholio-mock-edit', function(config) {
  12    var pht = JX.phtize(config.pht);
  13  
  14    var nodes = {
  15      list: JX.$(config.listID),
  16      drop: JX.$(config.dropID),
  17      order: JX.$(config.orderID)
  18    };
  19  
  20    var uploading = [];
  21  
  22  
  23  /* -(  Deleting Images  )---------------------------------------------------- */
  24  
  25  
  26    // When the user clicks the "X" on an image, we replace it with a "click to
  27    // undo" element. If they click to undo, we put the original node back in the
  28    // DOM.
  29    JX.Stratcom.listen('click', 'pholio-drop-remove', function(e) {
  30      e.kill();
  31  
  32      var node = e.getNode('pholio-drop-image');
  33      var undo = render_undo();
  34  
  35      JX.DOM.listen(undo, 'click', 'pholio-drop-undo', function(e) {
  36        e.kill();
  37        JX.DOM.replace(undo, node);
  38        synchronize_order();
  39      });
  40  
  41      JX.DOM.replace(node, undo);
  42      synchronize_order();
  43    });
  44  
  45  
  46  /* -(  Reordering Images  )-------------------------------------------------- */
  47  
  48  
  49    var draglist = new JX.DraggableList('pholio-drop-image', nodes.list)
  50      .setGhostNode(JX.$N('div', {className: 'drag-ghost'}))
  51      .setFindItemsHandler(function() {
  52        return JX.DOM.scry(nodes.list, 'div', 'pholio-drop-image');
  53      });
  54  
  55    // Only let the user drag images by the handle, not the whole entry.
  56    draglist.listen('shouldBeginDrag', function(e) {
  57      if (!e.getNode('pholio-drag-handle')) {
  58        JX.Stratcom.context().prevent();
  59      }
  60    });
  61  
  62    // Reflect the display order in a hidden input.
  63    var synchronize_order = function() {
  64      var items = draglist.findItems();
  65      var order = [];
  66      for (var ii = 0; ii < items.length; ii++) {
  67        order.push(JX.Stratcom.getData(items[ii]).filePHID);
  68      }
  69      nodes.order.value = order.join(',');
  70    };
  71  
  72    draglist.listen('didDrop', synchronize_order);
  73    synchronize_order();
  74  
  75  
  76  /* -(  Build  )-------------------------------------------------------------- */
  77  
  78  
  79    var build_drop_upload = function(node) {
  80      var drop = new JX.PhabricatorDragAndDropFileUpload(node)
  81        .setURI(config.uploadURI);
  82  
  83      drop.listen('didBeginDrag', function() {
  84        JX.DOM.alterClass(node, 'pholio-drop-active', true);
  85      });
  86  
  87      drop.listen('didEndDrag', function() {
  88        JX.DOM.alterClass(node, 'pholio-drop-active', false);
  89      });
  90  
  91      return drop;
  92    };
  93  
  94    var build_add_control = function(add_node) {
  95      var drop = build_drop_upload(add_node);
  96  
  97      drop.listen('willUpload', function(file) {
  98        var node = render_uploading();
  99        uploading.push({node: node, file: file});
 100        nodes.list.appendChild(node);
 101      });
 102  
 103      drop.listen('didUpload', function(file) {
 104        var node;
 105        for (var ii = 0; ii < uploading.length; ii++) {
 106          if (uploading[ii].file === file) {
 107            node = uploading[ii].node;
 108            uploading.splice(ii, 1);
 109            break;
 110          }
 111        }
 112  
 113        JX.DOM.setContent(node, pht('uploaded'));
 114  
 115        new JX.Workflow(config.renderURI, {filePHID: file.getPHID()})
 116          .setHandler(function(response) {
 117            var new_node = JX.$H(response.markup).getFragment().firstChild;
 118            build_update_control(new_node);
 119  
 120            JX.DOM.replace(node, new_node);
 121            synchronize_order();
 122          })
 123          .start();
 124      });
 125  
 126      drop.start();
 127    };
 128  
 129    var build_list_controls = function(list_node) {
 130      var nodes = JX.DOM.scry(list_node, 'div', 'pholio-drop-image');
 131      for (var ii = 0; ii < nodes.length; ii++) {
 132        build_update_control(nodes[ii]);
 133      }
 134    };
 135  
 136    var build_update_control = function(node) {
 137      var drop = build_drop_upload(node);
 138  
 139      drop.listen('willUpload', function() {
 140        JX.DOM.alterClass(node, 'pholio-replacing', true);
 141      });
 142  
 143      drop.listen('didUpload', function(file) {
 144        var node_data = JX.Stratcom.getData(node);
 145  
 146        var data = {
 147          filePHID: file.getPHID(),
 148          replacesPHID: node_data.replacesPHID || node_data.filePHID || null,
 149          title: JX.DOM.find(node, 'input', 'image-title').value,
 150          description: JX.DOM.find(node, 'textarea', 'image-description').value
 151        };
 152  
 153        new JX.Workflow(config.renderURI, data)
 154          .setHandler(function(response) {
 155            var new_node = JX.$H(response.markup).getFragment().firstChild;
 156            build_update_control(new_node);
 157  
 158            JX.DOM.replace(node, new_node);
 159            JX.DOM.alterClass(node, 'pholio-replacing', false);
 160            synchronize_order();
 161          })
 162          .start();
 163      });
 164  
 165      drop.start();
 166    };
 167  
 168  
 169  /* -(  Rendering  )---------------------------------------------------------- */
 170  
 171  
 172    var render_uploading = function() {
 173      return JX.$N(
 174        'div',
 175        {className: 'pholio-drop-uploading'},
 176        pht('uploading'));
 177    };
 178  
 179    var render_undo = function() {
 180      var link = JX.$N(
 181        'a',
 182        {href: '#', sigil: 'pholio-drop-undo'},
 183        pht('undo'));
 184  
 185      return JX.$N(
 186        'div',
 187        {className: 'pholio-drop-undo'},
 188        [pht('removed'), ' ', link]);
 189    };
 190  
 191  
 192  /* -(  Init  )--------------------------------------------------------------- */
 193  
 194    build_add_control(nodes.drop);
 195    build_list_controls(nodes.list);
 196  
 197  });