TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refit row move plugin

This commit is contained in:
Sam Georges 2014-06-21 11:05:11 +10:00
parent 6d9e66ccd6
commit c94b486b78
3 changed files with 256 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
modules/backend/formwidgets/datagrid/assets/vendor/handsontable/jquery.handsontable.css vendored
View File

@ -19,6 +19,9 @@
line-height: 14px;
font-size: 13px;
}
.handsontable .relative {
position: relative;
}
.handsontable.htAutoColumnSize {
visibility: hidden;
left: 0;
@ -104,7 +107,6 @@
padding: 0;
}
.handsontable thead th .relative {
position: relative;
padding: 2px 4px;
}
.handsontable th {
@ -133,8 +135,20 @@
z-index: 999;
cursor: move;
}
.handsontable .manualRowMover {
position: absolute;
left: -4px;
top: 0;
background-color: transparent;
height: 5px;
width: 50px;
z-index: 999;
cursor: move;
}
.handsontable th .manualColumnMover:hover,
.handsontable th .manualColumnMover.active {
.handsontable th .manualRowMover:hover,
.handsontable th .manualColumnMover.active,
.handsontable th .manualRowMover.active {
background-color: #88F;
}
.handsontable .manualColumnResizer {

224
modules/backend/formwidgets/datagrid/assets/vendor/handsontable/jquery.handsontable.js vendored
View File

@ -3246,12 +3246,24 @@ Handsontable.TableView.prototype.scrollViewport = function (coords) {
* @param TH
*/
Handsontable.TableView.prototype.appendRowHeader = function (row, TH) {
var DIV = document.createElement('DIV'),
SPAN = document.createElement('SPAN');
DIV.className = 'relative';
SPAN.className = 'rowHeader';
if (row > -1) {
this.wt.wtDom.fastInnerHTML(TH, this.instance.getRowHeader(row));
this.wt.wtDom.fastInnerHTML(SPAN, this.instance.getRowHeader(row));
}
else {
this.wt.wtDom.empty(TH);
this.wt.wtDom.fastInnerText(SPAN, '\u00A0');
}
DIV.appendChild(SPAN);
this.wt.wtDom.empty(TH);
TH.appendChild(DIV);
this.instance.PluginHooks.run('afterGetRowHeader', row, TH);
};
/**
@ -4877,6 +4889,7 @@ Handsontable.PluginHookClass = (function () {
afterValidate: [],
afterGetCellMeta: [],
afterGetColHeader: [],
afterGetRowHeader: [],
afterGetColWidth: [],
afterDestroy: [],
afterRemoveRow: [],
@ -4885,6 +4898,7 @@ Handsontable.PluginHookClass = (function () {
afterCreateCol: [],
afterColumnResize: [],
afterColumnMove: [],
afterRowMove: [],
afterDeselect: [],
afterSelection: [],
afterSelectionByProp: [],
@ -5583,6 +5597,10 @@ Handsontable.PluginHooks.add('beforeGetCellMeta', function (row, col, cellProper
}
}
});
/**
* Column move plugin
*/
function HandsontableManualColumnMove() {
var instance
, pressed
@ -5765,6 +5783,208 @@ Handsontable.PluginHooks.add('afterUpdateSettings', function () {
Handsontable.PluginHooks.add('afterGetColHeader', htManualColumnMove.getColHeader);
Handsontable.PluginHooks.add('modifyCol', htManualColumnMove.modifyCol);
/**
* Row move plugin
*/
function HandsontableManualRowMove() {
var pressed,
startRow,
endRow,
startY,
startOffest;
var ghost = document.createElement('DIV'),
ghostStyle = ghost.style;
ghost.className = 'ghost';
ghostStyle.position = 'absolute';
ghostStyle.top = '25px';
ghostStyle.left = '50px';
ghostStyle.width = '10px';
ghostStyle.height = '10px';
ghostStyle.backgroundColor = '#CCC';
ghostStyle.opacity = 0.7;
var saveManualRowPostions = function () {
var instance = this;
instance.PluginHooks.run('persistentStateSave', 'manualRowPostions', instance.manualRowPositions);
};
var loadManualRowPositions = function () {
var instance = this,
storedState = {};
instance.PluginHooks.run('persistentStateLoad', 'manualRowPositions', storedState);
return storedState.value;
};
var bindMoveRowEvents = function () {
var instance = this;
instance.rootElement.on('mousemove.manualRowMove', function (e) {
if (pressed) {
ghostStyle.top = startOffest + e.pageY - startY + 'px';
if (ghostStyle.display === 'none') {
ghostStyle.display = 'block';
}
}
});
instance.rootElement.on('mouseup.manualRowMove', function () {
if (pressed) {
if (startRow < endRow) {
endRow--;
}
if (instance.getSettings().colHeaders) {
startRow--;
endRow--;
}
instance.manualRowPositions.splice(endRow, 0, instance.manualRowPositions.splice(startRow, 1)[0]);
$('.manualRowMover.active').removeClass('active');
pressed = false;
instance.forceFullRender = true;
instance.view.render();
ghostStyle.display = 'none';
saveManualRowPostions.call(instance);
instance.PluginHooks.run('afterRowMove', startRow, endRow);
}
});
instance.rootElement.on('mousedown.manualRowMove', '.manualRowMover', function (e) {
var mover = e.currentTarget,
TH = instance.view.wt.wtDom.closest(mover, 'TH'),
TR = TH.parentNode;
startRow = parseInt(instance.view.wt.wtDom.index(TR), 10) + 1 + instance.rowOffset();
endRow = startRow;
pressed = true;
startY = e.pageY;
var TABLE = instance.$table[0];
TABLE.parentNode.appendChild(ghost);
ghostStyle.width = instance.view.wt.wtDom.outerWidth(TABLE) + 'px';
ghostStyle.height = instance.view.wt.wtDom.outerHeight(TH) + 'px';
startOffest = parseInt(instance.view.wt.wtDom.offset(TH).top - instance.view.wt.wtDom.offset(TABLE).top, 10);
ghostStyle.top = startOffest + 'px';
});
instance.rootElement.on('mouseenter.manualRowMove', 'table tbody th, table tbody td', function (e) {
if (pressed) {
var active = instance.view.TBODY.querySelector('.manualRowMover.active');
if (active) {
instance.view.wt.wtDom.removeClass(active, 'active');
}
var currentTarget = e.currentTarget,
TR = currentTarget.parentNode,
rowOffset = instance.rowOffset();
endRow = parseInt(instance.view.wt.wtDom.index(TR), 10) + 1 + rowOffset;
var THs = instance.view.TBODY.querySelectorAll('th'),
totalVisibleRows = instance.countVisibleRows(),
currentPosition = (endRow > totalVisibleRows ? endRow - rowOffset : endRow);
var mover = THs[currentPosition].querySelector('.manualRowMover');
instance.view.wt.wtDom.addClass(mover, 'active');
}
});
instance.addHook('afterDestroy', unbindMoveRowEvents);
};
var unbindMoveRowEvents = function () {
var instance = this;
instance.rootElement.off('mouseup.manualRowMove');
instance.rootElement.off('mousemove.manualRowMove');
instance.rootElement.off('mousedown.manualRowMove');
instance.rootElement.off('mouseenter.manualRowMove');
};
this.beforeInit = function () {
this.manualRowPositions = [];
};
this.init = function (source) {
var instance = this;
var manualRowMoveEnabled = !!(instance.getSettings().manualRowMove);
if (manualRowMoveEnabled) {
console.log('yerp');
var initialManualRowPositions = instance.getSettings().manualRowMove;
var loadedManualRowPostions = loadManualRowPositions.call(instance);
if (typeof loadedManualRowPostions != 'undefined') {
this.manualRowPositions = loadedManualRowPostions;
} else if(initialManualRowPositions instanceof Array) {
this.manualRowPositions = initialManualRowPositions;
} else {
this.manualRowPositions = [];
}
instance.forceFullRender = true;
if (source === 'afterInit') {
bindMoveRowEvents.call(this);
instance.forceFullRender = true;
instance.render();
}
} else {
unbindMoveRowEvents.call(this);
instance.manualRowPositions = [];
}
};
this.modifyRow = function (row) {
var instance = this;
if (instance.getSettings().manualRowMove) {
if (typeof instance.manualRowPositions[row] === 'undefined') {
instance.manualRowPositions[row] = row;
}
return instance.manualRowPositions[row];
}
return row;
};
this.getRowHeader = function (row, TH) {
if (this.getSettings().manualRowMove) {
var DIV = document.createElement('DIV');
DIV.className = 'manualRowMover';
TH.firstChild.appendChild(DIV);
}
};
}
var htManualRowMove = new HandsontableManualRowMove();
Handsontable.PluginHooks.add('beforeInit', htManualRowMove.beforeInit);
Handsontable.PluginHooks.add('afterInit', function () {
htManualRowMove.init.call(this, 'afterInit');
});
Handsontable.PluginHooks.add('afterUpdateSettings', function () {
htManualRowMove.init.call(this, 'afterUpdateSettings');
});
Handsontable.PluginHooks.add('afterGetRowHeader', htManualRowMove.getRowHeader);
Handsontable.PluginHooks.add('modifyRow', htManualRowMove.modifyRow);
/**
* Column resize plugin
*/
function HandsontableManualColumnResize() {
var pressed
, currentTH

20
modules/backend/formwidgets/datagrid/assets/vendor/handsontable/jquery.handsontable.less vendored
View File

@ -24,6 +24,10 @@
line-height: 14px;
font-size: 13px;
.relative {
position: relative;
}
&.htAutoColumnSize {
visibility: hidden;
left: 0;
@ -114,7 +118,6 @@
th {
padding: 0;
.relative {
position: relative;
padding: 2px 4px;
}
}
@ -152,7 +155,20 @@
z-index: 999;
cursor: move;
}
th .manualColumnMover {
.manualRowMover {
position: absolute;
left: -4px;
top: 0;
background-color: transparent;
height: 5px;
width: 50px;
z-index: 999;
cursor: move;
}
th .manualColumnMover,
th .manualRowMover {
&:hover,
&.active {
background-color: #88F;