');
selectionRow.addClass(this.get('classSelectionRow'));
selectionRow.css('height', this.get('selectionArea') + 'px');
for (var i = 0; i < numColumns; i++) {
var columnToInsert = emptyCell.clone();
// the first cell should have no function, so only attach the events for
// the rest
if (i > 0) {
// bind all mouse-events to the cell
this.attachColumnSelectEventsToCell(columnToInsert);
//set the colspan of selection column to match the colspan of first row columns
} else {
var columnToInsert = jQuery('').clone();
columnToInsert.addClass(this.get('classLeftUpperCorner'));
var clickHandler = function (e) {
// select the Table
that.focus();
that.selection.selectAll();
// set the selection type before updating the scope
that.tablePlugin.activeTable.selection.selectionType = 'cell';
that.tablePlugin.updateFloatingMenuScope();
// As side-effect of the following call the focus
// will be set on the first selected cell.
// This will be overwritten with the summary
// attribute-field, if the setting summaryinsidebar
// is false.
that._removeCursorSelection();
//If the summary should be modified in the sidebar
//we activate the sidebar panel
if (that.tablePlugin.settings.summaryinsidebar) {
that.tablePlugin.sidebar.open();
that.tablePlugin.sidebarPanel.activate(that.obj);
that.tablePlugin.sidebar.correctHeight();
}
// jump in Summary field
// attempting to focus on summary input field will occasionally result in the
// following exception:
//uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHTMLInputElement.setSelectionRange]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: src/dep/ext-3.2.1/ext-all.js :: :: line 11" data: no]
// this occurs when the tab in which the summary field is contained is not visible
// TODO: I'm adding a try catch clause here for the time being, but a proper solution, which addresses the problem of how to handle invisible fields ought to be persued.
try {
that.tablePlugin.summary.focus();
e.stopPropagation();
e.preventDefault();
} catch (e) {
}
return false;
};
this.wai = jQuery('').width(25).height(12).click(clickHandler);
columnToInsert.append(this.wai);
}
// add the cell to the row
selectionRow.append(columnToInsert);
}
// global mouseup event to reset the selection properties
jQuery(document).bind('mouseup', function(e) { that.columnSelectionMouseUp(e) } );
this.obj.find('tr:first').before( selectionRow );
};
/**
* Binds the events for the column selection to the given cell.
*
* @param cell
* the jquery object of the td-field
* @return void
*/
Table.prototype.attachColumnSelectEventsToCell = function ( cell ) {
var that = this;
// unbind eventually existing events of this cell
cell.unbind( 'mousedown' );
cell.unbind( 'mouseover' );
// prevent ie from selecting the contents of the table
cell.get( 0 ).onselectstart = function () { return false; };
cell.bind( 'mousedown', function ( e ) { that.columnSelectionMouseDown( e ) } );
cell.bind( 'mouseover', function ( e ) { that.columnSelectionMouseOver( e ) } );
};
/**
* Handles the mouse-down event for the selection-cells on the top of the
* menu
*
* @param {jQuery:Event} jqEvent - the jquery-event object
* @return void
*/
Table.prototype.columnSelectionMouseDown = function ( jqEvent ) {
// focus the table (if not already done)
this.focus();
// if no cells are selected, reset the selection-array
if ( this.selection.selectedCells.length == 0 ) {
this.columnsToSelect = [];
}
// set the origin-columnId of the mouse-click
this.clickedColumnId = jQuery( jqEvent.currentTarget.parentNode )
.children().index( jqEvent.currentTarget );
// set single column selection
if ( jqEvent.metaKey ) {
var arrayIndex = jQuery.inArray( this.clickedColumnId, this.columnsToSelect );
if ( arrayIndex >= 0 ) {
this.columnsToSelect.splice( arrayIndex, 1 );
} else {
this.columnsToSelect.push( this.clickedColumnId );
}
// block of columns selection
} else if ( jqEvent.shiftKey ) {
this.columnsToSelect.sort( function( a, b ) { return a - b; } );
var start = this.columnsToSelect[ 0 ];
var end = this.clickedColumnId;
if ( start > end ) {
start = end;
end = this.columnsToSelect[ 0 ];
}
this.columnsToSelect = [];
for ( var i = start; i <= end; i++ ) {
this.columnsToSelect.push( i );
}
// single column
} else {
this.columnsToSelect = [ this.clickedColumnId ];
}
// mark the selection visual
this.selectColumns();
// prevent browser from selecting the table
jqEvent.preventDefault();
// stop bubble, otherwise the mousedown of the table is called ...
jqEvent.stopPropagation();
// prevent ff/chrome/safare from selecting the contents of the table
return false;
};
/**
* Mouseover-event for the column-selection cell. This method calcluates the
* span between the clicked column and the mouse-overed cell and selects the
* columns inbetween. and mark them as selected
*
* @param jqEvent
* the jquery-event object
* @return void
*/
Table.prototype.columnSelectionMouseOver = function (jqEvent) {
var
colIdx = jqEvent.currentTarget.cellIndex,
columnsToSelect = [],
start,
end;
// select all columns from the last clicked to the hoverd
if ( this.mouseDownColIdx ) {
start = (colIdx < this.mouseDownColIdx) ? colIdx : this.mouseDownColIdx;
end = (colIdx < this.mouseDownColIdx) ? this.mouseDownColIdx : colIdx;
for (var i = start; i <= end; i++) {
columnsToSelect.push(i);
}
this.selectColumns( columnsToSelect );
}
};
/**
* MouseUp-event for the column-selection. This method resets the
* selection mode
*
* @param jqEvent
* the jquery-event object
* @return void
*/
Table.prototype.columnSelectionMouseUp = function (jqEvent) {
this.mouseDownColIdx = false;
};
/**
* Deletes the selected rows. If no row are selected, delete the row, where the
* cursor is positioned. If all rows of the table should be deleted, the whole
* table is deletet and removed from the tableRegistry.
*
* @return void
*/
Table.prototype.deleteRows = function() {
var
rowIDs = [],
rowsToDelete = {},
table = this;
// if a selection was made, delete the selected cells
if (0 === this.selection.selectedCells.length) {
return;
}
for (var i = 0; i < this.selection.selectedCells.length; i++) {
rowsToDelete[this.selection.selectedCells[i].parentNode.rowIndex] = true;
}
for (rowId in rowsToDelete) {
rowIDs.push(rowId);
}
// if all rows should be deleted, set a flag to remove the WHOLE table
var deleteTable = false;
if (rowIDs.length == this.numRows) {
deleteTable = true;
}
// delete the whole table
if (deleteTable) {
var that = this;
Dialog.confirm({
title : i18n.t('Table'),
text : i18n.t('deletetable.confirm'),
yes : function () {
that.deleteTable();
}
});
} else {
rowIDs.sort(function(a,b){return a - b;});
// check which cell should be focused after the deletion
var focusRowId = rowIDs[0];
if (focusRowId > (this.numRows - rowIDs.length)) {
focusRowId --;
}
// get all rows
var rows = this.getRows();
//splits all cells on the rows to be deleted
jQuery.each( rowIDs, function ( unused, rowId ) {
var row = rows[ rowId ];
for (var i = 0; i < row.cells.length; i++) {
Utils.splitCell( row.cells[i], function () {
return table.newActiveCell().obj;
});
}
});
//decreases rowspans of cells that span the row to be deleted
//and removes the row
var grid = Utils.makeGrid( rows );
jQuery.each( rowIDs, function ( unused, rowId ) {
var row = grid[ rowId ];
for ( var j = 0; j < row.length; ) {
var cellInfo = row[ j ];
var rowspan = Utils.rowspan( cellInfo.cell );
if ( 1 < rowspan ) {
jQuery( cellInfo.cell ).attr( 'rowspan', rowspan - 1);
}
j += cellInfo.colspan;
}
jQuery( rows[ rowId ] ).remove();
});
// reduce the attribute storing the number of rows in the table
this.numRows -= rowIDs.length;
// IE needs a timeout to work properly
window.setTimeout( function() {
var lastCell = jQuery( rows[1].cells[ focusRowId +1 ] );
lastCell.focus();
}, 5);
// finally unselect the marked cells
this.selection.unselectCells();
}
};
/**
* Deletes the selected columns. If no columns are selected, delete the column, where the
* cursor is positioned. If all columns of the table should be deleted, the whole
* table is deleted from the dom and removed from the tableRegistry.
*
* @return void
*/
Table.prototype.deleteColumns = function() {
var
colIDs = [],
cellToDelete = [],
// get all rows to iterate
rows = this.getRows(),
that = this,
changeColspan = [],
cells,
cellInfo;
var grid = Utils.makeGrid(rows);
var selectColWidth = 1; //width of the select-row column
// if all columns should be deleted, remove the WHOLE table
// delete the whole table
if ( this.selection.selectedColumnIdxs.length == grid[0].length - selectColWidth ) {
Dialog.confirm({
title : i18n.t('Table'),
text : i18n.t('deletetable.confirm'),
yes : function () {
that.deleteTable();
}
});
} else {
colIDs.sort(function(a,b) {return a - b;} );
//TODO there is a bug that that occurs if a column is
//selected and deleted, and then a column with a greater
//x-index is selected and deleted.
//sorted so we delete from right to left to minimize interfernce of deleted rows
var gridColumns = this.selection.selectedColumnIdxs.sort(function(a,b){ return b - a; });
for (var i = 0; i < gridColumns.length; i++) {
var gridColumn = gridColumns[i];
for (var j = 0; j < rows.length; j++) {
var cellInfo = grid[j][gridColumn];
if ( ! cellInfo ) {
//TODO this case occurred because of a bug somewhere which should be fixed
continue;
}
if ( 0 === cellInfo.spannedX ) {
if (1 < cellInfo.colspan) {
var nCell = this.newActiveCell().obj;
jQuery( cellInfo.cell ).after(nCell);
nCell.attr('rowspan', cellInfo.rowspan);
nCell.attr('colspan', cellInfo.colspan - 1);
}
jQuery( cellInfo.cell ).remove();
} else {
jQuery( cellInfo.cell ).attr('colspan', cellInfo.colspan - 1);
}
//ensures that always 0 === cellInfo.spannedY
j += cellInfo.rowspan - 1;
}
//rebuild the grid to reflect the table structure change
grid = Utils.makeGrid(rows);
}
// reduce the attribute storing the number of rows in the table
this.numCols -= colIDs.length;
// IE needs a timeout to work properly
window.setTimeout( function() {
var lastCell = jQuery( rows[1].cells[1] );
lastCell.focus();
}, 5);
this.selection.unselectCells();
}
};
/**
* Deletes the table from the dom and remove it from the tableRegistry.
*
* @return void
*/
Table.prototype.deleteTable = function() {
var deleteIndex = -1;
for (var i = 0; i < this.tablePlugin.TableRegistry.length; i++){
if (this.tablePlugin.TableRegistry[i].obj.attr('id') == this.obj.attr('id')) {
deleteIndex = i;
break;
}
}
if (deleteIndex >= 0) {
// before deleting the table, deactivate it
this.deactivate();
this.selection.selectionType = undefined;
this.tablePlugin.TableRegistry.splice(i, 1);
// we will set the cursor right before the removed table
var newRange = Aloha.Selection.rangeObject;
// TODO set the correct range here (cursor shall be right before the removed table)
newRange.endContainer = this.obj.get(0).parentNode;
newRange.startContainer = newRange.endContainer;
newRange.endOffset = GENTICS.Utils.Dom.getIndexInParent(this.obj.get(0));
newRange.startOffset = newRange.endOffset;
newRange.clearCaches();
this.obj.remove();
this.parentEditable.obj.focus();
// select the new range
newRange.correctRange();
newRange.select();
}
};
/**
* @param {string} position
* could be 'after' or 'before'. defines the position where the new
* rows should be inserted
*/
function rowIndexFromSelection( position, selection ) {
var newRowIndex = -1;
// get the index where the new rows should be inserted
var cellOfInterest = null;
if ( 'before' === position ) {
cellOfInterest = selection.selectedCells[ 0 ];
} else if ( 'after' === position ) {
var offset = selection.selectedCells.length - 1;
cellOfInterest = selection.selectedCells[ offset ];
}
if (cellOfInterest && cellOfInterest.nodeType == 1) {
newRowIndex = cellOfInterest.parentNode.rowIndex;
}
return newRowIndex;
}
/**
* Wrapper function for this.addRow to add a row before the active row
*
* @see Table.prototype.addRow
*/
Table.prototype.addRowBeforeSelection = function(highlightNewRows) {
var newRowIndex = rowIndexFromSelection( 'before', this.selection );
if ( -1 !== newRowIndex ) {
this.addRow( newRowIndex );
}
};
/**
* Wrapper function for this.addRow to add a row after the active row
*
* @see Table.prototype.addRow
*/
Table.prototype.addRowAfterSelection = function() {
var newRowIndex = rowIndexFromSelection( 'after', this.selection );
if ( -1 !== newRowIndex ) {
this.addRow( newRowIndex + 1 );
}
};
/**
* Adds a new row to the table.
*
* @param {int} rowIndex
* the index at which the new row shall be inserted
*/
Table.prototype.addRow = function(newRowIndex) {
var that = this;
var rowsToInsert = 1;
var numCols = this.countVirtualCols();
var $rows = this.obj.children().children('tr');
for (var j = 0; j < rowsToInsert; j++) {
var insertionRow = jQuery('');
// create the first column, the "select row" column
var selectionColumn = jQuery('| ');
selectionColumn.addClass(this.get('classSelectionColumn'));
this.attachRowSelectionEventsToCell(selectionColumn);
insertionRow.append(selectionColumn);
var grid = Utils.makeGrid($rows);
var selectColOffset = 1;
if ( newRowIndex >= grid.length ) {
for (var i = selectColOffset; i < grid[0].length; i++) {
insertionRow.append(this.newActiveCell().obj);
}
} else {
for (var i = selectColOffset; i < grid[newRowIndex].length; ) {
var cellInfo = grid[newRowIndex][i];
if (Utils.containsDomCell(cellInfo)) {
var colspan = cellInfo.colspan;
while (colspan--) {
insertionRow.append(this.newActiveCell().obj);
}
} else {
jQuery( cellInfo.cell ).attr('rowspan', cellInfo.rowspan + 1);
}
i += cellInfo.colspan;
}
}
if ( newRowIndex >= $rows.length ) {
$rows.eq( $rows.length - 1 ).after( insertionRow );
} else {
$rows.eq( newRowIndex ).before( insertionRow );
}
}
this.numRows += rowsToInsert;
};
/**
* Wrapper method to add columns on the right side
*
* @see Table.addColumns
* @return void
*/
Table.prototype.addColumnsRight = function () {
this.addColumns('right');
};
/**
* Wrapper method to add columns on the left side
*
* @see Table.addColumns
* @return void
*/
Table.prototype.addColumnsLeft = function() {
this.addColumns('left');
};
/**
* Inserts new columns into the table. Either on the right or left side. If
* columns are selected, the amount of selected columns will be inserted on the
* 'right' or 'left' side. If no cells are selected, 1 new column will be
* inserted before/after the column of the last active cell.
* As well all column-selection events must be bound to the firsts row-cell.
*
* @param position
* could be 'left' or 'right'. defines the position where the new
* columns should be inserted
* @return void
*/
Table.prototype.addColumns = function( position ) {
var
that = this,
emptyCell = jQuery( ' | ' ),
rows = this.getRows(),
cell,
currentColIdx,
columnsToSelect = [],
selectedColumnIdxs = this.selection.selectedColumnIdxs;
if ( 0 === selectedColumnIdxs.length ) {
return;
}
selectedColumnIdxs.sort( function ( a, b ) { return a - b; } );
// refuse to insert a column unless a consecutive range has been selected
if ( ! Utils.isConsecutive( selectedColumnIdxs ) ) {
Dialog.alert( {
title : i18n.t( 'Table' ),
text : i18n.t( 'table.addColumns.nonConsecutive' )
});
return;
}
if ( 'left' === position ) {
currentColIdx = selectedColumnIdxs[ 0 ];
// inserting a row before the selected column indicies moves
// all selected columns one to the right
for ( var i = 0; i < this.selection.selectedColumnIdxs.length; i++ ) {
this.selection.selectedColumnIdxs[ i ] += 1;
}
} else {//"right" == position
currentColIdx = selectedColumnIdxs[ selectedColumnIdxs.length - 1 ];
}
var grid = Utils.makeGrid( rows );
for ( var i = 0; i < rows.length; i++ ) {
// prepare the cell to be inserted
cell = emptyCell.clone();
cell.html( '\u00a0' );
// on first row correct the position of the selected columns
if ( i == 0 ) {
// this is the first row, so make a column-selection cell
this.attachColumnSelectEventsToCell( cell );
} else {
// activate the cell for this table
cellObj = this.newActiveCell( cell.get(0) );
cell = cellObj.obj;
}
var leftCell = Utils.leftDomCell( grid, i, currentColIdx );
if ( null == leftCell ) {
jQuery( rows[i] ).prepend( cell );
} else {
if ( 'left' === position && Utils.containsDomCell( grid[ i ][ currentColIdx ] ) ) {
jQuery( leftCell ).before( cell );
} else {//right
jQuery( leftCell ).after( cell );
}
}
this.numCols++;
}
};
/**
* Helper method to set the focus-attribute of the table to true
*
* @return void
*/
Table.prototype.focus = function() {
if (!this.hasFocus) {
if (!this.parentEditable.isActive) {
this.parentEditable.obj.focus();
}
// @iefix
this.tablePlugin.setFocusedTable(this);
// select first cell
// TODO put cursor in first cell without selecting
//var firstCell = this.obj.find('tr:nth-child(2) td:nth-child(2)').children('div[contenteditable=true]').get(0);
//jQuery(firstCell).get(0).focus();
}
// TODO workaround - fix this. the selection is updated later on by the browser
// using setTimeout here is hideous, but a simple execution-time call will fail
// DEACTIVATED by Haymo prevents selecting rows
// setTimeout('Aloha.Selection.updateSelection(false, true)', 50);
};
/**
* Helper method to set the focus-attribute of the table to false
*
* @return void
*/
Table.prototype.focusOut = function() {
if (this.hasFocus) {
this.tablePlugin.setFocusedTable(undefined);
this.selection.selectionType = undefined;
}
};
/**
* Undoes the cursor-selection after cells have been selected. This
* is done to be more consistent in the UI - there should either be
* a cursor-selection or a cell-selection, but not both.
*/
Table.prototype._removeCursorSelection = function() {
// We can't remove the selection on IE because whenever a
// row/column is selected, and then another row/column is
// selected, the browser windows scrolls to the top of the page
// (som kind of browser bug).
// This is no problem for IE because IE removes the
// cursor-selection by itself and shows a frame around the
// table, with resize handles (the frame seems useless).
// On other browsers, we can't remove the selection because the
// floating menu will disappear when one selects a rows/column
// and types a key (that's the same effect as when one clicks
// outside the editable).
//TODO: currently, removing the cursor selection can't be
// reliably implemented.
//if ( ! jQuery.browser.msie ) {
// Aloha.getSelection().removeAllRanges();
//}
// The following is a workaround for the above because we can't
// leave the cursor-selection outside of the table, since
// otherwise the floating menu scope will be incorrect when one
// CTRL-clicks on the rows or columns.
var selection = Aloha.getSelection();
if ( !selection ||
!selection._nativeSelection ||
selection._nativeSelection._ranges.length == 0 ) {
return;
}
var range = selection.getRangeAt( 0 );
if ( null == range.startContainer ) {
return;
}
// if the selection is already in the table, do nothing
if ( 0 !== jQuery( range.startContainer ).closest('table').length ) {
return;
}
// if no cells are selected, do nothing
if ( 0 === this.selection.selectedCells.length ) {
return;
}
// set the foces to the first selected cell
var container = TableCell.getContainer( this.selection.selectedCells[ 0 ] );
jQuery( container ).focus();
}
/**
* Marks all cells of the specified column as marked (adds a special class)
*
* @return void
*/
Table.prototype.selectColumns = function ( columns ) {
var columnsToSelect;
if ( columns ) {
columnsToSelect = columns;
} else {
columnsToSelect = this.columnsToSelect;
}
// ====== BEGIN UI specific code - should be handled on event aloha-table-selection-changed by UI =======
// activate all column formatting button
for ( var i = 0; i < this.tablePlugin.columnMSItems.length; i++ ) {
this.tablePlugin.columnMSButton.showItem(this.tablePlugin.columnMSItems[i].name);
}
Scopes.setScope(this.tablePlugin.name + '.column');
this.tablePlugin._columnheaderButton.setState(this.selection.isHeader());
var rows = this.getRows();
// set the first class found as active item in the multisplit button
this.tablePlugin.columnMSButton.setActiveItem();
for (var k = 0; k < this.tablePlugin.columnConfig.length; k++) {
if ( jQuery(rows[0].cells[0]).hasClass(this.tablePlugin.columnConfig[k].cssClass) ) {
this.tablePlugin.columnMSButton.setActiveItem(this.tablePlugin.columnConfig[k].name);
k = this.tablePlugin.columnConfig.length;
}
}
// ====== END UI specific code - should be handled by UI =======
// blur all editables within the table
this.obj.find('div.aloha-ui-table-cell-editable').blur();
this.selection.selectColumns( columnsToSelect );
this.selection.notifyCellsSelected();
this._removeCursorSelection();
};
/**
* Marks all cells of the specified row as marked (adds a special class)
*
* @return void
*/
Table.prototype.selectRows = function () {
// activate all row formatting button
for (var i = 0; i < this.tablePlugin.rowMSItems.length; i++ ) {
this.tablePlugin.rowMSButton.showItem(this.tablePlugin.rowMSItems[i].name);
}
for (var i = 0; i < this.rowsToSelect.length; i++) {
var rowId = this.rowsToSelect[i];
var rowCells = jQuery(this.getRows()[rowId].cells).toArray();
if (i == 0) {
// set the first class found as active item in the multisplit button
for (var j = 0; j < rowCells.length; j++) {
this.tablePlugin.rowMSButton.setActiveItem();
for ( var k = 0; k < this.tablePlugin.rowConfig.length; k++) {
if (jQuery(rowCells[j]).hasClass(this.tablePlugin.rowConfig[k].cssClass) ) {
this.tablePlugin.rowMSButton.setActiveItem(this.tablePlugin.rowConfig[k].name);
k = this.tablePlugin.rowConfig.length;
}
}
}
}
}
// TableSelection.selectionType = 'row';
Scopes.setScope(this.tablePlugin.name + '.row');
this.selection.selectRows( this.rowsToSelect );
this.tablePlugin._rowheaderButton.setState(this.selection.isHeader());
// blur all editables within the table
this.obj.find('div.aloha-ui-table-cell-editable').blur();
this.selection.notifyCellsSelected();
this._removeCursorSelection();
};
/**
* Deactivation of a Aloha-table. Clean up ... remove the wrapping div and the
* selection-helper divs
*
* @return void
*/
Table.prototype.deactivate = function() {
// unblockify the table wrapper
var parent = this.obj.parent();
if (parent.mahaloBlock) {
parent.mahaloBlock();
}
this.obj.removeClass(this.get('className'));
if (jQuery.trim(this.obj.attr('class')) == '') {
this.obj.removeAttr('class');
}
this.obj.removeAttr('contenteditable');
// this.obj.removeAttr('id');
// unwrap the selectionLeft-div if available
if (this.obj.parents('.' + this.get('classTableWrapper')).length){
this.obj.unwrap();
}
// remove the selection row
this.obj.find('tr.' + this.get('classSelectionRow') + ':first').remove();
// remove the selection column (first column left)
var that = this;
jQuery.each(this.obj.context.rows, function(){
jQuery(this).children('td.' + that.get('classSelectionColumn')).remove();
});
// remove the "selection class" from all td and th in the table
this.obj.find('td, th').removeClass(this.get('classCellSelected'));
this.obj.find('td, th').removeClass('aloha-table-cell_active');
this.obj.unbind();
this.obj.children('tbody').unbind();
// wrap the inner html of the contentEditable div to its outer html
for (var i = 0; i < this.cells.length; i++) {
var Cell = this.cells[i];
Cell.deactivate();
}
// remove editable span in caption (if any)
this.obj.find('caption div').each(function() {
jQuery(this).contents().unwrap();
});
// better unset ;-) otherwise activate() may think you're activated.
this.isActive = false;
};
/**
* Attach the event for column resize for the given cell.
* @param {DOMElement} tableCell
*
* @return void
*/
Table.prototype.attachColumnResize = function(cell) {
var that = this;
//unbind any exisiting resize event handlers
that.detachRowColResize( cell );
var rows = cell.closest( 'tbody' ).children( 'tr' );
var cellRow = cell.closest( 'tr' );
var gridId = Utils.cellIndexToGridColumn( rows,
rows.index( cellRow ),
cellRow.children().index( cell )
);
var resizeColumns = function(pixelsMoved) {
var expandToWidth, reduceToWidth;
Utils.walkCells(rows, function(ri, ci, gridCi, colspan, rowspan) {
var currentCell = jQuery( jQuery( rows[ri] ).children()[ ci ] );
// skip the select & cells with colspans
if ( currentCell.hasClass( 'aloha-table-selectrow' ) || currentCell.closest( 'tr' ).hasClass( 'aloha-table-selectcolumn' ) || colspan > 1 ) {
return true;
}
if (gridCi === gridId ) {
if (!reduceToWidth) {
reduceToWidth = currentCell.width() - pixelsMoved;
}
Utils.resizeCellWidth( currentCell, reduceToWidth );
} else if (gridCi === gridId - 1) {
if (!expandToWidth) {
expandToWidth = currentCell.width() + pixelsMoved;
}
Utils.resizeCellWidth( currentCell, expandToWidth );
}
return true;
});
};
cell.bind( 'mousedown.resize', function() {
// create a guide
var guide = jQuery( '' );
guide.css({
'height': jQuery( cell ).closest( 'tbody' ).innerHeight(),
'width': jQuery( cell ).outerWidth() - jQuery( cell ).innerWidth(),
'top': jQuery( cell ).closest( 'tbody' ).offset().top,
'left': jQuery( cell ).offset().left,
'position': 'absolute',
'background-color': '#80B5F2'
});
jQuery( 'body' ).append( guide );
Utils.getCellResizeBoundaries(gridId, rows, function(maxPageX, minPageX) {
// unset the selection type
that.selection.resizeMode = true;
// move the guide while dragging
jQuery( 'body' ).bind( 'mousemove.dnd_col_resize', function(e) {
// limit the maximum resize
if ( e.pageX > minPageX && e.pageX < maxPageX ) {
guide.css( 'left', e.pageX );
}
});
// do the actual resizing after drag stops
jQuery( 'body' ).bind( 'mouseup.dnd_col_resize', function(e) {
var pixelsMoved = 0;
if ( e.pageX < minPageX ) {
pixelsMoved = minPageX - cell.offset().left;
} else if ( e.pageX > minPageX && e.pageX < maxPageX ) {
pixelsMoved = e.pageX - cell.offset().left;
} else if ( e.pageX > maxPageX ) {
pixelsMoved = maxPageX - cell.offset().left;
}
if ( pixelsMoved !== 0 ) {
resizeColumns( pixelsMoved );
}
jQuery( 'body' ).unbind( 'mousemove.dnd_col_resize' );
jQuery( 'body' ).unbind( 'mouseup.dnd_col_resize' );
// unset the selection resize mode
that.selection.resizeMode = false;
guide.remove();
});
});
});
};
/**
* Attach the event handler for row resize for the given cell.
* @param {DOMElement} tableCell
*
* @return void
*/
Table.prototype.attachRowResize = function(cell, lastRow) {
var that = this;
//unbind any exisiting resize event handlers
that.detachRowColResize( cell );
var resizeRows = function(pixelsMoved) {
var expandingRow;
if (lastRow) {
expandingRow = cell.closest( 'tr' );
} else {
expandingRow = cell.closest( 'tr' ).prev( 'tr' );
}
var currentRowHeight = expandingRow.height();
var expandToHeight = currentRowHeight + pixelsMoved;
// correct if the height is a minus value
if ( expandToHeight < 0 ) {
expandToHeight = 1;
}
expandingRow.css( 'height', expandToHeight );
};
cell.bind( 'mousedown.resize', function(){
// create a guide
var guide = jQuery( '' );
var guideTop = function() {
if (lastRow) {
return cell.offset().top + cell.outerHeight();
} else {
return cell.offset().top;
}
};
guide.css({
'width': cell.closest( 'tbody' ).innerWidth(),
'height': cell.outerHeight() - cell.innerHeight(),
'top': guideTop(),
'left': cell.closest( 'tbody' ).offset().left,
'position': 'absolute',
'background-color': '#80B5F2'
});
jQuery( 'body' ).append( guide );
// set the minimum resize
var minHeight = function() {
if (lastRow) {
return cell.closest('tr').offset().top;
} else {
return cell.closest('tr').prev( 'tr' ).offset().top;
}
};
// set the selection resize mode
that.selection.resizeMode = true;
// move the guide while dragging
jQuery( 'body' ).bind( 'mousemove.dnd_row_resize', function(e) {
if ( e.pageY > minHeight() ) {
guide.css( 'top', e.pageY );
}
});
// do the actual resizing after drag stops
jQuery( 'body' ).bind( 'mouseup.dnd_row_resize', function(e) {
var pixelsMoved = 0;
if (lastRow) {
pixelsMoved = e.pageY - ( cell.offset().top + cell.outerHeight() );
} else {
pixelsMoved = e.pageY - cell.offset().top;
}
resizeRows( pixelsMoved );
jQuery( 'body' ).unbind( 'mousemove.dnd_row_resize' );
jQuery( 'body' ).unbind( 'mouseup.dnd_row_resize' );
// unset the selection resize mode
that.selection.resizeMode = false;
guide.remove();
});
});
};
/**
* Attach the table width resize event.
* @param {DOMElement} table
*
* @return void
*/
Table.prototype.attachTableResizeWidth = function(table) {
var that = this;
var tableContainer = table.closest('.aloha-table-wrapper')
var lastColumn = table.find("tr:not(.aloha-table-selectcolumn) td:last-child")
var lastCell;
jQuery.each( lastColumn, function() {
// don't use colspanned cell as the base cell
if ( !jQuery( this ).attr('colspan') || jQuery( this ).attr('colspan') < 2 ) {
lastCell = jQuery( this );
return false;
}
});
// change the cursor
lastColumn.css( 'cursor', 'col-resize' );
var resizeColumns = function(pixelsMoved) {
var rows = table.find( 'tr' );
var lastCellRow = lastCell.closest( 'tr' );
var gridId = Utils.cellIndexToGridColumn( rows,
rows.index( lastCellRow ),
lastCellRow.children().index( lastCell )
);
var expandToWidth = pixelsMoved - Utils.getCellBorder(lastCell) - Utils.getCellPadding(lastCell);
Utils.walkCells(rows, function(ri, ci, gridCi, colspan, rowspan) {
var currentCell = jQuery( jQuery( rows[ri] ).children()[ ci ] )
// skip the select cells and cells with colspans
if ( currentCell.hasClass( 'aloha-table-selectrow' ) || currentCell.closest( 'tr' ).hasClass( 'aloha-table-selectcolumn' ) || colspan > 1 ) {
return true;
}
if (gridCi === gridId ) {
Utils.resizeCellWidth( currentCell, expandToWidth );
} else {
Utils.resizeCellWidth( currentCell, currentCell.width() );
}
return true;
});
};
lastColumn.bind( 'mousedown.resize', function() {
// create a guide
var guide = jQuery( '' );
guide.css({
'height': table.children( 'tbody' ).innerHeight(),
'width': lastCell.outerWidth() - lastCell.innerWidth(),
'top': table.find('tbody').offset().top,
'left': table.offset().left + table.outerWidth(),
'position': 'absolute',
'background-color': '#80B5F2'
});
jQuery( 'body' ).append( guide );
// set the maximum and minimum resize
var maxPageX = tableContainer.offset().left + tableContainer.width();
var minPageX = lastCell.offset().left + ( lastCell.innerWidth() - lastCell.width() ) + Utils.getMinColWidth( lastCell );
// unset the selection type
that.selection.resizeMode = true;
// move the guide while dragging
jQuery( 'body' ).bind( 'mousemove.dnd_col_resize', function(e) {
// limit the maximum resize
if ( e.pageX > minPageX && e.pageX < maxPageX ) {
guide.css( 'left', e.pageX );
}
});
// do the actual resizing after drag stops
jQuery( 'body' ).bind( 'mouseup.dnd_col_resize', function(e) {
var pixelsMoved = 0;
if ( e.pageX <= minPageX ) {
pixelsMoved = minPageX - lastCell.offset().left;
} else if ( e.pageX > minPageX && e.pageX < maxPageX ) {
pixelsMoved = e.pageX - lastCell.offset().left;
} else if ( e.pageX > maxPageX ) {
pixelsMoved = maxPageX - lastCell.offset().left;
}
// set the table width
resizeColumns( pixelsMoved );
// unbind the events and reset the cursor
jQuery( 'body' ).unbind( 'mousemove.dnd_col_resize' );
jQuery( 'body' ).unbind( 'mouseup.dnd_col_resize' );
lastColumn.unbind( 'mousedown.resize' );
lastColumn.css( 'cursor', 'default' );
// unset the selection resize mode
that.selection.resizeMode = false;
guide.remove();
});
});
};
/**
* Detach any column/row resize event handlers attached to the cell.
* @param {DOMElement} tableCell
*
* @return void
*/
Table.prototype.detachRowColResize = function(cell) {
return cell.unbind('mousedown.resize');
};
/**
* toString-method for Table object
*
* @return void
*/
Table.prototype.toString = function() {
return 'Table';
};
Table.prototype.newCell = function(domElement) {
return new TableCell(domElement, this);
};
Table.prototype.newActiveCell = function(domElement) {
var cell = new TableCell(domElement, this);
cell.activate();
return cell;
};
/**
* @return the rows of the table as an array of DOM nodes
*/
Table.prototype.getRows = function () {
//W3C DOM property .rows supported by all modern browsers
var rows = this.obj.get( 0 ).rows;
//converts the HTMLCollection to a real array
return jQuery.makeArray( rows );
};
return Table;
});
| |