1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-23 07:12:41 +01:00
phorge-phorge/webroot/rsrc/js/application/dashboard/behavior-dashboard-move-panels.js
epriestley b8551bb5f9 Reduce drag-and-drop jank on dashboards
Summary:
Depends on D20414. Ref T13272. Several minor things here:

  - Currently, you can drag panels underneath the invisible "there are no items in this column" div and the "Create Panel / Add Existing Panel" buttons. This is silly; stop it.
  - Currently, when viewing a tab panel on a dashboard, you can drag the panels inside it. This is extremely silly. Make "movable" off by default and pass it through the async flow only when we actually need it.
  - Make the whole "Add Tab..." virtual tab clickable to open the dropdown. This removes the rare exception/todo combo I added earlier. {key F}
  - Add or remove some icons or something.

Test Plan: Moved panels around on dashboards. Tried to drag panels inside tab panels. Added tab. Things were less obviously broken.

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T13272

Differential Revision: https://secure.phabricator.com/D20415
2019-04-17 12:20:44 -07:00

81 lines
2 KiB
JavaScript

/**
* @provides javelin-behavior-dashboard-move-panels
* @requires javelin-behavior
* javelin-dom
* javelin-util
* javelin-stratcom
* javelin-workflow
* phabricator-draggable-list
*/
JX.behavior('dashboard-move-panels', function(config) {
var itemSigil = 'panel-movable';
function finditems(col) {
return JX.DOM.scry(col, 'div', itemSigil);
}
function markcolempty(col, toggle) {
JX.DOM.alterClass(col.parentNode, 'dashboard-column-empty', toggle);
}
function onupdate(col) {
markcolempty(col, !this.findItems().length);
}
function onresponse(response, item, list) {
list.unlock();
JX.DOM.alterClass(item, 'drag-sending', false);
}
function ondrop(list, item, after) {
list.lock();
JX.DOM.alterClass(item, 'drag-sending', true);
var data = {
panelKey: JX.Stratcom.getData(item).panelKey,
columnKey: JX.Stratcom.getData(list.getRootNode()).columnKey
};
if (after) {
var after_data = JX.Stratcom.getData(after);
if (after_data.panelKey) {
data.afterKey = after_data.panelKey;
}
}
var workflow = new JX.Workflow(config.moveURI, data)
.setHandler(function(response) {
onresponse(response, item, list);
});
workflow.start();
}
var dashboard_node = JX.$(config.dashboardNodeID);
var lists = [];
var cols = JX.DOM.scry(dashboard_node, 'div', 'dashboard-column');
var ii;
for (ii = 0; ii < cols.length; ii++) {
var col = cols[ii];
var list = new JX.DraggableList(itemSigil, col)
.setFindItemsHandler(JX.bind(null, finditems, col))
.setCanDragX(true);
list.listen('didSend', JX.bind(list, onupdate, col));
list.listen('didReceive', JX.bind(list, onupdate, col));
list.listen('didDrop', JX.bind(null, ondrop, list));
lists.push(list);
markcolempty(col, finditems(col).length === 0);
}
for (ii = 0; ii < lists.length; ii++) {
lists[ii].setGroup(lists);
}
});