mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-22 06:30:59 +01:00
Work on getting nextmatch loading
This commit is contained in:
parent
926415795a
commit
49f3014037
@ -20,6 +20,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
||||
et2_dataview_view_grid;
|
||||
et2_dataview_view_resizeable;
|
||||
*/
|
||||
var et2_dataview_model_columns_1 = require("./et2_dataview_model_columns");
|
||||
var et2_dataview_view_resizeable_1 = require("./et2_dataview_view_resizeable");
|
||||
/**
|
||||
* The et2_dataview class is the main class for displaying a dataview. The
|
||||
* dataview class manages the creation of the outer html nodes (like the table,
|
||||
@ -98,7 +100,7 @@ var et2_dataview = /** @class */ (function () {
|
||||
// Free all column objects which have been created till this moment
|
||||
this._clearHeader();
|
||||
// Copy the given column data
|
||||
this.columnMgr = new et2_dataview_columns(_columnData);
|
||||
this.columnMgr = new et2_dataview_model_columns_1.et2_dataview_columns(_columnData);
|
||||
// Create the stylesheets
|
||||
this.updateColumns();
|
||||
// Build the header row
|
||||
@ -189,7 +191,7 @@ var et2_dataview = /** @class */ (function () {
|
||||
*/
|
||||
et2_dataview.prototype._clearHeader = function () {
|
||||
if (this.columnMgr) {
|
||||
this.columnMgr.free();
|
||||
this.columnMgr.destroy();
|
||||
this.columnMgr = null;
|
||||
}
|
||||
// Remove dynamic CSS,
|
||||
@ -305,16 +307,16 @@ var et2_dataview = /** @class */ (function () {
|
||||
.attr("align", "left")
|
||||
.append(cont)
|
||||
.appendTo(this.headTr);
|
||||
if (this.columnMgr && this.columnMgr.columns[i]) {
|
||||
column.addClass(this.columnMgr.columns[i].fixedWidth ? 'fixedWidth' : 'relativeWidth');
|
||||
if (this.columnMgr.columns[i].visibility === et2_dataview_column.ET2_COL_VISIBILITY_ALWAYS_NOSELECT) {
|
||||
if (this.columnMgr && this.columnMgr.getColumnById(i)) {
|
||||
column.addClass(this.columnMgr.getColumnById(i).fixedWidth ? 'fixedWidth' : 'relativeWidth');
|
||||
if (this.columnMgr.getColumnById(i).visibility === et2_dataview_column.ET2_COL_VISIBILITY_ALWAYS_NOSELECT) {
|
||||
column.addClass('noResize');
|
||||
}
|
||||
}
|
||||
// make column resizable
|
||||
var enc_column = self.columnMgr.getColumnById(col.id);
|
||||
if (enc_column.visibility !== et2_dataview_column.ET2_COL_VISIBILITY_ALWAYS_NOSELECT) {
|
||||
et2_dataview_view_resizable.makeResizeable(column, function (_w) {
|
||||
et2_dataview_view_resizeable_1.et2_dataview_view_resizable.makeResizeable(column, function (_w) {
|
||||
// User wants the column to stay where they put it, even for relative
|
||||
// width columns, so set it explicitly first and adjust other relative
|
||||
// columns to match.
|
||||
@ -328,10 +330,10 @@ var et2_dataview = /** @class */ (function () {
|
||||
var relative = self.columnMgr.totalWidth - self.columnMgr.totalFixed + _w;
|
||||
this.set_width(_w / relative);
|
||||
for (var i = 0; i < self.columnMgr.columns.length; i++) {
|
||||
var col = self.columnMgr.columns[i];
|
||||
var col = self.columnMgr.getColumnById(i);
|
||||
if (col == this || col.fixedWidth)
|
||||
continue;
|
||||
col.set_width(self.columnMgr.columnWidths[i] / relative);
|
||||
col.set_width(self.columnMgr.getColumnWidth(i) / relative);
|
||||
}
|
||||
// Triggers column change callback, which saves
|
||||
self.updateColumns();
|
||||
|
@ -20,6 +20,9 @@
|
||||
et2_dataview_view_resizeable;
|
||||
*/
|
||||
|
||||
import {et2_dataview_columns} from './et2_dataview_model_columns';
|
||||
import {et2_dataview_view_resizable} from "./et2_dataview_view_resizeable";
|
||||
|
||||
/**
|
||||
* The et2_dataview class is the main class for displaying a dataview. The
|
||||
* dataview class manages the creation of the outer html nodes (like the table,
|
||||
@ -290,7 +293,7 @@ export class et2_dataview
|
||||
{
|
||||
if (this.columnMgr)
|
||||
{
|
||||
this.columnMgr.free();
|
||||
this.columnMgr.destroy();
|
||||
this.columnMgr = null;
|
||||
}
|
||||
|
||||
@ -443,10 +446,10 @@ export class et2_dataview
|
||||
.append(cont)
|
||||
.appendTo(this.headTr);
|
||||
|
||||
if(this.columnMgr && this.columnMgr.columns[i])
|
||||
if(this.columnMgr && this.columnMgr.getColumnById(i))
|
||||
{
|
||||
column.addClass(this.columnMgr.columns[i].fixedWidth ? 'fixedWidth' : 'relativeWidth');
|
||||
if(this.columnMgr.columns[i].visibility === et2_dataview_column.ET2_COL_VISIBILITY_ALWAYS_NOSELECT)
|
||||
column.addClass(this.columnMgr.getColumnById(i).fixedWidth ? 'fixedWidth' : 'relativeWidth');
|
||||
if(this.columnMgr.getColumnById(i).visibility === et2_dataview_column.ET2_COL_VISIBILITY_ALWAYS_NOSELECT)
|
||||
{
|
||||
column.addClass('noResize');
|
||||
}
|
||||
@ -474,9 +477,9 @@ export class et2_dataview
|
||||
this.set_width(_w / relative);
|
||||
for(var i = 0; i < self.columnMgr.columns.length; i++)
|
||||
{
|
||||
var col = self.columnMgr.columns[i];
|
||||
var col = self.columnMgr.getColumnById(i);
|
||||
if(col == this || col.fixedWidth) continue;
|
||||
col.set_width(self.columnMgr.columnWidths[i] / relative);
|
||||
col.set_width(self.columnMgr.getColumnWidth(i) / relative);
|
||||
}
|
||||
// Triggers column change callback, which saves
|
||||
self.updateColumns();
|
||||
|
@ -1,3 +1,4 @@
|
||||
"use strict";
|
||||
/**
|
||||
* EGroupware eTemplate2 - Class which contains a the columns model
|
||||
*
|
||||
@ -9,28 +10,103 @@
|
||||
* @copyright Stylite 2011
|
||||
* @version $Id$
|
||||
*/
|
||||
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
/*egw:uses
|
||||
et2_core_inheritance;
|
||||
et2_inheritance;
|
||||
*/
|
||||
|
||||
var ET2_COL_TYPE_DEFAULT = 0;
|
||||
var ET2_COL_TYPE_NAME_ICON_FIXED = 1;
|
||||
|
||||
var ET2_COL_VISIBILITY_ALWAYS = 0;
|
||||
var ET2_COL_VISIBILITY_VISIBLE = 1;
|
||||
var ET2_COL_VISIBILITY_INVISIBLE = 2;
|
||||
var ET2_COL_VISIBILITY_ALWAYS_NOSELECT = 3;
|
||||
var ET2_COL_VISIBILITY_DISABLED = 4;
|
||||
|
||||
/**
|
||||
* Class which stores the data of a single column.
|
||||
*
|
||||
* @augments Class
|
||||
*/
|
||||
var et2_dataview_column = (function(){ "use strict"; return ClassWithAttributes.extend({
|
||||
|
||||
attributes: {
|
||||
var et2_dataview_column = /** @class */ (function () {
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
function et2_dataview_column(_attrs) {
|
||||
/**
|
||||
* Defines the visibility state of this column.
|
||||
*/
|
||||
this.visibility = ET2_COL_VISIBILITY_VISIBLE;
|
||||
this.caption = '';
|
||||
/**
|
||||
* Column type - Type of the column
|
||||
*
|
||||
* One of ET2_COL_TYPE_DEFAULT or ET2_COL_TYPE_NAME_ICON_FIXED
|
||||
*/
|
||||
this.type = ET2_COL_TYPE_DEFAULT;
|
||||
/**
|
||||
* Width of the column
|
||||
*/
|
||||
this.width = 80;
|
||||
/**
|
||||
* Maximum width of the column
|
||||
*/
|
||||
this.maxWidth = 0;
|
||||
/**
|
||||
* Minimum width of the column, in pixels. Values below this are rejected.
|
||||
*/
|
||||
this.minWidth = 20;
|
||||
}
|
||||
/**
|
||||
* Set the column width
|
||||
*
|
||||
* Posible value types are:
|
||||
* 1. "100" => fixedWidth 100px
|
||||
* 2. "100px" => fixedWidth 100px
|
||||
* 3. "50%" => relativeWidth 50%
|
||||
* 4. 0.5 => relativeWidth 50%
|
||||
*
|
||||
* @param {float|string} _value
|
||||
*/
|
||||
et2_dataview_column.prototype.set_width = function (_value) {
|
||||
// Parse the width parameter.
|
||||
this.relativeWidth = false;
|
||||
this.fixedWidth = false;
|
||||
var w = _value;
|
||||
if (typeof w == 'number') {
|
||||
this.relativeWidth = parseFloat(w.toFixed(3));
|
||||
}
|
||||
else if (w.charAt(w.length - 1) == "%" && !isNaN(w.substr(0, w.length - 1))) {
|
||||
this.relativeWidth = parseInt(w.substr(0, w.length - 1)) / 100;
|
||||
// Relative widths with more than 100% are not allowed!
|
||||
if (this.relativeWidth > 1) {
|
||||
this.relativeWidth = false;
|
||||
}
|
||||
}
|
||||
else if (w.substr(w.length - 2, 2) == "px" && !isNaN(w.substr(0, w.length - 2))) {
|
||||
this.fixedWidth = parseInt(w.substr(0, w.length - 2));
|
||||
}
|
||||
else if (typeof w == 'string' && !isNaN(parseFloat(w))) {
|
||||
this.fixedWidth = parseInt(w);
|
||||
}
|
||||
};
|
||||
et2_dataview_column.prototype.set_visibility = function (_value) {
|
||||
// If visibility is always, don't turn it off
|
||||
if (this.visibility == ET2_COL_VISIBILITY_ALWAYS || this.visibility == ET2_COL_VISIBILITY_ALWAYS_NOSELECT)
|
||||
return;
|
||||
if (_value === true) {
|
||||
this.visibility = ET2_COL_VISIBILITY_VISIBLE;
|
||||
}
|
||||
else if (_value === false) {
|
||||
this.visibility = ET2_COL_VISIBILITY_INVISIBLE;
|
||||
}
|
||||
else if (typeof _value == "number") {
|
||||
this.visibility = _value;
|
||||
}
|
||||
else {
|
||||
egw().debug("warn", "Invalid visibility option for column: ", _value);
|
||||
}
|
||||
};
|
||||
et2_dataview_column._attributes = {
|
||||
"id": {
|
||||
"name": "ID",
|
||||
"type": "string",
|
||||
@ -73,212 +149,115 @@ var et2_dataview_column = (function(){ "use strict"; return ClassWithAttributes.
|
||||
"default": 0,
|
||||
"description": "Maximum width of the column"
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param _attrs
|
||||
* @memberOf et2_dataview_column
|
||||
*/
|
||||
init: function(_attrs) {
|
||||
this.fixedWidth = false;
|
||||
this.relativeWidth = false;
|
||||
|
||||
// Do the sanity check on the attributes and load them
|
||||
this.generateAttributeSet(_attrs);
|
||||
this.initAttributes(_attrs);
|
||||
},
|
||||
|
||||
/**
|
||||
* Set the column width
|
||||
*
|
||||
* Posible value types are:
|
||||
* 1. "100" => fixedWidth 100px
|
||||
* 2. "100px" => fixedWidth 100px
|
||||
* 3. "50%" => relativeWidth 50%
|
||||
* 4. 0.5 => relativeWidth 50%
|
||||
*
|
||||
* @param {float|string} _value
|
||||
*/
|
||||
set_width: function(_value) {
|
||||
// Parse the width parameter.
|
||||
this.relativeWidth = false;
|
||||
this.fixedWidth = false;
|
||||
var w = _value;
|
||||
|
||||
if (typeof w == 'number')
|
||||
{
|
||||
this.relativeWidth = parseFloat(w.toFixed(3));
|
||||
}
|
||||
else if (w.charAt(w.length - 1) == "%" && !isNaN(w.substr(0, w.length - 1)))
|
||||
{
|
||||
this.relativeWidth = parseInt(w.substr(0, w.length - 1)) / 100;
|
||||
|
||||
// Relative widths with more than 100% are not allowed!
|
||||
if (this.relativeWidth > 1)
|
||||
{
|
||||
this.relativeWidth = false;
|
||||
}
|
||||
}
|
||||
else if (w.substr(w.length - 2, 2) == "px" && !isNaN(w.substr(0, w.length - 2)))
|
||||
{
|
||||
this.fixedWidth = parseInt(w.substr(0, w.length - 2));
|
||||
}
|
||||
else if (typeof w == 'string' && !isNaN(w))
|
||||
{
|
||||
this.fixedWidth = parseInt(w);
|
||||
}
|
||||
},
|
||||
|
||||
set_visibility: function(_value) {
|
||||
// If visibility is always, don't turn it off
|
||||
if(this.visibility == ET2_COL_VISIBILITY_ALWAYS || this.visibility == ET2_COL_VISIBILITY_ALWAYS_NOSELECT) return;
|
||||
|
||||
if(_value === true)
|
||||
{
|
||||
this.visibility = ET2_COL_VISIBILITY_VISIBLE;
|
||||
}
|
||||
else if (_value === false)
|
||||
{
|
||||
this.visibility = ET2_COL_VISIBILITY_INVISIBLE;
|
||||
}
|
||||
else if (typeof _value == "number")
|
||||
{
|
||||
this.visibility = _value;
|
||||
}
|
||||
else
|
||||
{
|
||||
this.egw().debug("warn", "Invalid visibility option for column: ", _value);
|
||||
}
|
||||
}
|
||||
});}).call(this);
|
||||
|
||||
};
|
||||
return et2_dataview_column;
|
||||
}());
|
||||
exports.et2_dataview_column = et2_dataview_column;
|
||||
/**
|
||||
* Contains logic for the columns class. The columns class represents the unique set
|
||||
* of columns a grid view owns. The parameters of the columns (except for visibility)
|
||||
* do normaly not change.
|
||||
*/
|
||||
|
||||
var et2_dataview_columns = (function(){ "use strict"; return Class.extend({
|
||||
|
||||
init: function(_columnData) {
|
||||
var et2_dataview_columns = /** @class */ (function () {
|
||||
function et2_dataview_columns(_columnData) {
|
||||
// Initialize some variables
|
||||
this.totalWidth = 0;
|
||||
this._totalWidth = 0;
|
||||
this.totalFixed = 0;
|
||||
this.columnWidths = [];
|
||||
|
||||
// Create the columns object
|
||||
this.columns = new Array(_columnData.length);
|
||||
for (var i = 0; i < _columnData.length; i++)
|
||||
{
|
||||
for (var i = 0; i < _columnData.length; i++) {
|
||||
this.columns[i] = new et2_dataview_column(_columnData[i]);
|
||||
}
|
||||
|
||||
this.updated = true;
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
// Free all column objects
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
this.columns[i].free();
|
||||
}
|
||||
et2_dataview_columns.prototype.destroy = function () {
|
||||
// Free all column objects
|
||||
for (var i = 0; i < this.columns.length; i++) {
|
||||
this.columns[i] = null;
|
||||
}
|
||||
};
|
||||
Object.defineProperty(et2_dataview_columns.prototype, "totalWidth", {
|
||||
get: function () {
|
||||
return this._totalWidth;
|
||||
},
|
||||
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
/**
|
||||
* Set the total width of the header row
|
||||
*
|
||||
* @param {(string|number)} _width
|
||||
*/
|
||||
setTotalWidth: function(_width) {
|
||||
if (_width != this.totalWidth && _width > 0)
|
||||
{
|
||||
this.totalWidth = _width;
|
||||
et2_dataview_columns.prototype.setTotalWidth = function (_width) {
|
||||
if (_width != this._totalWidth && _width > 0) {
|
||||
this._totalWidth = _width;
|
||||
this.updated = true;
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
/**
|
||||
* Returns the index of the colum with the given id
|
||||
*
|
||||
* @param {string} _id
|
||||
*/
|
||||
getColumnIndexById: function(_id) {
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
if (this.columns[i].id == _id)
|
||||
{
|
||||
et2_dataview_columns.prototype.getColumnIndexById = function (_id) {
|
||||
for (var i = 0; i < this.columns.length; i++) {
|
||||
if (this.columns[i].id == _id) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
},
|
||||
|
||||
};
|
||||
/**
|
||||
* Returns the column with the given id
|
||||
*
|
||||
* @param {string} _id
|
||||
*/
|
||||
getColumnById: function(_id) {
|
||||
et2_dataview_columns.prototype.getColumnById = function (_id) {
|
||||
var idx = this.getColumnIndexById(_id);
|
||||
return (idx == -1) ? null : this.columns[idx];
|
||||
},
|
||||
|
||||
};
|
||||
/**
|
||||
* Returns the width of the column with the given index
|
||||
*
|
||||
* @param {number} _idx
|
||||
*/
|
||||
getColumnWidth: function(_idx) {
|
||||
if (this.totalWidth > 0 && _idx >= 0 && _idx < this.columns.length)
|
||||
{
|
||||
et2_dataview_columns.prototype.getColumnWidth = function (_idx) {
|
||||
if (this._totalWidth > 0 && _idx >= 0 && _idx < this.columns.length) {
|
||||
// Recalculate the column widths if something has changed.
|
||||
if (this.updated)
|
||||
{
|
||||
if (this.updated) {
|
||||
this._calculateWidths();
|
||||
this.updated = false;
|
||||
}
|
||||
|
||||
// Return the calculated width for the column with the given index.
|
||||
return this.columnWidths[_idx];
|
||||
}
|
||||
|
||||
return 0;
|
||||
},
|
||||
|
||||
};
|
||||
/**
|
||||
* Returns an array containing the width of the column and its visibility
|
||||
* state.
|
||||
*/
|
||||
getColumnData: function() {
|
||||
et2_dataview_columns.prototype.getColumnData = function () {
|
||||
var result = [];
|
||||
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
for (var i = 0; i < this.columns.length; i++) {
|
||||
result.push({
|
||||
"id": this.columns[i].id,
|
||||
"width": this.getColumnWidth(i),
|
||||
"visible": this.columns[i].visibility !== ET2_COL_VISIBILITY_INVISIBLE &&
|
||||
this.columns[i].visibility !== ET2_COL_VISIBILITY_DISABLED
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
};
|
||||
/**
|
||||
* Returns an associative array which contains data about the visibility
|
||||
* state of the columns.
|
||||
*/
|
||||
getColumnVisibilitySet: function() {
|
||||
et2_dataview_columns.prototype.getColumnVisibilitySet = function () {
|
||||
var result = {};
|
||||
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
if (this.columns[i].visibility != ET2_COL_VISIBILITY_ALWAYS_NOSELECT)
|
||||
{
|
||||
for (var i = 0; i < this.columns.length; i++) {
|
||||
if (this.columns[i].visibility != ET2_COL_VISIBILITY_ALWAYS_NOSELECT) {
|
||||
result[this.columns[i].id] = {
|
||||
"caption": this.columns[i].caption,
|
||||
"enabled": (this.columns[i].visibility != ET2_COL_VISIBILITY_ALWAYS) &&
|
||||
@ -288,172 +267,134 @@ var et2_dataview_columns = (function(){ "use strict"; return Class.extend({
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
};
|
||||
/**
|
||||
* Sets a column visiblity set
|
||||
*
|
||||
* @param {object} _set
|
||||
*/
|
||||
setColumnVisibilitySet: function(_set) {
|
||||
for (var k in _set)
|
||||
{
|
||||
et2_dataview_columns.prototype.setColumnVisibilitySet = function (_set) {
|
||||
for (var k in _set) {
|
||||
var col = this.getColumnById(k);
|
||||
if (col)
|
||||
{
|
||||
if (col) {
|
||||
col.set_visibility(_set[k].visible ? ET2_COL_VISIBILITY_VISIBLE :
|
||||
ET2_COL_VISIBILITY_INVISIBLE);
|
||||
}
|
||||
}
|
||||
|
||||
this.updated = true;
|
||||
},
|
||||
|
||||
};
|
||||
/* ---- PRIVATE FUNCTIONS ---- */
|
||||
|
||||
/**
|
||||
* Calculates the absolute column width depending on the previously set
|
||||
* "totalWidth" value. The calculated values are stored in the columnWidths
|
||||
* array.
|
||||
*/
|
||||
_calculateWidths: function()
|
||||
{
|
||||
et2_dataview_columns.prototype._calculateWidths = function () {
|
||||
// Reset some values which are used during the calculation
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
this.columns[i]._larger = false;
|
||||
this.columns[i]._newWidth = false;
|
||||
var _larger = Array(this.columns.length);
|
||||
for (var i = 0; i < this.columns.length; i++) {
|
||||
_larger[i] = false;
|
||||
}
|
||||
|
||||
// Remove the spacing between the columns from the total width
|
||||
var tw = this.totalWidth;
|
||||
|
||||
var tw = this._totalWidth;
|
||||
// Calculate how many space is - relatively - not occupied with columns with
|
||||
// relative or fixed width
|
||||
var totalRelative = 0;
|
||||
var fixedCount = 0;
|
||||
this.totalFixed = 0;
|
||||
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
for (var i = 0; i < this.columns.length; i++) {
|
||||
var col = this.columns[i];
|
||||
if (col.visibility !== ET2_COL_VISIBILITY_INVISIBLE &&
|
||||
col.visibility !== ET2_COL_VISIBILITY_DISABLED
|
||||
)
|
||||
{
|
||||
col.visibility !== ET2_COL_VISIBILITY_DISABLED) {
|
||||
// Some bounds sanity checking
|
||||
if(col.fixedWidth > tw || col.fixedWidth < 0)
|
||||
{
|
||||
if (col.fixedWidth > tw || col.fixedWidth < 0) {
|
||||
col.fixedWidth = false;
|
||||
}
|
||||
else if (col.relativeWidth > 1 || col.relativeWidth < 0)
|
||||
{
|
||||
else if (col.relativeWidth > 1 || col.relativeWidth < 0) {
|
||||
col.relativeWidth = false;
|
||||
}
|
||||
if (col.relativeWidth)
|
||||
{
|
||||
if (col.relativeWidth) {
|
||||
totalRelative += col.relativeWidth;
|
||||
}
|
||||
else if (col.fixedWidth)
|
||||
{
|
||||
else if (col.fixedWidth) {
|
||||
this.totalFixed += col.fixedWidth;
|
||||
fixedCount++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Now calculate the absolute width of the columns in pixels
|
||||
var usedTotal = 0;
|
||||
this.columnWidths = [];
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
for (var i = 0; i < this.columns.length; i++) {
|
||||
var w = 0;
|
||||
var col = this.columns[i];
|
||||
if (col.visibility != ET2_COL_VISIBILITY_INVISIBLE &&
|
||||
col.visibility !== ET2_COL_VISIBILITY_DISABLED
|
||||
)
|
||||
{
|
||||
if (col._larger)
|
||||
{
|
||||
col.visibility !== ET2_COL_VISIBILITY_DISABLED) {
|
||||
if (_larger[i]) {
|
||||
w = col.maxWidth;
|
||||
}
|
||||
else if (col.fixedWidth)
|
||||
{
|
||||
else if (col.fixedWidth) {
|
||||
w = col.fixedWidth;
|
||||
}
|
||||
else if (col.relativeWidth)
|
||||
{
|
||||
else if (col.relativeWidth) {
|
||||
// Reset relative to an actual percentage (of 1.00) or
|
||||
// resizing eventually sends them to 0
|
||||
col.relativeWidth = col.relativeWidth / totalRelative;
|
||||
w = Math.round((tw-this.totalFixed) * col.relativeWidth);
|
||||
w = Math.round((tw - this.totalFixed) * col.relativeWidth);
|
||||
}
|
||||
if (w > tw || (col.maxWidth && w > col.maxWidth))
|
||||
{
|
||||
if (w > tw || (col.maxWidth && w > col.maxWidth)) {
|
||||
w = Math.min(tw - usedTotal, col.maxWidth);
|
||||
}
|
||||
if (w < 0 || w < col.minWidth)
|
||||
{
|
||||
if (w < 0 || w < col.minWidth) {
|
||||
w = Math.max(0, col.minWidth);
|
||||
}
|
||||
}
|
||||
this.columnWidths.push(w);
|
||||
usedTotal += w;
|
||||
}
|
||||
|
||||
// Deal with any accumulated rounding errors
|
||||
if(usedTotal != tw)
|
||||
{
|
||||
if (usedTotal != tw) {
|
||||
var column, columnIndex;
|
||||
var remaining_width = (usedTotal - tw);
|
||||
|
||||
// Pick the first relative column and use it
|
||||
for(columnIndex = 0; columnIndex < this.columns.length; columnIndex++)
|
||||
{
|
||||
if(this.columns[columnIndex].visibility === ET2_COL_VISIBILITY_INVISIBLE ||
|
||||
for (columnIndex = 0; columnIndex < this.columns.length; columnIndex++) {
|
||||
if (this.columns[columnIndex].visibility === ET2_COL_VISIBILITY_INVISIBLE ||
|
||||
this.columns[columnIndex].visibility === ET2_COL_VISIBILITY_DISABLED ||
|
||||
this.columnWidths[columnIndex] <= 0 ||
|
||||
remaining_width > 0 && this.columnWidths[columnIndex] <= this.columns[columnIndex].minWidth)
|
||||
{
|
||||
remaining_width > 0 && this.columnWidths[columnIndex] <= this.columns[columnIndex].minWidth) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var col = this.columns[columnIndex];
|
||||
if(col.relativeWidth || !col.fixedWidth)
|
||||
{
|
||||
if (col.relativeWidth || !col.fixedWidth) {
|
||||
column = col;
|
||||
break;
|
||||
}
|
||||
else if (!col.fixedWidth)
|
||||
{
|
||||
else if (!col.fixedWidth) {
|
||||
column = col;
|
||||
}
|
||||
}
|
||||
if(!column)
|
||||
{
|
||||
if (!column) {
|
||||
// Distribute shortage over all fixed width columns
|
||||
var diff = Math.round(remaining_width / fixedCount);
|
||||
for(var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
for (var i = 0; i < this.columns.length; i++) {
|
||||
var col = this.columns[i];
|
||||
var col_diff = (diff < 0 ?
|
||||
Math.max(remaining_width, diff) :
|
||||
Math.min(remaining_width, diff)
|
||||
);
|
||||
if(!col.fixedWidth) continue;
|
||||
Math.min(remaining_width, diff));
|
||||
if (!col.fixedWidth)
|
||||
continue;
|
||||
var new_width = this.columnWidths[i] - col_diff;
|
||||
remaining_width -= col_diff;
|
||||
this.columnWidths[i] = Math.max(0, Math.min(new_width,tw));
|
||||
this.columnWidths[i] = Math.max(0, Math.min(new_width, tw));
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
else {
|
||||
this.columnWidths[columnIndex] = Math.max(column.minWidth, this.columnWidths[columnIndex] - remaining_width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});}).call(this);
|
||||
|
||||
};
|
||||
return et2_dataview_columns;
|
||||
}());
|
||||
exports.et2_dataview_columns = et2_dataview_columns;
|
||||
//# sourceMappingURL=et2_dataview_model_columns.js.map
|
509
api/js/etemplate/et2_dataview_model_columns.ts
Executable file
509
api/js/etemplate/et2_dataview_model_columns.ts
Executable file
@ -0,0 +1,509 @@
|
||||
/**
|
||||
* EGroupware eTemplate2 - Class which contains a the columns model
|
||||
*
|
||||
* @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$
|
||||
*/
|
||||
|
||||
/*egw:uses
|
||||
et2_core_inheritance;
|
||||
et2_inheritance;
|
||||
*/
|
||||
|
||||
|
||||
var ET2_COL_TYPE_DEFAULT = 0;
|
||||
var ET2_COL_TYPE_NAME_ICON_FIXED = 1;
|
||||
|
||||
var ET2_COL_VISIBILITY_ALWAYS = 0;
|
||||
var ET2_COL_VISIBILITY_VISIBLE = 1;
|
||||
var ET2_COL_VISIBILITY_INVISIBLE = 2;
|
||||
var ET2_COL_VISIBILITY_ALWAYS_NOSELECT = 3;
|
||||
var ET2_COL_VISIBILITY_DISABLED = 4;
|
||||
|
||||
/**
|
||||
* Class which stores the data of a single column.
|
||||
*
|
||||
* @augments Class
|
||||
*/
|
||||
export class et2_dataview_column
|
||||
{
|
||||
|
||||
static readonly _attributes: any = {
|
||||
"id": {
|
||||
"name": "ID",
|
||||
"type": "string",
|
||||
"description": "Unique identifier for this column. It is used to " +
|
||||
"store changed column widths or visibilities."
|
||||
},
|
||||
"visibility": {
|
||||
"name": "Visibility",
|
||||
"type": "integer",
|
||||
"default": ET2_COL_VISIBILITY_VISIBLE,
|
||||
"description": "Defines the visibility state of this column."
|
||||
},
|
||||
"caption": {
|
||||
"name": "Caption",
|
||||
"type": "string",
|
||||
"description": "Caption of the column as it is displayed in the " +
|
||||
"select columns popup."
|
||||
},
|
||||
"type": {
|
||||
"name": "Column type",
|
||||
"type": "integer",
|
||||
"default": ET2_COL_TYPE_DEFAULT,
|
||||
"description": "Type of the column"
|
||||
},
|
||||
"width": {
|
||||
"name": "Width",
|
||||
"type": "dimension",
|
||||
"default": "80px",
|
||||
"description": "Width of the column."
|
||||
},
|
||||
"minWidth": {
|
||||
"name": "Minimum width",
|
||||
"type": "integer",
|
||||
"default": 20,
|
||||
"description": "Minimum width of the column, in pixels. Values below this are rejected."
|
||||
},
|
||||
"maxWidth": {
|
||||
"name": "Maximum width",
|
||||
"type": "integer",
|
||||
"default": 0,
|
||||
"description": "Maximum width of the column"
|
||||
}
|
||||
};
|
||||
|
||||
fixedWidth: number | boolean;
|
||||
relativeWidth: number | boolean;
|
||||
|
||||
/**
|
||||
* Unique identifier for this column. It is used to store changed column widths or visibilities.
|
||||
*/
|
||||
public id: string;
|
||||
|
||||
/**
|
||||
* Defines the visibility state of this column.
|
||||
*/
|
||||
public visibility: number = ET2_COL_VISIBILITY_VISIBLE;
|
||||
|
||||
public caption: string = '';
|
||||
|
||||
/**
|
||||
* Column type - Type of the column
|
||||
*
|
||||
* One of ET2_COL_TYPE_DEFAULT or ET2_COL_TYPE_NAME_ICON_FIXED
|
||||
*/
|
||||
public type: number = ET2_COL_TYPE_DEFAULT;
|
||||
|
||||
/**
|
||||
* Width of the column
|
||||
*/
|
||||
public width: number = 80;
|
||||
|
||||
/**
|
||||
* Maximum width of the column
|
||||
*/
|
||||
public maxWidth: number = 0;
|
||||
|
||||
/**
|
||||
* Minimum width of the column, in pixels. Values below this are rejected.
|
||||
*/
|
||||
public minWidth: number = 20;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(_attrs)
|
||||
{
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the column width
|
||||
*
|
||||
* Posible value types are:
|
||||
* 1. "100" => fixedWidth 100px
|
||||
* 2. "100px" => fixedWidth 100px
|
||||
* 3. "50%" => relativeWidth 50%
|
||||
* 4. 0.5 => relativeWidth 50%
|
||||
*
|
||||
* @param {float|string} _value
|
||||
*/
|
||||
set_width(_value)
|
||||
{
|
||||
// Parse the width parameter.
|
||||
this.relativeWidth = false;
|
||||
this.fixedWidth = false;
|
||||
var w = _value;
|
||||
|
||||
if (typeof w == 'number')
|
||||
{
|
||||
this.relativeWidth = parseFloat(w.toFixed(3));
|
||||
}
|
||||
else if (w.charAt(w.length - 1) == "%" && !isNaN(w.substr(0, w.length - 1)))
|
||||
{
|
||||
this.relativeWidth = parseInt(w.substr(0, w.length - 1)) / 100;
|
||||
|
||||
// Relative widths with more than 100% are not allowed!
|
||||
if (this.relativeWidth > 1)
|
||||
{
|
||||
this.relativeWidth = false;
|
||||
}
|
||||
}
|
||||
else if (w.substr(w.length - 2, 2) == "px" && !isNaN(w.substr(0, w.length - 2)))
|
||||
{
|
||||
this.fixedWidth = parseInt(w.substr(0, w.length - 2));
|
||||
}
|
||||
else if (typeof w == 'string' && !isNaN(parseFloat(w)))
|
||||
{
|
||||
this.fixedWidth = parseInt(w);
|
||||
}
|
||||
}
|
||||
|
||||
set_visibility(_value)
|
||||
{
|
||||
// If visibility is always, don't turn it off
|
||||
if(this.visibility == ET2_COL_VISIBILITY_ALWAYS || this.visibility == ET2_COL_VISIBILITY_ALWAYS_NOSELECT) return;
|
||||
|
||||
if(_value === true)
|
||||
{
|
||||
this.visibility = ET2_COL_VISIBILITY_VISIBLE;
|
||||
}
|
||||
else if (_value === false)
|
||||
{
|
||||
this.visibility = ET2_COL_VISIBILITY_INVISIBLE;
|
||||
}
|
||||
else if (typeof _value == "number")
|
||||
{
|
||||
this.visibility = _value;
|
||||
}
|
||||
else
|
||||
{
|
||||
egw().debug("warn", "Invalid visibility option for column: ", _value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Contains logic for the columns class. The columns class represents the unique set
|
||||
* of columns a grid view owns. The parameters of the columns (except for visibility)
|
||||
* do normaly not change.
|
||||
*/
|
||||
|
||||
export class et2_dataview_columns
|
||||
{
|
||||
private _totalWidth: number;
|
||||
private totalFixed: number | boolean;
|
||||
private columnWidths: any[];
|
||||
private columns: et2_dataview_column[];
|
||||
private updated: boolean;
|
||||
|
||||
constructor(_columnData)
|
||||
{
|
||||
// Initialize some variables
|
||||
this._totalWidth = 0;
|
||||
this.totalFixed = 0;
|
||||
this.columnWidths = [];
|
||||
|
||||
// Create the columns object
|
||||
this.columns = new Array(_columnData.length);
|
||||
for (var i = 0; i < _columnData.length; i++)
|
||||
{
|
||||
this.columns[i] = new et2_dataview_column(_columnData[i]);
|
||||
}
|
||||
|
||||
this.updated = true;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
// Free all column objects
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
this.columns[i] = null;
|
||||
}
|
||||
}
|
||||
|
||||
get totalWidth(): number {
|
||||
return this._totalWidth;
|
||||
}
|
||||
/**
|
||||
* Set the total width of the header row
|
||||
*
|
||||
* @param {(string|number)} _width
|
||||
*/
|
||||
setTotalWidth(_width)
|
||||
{
|
||||
if (_width != this._totalWidth && _width > 0)
|
||||
{
|
||||
this._totalWidth = _width;
|
||||
this.updated = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the index of the colum with the given id
|
||||
*
|
||||
* @param {string} _id
|
||||
*/
|
||||
getColumnIndexById( _id)
|
||||
{
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
if (this.columns[i].id == _id)
|
||||
{
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the column with the given id
|
||||
*
|
||||
* @param {string} _id
|
||||
*/
|
||||
getColumnById( _id)
|
||||
{
|
||||
var idx = this.getColumnIndexById(_id);
|
||||
return (idx == -1) ? null : this.columns[idx];
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the width of the column with the given index
|
||||
*
|
||||
* @param {number} _idx
|
||||
*/
|
||||
getColumnWidth( _idx)
|
||||
{
|
||||
if (this._totalWidth > 0 && _idx >= 0 && _idx < this.columns.length)
|
||||
{
|
||||
// Recalculate the column widths if something has changed.
|
||||
if (this.updated)
|
||||
{
|
||||
this._calculateWidths();
|
||||
this.updated = false;
|
||||
}
|
||||
|
||||
// Return the calculated width for the column with the given index.
|
||||
return this.columnWidths[_idx];
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an array containing the width of the column and its visibility
|
||||
* state.
|
||||
*/
|
||||
getColumnData( )
|
||||
{
|
||||
var result = [];
|
||||
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
result.push({
|
||||
"id": this.columns[i].id,
|
||||
"width": this.getColumnWidth(i),
|
||||
"visible": this.columns[i].visibility !== ET2_COL_VISIBILITY_INVISIBLE &&
|
||||
this.columns[i].visibility !== ET2_COL_VISIBILITY_DISABLED
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an associative array which contains data about the visibility
|
||||
* state of the columns.
|
||||
*/
|
||||
getColumnVisibilitySet()
|
||||
{
|
||||
var result = {};
|
||||
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
if (this.columns[i].visibility != ET2_COL_VISIBILITY_ALWAYS_NOSELECT)
|
||||
{
|
||||
result[this.columns[i].id] = {
|
||||
"caption": this.columns[i].caption,
|
||||
"enabled": (this.columns[i].visibility != ET2_COL_VISIBILITY_ALWAYS) &&
|
||||
(this.columns[i].visibility != ET2_COL_VISIBILITY_DISABLED) &&
|
||||
(this.columns[i].type != ET2_COL_TYPE_NAME_ICON_FIXED),
|
||||
"visible": this.columns[i].visibility != ET2_COL_VISIBILITY_INVISIBLE
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets a column visiblity set
|
||||
*
|
||||
* @param {object} _set
|
||||
*/
|
||||
setColumnVisibilitySet( _set)
|
||||
{
|
||||
for (var k in _set)
|
||||
{
|
||||
var col = this.getColumnById(k);
|
||||
if (col)
|
||||
{
|
||||
col.set_visibility(_set[k].visible ? ET2_COL_VISIBILITY_VISIBLE :
|
||||
ET2_COL_VISIBILITY_INVISIBLE);
|
||||
}
|
||||
}
|
||||
|
||||
this.updated = true;
|
||||
}
|
||||
|
||||
/* ---- PRIVATE FUNCTIONS ---- */
|
||||
|
||||
/**
|
||||
* Calculates the absolute column width depending on the previously set
|
||||
* "totalWidth" value. The calculated values are stored in the columnWidths
|
||||
* array.
|
||||
*/
|
||||
_calculateWidths()
|
||||
{
|
||||
// Reset some values which are used during the calculation
|
||||
let _larger = Array(this.columns.length);
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
_larger[i] = false;
|
||||
}
|
||||
|
||||
// Remove the spacing between the columns from the total width
|
||||
var tw = this._totalWidth;
|
||||
|
||||
// Calculate how many space is - relatively - not occupied with columns with
|
||||
// relative or fixed width
|
||||
var totalRelative: number = 0;
|
||||
var fixedCount = 0;
|
||||
this.totalFixed = 0;
|
||||
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
var col = this.columns[i];
|
||||
if (col.visibility !== ET2_COL_VISIBILITY_INVISIBLE &&
|
||||
col.visibility !== ET2_COL_VISIBILITY_DISABLED
|
||||
)
|
||||
{
|
||||
// Some bounds sanity checking
|
||||
if(col.fixedWidth > tw || col.fixedWidth < 0)
|
||||
{
|
||||
col.fixedWidth = false;
|
||||
}
|
||||
else if (col.relativeWidth > 1 || col.relativeWidth < 0)
|
||||
{
|
||||
col.relativeWidth = false;
|
||||
}
|
||||
if (col.relativeWidth)
|
||||
{
|
||||
totalRelative += <number>col.relativeWidth;
|
||||
}
|
||||
else if (col.fixedWidth)
|
||||
{
|
||||
this.totalFixed += <number>col.fixedWidth;
|
||||
fixedCount++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Now calculate the absolute width of the columns in pixels
|
||||
var usedTotal = 0;
|
||||
this.columnWidths = [];
|
||||
for (var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
var w = 0;
|
||||
var col = this.columns[i];
|
||||
if (col.visibility != ET2_COL_VISIBILITY_INVISIBLE &&
|
||||
col.visibility !== ET2_COL_VISIBILITY_DISABLED
|
||||
)
|
||||
{
|
||||
if (_larger[i])
|
||||
{
|
||||
w = col.maxWidth;
|
||||
}
|
||||
else if (col.fixedWidth)
|
||||
{
|
||||
w = <number>col.fixedWidth;
|
||||
}
|
||||
else if (col.relativeWidth)
|
||||
{
|
||||
// Reset relative to an actual percentage (of 1.00) or
|
||||
// resizing eventually sends them to 0
|
||||
col.relativeWidth = <number>col.relativeWidth / totalRelative;
|
||||
w = Math.round((tw-this.totalFixed) * col.relativeWidth);
|
||||
}
|
||||
if (w > tw || (col.maxWidth && w > col.maxWidth))
|
||||
{
|
||||
w = Math.min(tw - usedTotal, col.maxWidth);
|
||||
}
|
||||
if (w < 0 || w < col.minWidth)
|
||||
{
|
||||
w = Math.max(0, col.minWidth);
|
||||
}
|
||||
}
|
||||
this.columnWidths.push(w);
|
||||
usedTotal += w;
|
||||
}
|
||||
|
||||
// Deal with any accumulated rounding errors
|
||||
if(usedTotal != tw)
|
||||
{
|
||||
var column, columnIndex;
|
||||
var remaining_width = (usedTotal - tw);
|
||||
|
||||
// Pick the first relative column and use it
|
||||
for(columnIndex = 0; columnIndex < this.columns.length; columnIndex++)
|
||||
{
|
||||
if(this.columns[columnIndex].visibility === ET2_COL_VISIBILITY_INVISIBLE ||
|
||||
this.columns[columnIndex].visibility === ET2_COL_VISIBILITY_DISABLED ||
|
||||
this.columnWidths[columnIndex] <= 0 ||
|
||||
remaining_width > 0 && this.columnWidths[columnIndex] <= this.columns[columnIndex].minWidth)
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
var col = this.columns[columnIndex];
|
||||
if(col.relativeWidth || !col.fixedWidth)
|
||||
{
|
||||
column = col;
|
||||
break;
|
||||
}
|
||||
else if (!col.fixedWidth)
|
||||
{
|
||||
column = col;
|
||||
}
|
||||
}
|
||||
if(!column)
|
||||
{
|
||||
// Distribute shortage over all fixed width columns
|
||||
var diff = Math.round(remaining_width / fixedCount);
|
||||
for(var i = 0; i < this.columns.length; i++)
|
||||
{
|
||||
var col = this.columns[i];
|
||||
var col_diff = (diff < 0 ?
|
||||
Math.max(remaining_width, diff) :
|
||||
Math.min(remaining_width, diff)
|
||||
);
|
||||
if(!col.fixedWidth) continue;
|
||||
var new_width = this.columnWidths[i] - col_diff;
|
||||
remaining_width -= col_diff;
|
||||
this.columnWidths[i] = Math.max(0, Math.min(new_width,tw));
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
this.columnWidths[columnIndex] = Math.max(column.minWidth, this.columnWidths[columnIndex] - remaining_width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
@ -1,3 +1,4 @@
|
||||
"use strict";
|
||||
/**
|
||||
* EGroupware eTemplate2 - Functions which allow resizing of table headers
|
||||
*
|
||||
@ -9,222 +10,174 @@
|
||||
* @copyright Stylite 2011
|
||||
* @version $Id$
|
||||
*/
|
||||
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
/**
|
||||
* This set of functions is currently only supporting resizing in ew-direction
|
||||
*/
|
||||
|
||||
(function()
|
||||
{
|
||||
"use strict";
|
||||
|
||||
// Define some constants
|
||||
var RESIZE_BORDER = 12;
|
||||
var RESIZE_MIN_WIDTH = 25;
|
||||
var RESIZE_ADD = 2; // Used to ensure mouse is under the resize element after resizing has finished
|
||||
|
||||
var et2_dataview_view_resizable = /** @class */ (function () {
|
||||
function et2_dataview_view_resizable() {
|
||||
}
|
||||
// In resize region returns whether the mouse is currently in the
|
||||
// "resizeRegion"
|
||||
function inResizeRegion(_x, _elem)
|
||||
{
|
||||
et2_dataview_view_resizable.inResizeRegion = function (_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, _column)
|
||||
{
|
||||
if (overlay == null || helper == null)
|
||||
{
|
||||
return (ol > (_elem.outerWidth(true) - et2_dataview_view_resizable.RESIZE_BORDER));
|
||||
};
|
||||
et2_dataview_view_resizable.startResize = function (_outerElem, _elem, _callback, _column) {
|
||||
if (this.overlay == null || this.helper == null) {
|
||||
// Prevent text selection
|
||||
// FireFox handles highlight prevention (text selection) different than other browsers
|
||||
if (typeof _elem[0].style.MozUserSelect !="undefined")
|
||||
{
|
||||
if (typeof _elem[0].style.MozUserSelect != "undefined") {
|
||||
_elem[0].style.MozUserSelect = "none";
|
||||
}
|
||||
else
|
||||
{
|
||||
_elem[0].onselectstart = function() {
|
||||
else {
|
||||
_elem[0].onselectstart = function () {
|
||||
return false;
|
||||
};
|
||||
}
|
||||
|
||||
// Indicate resizing is in progress
|
||||
jQuery(_outerElem).addClass('egwResizing');
|
||||
|
||||
// Reset the "didResize" flag
|
||||
didResize = false;
|
||||
|
||||
this.didResize = false;
|
||||
// Create the resize helper
|
||||
var left = _elem.offset().left;
|
||||
helper = jQuery(document.createElement("div"))
|
||||
this.helper = jQuery(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 = jQuery(document.createElement("div"))
|
||||
this.overlay = jQuery(document.createElement("div"))
|
||||
.addClass("egwResizeOverlay")
|
||||
|
||||
.bind("mousemove", function(e) {
|
||||
didResize = true;
|
||||
resizeWidth = Math.max(e.pageX - left + RESIZE_ADD,
|
||||
_column && _column.minWidth ? _column.minWidth : RESIZE_MIN_WIDTH
|
||||
);
|
||||
helper.css("width", resizeWidth + "px");
|
||||
})
|
||||
|
||||
.bind("mouseup", function() {
|
||||
stopResize(_outerElem);
|
||||
|
||||
.bind("mousemove", function (e) {
|
||||
this.didResize = true;
|
||||
this.resizeWidth = Math.max(e.pageX - left + et2_dataview_view_resizable.RESIZE_ADD, _column && _column.minWidth ? _column.minWidth : et2_dataview_view_resizable.RESIZE_MIN_WIDTH);
|
||||
this.helper.css("width", this.resizeWidth + "px");
|
||||
}.bind(this))
|
||||
.bind("mouseup", function () {
|
||||
this.stopResize(_outerElem);
|
||||
// Reset text selection
|
||||
_elem[0].onselectstart = null;
|
||||
|
||||
// Call the callback if the user actually performed a resize
|
||||
if (didResize)
|
||||
{
|
||||
_callback(resizeWidth);
|
||||
if (this.didResize) {
|
||||
_callback(this.resizeWidth);
|
||||
}
|
||||
})
|
||||
}.bind(this))
|
||||
.appendTo("body");
|
||||
}
|
||||
}
|
||||
|
||||
function stopResize(_outerElem)
|
||||
{
|
||||
|
||||
};
|
||||
et2_dataview_view_resizable.stopResize = function (_outerElem) {
|
||||
jQuery(_outerElem).removeClass('egwResizing');
|
||||
if (helper != null)
|
||||
{
|
||||
helper.remove();
|
||||
helper = null;
|
||||
if (this.helper != null) {
|
||||
this.helper.remove();
|
||||
this.helper = null;
|
||||
}
|
||||
|
||||
if (overlay != null)
|
||||
{
|
||||
overlay.remove();
|
||||
overlay = null;
|
||||
if (this.overlay != null) {
|
||||
this.overlay.remove();
|
||||
this.overlay = null;
|
||||
}
|
||||
}
|
||||
|
||||
this.et2_dataview_makeResizeable = function(_elem, _callback, _context)
|
||||
{
|
||||
};
|
||||
// Define some constants
|
||||
et2_dataview_view_resizable.RESIZE_BORDER = 12;
|
||||
et2_dataview_view_resizable.RESIZE_MIN_WIDTH = 25;
|
||||
et2_dataview_view_resizable.RESIZE_ADD = 2; // Used to ensure mouse is under the resize element after resizing has finished
|
||||
et2_dataview_view_resizable.helper = null;
|
||||
et2_dataview_view_resizable.overlay = null;
|
||||
et2_dataview_view_resizable.didResize = false;
|
||||
et2_dataview_view_resizable.resizeWidth = 0;
|
||||
et2_dataview_view_resizable.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.bind("mousemove.resize", function (e) {
|
||||
var stopResize = false;
|
||||
// Stop switch to resize cursor if the mouse position
|
||||
// is more intended for scrollbar not the resize edge
|
||||
// 8pixel is an arbitary number for scrolbar area
|
||||
if (e.target.clientHeight < e.target.scrollHeight && e.target.offsetWidth - e.offsetX <= 8)
|
||||
{
|
||||
if (e.target.clientHeight < e.target.scrollHeight && e.target.offsetWidth - e.offsetX <= 8) {
|
||||
stopResize = true;
|
||||
}
|
||||
_elem.css("cursor", inResizeRegion(e.pageX, _elem) && !stopResize? "ew-resize" : "auto");
|
||||
_elem.css("cursor", et2_dataview_view_resizable.inResizeRegion(e.pageX, _elem) && !stopResize ? "ew-resize" : "auto");
|
||||
});
|
||||
|
||||
// Bind the "mousedown" event in the "resize" namespace
|
||||
_elem.bind("mousedown.resize", function(e) {
|
||||
_elem.bind("mousedown.resize", function (e) {
|
||||
var stopResize = false;
|
||||
// Stop resize if the mouse position is more intended
|
||||
// for scrollbar not the resize edge
|
||||
// 8pixel is an arbitary number for scrolbar area
|
||||
if (e.target.clientHeight < e.target.scrollHeight && e.target.offsetWidth - e.offsetX <= 8)
|
||||
{
|
||||
if (e.target.clientHeight < e.target.scrollHeight && e.target.offsetWidth - e.offsetX <= 8) {
|
||||
stopResize = true;
|
||||
}
|
||||
// Do not triger startResize if clicked element is select-tag, as it may causes conflict in some browsers
|
||||
if (inResizeRegion(e.pageX, _elem) && e.target.tagName != 'SELECT' && !stopResize)
|
||||
{
|
||||
if (et2_dataview_view_resizable.inResizeRegion(e.pageX, _elem) && e.target.tagName != 'SELECT' && !stopResize) {
|
||||
// Start the resizing
|
||||
startResize(outerTable, _elem, function(_w) {
|
||||
et2_dataview_view_resizable.startResize(outerTable, _elem, function (_w) {
|
||||
_callback.call(_context, _w);
|
||||
}, _context);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Bind double click for auto-size
|
||||
_elem.dblclick(function(e) {
|
||||
_elem.dblclick(function (e) {
|
||||
// Just show message for relative width columns
|
||||
if(_context && _context.relativeWidth)
|
||||
{
|
||||
return egw.message(egw.lang('You tried to automatically size a flex column, which always takes the rest of the space','info'));
|
||||
if (_context && _context.relativeWidth) {
|
||||
return egw.message(egw.lang('You tried to automatically size a flex column, which always takes the rest of the space', 'info'));
|
||||
}
|
||||
// Find column class - it's usually the first one
|
||||
var col_class = '';
|
||||
for(var i = 0; i < this.classList.length; i++)
|
||||
{
|
||||
if(this.classList[i].indexOf('gridCont') === 0)
|
||||
{
|
||||
for (var i = 0; i < this.classList.length; i++) {
|
||||
if (this.classList[i].indexOf('gridCont') === 0) {
|
||||
col_class = this.classList[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Find widest part, including header
|
||||
var column = jQuery(this);
|
||||
column.children().css('width','auto');
|
||||
column.children().css('width', 'auto');
|
||||
var max_width = column.children().children().innerWidth();
|
||||
var padding = column.outerWidth(true) - max_width;
|
||||
|
||||
var resize = jQuery(this).closest('.egwGridView_outer')
|
||||
.find('tbody td.'+col_class+'> div:first-child')
|
||||
.find('tbody td.' + col_class + '> div:first-child')
|
||||
.add(column.children())
|
||||
// Set column width to auto to allow space for everything to flow
|
||||
.css('width','auto');
|
||||
.css('width', 'auto');
|
||||
resize.children()
|
||||
.css({'white-space':'nowrap'})
|
||||
.each(function()
|
||||
{
|
||||
.css({ 'white-space': 'nowrap' })
|
||||
.each(function () {
|
||||
var col = jQuery(this);
|
||||
// Find visible (text) children and force them to not wrap
|
||||
var children = col.find('span:visible, time:visible, label:visible')
|
||||
.css({'white-space':'nowrap'})
|
||||
.css({ 'white-space': 'nowrap' });
|
||||
this.offsetWidth;
|
||||
children.each(function()
|
||||
{
|
||||
children.each(function () {
|
||||
var child = jQuery(this);
|
||||
this.offsetWidth;
|
||||
if(child.outerWidth() > max_width)
|
||||
{
|
||||
if (child.outerWidth() > max_width) {
|
||||
max_width = child.outerWidth();
|
||||
}
|
||||
window.getComputedStyle(this).width;
|
||||
});
|
||||
this.offsetWidth;
|
||||
if(col.innerWidth() > max_width)
|
||||
{
|
||||
if (col.innerWidth() > max_width) {
|
||||
max_width = col.innerWidth();
|
||||
}
|
||||
|
||||
// Reset children
|
||||
children.css('white-space','');
|
||||
children.css('display','');
|
||||
}
|
||||
)
|
||||
.css({'white-space':''});
|
||||
|
||||
children.css('white-space', '');
|
||||
children.css('display', '');
|
||||
})
|
||||
.css({ 'white-space': '' });
|
||||
// Reset column
|
||||
column.children().css('width','');
|
||||
resize.css('width','');
|
||||
_callback.call(_context, max_width+padding);
|
||||
column.children().css('width', '');
|
||||
resize.css('width', '');
|
||||
_callback.call(_context, max_width + padding);
|
||||
});
|
||||
};
|
||||
|
||||
this.et2_dataview_resetResizeable = function(_elem)
|
||||
{
|
||||
et2_dataview_view_resizable.et2_dataview_resetResizeable = function (_elem) {
|
||||
// Remove all events in the ".resize" namespace from the element
|
||||
_elem.unbind(".resize");
|
||||
};
|
||||
}).call(window);
|
||||
|
||||
return et2_dataview_view_resizable;
|
||||
}());
|
||||
exports.et2_dataview_view_resizable = et2_dataview_view_resizable;
|
||||
//# sourceMappingURL=et2_dataview_view_resizeable.js.map
|
230
api/js/etemplate/et2_dataview_view_resizeable.ts
Normal file
230
api/js/etemplate/et2_dataview_view_resizeable.ts
Normal file
@ -0,0 +1,230 @@
|
||||
/**
|
||||
* 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$
|
||||
*/
|
||||
|
||||
/**
|
||||
* This set of functions is currently only supporting resizing in ew-direction
|
||||
*/
|
||||
|
||||
export class et2_dataview_view_resizable
|
||||
{
|
||||
|
||||
// Define some constants
|
||||
public static readonly RESIZE_BORDER = 12;
|
||||
public static readonly RESIZE_MIN_WIDTH = 25;
|
||||
public static readonly RESIZE_ADD = 2; // Used to ensure mouse is under the resize element after resizing has finished
|
||||
|
||||
|
||||
public static helper : JQuery = null;
|
||||
public static overlay : JQuery = null;
|
||||
public static didResize = false;
|
||||
public static resizeWidth = 0;
|
||||
|
||||
// In resize region returns whether the mouse is currently in the
|
||||
// "resizeRegion"
|
||||
public static inResizeRegion(_x, _elem)
|
||||
{
|
||||
var ol = _x - _elem.offset().left;
|
||||
return (ol > (_elem.outerWidth(true) - et2_dataview_view_resizable.RESIZE_BORDER));
|
||||
}
|
||||
|
||||
public static startResize(_outerElem, _elem, _callback, _column)
|
||||
{
|
||||
if (this.overlay == null || this.helper == null)
|
||||
{
|
||||
// Prevent text selection
|
||||
// FireFox handles highlight prevention (text selection) different than other browsers
|
||||
if (typeof _elem[0].style.MozUserSelect !="undefined")
|
||||
{
|
||||
_elem[0].style.MozUserSelect = "none";
|
||||
}
|
||||
else
|
||||
{
|
||||
_elem[0].onselectstart = function() {
|
||||
return false;
|
||||
};
|
||||
}
|
||||
|
||||
// Indicate resizing is in progress
|
||||
jQuery(_outerElem).addClass('egwResizing');
|
||||
|
||||
// Reset the "didResize" flag
|
||||
this.didResize = false;
|
||||
|
||||
// Create the resize helper
|
||||
var left = _elem.offset().left;
|
||||
this.helper = jQuery(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
|
||||
this.overlay = jQuery(document.createElement("div"))
|
||||
.addClass("egwResizeOverlay")
|
||||
|
||||
.bind("mousemove", function(e) {
|
||||
this.didResize = true;
|
||||
this.resizeWidth = Math.max(e.pageX - left + et2_dataview_view_resizable.RESIZE_ADD,
|
||||
_column && _column.minWidth ? _column.minWidth : et2_dataview_view_resizable.RESIZE_MIN_WIDTH
|
||||
);
|
||||
this.helper.css("width", this.resizeWidth + "px");
|
||||
}.bind(this))
|
||||
|
||||
.bind("mouseup", function() {
|
||||
this.stopResize(_outerElem);
|
||||
|
||||
// Reset text selection
|
||||
_elem[0].onselectstart = null;
|
||||
|
||||
// Call the callback if the user actually performed a resize
|
||||
if (this.didResize)
|
||||
{
|
||||
_callback(this.resizeWidth);
|
||||
}
|
||||
}.bind(this))
|
||||
.appendTo("body");
|
||||
}
|
||||
}
|
||||
|
||||
public static stopResize(_outerElem)
|
||||
{
|
||||
|
||||
jQuery(_outerElem).removeClass('egwResizing');
|
||||
if (this.helper != null)
|
||||
{
|
||||
this.helper.remove();
|
||||
this.helper = null;
|
||||
}
|
||||
|
||||
if (this.overlay != null)
|
||||
{
|
||||
this.overlay.remove();
|
||||
this.overlay = null;
|
||||
}
|
||||
}
|
||||
|
||||
public static 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) {
|
||||
var stopResize = false;
|
||||
// Stop switch to resize cursor if the mouse position
|
||||
// is more intended for scrollbar not the resize edge
|
||||
// 8pixel is an arbitary number for scrolbar area
|
||||
if (e.target.clientHeight < e.target.scrollHeight && e.target.offsetWidth - e.offsetX <= 8)
|
||||
{
|
||||
stopResize = true;
|
||||
}
|
||||
_elem.css("cursor", et2_dataview_view_resizable.inResizeRegion(e.pageX, _elem) && !stopResize? "ew-resize" : "auto");
|
||||
});
|
||||
|
||||
// Bind the "mousedown" event in the "resize" namespace
|
||||
_elem.bind("mousedown.resize", function(e) {
|
||||
var stopResize = false;
|
||||
// Stop resize if the mouse position is more intended
|
||||
// for scrollbar not the resize edge
|
||||
// 8pixel is an arbitary number for scrolbar area
|
||||
if (e.target.clientHeight < e.target.scrollHeight && e.target.offsetWidth - e.offsetX <= 8)
|
||||
{
|
||||
stopResize = true;
|
||||
}
|
||||
// Do not triger startResize if clicked element is select-tag, as it may causes conflict in some browsers
|
||||
if (et2_dataview_view_resizable.inResizeRegion(e.pageX, _elem) && e.target.tagName != 'SELECT' && !stopResize)
|
||||
{
|
||||
// Start the resizing
|
||||
et2_dataview_view_resizable.startResize(outerTable, _elem, function(_w) {
|
||||
_callback.call(_context, _w);
|
||||
}, _context);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Bind double click for auto-size
|
||||
_elem.dblclick(function(e) {
|
||||
// Just show message for relative width columns
|
||||
if(_context && _context.relativeWidth)
|
||||
{
|
||||
return egw.message(egw.lang('You tried to automatically size a flex column, which always takes the rest of the space','info'));
|
||||
}
|
||||
// Find column class - it's usually the first one
|
||||
var col_class = '';
|
||||
for(var i = 0; i < this.classList.length; i++)
|
||||
{
|
||||
if(this.classList[i].indexOf('gridCont') === 0)
|
||||
{
|
||||
col_class = this.classList[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Find widest part, including header
|
||||
var column = jQuery(this);
|
||||
column.children().css('width','auto');
|
||||
var max_width = column.children().children().innerWidth();
|
||||
var padding = column.outerWidth(true) - max_width;
|
||||
|
||||
var resize = jQuery(this).closest('.egwGridView_outer')
|
||||
.find('tbody td.'+col_class+'> div:first-child')
|
||||
.add(column.children())
|
||||
// Set column width to auto to allow space for everything to flow
|
||||
.css('width','auto');
|
||||
resize.children()
|
||||
.css({'white-space':'nowrap'})
|
||||
.each(function()
|
||||
{
|
||||
var col = jQuery(this);
|
||||
// Find visible (text) children and force them to not wrap
|
||||
var children = col.find('span:visible, time:visible, label:visible')
|
||||
.css({'white-space':'nowrap'});
|
||||
this.offsetWidth;
|
||||
children.each(function()
|
||||
{
|
||||
var child = jQuery(this);
|
||||
this.offsetWidth;
|
||||
if(child.outerWidth() > max_width)
|
||||
{
|
||||
max_width = child.outerWidth();
|
||||
}
|
||||
window.getComputedStyle(this).width;
|
||||
});
|
||||
this.offsetWidth;
|
||||
if(col.innerWidth() > max_width)
|
||||
{
|
||||
max_width = col.innerWidth();
|
||||
}
|
||||
|
||||
// Reset children
|
||||
children.css('white-space','');
|
||||
children.css('display','');
|
||||
}
|
||||
)
|
||||
.css({'white-space':''});
|
||||
|
||||
// Reset column
|
||||
column.children().css('width','');
|
||||
resize.css('width','');
|
||||
_callback.call(_context, max_width+padding);
|
||||
});
|
||||
};
|
||||
|
||||
public static et2_dataview_resetResizeable = function(_elem)
|
||||
{
|
||||
// Remove all events in the ".resize" namespace from the element
|
||||
_elem.unbind(".resize");
|
||||
}
|
||||
}
|
||||
|
@ -537,7 +537,6 @@ var et2_nextmatch = /** @class */ (function (_super_1) {
|
||||
};
|
||||
/**
|
||||
* Nextmatch needs a namespace
|
||||
* @private
|
||||
*/
|
||||
et2_nextmatch.prototype._createNamespace = function () {
|
||||
return true;
|
||||
@ -909,7 +908,7 @@ var et2_nextmatch = /** @class */ (function (_super_1) {
|
||||
_colData.splice(remove_action_index, remove_action_index);
|
||||
}
|
||||
// Create the column manager and update the grid container
|
||||
// TODO this.dataview.setColumns(columnData);
|
||||
this.dataview.setColumns(columnData);
|
||||
for (var x = 0; x < _row.length; x++) {
|
||||
// Append the widget to this container
|
||||
this.addChild(_row[x].widget);
|
||||
|
@ -799,7 +799,6 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
|
||||
|
||||
/**
|
||||
* Nextmatch needs a namespace
|
||||
* @private
|
||||
*/
|
||||
protected _createNamespace(): boolean
|
||||
{
|
||||
@ -1269,7 +1268,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
|
||||
}
|
||||
|
||||
// Create the column manager and update the grid container
|
||||
// TODO this.dataview.setColumns(columnData);
|
||||
this.dataview.setColumns(columnData);
|
||||
|
||||
for (var x = 0; x < _row.length; x++)
|
||||
{
|
||||
@ -2613,7 +2612,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
|
||||
}
|
||||
|
||||
// Restore columns
|
||||
var pref = [];
|
||||
var pref: string | object | boolean = [];
|
||||
var app = this.getInstanceManager().app;
|
||||
if(this.options.settings.columnselection_pref.indexOf('nextmatch') == 0)
|
||||
{
|
||||
|
Loading…
Reference in New Issue
Block a user