Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
META-INF.resources.primefaces.tree.tree.vertical.js Maven / Gradle / Ivy
/**
* __PrimeFaces Vertical Tree Widget__
*
* Tree is used for displaying hierarchical data and creating a site navigation. This implements a vertical tree.
*
* @typedef {"none" | "sibling"} PrimeFaces.widget.VerticalTree.DropRestrictMode Defines parent-child restrictions when
* a node is dropped.
*
* @interface {PrimeFaces.widget.VerticalTree.DroppedNodeParams} DroppedNodeParams Describes a drag & drop operation
* when a tree node is being dragged.
* @prop {JQueryUI.DroppableOptions} DroppedNodeParams.ui Details about the drop event.
* @prop {PrimeFaces.widget.VerticalTree} DroppedNodeParams.dragSource Tree widget of the dragged node.
* @prop {JQuery} DroppedNodeParams.dragNode The node that was dragged.
* @prop {JQuery} DroppedNodeParams.targetDragNode The node that was the target of the drag.
* @prop {JQuery} DroppedNodeParams.dropPoint The drop point where the node was dropped.
* @prop {JQuery} DroppedNodeParams.dropNode The node on which the dragged node was dropped.
* @prop {boolean} DroppedNodeParams.transfer Whether a transfer should occur, i.e. whether the node was not dropped on
* itself.
*
* @prop {JQuery} container The DOM element for the tree container.
* @prop {PrimeFaces.widget.VerticalTree.DroppedNodeParams[]} droppedNodeParams List of parameter describing the drag &
* drop operations.
* @prop {JQuery} filterInput The DOM element for the filter input field that lets the user search the tree.
* @prop {number} filterTimeout The set-timeout timer ID of the timer for the filter delay.
* @prop {string[]} invalidSourceKeys A list of row keys for rows that are not valid drag sources.
* @prop {number} scrollInterval The set-interval time ID of the timer for scrolling.
* @prop {JQuery} scrollStateHolder Form element that holds the current scroll state.
* @prop {boolean} shiftKey For drag&drop, whether the shift is pressed.
*
* @interface {PrimeFaces.widget.VerticalTreeCfg} cfg The configuration for the
* {@link VerticalTree| VerticalTree widget}. You can access this configuration via
* {@link PrimeFaces.widget.BaseWidget.cfg|BaseWidget.cfg}. Please note that this configuration is usually meant to be
* read-only and should not be modified.
* @extends {PrimeFaces.widget.BaseTreeCfg} cfg
*
* @prop {string} cfg.collapsedIcon Named of the icon for collapsed nodes.
* @prop {boolean} cfg.controlled Whether drag & drop operations of this tree table are controlled.
* @prop {PrimeFaces.widget.VerticalTree.DropRestrictMode} cfg.dropRestrict Defines parent-child restrictions when a node is
* dropped.
* @prop {boolean} cfg.rtl `true` if text direction is right-to-left, or `false` otherwise.
* @prop {string} cfg.filterEvent Client side event to invoke filtering. Default is keyup.
* @prop {number} cfg.filterDelay Delay to wait in milliseconds before sending each filter query. Default is 300.
*/
PrimeFaces.widget.VerticalTree = PrimeFaces.widget.BaseTree.extend({
/**
* @override
* @inheritdoc
* @param {PrimeFaces.PartialWidgetCfg} cfg
*/
init: function(cfg) {
this._super(cfg);
this.container = this.jq.children('.ui-tree-container');
this.cfg.rtl = this.jq.hasClass('ui-tree-rtl');
this.cfg.collapsedIcon = this.cfg.rtl ? 'ui-icon-triangle-1-w' : 'ui-icon-triangle-1-e';
this.scrollStateHolder = $(this.jqId + '_scrollState');
if(!this.cfg.disabled) {
if(this.cfg.draggable) {
this.initDraggable();
}
if(this.cfg.droppable) {
this.initDroppable();
}
}
this.restoreScrollState();
},
/**
* @override
* @protected
* @inheritdoc
*/
bindEvents: function() {
var $this = this,
togglerSelector = '.ui-tree-toggler',
nodeContentSelector = '.ui-treenode-content';
this.jq.off('click.tree-toggle', togglerSelector)
.on('click.tree-toggle', togglerSelector, null, function(e) {
var toggleIcon = $(this),
node = toggleIcon.closest('li');
if(toggleIcon.hasClass($this.cfg.collapsedIcon))
$this.expandNode(node);
else
$this.collapseNode(node);
});
if(this.cfg.highlight && this.cfg.selectionMode) {
this.jq.off('mouseenter.tree mouseleave.tree', nodeContentSelector)
.on('mouseleave.tree', nodeContentSelector, null, function() {
$(this).removeClass('ui-state-hover');
})
.on('mouseenter.tree', nodeContentSelector, null, function() {
$(this).addClass('ui-state-hover');
});
}
if(this.isCheckboxSelection()) {
var checkboxSelector = '.ui-chkbox-box:not(.ui-state-disabled)';
this.jq.off('mouseleave.tree-checkbox mouseenter.tree-checkbox', checkboxSelector)
.on('mouseleave.tree-checkbox', checkboxSelector, null, function() {
$(this).removeClass('ui-state-hover');
})
.on('mouseenter.tree-checkbox', checkboxSelector, null, function() {
$(this).addClass('ui-state-hover');
});
}
this.jq.off('click.tree-content', nodeContentSelector)
.on('click.tree-content', nodeContentSelector, null, function(e) {
$this.nodeClick(e, $(this));
});
if(this.cfg.filter) {
this.cfg.filterDelay = this.cfg.filterDelay || 300;
this.cfg.filterEvent = this.cfg.filterEvent || 'keyup';
var isEnterKeyFilter = this.cfg.filterEvent === 'enter';
if (isEnterKeyFilter) {
this.cfg.filterEvent = 'keydown';
}
var filterEventName = this.cfg.filterEvent + '.tree-filter';
this.filterInput = this.jq.find('.ui-tree-filter');
PrimeFaces.skinInput(this.filterInput);
this.filterInput.on(filterEventName, function(e) {
if (PrimeFaces.utils.ignoreFilterKey(e) || PrimeFaces.utils.blockEnterKey(e) !== isEnterKeyFilter) {
return;
}
if (isEnterKeyFilter) {
$this.filter();
} else {
if ($this.filterTimeout) {
clearTimeout($this.filterTimeout);
}
$this.filterTimeout = PrimeFaces.queueTask(function() {
$this.filter();
$this.filterTimeout = null;
}, $this.cfg.filterDelay);
}
});
}
this.jq.on('scroll.tree', function(e) {
$this.saveScrollState();
});
this.bindKeyEvents();
},
/**
* Sets up all event listeners for keyboard interactions.
* @private
*/
bindKeyEvents: function() {
var $this = this,
pressTab = false;
this.jq.on('mousedown.tree', function(e) {
if($(e.target).is(':not(:input:enabled)')) {
e.preventDefault();
}
});
this.jq.children('.ui-tree-container').on('focus.tree', function() {
if(!$this.focusedNode && !pressTab) {
$this.focusNode($this.getFirstNode());
}
});
this.jq.off('keydown.tree blur.tree', '.ui-treenode-content').on('keydown.tree', '.ui-treenode-content', null, function(e) {
if(!$this.focusedNode) {
return;
}
var searchRowkey = "";
switch(e.code) {
case 'ArrowLeft':
var rowkey = $this.focusedNode.data('rowkey').toString(),
keyLength = rowkey.length;
if($this.isExpanded($this.focusedNode)) {
$this.collapseNode($this.focusedNode);
}
else {
var nodeToFocus = null;
for(var i = 1; i < parseInt(keyLength / 2) + 1; i++){
searchRowkey = rowkey.substring(0, keyLength - 2 * i);
nodeToFocus = $this.container.find("li:visible[data-rowkey = '" + searchRowkey + "']");
if(nodeToFocus.length) {
$this.focusNode(nodeToFocus);
break;
}
}
}
e.preventDefault();
break;
case 'ArrowRight':
if(!$this.focusedNode.hasClass('ui-treenode-leaf')) {
var rowkey = $this.focusedNode.data('rowkey').toString(),
keyLength = rowkey.length;
if(!$this.isExpanded($this.focusedNode)) {
$this.expandNode($this.focusedNode);
}
if(!$this.isExpanded($this.focusedNode) && !$this.cfg.dynamic) {
searchRowkey = rowkey + '_0';
var nodeToFocus = $this.container.find("li:visible[data-rowkey = '" + searchRowkey + "']");
if(nodeToFocus.length) {
$this.focusNode(nodeToFocus);
}
}
}
e.preventDefault();
break;
case 'ArrowUp':
var nodeToFocus = null,
prevNode = $this.previousNode($this.focusedNode);
if(prevNode.length) {
nodeToFocus = prevNode.find('li.ui-treenode:visible:not(.ui-tree-droppoint)').last();
if(!nodeToFocus.length) {
nodeToFocus = prevNode;
}
}
else {
nodeToFocus = $this.focusedNode.closest('ul').parent('li');
}
if(nodeToFocus.length) {
$this.focusNode(nodeToFocus);
}
e.preventDefault();
break;
case 'ArrowDown':
var nodeToFocus = null,
firstVisibleChildNode = $this.focusedNode.find("> ul > li:visible:not(.ui-tree-droppoint)").first();
if(firstVisibleChildNode.length) {
nodeToFocus = firstVisibleChildNode;
}
else if($this.nextNode($this.focusedNode).length) {
nodeToFocus = $this.nextNode($this.focusedNode);
}
else {
var rowkey = $this.focusedNode.data('rowkey').toString();
if(rowkey.length !== 1) {
nodeToFocus = $this.searchDown($this.focusedNode);
}
}
if(nodeToFocus && nodeToFocus.length) {
$this.focusNode(nodeToFocus);
}
e.preventDefault();
break;
case 'Enter':
case 'NumpadEnter':
case 'Space':
if($this.cfg.selectionMode) {
var selectable = $this.focusedNode.children('.ui-treenode-content').hasClass('ui-tree-selectable');
if($this.cfg.onNodeClick) {
var retVal = $this.cfg.onNodeClick.call($this, $this.focusedNode, e);
if (retVal === false) {
return;
}
}
if(selectable) {
var selected = $this.isNodeSelected($this.focusedNode);
if($this.isCheckboxSelection()) {
$this.toggleCheckboxNode($this.focusedNode);
}
else {
if(selected) {
$this.unselectNode($this.focusedNode);
}
else {
if($this.isSingleSelection()) {
$this.unselectAllNodes();
}
$this.selectNode($this.focusedNode);
$this.cursorNode = $this.focusedNode;
}
}
}
}
e.preventDefault();
break;
case 'Tab':
pressTab = true;
$this.container.trigger('focus');
PrimeFaces.queueTask(function() {
pressTab = false;
});
break;
}
})
.on('blur.tree', '.ui-treenode-content', null, function(e) {
if($this.focusedNode) {
$this.getNodeContent($this.focusedNode).removeClass('ui-treenode-outline');
$this.focusedNode = null;
}
});
/* For copy/paste operation on drag and drop */
var namespace = '.tree' + this.id;
$(document.body).on('keydown' + namespace, function(e) {
$this.shiftKey = e.shiftKey;
}).on('keyup' + namespace, function() {
$this.shiftKey = false;
});
this.addDestroyListener(function() {
$(document.body).off(namespace);
});
},
/**
* Returns the previous node, skipping droppoints (if present), starting at the given node.
* @private
* @param {JQuery} node Node where to start the search.
* @return {JQuery} The previous node.
*/
previousNode: function(node) {
var prevNode = node.prev();
if (prevNode.length && (prevNode.hasClass("ui-tree-droppoint") || prevNode.hasClass("ui-treenode-hidden"))) {
prevNode = prevNode.prev();
}
return prevNode;
},
/**
* Returns the next node, skipping droppoints (if present), starting at the given node.
* @private
* @param {JQuery} node Node where to start the search.
* @return {JQuery} The next node.
*/
nextNode: function(node) {
var nextNode = node.next();
if (nextNode.length && (nextNode.hasClass("ui-tree-droppoint") || nextNode.hasClass("ui-treenode-hidden"))) {
nextNode = nextNode.next();
}
return nextNode;
},
/**
* Searches for a node to focus, starting at the given node.
* @private
* @param {JQuery} node Node where to start the search.
* @return {JQuery} A node to focus.
*/
searchDown: function(node) {
var nextOfParent = this.nextNode(node.closest('ul').parent('li')),
nodeToFocus = null;
if(nextOfParent.length) {
nodeToFocus = nextOfParent;
}
else if(node.hasClass('ui-treenode-leaf') && node.closest('ul').parent('li').length == 0){
nodeToFocus = node;
}
else {
var rowkey = node.data('rowkey').toString();
if(rowkey.length !== 1) {
nodeToFocus = this.searchDown(node.closest('ul').parent('li'));
}
}
return nodeToFocus;
},
/**
* Collapses the given node, as if the user had clicked on the `-` icon of the node. The children of the node will
* now be visible.
* @param {JQuery} node Node to collapse.
*/
collapseNode: function(node) {
var _self = this,
nodeContent = node.find('> .ui-treenode-content'),
toggleIcon = nodeContent.find('> .ui-tree-toggler'),
nodeType = node.data('nodetype'),
nodeIcon = toggleIcon.nextAll('span.ui-treenode-icon'),
iconState = this.cfg.iconStates[nodeType],
childrenContainer = node.children('.ui-treenode-children');
//aria
nodeContent.find('> .ui-treenode-content').attr('aria-expanded', false);
toggleIcon.removeClass('ui-icon-triangle-1-s').addClass(_self.cfg.collapsedIcon);
if(iconState) {
nodeIcon.removeClass(iconState.expandedIcon).addClass(iconState.collapsedIcon);
}
if(this.cfg.animate) {
childrenContainer.slideUp('fast', function() {
_self.postCollapse(node, childrenContainer);
});
}
else {
childrenContainer.hide();
this.postCollapse(node, childrenContainer);
}
},
/**
* Callback that is invoked after a node was collapsed.
* @private
* @param {JQuery} node The node that was collapsed.
* @param {JQuery} childrenContainer The container element with the children of the collapsed node.
*/
postCollapse: function(node, childrenContainer) {
if(this.cfg.dynamic && !this.cfg.cache) {
childrenContainer.empty();
}
if(!this.cfg.cache) {
this.fireCollapseEvent(node);
}
},
/**
* @override
* @protected
* @inheritdoc
* @param {JQuery} node
* @return {JQuery}
*/
getNodeChildrenContainer: function(node) {
return node.children('.ui-treenode-children');
},
/**
* @override
* @protected
* @inheritdoc
* @param {JQuery} node
*/
showNodeChildren: function(node) {
var nodeContent = node.find('> .ui-treenode-content'),
toggleIcon = nodeContent.find('> .ui-tree-toggler'),
nodeType = node.data('nodetype'),
nodeIcon = toggleIcon.nextAll('span.ui-treenode-icon'),
iconState = this.cfg.iconStates[nodeType];
//aria
nodeContent.find('> .ui-treenode-content').attr('aria-expanded', true);
toggleIcon.removeClass(this.cfg.collapsedIcon).addClass('ui-icon-triangle-1-s');
if(iconState) {
nodeIcon.removeClass(iconState.collapsedIcon).addClass(iconState.expandedIcon);
}
if(this.cfg.animate) {
node.children('.ui-treenode-children').slideDown('fast');
}
else {
node.children('.ui-treenode-children').show();
}
},
/**
* @override
* @inheritdoc
*/
unselectAllNodes: function() {
this.selections = [];
this.jq.find('.ui-treenode-content.ui-state-highlight').each(function() {
$(this).removeClass('ui-state-highlight').closest('.ui-treenode').attr('aria-selected', false).removeClass('ui-treenode-selected').addClass('ui-treenode-unselected');
});
},
/**
* @override
* @inheritdoc
* @param {JQuery} node
* @param {boolean} [silent]
*/
selectNode: function(node, silent) {
node.attr('aria-selected', true).removeClass('ui-treenode-unselected').addClass('ui-treenode-selected')
.find('> .ui-treenode-content').addClass('ui-state-highlight');
this.addToSelection(this.getRowKey(node));
this.writeSelections();
if(!silent)
this.fireNodeSelectEvent(node);
},
/**
* @override
* @inheritdoc
* @param {JQuery} node
* @param {boolean} [silent]
*/
unselectNode: function(node, silent) {
var rowKey = this.getRowKey(node);
node.attr('aria-selected', false).removeClass('ui-treenode-selected').addClass('ui-treenode-unselected')
.find('> .ui-treenode-content').removeClass('ui-state-highlight');
this.removeFromSelection(rowKey);
this.writeSelections();
if(!silent)
this.fireNodeUnselectEvent(node);
},
/**
* @override
* @protected
* @inheritdoc
* @param {JQuery} node
*/
toggleCheckboxNode: function(node) {
var $this = this,
checkbox = node.find('> .ui-treenode-content > .ui-chkbox'),
checked = checkbox.find('> .ui-chkbox-box > .ui-chkbox-icon').hasClass('ui-icon-check');
if(this.cfg.propagateDown) {
node.children('.ui-treenode-children').find('.ui-treenode:not(.ui-treenode-hidden)').find('.ui-chkbox').each(function() {
$this.toggleCheckboxState($(this), checked);
});
children = node.find('> .ui-treenode-children > .ui-treenode');
if(checked) {
if(children.filter('.ui-treenode-unselected').length === children.length)
$this.uncheck(checkbox);
else
$this.partialCheck(checkbox);
}
else {
if(children.filter('.ui-treenode-selected').length === children.length)
$this.check(checkbox);
else
$this.partialCheck(checkbox);
}
if(this.cfg.dynamic) {
this.removeDescendantsFromSelection(node.data('rowkey'));
}
} else {
this.toggleCheckboxState(checkbox, checked);
}
if(this.cfg.propagateUp) {
node.parents('li.ui-treenode-parent').each(function() {
var parentNode = $(this),
parentsCheckbox = parentNode.find('> .ui-treenode-content > .ui-chkbox'),
children = parentNode.find('> .ui-treenode-children > .ui-treenode');
if(checked) {
if(children.filter('.ui-treenode-unselected').length === children.length)
$this.uncheck(parentsCheckbox);
else
$this.partialCheck(parentsCheckbox);
}
else {
if(children.filter('.ui-treenode-selected').length === children.length)
$this.check(parentsCheckbox);
else
$this.partialCheck(parentsCheckbox);
}
});
}
this.writeSelections();
if(checked)
this.fireNodeUnselectEvent(node);
else
this.fireNodeSelectEvent(node);
},
/**
* @override
* @protected
* @inheritdoc
*/
preselectCheckbox: function() {
this.jq.find('.ui-chkbox-icon').not('.ui-icon-check').each(function() {
var icon = $(this),
node = icon.closest('li');
if(node.children('.ui-treenode-children').find('.ui-chkbox-icon.ui-icon-check').length > 0) {
node.addClass('ui-treenode-hasselected');
icon.removeClass('ui-icon-blank').addClass('ui-icon-minus');
}
});
},
/**
* @override
* @protected
* @inheritdoc
* @param {JQuery} checkbox
*/
check: function(checkbox) {
this._super(checkbox);
checkbox.parent().addClass('ui-state-highlight');
},
/**
* @override
* @protected
* @inheritdoc
* @param {JQuery} checkbox
*/
uncheck: function(checkbox) {
this._super(checkbox);
checkbox.parent().removeClass('ui-state-highlight');
},
/**
* Sets up the drag functionality.
* @private
*/
initDraggable: function() {
this.makeDraggable(this.jq.find('.ui-treenode-content'));
},
/**
* Sets up the drop functionality.
* @private
*/
initDroppable: function() {
this.makeDropPoints(this.jq.find('li.ui-tree-droppoint'));
this.makeDropNodes(this.jq.find('.ui-treenode-droppable'));
this.initDropScrollers();
},
/**
* Sets up the JQuery UI draggable for the given elements.
* @private
* @param {JQuery} elements A list of draggable nodes to set up.
*/
makeDraggable: function(elements) {
var $this = this,
dragdropScope = this.cfg.dragdropScope||this.id;
elements.draggable({
start: function(event, ui) {
if(ui.helper) {
var element = $(event.target),
source = PF($(element.data('dragsourceid')).data('widget')),
height = 20;
if(source.cfg.multipleDrag && element.hasClass('ui-treenode-content') && element.hasClass('ui-state-highlight')) {
source.draggedSourceKeys = $this.findSelectedParentKeys(source.selections.slice());
height = 20 * (source.draggedSourceKeys.length || 1);
}
$(ui.helper).height(height);
}
},
helper: function() {
var el = $('
');
el.width($this.jq.width());
return el;
},
appendTo: document.body,
zIndex: PrimeFaces.nextZindex(),
revert: true,
scope: dragdropScope,
containment: 'document'
})
.data({
'dragsourceid': this.jqId,
'dragmode': this.cfg.dragMode
});
},
/**
* Sets up the JQuery UI drop points for the given elements.
* @private
* @param {JQuery} elements A list of drop points to set up.
*/
makeDropPoints: function(elements) {
var $this = this,
dragdropScope = this.cfg.dragdropScope||this.id;
elements.droppable({
hoverClass: 'ui-state-hover',
accept: '.ui-treenode-content',
tolerance: 'pointer',
scope: dragdropScope,
drop: function(event, ui) {
var dragSource = PF($(ui.draggable.data('dragsourceid')).data('widget')),
dropSource = $this,
dropPoint = $(this),
dropNode = dropPoint.closest('li.ui-treenode-parent'),
dropNodeKey = $this.getRowKey(dropNode),
transfer = (dragSource.id !== dropSource.id),
draggedSourceKeys = dragSource.draggedSourceKeys,
isDroppedNodeCopy = $this.cfg.dropMode === 'copy' || ($this.cfg.dropCopyNode && $this.shiftKey),
draggedNodes,
dragNodeKey;
if(draggedSourceKeys) {
draggedNodes = dragSource.findNodes(draggedSourceKeys);
}
else {
draggedNodes = [ui.draggable];
}
if($this.cfg.controlled) {
$this.droppedNodeParams = [];
}
$this.invalidSourceKeys = [];
for(var i = (draggedNodes.length - 1); i >= 0; i--) {
var draggedNode = $(draggedNodes[i]),
dragMode = ui.draggable.data('dragmode'),
dragNode = draggedNode.is('li.ui-treenode') ? draggedNode : draggedNode.closest('li.ui-treenode'),
dragNode = (isDroppedNodeCopy) ? dragNode.clone() : dragNode,
targetDragNode = $this.findTargetDragNode(dragNode, dragMode);
dragNodeKey = $this.getRowKey(targetDragNode);
if(!transfer && dropNodeKey && dropNodeKey.indexOf(dragNodeKey + '_') === 0) {
return;
}
if($this.cfg.controlled) {
$this.droppedNodeParams.push({
'ui': ui,
'dragSource': dragSource,
'dragNode': dragNode,
'targetDragNode': targetDragNode,
'dropPoint': dropPoint,
'dropNode': dropNode,
'transfer': transfer
});
}
else {
$this.onDropPoint(ui, dragSource, dragNode, targetDragNode, dropPoint, dropNode, transfer);
}
}
if (!draggedSourceKeys) {
draggedSourceKeys = [dragNodeKey];
}
draggedSourceKeys = draggedSourceKeys.filter(function(key) {
return $.inArray(key, $this.invalidSourceKeys) === -1;
});
var dndIndex = dropPoint.prevAll('li.ui-treenode').length;
if (draggedSourceKeys && draggedSourceKeys.length) {
draggedSourceKeys = draggedSourceKeys.reverse().join(',');
$this.fireDragDropEvent({
'dragNodeKey': draggedSourceKeys,
'dropNodeKey': dropNodeKey,
'dragSource': dragSource.id,
'dndIndex': dndIndex,
'transfer': transfer,
'isDroppedNodeCopy': isDroppedNodeCopy
});
}
dragSource.draggedSourceKeys = null;
$this.invalidSourceKeys = null;
if(isDroppedNodeCopy) {
$this.initDraggable();
}
}
});
},
/**
* Callback for when a node was dropped on a drop point.
* @private
* @param {JQueryUI.DroppableOptions} ui Details about the drop event.
* @param {PrimeFaces.widget.VerticalTree} dragSource Tree widget of the dragged node.
* @param {JQuery} dragNode Node that was dragged.
* @param {JQuery} targetDragNode Node that was the target of the drag.
* @param {JQuery} dropPoint The drop point where the node was dropped.
* @param {JQuery} dropNode The node on which the dragged node was dropped.
* @param {boolean} transfer Whether a transfer should occur, i.e. whether the node was not dropped on itself.
*/
onDropPoint: function(ui, dragSource, dragNode, targetDragNode, dropPoint, dropNode, transfer) {
var dragNodeDropPoint = targetDragNode.next('li.ui-tree-droppoint'),
oldParentNode = targetDragNode.parent().closest('li.ui-treenode-parent');
ui.helper.remove();
dropPoint.removeClass('ui-state-hover');
var validDrop = this.validateDropPoint(dragNode, dropPoint);
if(!validDrop) {
if (this.invalidSourceKeys) {
var dragNodeKey = this.getRowKey(targetDragNode);
this.invalidSourceKeys.push(dragNodeKey);
}
return;
}
targetDragNode.hide().insertAfter(dropPoint);
if(transfer) {
if(dragSource.cfg.selectionMode) {
dragSource.unselectSubtree(targetDragNode);
}
dragNodeDropPoint.remove();
this.updateDragDropBindings(targetDragNode);
}
else {
dragNodeDropPoint.insertAfter(targetDragNode);
}
if(oldParentNode.length && (oldParentNode.find('> ul.ui-treenode-children > li.ui-treenode').length === 0)) {
this.makeLeaf(oldParentNode);
}
targetDragNode.fadeIn();
if(this.isCheckboxSelection()) {
this.syncDNDCheckboxes(dragSource, oldParentNode, dropNode);
}
this.syncDragDrop();
if(transfer) {
dragSource.syncDragDrop();
}
},
/**
* Sets up the JQuery UI dropables for the droppable nodes.
* @private
* @param {JQuery} elements List of elements to make droppable.
*/
makeDropNodes: function(elements) {
var $this = this,
dragdropScope = this.cfg.dragdropScope||this.id;
elements.droppable({
accept: '.ui-treenode-content',
tolerance: 'pointer',
scope: dragdropScope,
over: function(event, ui) {
$(this).children('.ui-treenode-content').addClass('ui-state-hover');
},
out: function(event, ui) {
$(this).children('.ui-treenode-content').removeClass('ui-state-hover');
},
drop: function(event, ui) {
var dragSource = PF($(ui.draggable.data('dragsourceid')).data('widget')),
dropSource = $this,
droppable = $(this),
dropNode = droppable.closest('li.ui-treenode'),
dropNodeKey = $this.getRowKey(dropNode),
transfer = (dragSource.id !== dropSource.id),
draggedSourceKeys = dragSource.draggedSourceKeys,
isDroppedNodeCopy = ($this.cfg.dropCopyNode && $this.shiftKey),
draggedNodes,
dragNodeKey,
dndIndex;
if(draggedSourceKeys) {
draggedNodes = dragSource.findNodes(draggedSourceKeys);
}
else {
draggedNodes = [ui.draggable];
}
if($this.cfg.controlled) {
$this.droppedNodeParams = [];
}
$this.invalidSourceKeys = [];
for(var i = 0; i < draggedNodes.length; i++) {
var draggedNode = $(draggedNodes[i]),
dragMode = ui.draggable.data('dragmode'),
dragNode = draggedNode.is('li.ui-treenode') ? draggedNode : draggedNode.closest('li.ui-treenode'),
dragNode = (isDroppedNodeCopy) ? dragNode.clone() : dragNode,
targetDragNode = $this.findTargetDragNode(dragNode, dragMode);
if(i === 0) {
dndIndex = dropNode.find('>.ui-treenode-children>li.ui-treenode').length;
}
dragNodeKey = $this.getRowKey(targetDragNode);
if(!transfer && dropNodeKey && dropNodeKey.indexOf(dragNodeKey + '_') === 0) {
return;
}
if($this.cfg.controlled) {
$this.droppedNodeParams.push({
'ui': ui,
'dragSource': dragSource,
'dragNode': dragNode,
'targetDragNode': targetDragNode,
'droppable': droppable,
'dropNode': dropNode,
'transfer': transfer
});
}
else {
$this.onDropNode(ui, dragSource, dragNode, targetDragNode, droppable, dropNode, transfer);
}
}
if (!draggedSourceKeys) {
draggedSourceKeys = [dragNodeKey];
}
draggedSourceKeys = draggedSourceKeys.filter(function(key) {
return $.inArray(key, $this.invalidSourceKeys) === -1;
});
if (draggedSourceKeys && draggedSourceKeys.length) {
draggedSourceKeys = draggedSourceKeys.reverse().join(',');
$this.fireDragDropEvent({
'dragNodeKey': draggedSourceKeys,
'dropNodeKey': dropNodeKey,
'dragSource': dragSource.id,
'dndIndex': dndIndex,
'transfer': transfer,
'isDroppedNodeCopy': isDroppedNodeCopy
});
}
dragSource.draggedSourceKeys = null;
$this.invalidSourceKeys = null;
if(isDroppedNodeCopy) {
$this.initDraggable();
}
}
});
},
/**
* Callback for when a node was dropped.
* @private
* @param {JQueryUI.DroppableOptions} ui Details about the drop event.
* @param {PrimeFaces.widget.VerticalTree} dragSource Tree widget of the dragged node.
* @param {JQuery} dragNode Node that was dragged.
* @param {JQuery} targetDragNode Node that was the target of the drag.
* @param {JQuery} droppable The jQUery UI droppable where the drop occurred.
* @param {JQuery} dropNode The node on which the dragged node was dropped.
* @param {boolean} transfer Whether a transfer should occur.
*/
onDropNode: function(ui, dragSource, dragNode, targetDragNode, droppable, dropNode, transfer) {
var dragNodeDropPoint = targetDragNode.next('li.ui-tree-droppoint'),
oldParentNode = targetDragNode.parent().closest('li.ui-treenode-parent'),
childrenContainer = dropNode.children('.ui-treenode-children');
ui.helper.remove();
droppable.children('.ui-treenode-content').removeClass('ui-state-hover');
var validDrop = this.validateDropNode(dragNode, dropNode, oldParentNode);
if(!validDrop) {
if (this.invalidSourceKeys) {
var dragNodeKey = this.getRowKey(targetDragNode);
this.invalidSourceKeys.push(dragNodeKey);
}
return;
}
if(childrenContainer.children('li.ui-treenode').length === 0) {
this.makeParent(dropNode);
}
targetDragNode.hide();
childrenContainer.append(targetDragNode);
if(oldParentNode.length && (oldParentNode.find('> ul.ui-treenode-children > li.ui-treenode').length === 0)) {
this.makeLeaf(oldParentNode);
}
if(transfer) {
if(dragSource.cfg.selectionMode) {
dragSource.unselectSubtree(targetDragNode);
}
dragNodeDropPoint.remove();
this.updateDragDropBindings(targetDragNode);
}
else {
childrenContainer.append(dragNodeDropPoint);
}
targetDragNode.fadeIn();
if(this.isCheckboxSelection()) {
this.syncDNDCheckboxes(dragSource, oldParentNode, dropNode);
}
this.syncDragDrop();
if(transfer) {
dragSource.syncDragDrop();
}
},
/**
* Filters the given array of row keys and removes child nodes of parent node in the array.
* @private
* @param {string[]} arr A list of row keys to check.
* @return {string[]} A list of parent row keys.
*/
findSelectedParentKeys: function(arr) {
for(var i = 0; i < arr.length; i++) {
var key = arr[i];
for(var j = 0; j < arr.length && key !== -1; j++) {
var tempKey = arr[j];
if(tempKey !== -1 && key.length > tempKey.length && key.indexOf(tempKey + '_') === 0) {
arr[i] = -1;
}
}
}
return arr.filter(function(item) {
return item !== -1;
});
},
/**
* Initializes all drop scrollers of this tree.
* @private
*/
initDropScrollers: function() {
var $this = this,
dragdropScope = this.cfg.dragdropScope||this.id;
this.jq.prepend('
').append('
');
this.jq.children('div.ui-tree-scroller').droppable({
accept: '.ui-treenode-content',
tolerance: 'pointer',
scope: dragdropScope,
over: function() {
var step = $(this).hasClass('ui-tree-scrollertop') ? -10 : 10;
$this.scrollInterval = setInterval(function() {
$this.scroll(step);
}, 100);
},
out: function() {
clearInterval($this.scrollInterval);
}
});
},
/**
* Scrolls this tree by the given amount.
* @param {number} step Amount by which to scroll.
*/
scroll: function(step) {
this.container.scrollTop(this.container.scrollTop() + step);
},
/**
* Updates the drag&drop settings for the given node.
* @private
* @param {JQuery} node Node to update.
*/
updateDragDropBindings: function(node) {
//self droppoint
node.after('
