aloha-rails 0.0.1

data/vendor/assets/javascripts/aloha/plugins/common/table/lib/table-create-layer.js

@@ -0,0 +1,210 @@
+define(
+['aloha/jquery'],
+function (jQuery) {
+	/**
+	 * Initialize of the CreateLayer object
+	 */
+	CreateLayer = function(TablePlugin){
+		this.TablePlugin = TablePlugin;
+	};
+
+	/**
+	 * Internal configuration of the create-table panel
+	 */
+	CreateLayer.prototype.parameters = {
+		elemId: 'aloha-table-createLayer', // id of the create-table panel
+		className: 'aloha-table-createdialog',   // class-name of the create-table panel
+		numX: 10,	         // Number of cols in the create-layer
+		numY: 10,            // Number of rows in the create-layer vertically
+		layer: undefined,    // Attribute holding the create-layer
+		target: undefined    // the clicktarget which was clicked on (mostly the button of the floatingmenu)
+	};
+
+	/**
+	 * The configuration-object for the implementer of the plugin. All keys of
+	 * the "parameters" object could be overwritten within this object and will
+	 * simply be used instead.
+	 */
+	CreateLayer.prototype.config = new Object();
+
+	/**
+	 * Flag wether the CreateLayer is currently visble or not
+	 */
+	CreateLayer.prototype.visible = false;
+
+	/**
+	 * This function checks if there is an create-table-layer. If no layer exists, it creates one and puts it into the configuration.
+	 * If the layer was already created it sets the position of the panel and shows it.
+	 *
+	 * @return void
+	 */
+	CreateLayer.prototype.show = function(){
+		var layer = this.get('layer');
+
+		// create the panel if the layer doesn't exist
+		if (layer == null) {
+			this.create();
+		}else {
+			// or reposition, cleanup and show the layer
+			this.setPosition(layer);
+			layer.find('td').removeClass('hover');
+			layer.show();
+		}
+		this.visible = true;
+	};
+
+	/**
+	 * Creates the div-layer which holds a table with the given number of rows and cols.
+	 * It sets click and mouseover-events to the table data fields
+	 *
+	 * @return void
+	 */
+	CreateLayer.prototype.create = function () {
+		var that = this;
+		var layer = jQuery('<div></div>');
+		layer.id = this.get('elemId');
+		layer.addClass(this.get('className'));
+
+		var table = jQuery('<table></table>');
+		table.css('width', (this.get('numX') + 6) * 15);
+		var tr;
+		var td;
+
+		for (var i = 0; i < this.get('numY'); i++) {
+			tr = jQuery('<tr></tr>');
+
+			for (var j = 0; j < this.get('numX'); j++) {
+				td = jQuery('<td>\u00a0</td>');
+
+				if (i == 0 && j == 0) {
+					td.addClass('hover');
+				}
+
+				td.bind('mouseover', {rowId: i, colId: j}, function(e) {
+					that.handleMouseOver(e, table);
+				});
+
+				td.bind('click', {rowId: i, colId: j}, function(e){
+					var rows = e.data.rowId + 1;
+					var cols = e.data.colId + 1;
+
+					that.TablePlugin.createTable(cols, rows);
+					that.hide();
+				});
+
+				tr.append(td);
+			}
+			table.append(tr);
+		}
+		layer.append(table);
+
+		// set attributes
+		this.set('layer', layer);
+		this.setPosition();
+
+		// stop bubbling the click on the create-dialog up to the body event
+		layer.bind('click', function(e) {
+			e.stopPropagation();
+		}).mousedown(function(e) {
+			e.stopPropagation();
+		});
+
+		// append layer to body and
+		// hide the create layer if user clicks anywhere in the body
+		jQuery('body').append(layer).bind('click', function(e) {
+			if (e.target != that.get('target') && that.visible) {
+				that.hide();
+			}
+		});
+	};
+
+	/**
+	 * handles the mose over state for a cell
+	 * @param e event object
+	 * @param table the aeffected table
+	 * @return void
+	 */
+	CreateLayer.prototype.handleMouseOver = function(e, table) {
+		var rowId = e.data.rowId;
+		var colId = e.data.colId;
+		var innerRows = table.find('tr');
+
+		for (var n = 0; n <= innerRows.length; n++) {
+			var innerCells = jQuery(innerRows[n]).find('td');
+
+			for (var k = 0; k <= innerCells.length; k++) {
+				if (n <= rowId && k <= colId) {
+					jQuery(innerCells[k]).addClass('hover');
+				} else {
+					jQuery(innerCells[k]).removeClass('hover');
+				}
+			}
+		}
+	};
+
+	/**
+	 * Sets the "left" and "top" style-attributes according to the clicked target-button
+	 *
+	 *  @return void
+	 */
+	CreateLayer.prototype.setPosition = function() {
+		var targetObj = jQuery(this.get('target'));
+		var pos = targetObj.offset();
+		this.get('layer').css('left', pos.left + 'px');
+		this.get('layer').css('top', (pos.top + targetObj.height()) + 'px');
+	};
+
+	/**
+	 * Hides the create-table panel width the jQuery-method hide()
+	 *
+	 * @see jQuery().hide()
+	 * @return void
+	 */
+	CreateLayer.prototype.hide = function() {
+		this.get('layer').hide();
+		this.visible = false;
+	};
+
+	/**
+	 * The "get"-method returns the value of the given key. First it searches in the
+	 * config for the property. If there is no property with the given name in the
+	 * "config"-object it returns the entry associated with in the parameters-object
+	 *
+	 * @param property
+	 * @return void
+	 */
+	CreateLayer.prototype.get = function(property) {
+		// return param from the config
+		if (this.config[property]) {
+			return this.config[property];
+		}
+		// if config-param was not found return param from the parameters-object
+		if (this.parameters[property]) {
+			return this.parameters[property];
+		}
+		return undefined;
+	};
+
+	/**
+	 * The "set"-method takes a key and a value. It checks if there is a key-value
+	 * pair in the config-object. If so it saves the data in the config-object. If
+	 * not it saves the data in the parameters-object.
+	 *
+	 * @param key
+	 *            the key which should be set
+	 * @param value
+	 *            the value which should be set for the associated key
+	 */
+	CreateLayer.prototype.set = function (key, value) {
+		// if the key already exists in the config-object, set it to the config-object
+		if (this.config[key]) {
+			this.config[key] = value;
+
+			// otherwise "add" it to the parameters-object
+		}else{
+			this.parameters[key] = value;
+		}
+	};
+
+	return CreateLayer;
+});

