%PDF- %PDF-
| Direktori : /home/bitrix/www/bitrix/components/bitrix/main.ui.grid/templates/.default/js/ |
| Current File : //home/bitrix/www/bitrix/components/bitrix/main.ui.grid/templates/.default/js/cols-sortable.js |
;(function() {
'use strict';
BX.namespace('BX.Grid');
/**
* BX.Grid.ColsSortable
* @param {BX.Main.grid} parent
* @constructor
*/
BX.Grid.ColsSortable = function(parent)
{
this.parent = null;
this.dragItem = null;
this.targetItem = null;
this.rowsList = null;
this.colsList = null;
this.dragRect = null;
this.offset = null;
this.startDragOffset = null;
this.dragColumn = null;
this.targetColumn = null;
this.isDrag = null;
this.init(parent);
};
BX.Grid.ColsSortable.prototype = {
init: function(parent)
{
this.parent = parent;
this.colsList = this.getColsList();
this.rowsList = this.getRowsList();
if (!this.inited)
{
this.inited = true;
BX.addCustomEvent('Grid::updated', BX.proxy(this.reinit, this));
BX.addCustomEvent('Grid::headerUpdated', BX.proxy(this.reinit, this));
}
this.registerObjects();
},
destroy: function()
{
BX.removeCustomEvent('Grid::updated', BX.proxy(this.reinit, this));
this.unregisterObjects();
},
reinit: function()
{
this.unregisterObjects();
this.reset();
this.init(this.parent);
},
reset: function()
{
this.dragItem = null;
this.targetItem = null;
this.rowsList = null;
this.colsList = null;
this.dragRect = null;
this.offset = null;
this.startDragOffset = null;
this.dragColumn = null;
this.targetColumn = null;
this.isDrag = null;
this.fixedTableColsList = null;
},
isActive: function()
{
return this.isDrag;
},
registerObjects: function()
{
this.unregisterObjects();
this.getColsList().forEach(this.register, this);
this.getFixedHeaderColsList().forEach(this.register, this);
},
unregisterObjects: function()
{
this.getColsList().forEach(this.unregister, this);
this.getFixedHeaderColsList().forEach(this.unregister, this);
},
unregister: function(column)
{
jsDD.unregisterObject(column);
},
register: function(column)
{
column.onbxdragstart = BX.proxy(this._onDragStart, this);
column.onbxdrag = BX.proxy(this._onDrag, this);
column.onbxdragstop = BX.proxy(this._onDragEnd, this);
jsDD.registerObject(column);
},
getColsList: function()
{
if (!this.colsList)
{
this.colsList = BX.Grid.Utils.getByTag(this.parent.getRows().getHeadFirstChild().getNode(), 'th');
this.colsList = this.colsList.filter(function(current) {
return !this.isStatic(current);
}, this);
}
return this.colsList;
},
getFixedHeaderColsList: function()
{
if (!this.fixedTableColsList && this.parent.getParam('ALLOW_PIN_HEADER'))
{
this.fixedTableColsList = BX.Grid.Utils.getByTag(this.parent.getPinHeader().getFixedTable(), 'th');
this.fixedTableColsList = this.fixedTableColsList.filter(function(current) {
return !this.isStatic(current);
}, this);
}
return this.fixedTableColsList || [];
},
getRowsList: function()
{
var rowsList = this.parent.getRows().getSourceRows();
if (this.parent.getParam('ALLOW_PIN_HEADER'))
{
rowsList = rowsList.concat(BX.Grid.Utils.getByTag(this.parent.getPinHeader().getFixedTable(), 'tr'));
}
return rowsList;
},
isStatic: function(item)
{
return (
BX.hasClass(item, this.parent.settings.get('classCellStatic')) &&
!BX.hasClass(item, 'main-grid-fixed-column')
);
},
getDragOffset: function()
{
var offset = this.parent.getScrollContainer().scrollLeft - this.startScrollOffset;
return ((jsDD.x - this.startDragOffset - this.dragRect.left) + offset);
},
getColumn: function(cell)
{
var column = [];
if (cell instanceof HTMLTableCellElement)
{
column = this.rowsList.map(function(row) {
return row.cells[cell.cellIndex];
});
}
return column;
},
_onDragStart: function()
{
if (this.parent.getParam('ALLOW_PIN_HEADER') && this.parent.getPinHeader().isPinned())
{
this.colsList = this.getFixedHeaderColsList();
}
else
{
this.colsList = this.getColsList();
}
this.startScrollOffset = this.parent.getScrollContainer().scrollLeft;
this.isDrag = true;
this.dragItem = jsDD.current_node;
this.dragRect = this.dragItem.getBoundingClientRect();
this.offset = Math.ceil(this.dragRect.width);
this.startDragOffset = jsDD.start_x - this.dragRect.left;
this.dragColumn = this.getColumn(this.dragItem);
this.dragIndex = BX.Grid.Utils.getIndex(this.colsList, this.dragItem);
this.parent.preventSortableClick = true;
},
isDragToRight: function(node, index)
{
var nodeClientRect = node.getBoundingClientRect();
var nodeCenter = Math.ceil(nodeClientRect.left + (nodeClientRect.width / 2) + BX.scrollLeft(window));
var dragIndex = this.dragIndex;
var x = jsDD.x;
return index > dragIndex && x > nodeCenter;
},
isDragToLeft: function(node, index)
{
var nodeClientRect = node.getBoundingClientRect();
var nodeCenter = Math.ceil(nodeClientRect.left + (nodeClientRect.width / 2) + BX.scrollLeft(window));
var dragIndex = this.dragIndex;
var x = jsDD.x;
return index < dragIndex && x < nodeCenter;
},
isDragToBack: function(node, index)
{
var nodeClientRect = node.getBoundingClientRect();
var nodeCenter = Math.ceil(nodeClientRect.left + (nodeClientRect.width / 2) + BX.scrollLeft(window));
var dragIndex = this.dragIndex;
var x = jsDD.x;
return (index > dragIndex && x < nodeCenter) || (index < dragIndex && x > nodeCenter);
},
isMovedToRight: function(node)
{
return node.style.transform === 'translate3d('+(-this.offset)+'px, 0px, 0px)';
},
isMovedToLeft: function(node)
{
return node.style.transform === 'translate3d('+(this.offset)+'px, 0px, 0px)';
},
isMoved: function(node)
{
return (node.style.transform !== 'translate3d(0px, 0px, 0px)' && node.style.transform !== '');
},
/**
* Moves grid column by offset
* @param {array} column - Array cells of column
* @param {int} offset - Pixels offset
* @param {int} [transition = 300] - Transition duration in milliseconds
*/
moveColumn: function(column, offset, transition)
{
transition = BX.type.isNumber(transition) ? transition : 300;
BX.Grid.Utils.styleForEach(column, {
'transition': transition+'ms',
'transform': 'translate3d('+offset+'px, 0px, 0px)'
});
},
_onDrag: function()
{
this.dragOffset = this.getDragOffset();
this.targetItem = this.targetItem || this.dragItem;
this.targetColumn = this.targetColumn || this.dragColumn;
var leftOffset = -this.offset;
var rightOffset = this.offset;
var defaultOffset = 0;
var dragTransitionDuration = 0;
this.moveColumn(this.dragColumn, this.dragOffset, dragTransitionDuration);
[].forEach.call(this.colsList, function(current, index) {
if (current && !current.classList.contains('main-grid-cell-static'))
{
if (this.isDragToRight(current, index) && !this.isMovedToRight(current))
{
this.targetColumn = this.getColumn(current);
this.moveColumn(this.targetColumn, leftOffset);
}
if (this.isDragToLeft(current, index) && !this.isMovedToLeft(current))
{
this.targetColumn = this.getColumn(current);
this.moveColumn(this.targetColumn, rightOffset);
}
if (this.isDragToBack(current, index) && this.isMoved(current))
{
this.targetColumn = this.getColumn(current);
this.moveColumn(this.targetColumn, defaultOffset);
}
}
}, this);
},
_onDragEnd: function()
{
[].forEach.call(this.dragColumn, function(current, index) {
BX.Grid.Utils.collectionSort(current, this.targetColumn[index]);
}, this);
this.rowsList.forEach(function(current) {
BX.Grid.Utils.styleForEach(current.cells, {
transition: '',
transform: ''
});
});
this.reinit();
var columns = this.colsList.map(function(current) {
return BX.data(current, 'name');
});
this.parent.getUserOptions().setColumns(columns);
BX.onCustomEvent(this.parent.getContainer(), 'Grid::columnMoved', [this.parent]);
setTimeout(function() {
this.parent.preventSortableClick = false;
}.bind(this), 10);
}
};
})();