1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2025-01-10 14:51:06 +01:00
phorge-phorge/webroot/rsrc/js/application/projects/Workboard.js
epriestley bc591b1b5f Mostly move workboard card moves to new Workboard code
Summary:
Ref T4900. This gets moves on the new stuff and cleans them up a little.

Two behaviors haven't been ported yet: height adjustment during drags (which is broken anyway with inner scroll) and updating point counts (coming soon).

Test Plan: Dragged cards around on a board, including top/bottom positions and normal/priority sort.

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T4900

Differential Revision: https://secure.phabricator.com/D15226
2016-02-10 13:05:35 -08:00

211 lines
5.4 KiB
JavaScript

/**
* @provides javelin-workboard
* @requires javelin-install
* javelin-dom
* javelin-util
* javelin-vector
* javelin-stratcom
* javelin-workflow
* phabricator-draggable-list
* phabricator-drag-and-drop-file-upload
* @javelin
*/
JX.install('Workboard', {
construct: function(config) {
this._config = config;
this._boardNodes = {};
this._setupCoverImageHandlers();
this._setupPanHandlers();
},
members: {
_config: null,
_boardNodes: null,
_currentBoard: null,
_panOrigin: null,
_panNode: null,
_panX: null,
addBoard: function(board_phid, board_node) {
this._currentBoard = board_phid;
if (!this._boardNodes[board_phid]) {
this._boardNodes[board_phid] = board_node;
this._setupDragHandlers(board_node);
}
},
_getConfig: function() {
return this._config;
},
_setupCoverImageHandlers: function() {
if (!JX.PhabricatorDragAndDropFileUpload.isSupported()) {
return;
}
var config = this._getConfig();
var drop = new JX.PhabricatorDragAndDropFileUpload('project-card')
.setURI(config.uploadURI)
.setChunkThreshold(config.chunkThreshold);
drop.listen('didBeginDrag', function(node) {
JX.DOM.alterClass(node, 'phui-workcard-upload-target', true);
});
drop.listen('didEndDrag', function(node) {
JX.DOM.alterClass(node, 'phui-workcard-upload-target', false);
});
drop.listen('didUpload', function(file) {
var node = file.getTargetNode();
var board = JX.DOM.findAbove(node, 'div', 'jx-workboard');
var data = {
boardPHID: JX.Stratcom.getData(board).boardPHID,
objectPHID: JX.Stratcom.getData(node).objectPHID,
filePHID: file.getPHID()
};
new JX.Workflow(config.coverURI, data)
.setHandler(function(r) {
JX.DOM.replace(node, JX.$H(r.task));
})
.start();
});
drop.start();
},
_setupPanHandlers: function() {
var mousedown = JX.bind(this, this._onpanmousedown);
var mousemove = JX.bind(this, this._onpanmousemove);
var mouseup = JX.bind(this, this._onpanmouseup);
JX.Stratcom.listen('mousedown', 'workboard-shadow', mousedown);
JX.Stratcom.listen('mousemove', null, mousemove);
JX.Stratcom.listen('mouseup', null, mouseup);
},
_onpanmousedown: function(e) {
if (!JX.Device.isDesktop()) {
return;
}
if (e.getNode('workpanel')) {
return;
}
if (JX.Stratcom.pass()) {
return;
}
e.kill();
this._panOrigin = JX.$V(e);
this._panNode = e.getNode('workboard-shadow');
this._panX = this._panNode.scrollLeft;
},
_onpanmousemove: function(e) {
if (!this._panOrigin) {
return;
}
var cursor = JX.$V(e);
this._panNode.scrollLeft = this._panX + (this._panOrigin.x - cursor.x);
},
_onpanmouseup: function() {
this._panOrigin = null;
},
_setupDragHandlers: function(board_node) {
var columns = this._findBoardColumns(board_node);
var column;
var ii;
var lists = [];
for (ii = 0; ii < columns.length; ii++) {
column = columns[ii];
var list = new JX.DraggableList('project-card', column)
.setOuterContainer(board_node)
.setFindItemsHandler(JX.bind(this, this._findCardsInColumn, column))
.setCanDragX(true);
// TODO: Restore these behaviors.
// list.listen('didSend', JX.bind(list, onupdate, cols[ii]));
// list.listen('didReceive', JX.bind(list, onupdate, cols[ii]));
// onupdate(cols[ii]);
list.listen('didDrop', JX.bind(this, this._onmovecard, list));
// TODO: Restore these behaviors.
// list.listen('didBeginDrag', JX.bind(null, onbegindrag));
// list.listen('didEndDrag', JX.bind(null, onenddrag));
lists.push(list);
}
for (ii = 0; ii < lists.length; ii++) {
lists[ii].setGroup(lists);
}
},
_findBoardColumns: function(board_node) {
return JX.DOM.scry(board_node, 'ul', 'project-column');
},
_findCardsInColumn: function(column_node) {
return JX.DOM.scry(column_node, 'li', 'project-card');
},
_onmovecard: function(list, item, after_node) {
list.lock();
JX.DOM.alterClass(item, 'drag-sending', true);
var item_phid = JX.Stratcom.getData(item).objectPHID;
var data = {
objectPHID: item_phid,
columnPHID: JX.Stratcom.getData(list.getRootNode()).columnPHID
};
if (after_node) {
data.afterPHID = JX.Stratcom.getData(after_node).objectPHID;
}
var before_node = item.nextSibling;
if (before_node) {
var before_phid = JX.Stratcom.getData(before_node).objectPHID;
if (before_phid) {
data.beforePHID = before_phid;
}
}
// TODO: This should be managed per-board.
var config = this._getConfig();
data.order = config.order;
new JX.Workflow(config.moveURI, data)
.setHandler(JX.bind(this, this._oncardupdate, item, list))
.start();
},
_oncardupdate: function(item, list, response) {
list.unlock();
JX.DOM.alterClass(item, 'drag-sending', false);
JX.DOM.replace(item, JX.$H(response.task));
}
}
});