data/vendor/assets/javascripts/aloha/plugins/common/table/lib/table-plugin-utils.js

@@ -0,0 +1,355 @@
+define(
+['aloha/jquery'],
+function ($) {
+	var Utils = {
+		/**
+		 * Translates the DOM-Element column offset of a table-cell to the
+		 * column offset of a grid-cell, which is the column index adjusted
+		 * by other cells' rowspan and colspan values.
+		 *
+		 * @param rows the rows of a table as an array or jQuery object
+		 * @param rowIdx the index in rows of the cell to get the grid column index of
+		 * @param colIdx the index in rows[row].cells of the cell to get the grid column index of
+		 * @return the grid column index of the cell at the given rowIdx and colIdx, or null
+		 *   if the given rowIdx and colIdx coordinates point to a cell outside of the table.
+		 */
+		'cellIndexToGridColumn': function (rows, rowIdx, colIdx) {
+			var gridColumn = null;
+			Utils.walkCells(rows, function(ri, ci, walkedGridColumn, rowspan, colspan) {
+				if (ri === rowIdx && ci === colIdx) {
+					gridColumn = walkedGridColumn;
+					return false;
+				}
+			});
+			return gridColumn;
+		},
+		/**
+		 * Walks the table-cells of the table represented by the given rows,
+		 * invoking the given callback for each.
+		 * @param callback will receive the following arguments
+		 *   o ri the row index of the table-cell
+		 *   o ci the column index of the table-cell as the offset of the DOM-Element
+		 *   o gridCi the column index of the table-cell in a virtual grid that overlays the table (see makeGrid())
+		 *   o colspan the colspan attribute of the table-cell (as a number)
+		 *   o rowspan the rowspan attribute of the table-cell (as a number)
+		 *   returning false from the callback will terminate the walk early.
+		 * @return void
+		 */
+		'walkCells': function (rows, callback) {
+			var adjust = [];
+			for (var ri = 0; ri < rows.length; ri++) {
+				var cells = rows[ri].cells;
+				var skip = 0;
+				for (var ci = 0; ci < cells.length; ci++) {
+					var cell = cells[ci];
+					var colspan = Utils.colspan(cell);
+					var rowspan = Utils.rowspan(cell);
+					
+					while (adjust[ci + skip]) {
+						adjust[ci + skip] -= 1;
+						skip += 1;
+					}
+
+					if (false === callback(ri, ci, ci + skip, colspan, rowspan)) {
+						return;
+					}
+					
+					for (var i = 0; i < colspan; i++) {
+						if (adjust[ci + skip + i] ) {
+							throw "an impossible case has occurred";
+						}
+						adjust[ci + skip + i] = rowspan - 1;
+					}
+					skip += colspan - 1;
+				}
+				for (; ci + skip < adjust.length; skip++) {
+					if (adjust[ci + skip]) {
+						adjust[ci + skip] -= 1;
+					}
+				}
+			}
+		},
+		/**
+		 * Makes a grid out of the table represented by the given rows.  A
+		 * grid will contain one or multiple grid-cells for each table-cell.
+		 * A table-cell that has a colspan or rowspan greater than one will
+		 * be represented by multiple cells (colspan*rowspan) in the
+		 * grid.
+		 * @parm rows either an array or an jQuery object holding the DOM
+		 *   rows of the table.
+		 * @return the table translated to a grid of the form
+		 *   [ [cell11, cell12, cell13, ...],
+		 *     [cell21, cell22, cell23, ...],
+		 *     ... ]
+		 *  where each grid-cell is an object containing the following members:
+		 *  cell: the DOM object in the table that is rendered into the grid-cell
+		 *  colspan: the colspan attribute of the DOM object (as a number)
+		 *  rowspan: the rowspan attribute of the DOM object (as a number)
+		 *  spannedX: the row offset of the grid-cell in the table-cell (0 based)
+		 *  spannedY: the column offset of the grid-cll in the table-cell (0 based)
+		 */
+		'makeGrid': function (rows) {
+			var grid = [];
+			Utils.walkCells(rows, function(ri, ci, gridCi, colspan, rowspan) {
+				var cell = rows[ri].cells[ci];
+				for (var spannedY = 0; spannedY < rowspan; spannedY++) {
+					grid[ri + spannedY] = grid[ri + spannedY] || [];
+					for (var spannedX = 0; spannedX < colspan; spannedX++) {
+						grid[ri + spannedY][gridCi + spannedX] = {
+							'cell'    : cell,
+							'colspan' : colspan,
+							'rowspan' : rowspan,
+							'spannedX': spannedX,
+							'spannedY': spannedY
+						};
+					}
+				}
+			});
+			return grid;
+		},
+		/**
+		 * A grid-cell is said to contain a dom-cell if it is located in the
+		 * upper-left corner of a table-cell. A table-cell may have a
+		 * rowspan and colspan, and as such may be comprised of several
+		 * grid-cells, of which only one (the upper-left corner one)
+		 * contains a dom-cell.
+		 * @param cellInfo a cell in the grid returned by makeGrid()
+		 * @return whether the given grid-cell maps to a dom-cell
+		 */
+		'containsDomCell': function (cellInfo) {
+			return 0 === cellInfo.spannedX && 0 === cellInfo.spannedY;
+		},
+		/**
+		 * A grid-cell may not contain a dom-cell (due to rowspan and
+		 * colspan). If this function is given the coordinates of such a
+		 * grid-cell, it will look to the left of the grid-cell, until it
+		 * finds a grid-cell that contains a dom-cell and returns the
+		 * DOM-Element of it.
+		 *
+		 * This function is useful to insert something into the DOM next to
+		 * or in place of the grid-cell.
+		 *
+		 * @param grid the grid of the table (see makeGrid())
+		 * @param ri the row index into the grid
+		 * @param ci the column index into the grid
+		 * @return the DOM-Element either at or to the left of the grid-cell
+		 *   a the given coordinates.
+		 */
+		'leftDomCell': function (grid, ri, gridCi) {
+			do {
+				var cellInfo = grid[ri][gridCi];
+				if ( 0 === cellInfo.spannedY ) {
+					return cellInfo.cell;
+				} 
+				gridCi -= cellInfo.spannedX + 1;
+			} while (gridCi >= 0);
+			return null;
+		},
+		/**
+		 * Given a cell of a table (td/th) with a colspan or rowspan
+		 * greater than one, will set the rowspan and colspan of the
+		 * cell to one and insert empty cells where the original cell
+		 * spanned (the number of cells allocated with createCell will
+		 * be rowspan * colspan - 1).
+		 *
+		 * @param cell
+		 *        the cell to split
+		 * @param createCell
+ 		 *        a callback that will be invoked rowspan * colspan - 1
+		 *        times, and which must return a table cell (td/th) that
+		 *        will be inserted into the table
+		 */
+		'splitCell': function (cell, createCell) {
+			var $cell = $(cell);
+			var colspan = Utils.colspan( cell );
+			var rowspan = Utils.rowspan( cell );
+
+			//catch the most common case early
+			if (1 === colspan && 1 === rowspan) {
+				return;
+			}
+
+			var $row  = $cell.parent();
+			var $rows = $row.parent().children();
+			var rowIdx = $row.index();
+			var colIdx = $cell.index();
+			var grid = Utils.makeGrid($rows);
+			var gridColumn = Utils.cellIndexToGridColumn($rows, rowIdx, colIdx);
+			for (var i = 0; i < rowspan; i++) {
+				for (var j = (0 === i ? 1 : 0); j < colspan; j++) {
+					var leftCell = Utils.leftDomCell(grid, rowIdx + i, gridColumn);
+					if (null == leftCell) {
+						$rows.eq(rowIdx + i).prepend(createCell());
+					} else {
+						$( leftCell ).after(createCell());
+					}
+				}
+			}
+			$cell.removeAttr('colspan');
+			$cell.removeAttr('rowspan');
+		},
+		/**
+		 * @param cell
+		 *        the DOM node for a table cell (td/th)
+		 * @return
+		 *        a numeric value indicating the number of rows the cell spans
+		 */
+		'rowspan': function (cell) {
+			return parseInt( $( cell ).attr('rowspan') ) || 1;
+		},
+		/**
+		 * @param cell
+		 *        the DOM node for a table cell (td/th)
+		 * @return
+		 *        a numeric value indicating the number of columns the cell spans
+		 */
+		'colspan': function (cell) {
+			return parseInt( $( cell ).attr('colspan') ) || 1;
+		},
+		/**
+		 * Calls the given callback with each object in the given
+		 * two-dimensional array.
+		 *
+		 * @param grid
+		 *        A two-dimensional array.
+		 * @param callback
+		 *        Invoked with each item in the given two-dimensional array.
+		 *        Accepts the following parameters:
+		 *        o item an item in the given two-dimensional array
+		 *        o x the offset in the nested array (horizontal axis)
+		 *        o y the offset in the outer array (veritcal axis)
+		 *        If the callback returns a value identical to false,
+		 *        the walk will be aborted early.
+		 */
+		'walkGrid': function (grid, callback) {
+			for ( var i = 0; i < grid.length; i++ ) {
+				for ( var j = 0; j < grid[i].length; j++ ) {
+					if ( false === callback( grid[ i ][ j ], j, i ) ) {
+						return;
+					}
+				}
+			}
+		},
+		/**
+		 * Walks the cells of the given grid inside the given
+		 * coordinates.
+		 *
+		 * @param {array} grid
+		 *        A two-dimensional array.
+		 * @param {object} rect
+		 *        Must have the properties top, left, bottom, right
+		 *        each of which referring to a coordinate in the given grid.
+		 * @param {function} callback
+		 *        A callback to invoke for each item in the given
+		 *        two-dimensional array. See walkGrid() for the
+		 *        specification of this parameter.
+		 */
+		'walkGridInsideRect': function ( grid, rect, callback ) {
+			Utils.walkGrid( grid, function ( cellInfo, x, y ) {
+				if ( y >= rect.top && y < rect.bottom && x >= rect.left && x < rect.right ) {
+					return callback( cellInfo, x, y );
+				}
+			});
+		},
+		/**
+		 * Slices leading null or undefined items off of an array
+		 *
+		 * @param array
+		 *        the array to slice null or undefined items off from
+		 * @return
+		 *        a new array with the remaining items
+		 */
+		'leftTrimArray': function ( array ) {
+			for (var i = 0; i < array.length; i++) {
+				if ( null != array[i] ) {
+					return array.slice( i, array.length );
+				}
+			}
+			return [];
+		},
+		/**
+		 * Given a two-dimensional array, will determine the smallest
+		 * possible contour that contains all items for which
+		 * hasCountour returns true.
+		 *
+		 * @param grid
+		 *        A two-dimensional array
+		 * @param hasContour
+		 *        Invoked with each item in the given two dimensional array.
+		 *        Accepts the following parameters:
+		 *        o item an item in the given two-dimensional array
+		 *        o x the offset in the nested array (horizontal axis)
+		 *        o y the offset in the outer array (veritcal axis)
+		 *        Returns a boolean value indicating whether the item is
+		 *        considered to have a contour.
+		 * @return
+		 *        A set of arrays that indicate a contour
+		 *        top:    an array of the smallest vertical offsets
+		 *        right:  an array of the greatest horizontal offsets
+		 *        bottom: an array of the greatest vertical offsets
+		 *        left:   an array of the smallest horizontal offsets
+		 */
+		'makeContour': function ( grid, hasContour ) {
+			var left = [];
+			var right = [];
+			var top = [];
+			var bottom = [];
+			Utils.walkGrid( grid, function ( item, x, y ) {
+				if ( hasContour( item, x, y ) ) {
+					if ( null == left[ y ] || x < left[ y ] ) {
+						left[ y ] = x;
+					}
+					if ( null == right[ y ] || x > right[ y ] ) {
+						right[ y ] = x;
+					}
+					if ( null == top[ x ] || y < top[ x ] ) {
+						top[ x ] = y;
+					}
+					if ( null == bottom[ x ] || y > bottom[ x ] ) {
+						bottom[ x ] = y;
+					}
+				}
+			});
+			left   = Utils.leftTrimArray(left);
+			right  = Utils.leftTrimArray(right);
+			top    = Utils.leftTrimArray(top);
+			bottom = Utils.leftTrimArray(bottom);
+			return {'left': left, 'right': right, 'top': top, 'bottom': bottom};
+		},
+		/**
+		 * Returns the index of the first item that doesn't match the given value
+		 *
+		 * @param array
+		 *        An array that contains arbitrary items
+		 * @param but
+		 *        A value to ignore while searching in the given array
+		 * @return
+		 *        The offset of the first item in the given array that doesn't match the given value.
+		 *        If no such item was found, -1 is returned.
+		 */
+		'indexOfAnyBut': function ( array, but ) {
+			for ( var i = 0; i < array.length; i++ ) {
+				if ( but !== array[ i ] ) {
+					return i;
+				}
+			}
+			return -1;
+		},
+		/**
+		 * @param array
+		 *        an array of integers
+		 * @return
+		 *        true if each item in the given array has a
+		 *        difference to its neighbor of exactly 1
+		 */
+		'isConsecutive': function ( array ) {
+			for ( var i = 1; i < array.length; i++ ) {
+				if ( 1 !== Math.abs( array[ i ] - array[ i - 1 ] ) ) {
+					return false;
+				}
+			}
+			return true;
+		}
+	};
+	return Utils;
+});