Changeset View
Changeset View
Standalone View
Standalone View
webroot/rsrc/js/application/projects/WorkboardBoard.js
| Show All 33 Lines | JX.install('WorkboardBoard', { | ||||
| members: { | members: { | ||||
| _controller: null, | _controller: null, | ||||
| _phid: null, | _phid: null, | ||||
| _root: null, | _root: null, | ||||
| _columns: null, | _columns: null, | ||||
| _headers: null, | _headers: null, | ||||
| _cards: null, | _cards: null, | ||||
| _dropPreviewNode: null, | |||||
| _dropPreviewListNode: null, | |||||
| getRoot: function() { | getRoot: function() { | ||||
| return this._root; | return this._root; | ||||
| }, | }, | ||||
| getColumns: function() { | getColumns: function() { | ||||
| return this._columns; | return this._columns; | ||||
| }, | }, | ||||
| ▲ Show 20 Lines • Show All 125 Lines • ▼ Show 20 Lines | _setupDragHandlers: function() { | ||||
| // If we can't reorder cards, we always lock them into their current | // If we can't reorder cards, we always lock them into their current | ||||
| // position. | // position. | ||||
| if (!can_reorder) { | if (!can_reorder) { | ||||
| list.setCompareOnMove(true); | list.setCompareOnMove(true); | ||||
| list.setCompareOnReorder(true); | list.setCompareOnReorder(true); | ||||
| } | } | ||||
| list.setTargetChangeHandler(JX.bind(this, this._didChangeDropTarget)); | |||||
| list.listen('didDrop', JX.bind(this, this._onmovecard, list)); | list.listen('didDrop', JX.bind(this, this._onmovecard, list)); | ||||
| lists.push(list); | lists.push(list); | ||||
| } | } | ||||
| for (var ii = 0; ii < lists.length; ii++) { | for (var ii = 0; ii < lists.length; ii++) { | ||||
| lists[ii].setGroup(lists); | lists[ii].setGroup(lists); | ||||
| } | } | ||||
| }, | }, | ||||
| _findCardsInColumn: function(column_node) { | _didChangeDropTarget: function(src_list, src_node, dst_list, dst_node) { | ||||
| return JX.DOM.scry(column_node, 'li', 'project-card'); | var node = this._getDropPreviewNode(); | ||||
| }, | |||||
| _onmovecard: function(list, item, after_node, src_list) { | if (!dst_list) { | ||||
| list.lock(); | // The card is being dragged into a dead area, like the left menu. | ||||
| JX.DOM.alterClass(item, 'drag-sending', true); | JX.DOM.remove(node); | ||||
| return; | |||||
| } | |||||
| if (dst_node === false) { | |||||
| // The card is being dragged over itself, so dropping it won't | |||||
| // affect anything. | |||||
| JX.DOM.remove(node); | |||||
| return; | |||||
| } | |||||
| var src_phid = JX.Stratcom.getData(src_list.getRootNode()).columnPHID; | var src_phid = JX.Stratcom.getData(src_list.getRootNode()).columnPHID; | ||||
| var dst_phid = JX.Stratcom.getData(list.getRootNode()).columnPHID; | var dst_phid = JX.Stratcom.getData(dst_list.getRootNode()).columnPHID; | ||||
| var item_phid = JX.Stratcom.getData(item).objectPHID; | var src_column = this.getColumn(src_phid); | ||||
| var data = { | var dst_column = this.getColumn(dst_phid); | ||||
| objectPHID: item_phid, | |||||
| columnPHID: dst_phid, | var effects = []; | ||||
| order: this.getOrder() | |||||
| if (src_column !== dst_column) { | |||||
| effects = effects.concat(dst_column.getDropEffects()); | |||||
| } | |||||
| var context = this._getDropContext(dst_node); | |||||
| if (context.headerKey) { | |||||
| var header = this.getHeaderTemplate(context.headerKey); | |||||
| effects = effects.concat(header.getDropEffects()); | |||||
| } | |||||
| if (!effects.length) { | |||||
| JX.DOM.remove(node); | |||||
| return; | |||||
| } | |||||
| var items = []; | |||||
| for (var ii = 0; ii < effects.length; ii++) { | |||||
| var effect = effects[ii]; | |||||
| items.push(effect.newNode()); | |||||
| } | |||||
| JX.DOM.setContent(this._getDropPreviewListNode(), items); | |||||
| document.body.appendChild(node); | |||||
| }, | |||||
| _getDropPreviewNode: function() { | |||||
| if (!this._dropPreviewNode) { | |||||
| var attributes = { | |||||
| className: 'workboard-drop-preview' | |||||
| }; | }; | ||||
| var content = [ | |||||
| this._getDropPreviewListNode() | |||||
| ]; | |||||
| this._dropPreviewNode = JX.$N('div', attributes, content); | |||||
| } | |||||
| return this._dropPreviewNode; | |||||
| }, | |||||
| _getDropPreviewListNode: function() { | |||||
| if (!this._dropPreviewListNode) { | |||||
| var attributes = {}; | |||||
| this._dropPreviewListNode = JX.$N('ul', attributes); | |||||
| } | |||||
| return this._dropPreviewListNode; | |||||
| }, | |||||
| _findCardsInColumn: function(column_node) { | |||||
| return JX.DOM.scry(column_node, 'li', 'project-card'); | |||||
| }, | |||||
| _getDropContext: function(after_node, item) { | |||||
| var header_key; | |||||
| var before_phid; | |||||
| var after_phid; | |||||
| // We're going to send an "afterPHID" and a "beforePHID" if the card | // We're going to send an "afterPHID" and a "beforePHID" if the card | ||||
| // was dropped immediately adjacent to another card. If a card was | // was dropped immediately adjacent to another card. If a card was | ||||
| // dropped before or after a header, we don't send a PHID for the card | // dropped before or after a header, we don't send a PHID for the card | ||||
| // on the other side of the header. | // on the other side of the header. | ||||
| // If the view has headers, we always send the header the card was | // If the view has headers, we always send the header the card was | ||||
| // dropped under. | // dropped under. | ||||
| var after_data; | var after_data; | ||||
| var after_card = after_node; | var after_card = after_node; | ||||
| while (after_card) { | while (after_card) { | ||||
| after_data = JX.Stratcom.getData(after_card); | after_data = JX.Stratcom.getData(after_card); | ||||
| if (after_data.objectPHID) { | if (after_data.objectPHID) { | ||||
| break; | break; | ||||
| } | } | ||||
| if (after_data.headerKey) { | if (after_data.headerKey) { | ||||
| break; | break; | ||||
| } | } | ||||
| after_card = after_card.previousSibling; | after_card = after_card.previousSibling; | ||||
| } | } | ||||
| if (after_data) { | if (after_data) { | ||||
| if (after_data.objectPHID) { | if (after_data.objectPHID) { | ||||
| data.afterPHID = after_data.objectPHID; | after_phid = after_data.objectPHID; | ||||
| } | } | ||||
| } | } | ||||
| if (item) { | |||||
| var before_data; | var before_data; | ||||
| var before_card = item.nextSibling; | var before_card = item.nextSibling; | ||||
| while (before_card) { | while (before_card) { | ||||
| before_data = JX.Stratcom.getData(before_card); | before_data = JX.Stratcom.getData(before_card); | ||||
| if (before_data.objectPHID) { | if (before_data.objectPHID) { | ||||
| break; | break; | ||||
| } | } | ||||
| if (before_data.headerKey) { | if (before_data.headerKey) { | ||||
| break; | break; | ||||
| } | } | ||||
| before_card = before_card.nextSibling; | before_card = before_card.nextSibling; | ||||
| } | } | ||||
| if (before_data) { | if (before_data) { | ||||
| if (before_data.objectPHID) { | if (before_data.objectPHID) { | ||||
| data.beforePHID = before_data.objectPHID; | before_phid = before_data.objectPHID; | ||||
| } | |||||
| } | } | ||||
| } | } | ||||
| var header_data; | var header_data; | ||||
| var header_node = after_node; | var header_node = after_node; | ||||
| while (header_node) { | while (header_node) { | ||||
| header_data = JX.Stratcom.getData(header_node); | header_data = JX.Stratcom.getData(header_node); | ||||
| if (header_data.headerKey) { | if (header_data.headerKey) { | ||||
| break; | break; | ||||
| } | } | ||||
| header_node = header_node.previousSibling; | header_node = header_node.previousSibling; | ||||
| } | } | ||||
| if (header_data) { | if (header_data) { | ||||
| var header_key = header_data.headerKey; | header_key = header_data.headerKey; | ||||
| if (header_key) { | } | ||||
| var properties = this.getHeaderTemplate(header_key) | |||||
| return { | |||||
| headerKey: header_key, | |||||
| afterPHID: after_phid, | |||||
| beforePHID: before_phid | |||||
| }; | |||||
| }, | |||||
| _onmovecard: function(list, item, after_node, src_list) { | |||||
| list.lock(); | |||||
| JX.DOM.alterClass(item, 'drag-sending', true); | |||||
| var src_phid = JX.Stratcom.getData(src_list.getRootNode()).columnPHID; | |||||
| var dst_phid = JX.Stratcom.getData(list.getRootNode()).columnPHID; | |||||
| var item_phid = JX.Stratcom.getData(item).objectPHID; | |||||
| var data = { | |||||
| objectPHID: item_phid, | |||||
| columnPHID: dst_phid, | |||||
| order: this.getOrder() | |||||
| }; | |||||
| var context = this._getDropContext(after_node); | |||||
| if (context.afterPHID) { | |||||
| data.afterPHID = context.afterPHID; | |||||
| } | |||||
| if (context.beforePHID) { | |||||
| data.beforePHID = context.beforePHID; | |||||
| } | |||||
| if (context.headerKey) { | |||||
| var properties = this.getHeaderTemplate(context.headerKey) | |||||
| .getEditProperties(); | .getEditProperties(); | ||||
| data.header = JX.JSON.stringify(properties); | data.header = JX.JSON.stringify(properties); | ||||
| } | } | ||||
| } | |||||
| var visible_phids = []; | var visible_phids = []; | ||||
| var column = this.getColumn(dst_phid); | var column = this.getColumn(dst_phid); | ||||
| for (var object_phid in column.getCards()) { | for (var object_phid in column.getCards()) { | ||||
| visible_phids.push(object_phid); | visible_phids.push(object_phid); | ||||
| } | } | ||||
| data.visiblePHIDs = visible_phids.join(','); | data.visiblePHIDs = visible_phids.join(','); | ||||
| ▲ Show 20 Lines • Show All 127 Lines • Show Last 20 Lines | |||||