From 8f9db8e353367b56ea3a9577a7955d88d497a723 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20St=C3=B6ckel?= Date: Mon, 3 Oct 2011 13:42:56 +0000 Subject: [PATCH] Implemented own code for column resizing as jQuery-UI did not work properly with FF --- .../js/et2_dataview_view_gridContainer.js | 20 +-- etemplate/js/et2_dataview_view_resizeable.js | 133 ++++++++++++++++++ etemplate/js/test/test.css | 21 ++- 3 files changed, 158 insertions(+), 16 deletions(-) create mode 100644 etemplate/js/et2_dataview_view_resizeable.js diff --git a/etemplate/js/et2_dataview_view_gridContainer.js b/etemplate/js/et2_dataview_view_gridContainer.js index fbdd332987..23527a1259 100644 --- a/etemplate/js/et2_dataview_view_gridContainer.js +++ b/etemplate/js/et2_dataview_view_gridContainer.js @@ -18,6 +18,7 @@ et2_core_stylesheet; et2_dataview_view_grid; + et2_dataview_view_resizeable; */ /** @@ -368,25 +369,14 @@ var et2_dataview_gridContainer = Class.extend({ .append(cont) .appendTo(this.headTr); - // Every column but last can be resized + // Every column but last can be resized // TODO: This won't work as the last column could be hidden if(i < this.columns.length-1) { var enc_column = self.columnMgr.getColumnById(col.id); - column.resizable({ - handles:"e", - helper: "nextmatch_resize_helper", - stop: (function(columnIdx, enc_column) { return function(event, ui) { - var original = self.columnMgr.columnWidths[columnIdx]; - var newWidth = original + (ui.size.width - ui.originalSize.width); - - // Using full height helper stretches the header - reset it - // TODO: Get rid of magic -5 - if(jQuery(this).height() > ui.originalSize.height) jQuery(this).height(ui.originalSize.height-5); - enc_column.set_width(newWidth+ "px"); + et2_dataview_makeResizeable(column, function(_w) { + this.set_width(_w + "px"); self.columnMgr.updated = true; self.updateColumns(); - - };})(i, enc_column) - }); + }, enc_column); } // Store both nodes in the columnNodes array diff --git a/etemplate/js/et2_dataview_view_resizeable.js b/etemplate/js/et2_dataview_view_resizeable.js new file mode 100644 index 0000000000..55df199076 --- /dev/null +++ b/etemplate/js/et2_dataview_view_resizeable.js @@ -0,0 +1,133 @@ +/** + * eGroupWare eTemplate2 - Functions which allow resizing of table headers + * + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @package etemplate + * @subpackage dataview + * @link http://www.egroupware.org + * @author Andreas Stöckel + * @copyright Stylite 2011 + * @version $Id$ + */ + +"use strict"; + +/** + * This set of functions is currently only supporting resizing in ew-direction + */ + +(function() { + + // Define some constants + var RESIZE_BORDER = 7; + var RESIZE_MIN_WIDTH = 25; + var RESIZE_ADD = 2; // Used to ensure mouse is under the resize element after resizing has finished + + // In resize region returns whether the mouse is currently in the + // "resizeRegion" + function inResizeRegion(_x, _elem) + { + var ol = _x - _elem.offset().left; + return (ol > (_elem.outerWidth(true) - RESIZE_BORDER)); + } + + var helper = null; + var overlay = null; + var didResize = false; + var resizeWidth = 0; + + function startResize(_outerElem, _elem, _callback) + { + if (overlay == null || helper == null) + { + // Prevent text selection + _elem[0].onselectstart = function() { + return false; + } + + // Reset the "didResize" flag + didResize = false; + + // Create the resize helper + var left = _elem.offset().left; + helper = $j(document.createElement("div")) + .addClass("egwResizeHelper") + .appendTo("body") + .css("top", _elem.offset().top + "px") + .css("left", left + "px") + .css("height", _outerElem.outerHeight(true) + "px"); + + // Create the overlay which will be catching the mouse movements + overlay = $j(document.createElement("div")) + .addClass("egwResizeOverlay") + + .bind("mousemove", function(e) { + didResize = true; + resizeWidth = Math.max(e.clientX - left + RESIZE_ADD, + RESIZE_MIN_WIDTH); + helper.css("width", resizeWidth + "px"); + }) + + .bind("mouseup", function() { + stopResize(); + + // Reset text selection + _elem[0].onselectstart = null; + + // Call the callback if the user actually performed a resize + if (didResize) + { + _callback(resizeWidth); + } + }) + .appendTo("body"); + } + } + + function stopResize() + { + if (helper != null) + { + helper.remove(); + helper = null; + } + + if (overlay != null) + { + overlay.remove(); + overlay = null; + } + } + + this.et2_dataview_makeResizeable = function(_elem, _callback, _context) + { + // Get the table surrounding the given element - this element is used to + // align the helper properly + var outerTable = _elem.closest("table"); + + // Bind the "mousemove" event in the "resize" namespace + _elem.bind("mousemove.resize", function(e) { + _elem.css("cursor", inResizeRegion(e.clientX, _elem) ? "ew-resize" : "auto"); + }); + + // Bind the "mousedown" event in the "resize" namespace + _elem.bind("mousedown.resize", function(e) { + if (inResizeRegion(e.clientX, _elem)) + { + // Start the resizing + startResize(outerTable, _elem, function(_w) { + _callback.call(_context, _w); + }); + } + + return false; + }); + } + + this.et2_dataview_resetResizeable = function(_elem) + { + // Remove all events in the ".resize" namespace from the element + _elem.unbind(".resize"); + } +}).call(window); + diff --git a/etemplate/js/test/test.css b/etemplate/js/test/test.css index 825fcfb8cc..73b5f54d76 100644 --- a/etemplate/js/test/test.css +++ b/etemplate/js/test/test.css @@ -101,7 +101,6 @@ div.et2_hbox_right { .et2_label { color: #101050; - font-size: 10pt; } a.et2_url { @@ -566,3 +565,23 @@ div.et2_progress > div { background-color: #D00000; height: 5px; } + +.egwResizeOverlay { + position: fixed; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + z-index: 99999; + cursor: ew-resize; +} + +.egwResizeHelper { + position: absolute; + display: block; + z-index: 99998; + opacity: 0.5; + background-color: #829cbc; + cursor: ew-resize; +} +