1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-29 00:40:57 +01:00
phorge-phorge/webroot/rsrc/js/application/dashboard/behavior-dashboard-move-panels.js
Bob Trahan 6300955661 Dashboards - add layout mode to dashboards
Summary:
This gets us the ability to specify a "layout mode" and which column a panel should appear in at panel add time. Changing the layout mode from a multi column view to a single column view or vice versa will reset all panels to the left most column.

You can also drag and drop where columns appear via the "arrange" mode.

We also have a new dashboard create flow. Create dashboard -> arrange mode. (As opposed to view mode.) This could all possibly use massaging.

Fixes T4996.

Test Plan:
made a dashboard with panels in multiple columns. verified correct widths for various layout modes

re-arranged collumns like whoa.

Reviewers: chad, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T4996

Differential Revision: https://secure.phabricator.com/D9031
2014-05-15 19:12:40 -07:00

103 lines
2.6 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 = 'dashboard-panel';
function finditems(col) {
return JX.DOM.scry(col, 'div', itemSigil);
}
function markcolempty(col, toggle) {
JX.DOM.alterClass(col, '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, from) {
list.lock();
JX.DOM.alterClass(item, 'drag-sending', true);
var item_phid = JX.Stratcom.getData(item).objectPHID;
var data = {
objectPHID: item_phid,
columnID: JX.Stratcom.getData(list.getRootNode()).columnID
};
var after_phid = null;
var items = finditems(list.getRootNode());
if (after) {
after_phid = JX.Stratcom.getData(after).objectPHID;
data.afterPHID = after_phid;
}
var ii;
var ii_item;
var ii_item_phid;
var ii_prev_item_phid = null;
var before_phid = null;
for (ii = 0; ii < items.length; ii++) {
ii_item = items[ii];
ii_item_phid = JX.Stratcom.getData(ii_item).objectPHID;
if (ii_item_phid == item_phid) {
// skip the item we just dropped
continue;
}
// note this handles when there is no after phid - we are at the top of
// the list - quite nicely
if (ii_prev_item_phid == after_phid) {
before_phid = ii_item_phid;
break;
}
ii_prev_item_phid = ii_item_phid;
}
if (before_phid) {
data.beforePHID = before_phid;
}
var workflow = new JX.Workflow(config.moveURI, data)
.setHandler(function(response) {
onresponse(response, item, list);
});
workflow.start();
}
var lists = [];
var ii;
var cols = JX.DOM.scry(JX.$(config.dashboardID), 'div', 'dashboard-column');
var col = null;
for (ii = 0; ii < cols.length; ii++) {
col = cols[ii];
var list = new JX.DraggableList(itemSigil, col)
.setFindItemsHandler(JX.bind(null, finditems, col));
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);
}
});