extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 14:41:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Convert dynheight to typescript

Browse Source
This commit is contained in:
nathangray 2020-02-12 14:49:22 -07:00
parent ec83c3a181
commit 6857c42091
10 changed files with 494 additions and 347 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

266
api/js/etemplate/et2_extension_nextmatch.js
View File

@ -35,7 +35,7 @@
// Include all nextmatch subclasses
et2_extension_nextmatch_rowProvider;
et2_extension_nextmatch_controller;
et2_extension_nextmatch_dynheight;
et2_widget_dynheight;
// Include the grid classes
et2_dataview;
@ -2975,154 +2975,134 @@ et2_core_widget_1.et2_register_widget(et2_nextmatch_filterheader, ['nextmatch-fi
/**
* Filter by account
*/
// class et2_nextmatch_accountfilterheader extends et2_selectAccount implements et2_INextmatchHeader, et2_IResizeable
// {
// /**
// * Override to add change handler
// *
// */
// createInputWidget( )
// {
// // Make sure there's an option for all
// if(!this.options.empty_label && !this.options.select_options[""])
// {
// this.options.empty_label = this.options.label ? this.options.label : egw.lang("All");
// }
// super.createInputWidget(this, arguments);
//
// this.input.change(this, function(event) {
// if(typeof event.data.nextmatch == 'undefined')
// {
// // Not fully set up yet
// return;
// }
// var col_filter = {};
// col_filter[event.data.id] = event.data.getValue();
// event.data.nextmatch.applyFilters({col_filter: col_filter});
// });
//
// }
//
// /**
// * Set nextmatch is the function which has to be implemented for the
// * et2_INextmatchHeader interface.
// *
// * @param {et2_nextmatch} _nextmatch
// */
// setNextmatch( _nextmatch)
// {
// this.nextmatch = _nextmatch;
//
// // Set current filter value from nextmatch settings
// if(this.nextmatch.activeFilters.col_filter && this.nextmatch.activeFilters.col_filter[this.id])
// {
// this.set_value(this.nextmatch.activeFilters.col_filter[this.id]);
// }
// }
// // Make sure selectbox is not longer than the column
// resize( )
// {
// var max = jQuery(this.parentNode).innerWidth() - 4;
// var surroundings = this.getSurroundings()._widgetSurroundings;
// for(var i = 0; i < surroundings.length; i++)
// {
// max -= jQuery(surroundings[i]).outerWidth();
// }
// this.input.css("max-width",max + "px");
// }
//
// }
// et2_register_widget(et2_nextmatch_accountfilterheader, ['nextmatch-accountfilter']);
var et2_nextmatch_accountfilterheader = /** @class */ (function (_super) {
__extends(et2_nextmatch_accountfilterheader, _super);
function et2_nextmatch_accountfilterheader() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* Override to add change handler
*
*/
et2_nextmatch_accountfilterheader.prototype.createInputWidget = function () {
// Make sure there's an option for all
if (!this.options.empty_label && !this.options.select_options[""]) {
this.options.empty_label = this.options.label ? this.options.label : egw.lang("All");
}
_super.prototype.createInputWidget.call(this, this, arguments);
this.input.change(this, function (event) {
if (typeof event.data.nextmatch == 'undefined') {
// Not fully set up yet
return;
}
var col_filter = {};
col_filter[event.data.id] = event.data.getValue();
event.data.nextmatch.applyFilters({ col_filter: col_filter });
});
};
/**
* Set nextmatch is the function which has to be implemented for the
* et2_INextmatchHeader interface.
*
* @param {et2_nextmatch} _nextmatch
*/
et2_nextmatch_accountfilterheader.prototype.setNextmatch = function (_nextmatch) {
this.nextmatch = _nextmatch;
// Set current filter value from nextmatch settings
if (this.nextmatch.activeFilters.col_filter && this.nextmatch.activeFilters.col_filter[this.id]) {
this.set_value(this.nextmatch.activeFilters.col_filter[this.id]);
}
};
// Make sure selectbox is not longer than the column
et2_nextmatch_accountfilterheader.prototype.resize = function () {
var max = jQuery(this.parentNode).innerWidth() - 4;
var surroundings = this.getSurroundings()._widgetSurroundings;
for (var i = 0; i < surroundings.length; i++) {
max -= jQuery(surroundings[i]).outerWidth();
}
this.input.css("max-width", max + "px");
};
return et2_nextmatch_accountfilterheader;
}(et2_selectAccount));
exports.et2_nextmatch_accountfilterheader = et2_nextmatch_accountfilterheader;
et2_core_widget_1.et2_register_widget(et2_nextmatch_accountfilterheader, ['nextmatch-accountfilter']);
/**
* Filter allowing multiple values to be selected, base on a taglist instead
* of a regular selectbox
*
* @augments et2_taglist
*/
// class et2_nextmatch_taglistheader extends et2_taglist implements et2_INextmatchHeader, et2_IResizeable
// {
// static readonly _attributes : any = {
// autocomplete_url: { default: ''},
// multiple: { default: 'toggle'},
// onchange: {
// // @ts-ignore
// default: function(event) {
// if(typeof this.nextmatch === 'undefined')
// {
// // Not fully set up yet
// return;
// }
// var col_filter = {};
// col_filter[this.id] = this.getValue();
// // Set value so it's there for response (otherwise it gets cleared if options are updated)
// //event.data.set_value(event.data.input.val());
//
// this.nextmatch.applyFilters({col_filter: col_filter});
// }
// },
// rows: { default: 2},
// class: {default: 'nm_filterheader_taglist'}
// };
// private nextmatch: et2_nextmatch;
//
// /**
// * Override to add change handler
// *
// * @memberOf et2_nextmatch_filterheader
// */
// createInputWidget( )
// {
// // Make sure there's an option for all
// if(!this.options.empty_label && (!this.options.select_options || !this.options.select_options[""]))
// {
// this.options.empty_label = this.options.label ? this.options.label : egw.lang("All");
// }
// super.createInputWidget();
// }
//
// /**
// * Disable toggle if there are 2 or less options
// * @param {Object[]} options
// */
// set_select_options(options)
// {
// if(options && options.length <= 2 && this.options.multiple == 'toggle')
// {
// this.set_multiple(false);
// }
// super.set_select_options(options)
// }
//
// /**
// * Set nextmatch is the function which has to be implemented for the
// * et2_INextmatchHeader interface.
// *
// * @param {et2_nextmatch} _nextmatch
// */
// setNextmatch( _nextmatch)
// {
// this.nextmatch = _nextmatch;
//
// // Set current filter value from nextmatch settings
// if(this.nextmatch.activeFilters.col_filter && typeof this.nextmatch.activeFilters.col_filter[this.id] != "undefined")
// {
// this.set_value(this.nextmatch.activeFilters.col_filter[this.id]);
//
// // Make sure it's set in the nextmatch
// _nextmatch.activeFilters.col_filter[this.id] = this.getValue();
// }
// }
//
// // Make sure selectbox is not longer than the column
// resize( )
// {
// this.div.css("height",'');
// this.div.css("max-width",jQuery(this.parentNode).innerWidth() + "px");
// super.resize();
// }
//
// }
// et2_register_widget(et2_nextmatch_taglistheader, ['nextmatch-taglistheader']);
var et2_nextmatch_taglistheader = /** @class */ (function (_super) {
__extends(et2_nextmatch_taglistheader, _super);
function et2_nextmatch_taglistheader() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* Override to add change handler
*
* @memberOf et2_nextmatch_filterheader
*/
et2_nextmatch_taglistheader.prototype.createInputWidget = function () {
// Make sure there's an option for all
if (!this.options.empty_label && (!this.options.select_options || !this.options.select_options[""])) {
this.options.empty_label = this.options.label ? this.options.label : egw.lang("All");
}
_super.prototype.createInputWidget.call(this);
};
/**
* Disable toggle if there are 2 or less options
* @param {Object[]} options
*/
et2_nextmatch_taglistheader.prototype.set_select_options = function (options) {
if (options && options.length <= 2 && this.options.multiple == 'toggle') {
this.set_multiple(false);
}
_super.prototype.set_select_options.call(this, options);
};
/**
* Set nextmatch is the function which has to be implemented for the
* et2_INextmatchHeader interface.
*
* @param {et2_nextmatch} _nextmatch
*/
et2_nextmatch_taglistheader.prototype.setNextmatch = function (_nextmatch) {
this.nextmatch = _nextmatch;
// Set current filter value from nextmatch settings
if (this.nextmatch.activeFilters.col_filter && typeof this.nextmatch.activeFilters.col_filter[this.id] != "undefined") {
this.set_value(this.nextmatch.activeFilters.col_filter[this.id]);
// Make sure it's set in the nextmatch
_nextmatch.activeFilters.col_filter[this.id] = this.getValue();
}
};
// Make sure selectbox is not longer than the column
et2_nextmatch_taglistheader.prototype.resize = function () {
this.div.css("height", '');
this.div.css("max-width", jQuery(this.parentNode).innerWidth() + "px");
_super.prototype.resize.call(this);
};
et2_nextmatch_taglistheader._attributes = {
autocomplete_url: { default: '' },
multiple: { default: 'toggle' },
onchange: {
// @ts-ignore
default: function (event) {
if (typeof this.nextmatch === 'undefined') {
// Not fully set up yet
return;
}
var col_filter = {};
col_filter[this.id] = this.getValue();
// Set value so it's there for response (otherwise it gets cleared if options are updated)
//event.data.set_value(event.data.input.val());
this.nextmatch.applyFilters({ col_filter: col_filter });
}
},
rows: { default: 2 },
class: { default: 'nm_filterheader_taglist' }
};
return et2_nextmatch_taglistheader;
}(et2_taglist));
et2_core_widget_1.et2_register_widget(et2_nextmatch_taglistheader, ['nextmatch-taglistheader']);
/**
* Nextmatch filter that can filter for a selected entry
*/

286
api/js/etemplate/et2_extension_nextmatch.ts
View File

@ -34,7 +34,7 @@
// Include all nextmatch subclasses
et2_extension_nextmatch_rowProvider;
et2_extension_nextmatch_controller;
et2_extension_nextmatch_dynheight;
et2_widget_dynheight;
// Include the grid classes
et2_dataview;
@ -3760,64 +3760,64 @@ et2_register_widget(et2_nextmatch_filterheader, ['nextmatch-filterheader']);
/**
* Filter by account
*/
// class et2_nextmatch_accountfilterheader extends et2_selectAccount implements et2_INextmatchHeader, et2_IResizeable
// {
// /**
// * Override to add change handler
// *
// */
// createInputWidget( )
// {
// // Make sure there's an option for all
// if(!this.options.empty_label && !this.options.select_options[""])
// {
// this.options.empty_label = this.options.label ? this.options.label : egw.lang("All");
// }
// super.createInputWidget(this, arguments);
//
// this.input.change(this, function(event) {
// if(typeof event.data.nextmatch == 'undefined')
// {
// // Not fully set up yet
// return;
// }
// var col_filter = {};
// col_filter[event.data.id] = event.data.getValue();
// event.data.nextmatch.applyFilters({col_filter: col_filter});
// });
//
// }
//
// /**
// * Set nextmatch is the function which has to be implemented for the
// * et2_INextmatchHeader interface.
// *
// * @param {et2_nextmatch} _nextmatch
// */
// setNextmatch( _nextmatch)
// {
// this.nextmatch = _nextmatch;
//
// // Set current filter value from nextmatch settings
// if(this.nextmatch.activeFilters.col_filter && this.nextmatch.activeFilters.col_filter[this.id])
// {
// this.set_value(this.nextmatch.activeFilters.col_filter[this.id]);
// }
// }
// // Make sure selectbox is not longer than the column
// resize( )
// {
// var max = jQuery(this.parentNode).innerWidth() - 4;
// var surroundings = this.getSurroundings()._widgetSurroundings;
// for(var i = 0; i < surroundings.length; i++)
// {
// max -= jQuery(surroundings[i]).outerWidth();
// }
// this.input.css("max-width",max + "px");
// }
//
// }
// et2_register_widget(et2_nextmatch_accountfilterheader, ['nextmatch-accountfilter']);
export class et2_nextmatch_accountfilterheader extends et2_selectAccount implements et2_INextmatchHeader, et2_IResizeable
{
/**
* Override to add change handler
*
*/
createInputWidget( )
{
// Make sure there's an option for all
if(!this.options.empty_label && !this.options.select_options[""])
{
this.options.empty_label = this.options.label ? this.options.label : egw.lang("All");
}
super.createInputWidget(this, arguments);
this.input.change(this, function(event) {
if(typeof event.data.nextmatch == 'undefined')
{
// Not fully set up yet
return;
}
var col_filter = {};
col_filter[event.data.id] = event.data.getValue();
event.data.nextmatch.applyFilters({col_filter: col_filter});
});
}
/**
* Set nextmatch is the function which has to be implemented for the
* et2_INextmatchHeader interface.
*
* @param {et2_nextmatch} _nextmatch
*/
setNextmatch( _nextmatch)
{
this.nextmatch = _nextmatch;
// Set current filter value from nextmatch settings
if(this.nextmatch.activeFilters.col_filter && this.nextmatch.activeFilters.col_filter[this.id])
{
this.set_value(this.nextmatch.activeFilters.col_filter[this.id]);
}
}
// Make sure selectbox is not longer than the column
resize( )
{
var max = jQuery(this.parentNode).innerWidth() - 4;
var surroundings = this.getSurroundings()._widgetSurroundings;
for(var i = 0; i < surroundings.length; i++)
{
max -= jQuery(surroundings[i]).outerWidth();
}
this.input.css("max-width",max + "px");
}
}
et2_register_widget(et2_nextmatch_accountfilterheader, ['nextmatch-accountfilter']);
/**
* Filter allowing multiple values to be selected, base on a taglist instead
@ -3825,90 +3825,90 @@ et2_register_widget(et2_nextmatch_filterheader, ['nextmatch-filterheader']);
*
* @augments et2_taglist
*/
// class et2_nextmatch_taglistheader extends et2_taglist implements et2_INextmatchHeader, et2_IResizeable
// {
// static readonly _attributes : any = {
// autocomplete_url: { default: ''},
// multiple: { default: 'toggle'},
// onchange: {
// // @ts-ignore
// default: function(event) {
// if(typeof this.nextmatch === 'undefined')
// {
// // Not fully set up yet
// return;
// }
// var col_filter = {};
// col_filter[this.id] = this.getValue();
// // Set value so it's there for response (otherwise it gets cleared if options are updated)
// //event.data.set_value(event.data.input.val());
//
// this.nextmatch.applyFilters({col_filter: col_filter});
// }
// },
// rows: { default: 2},
// class: {default: 'nm_filterheader_taglist'}
// };
// private nextmatch: et2_nextmatch;
//
// /**
// * Override to add change handler
// *
// * @memberOf et2_nextmatch_filterheader
// */
// createInputWidget( )
// {
// // Make sure there's an option for all
// if(!this.options.empty_label && (!this.options.select_options || !this.options.select_options[""]))
// {
// this.options.empty_label = this.options.label ? this.options.label : egw.lang("All");
// }
// super.createInputWidget();
// }
//
// /**
// * Disable toggle if there are 2 or less options
// * @param {Object[]} options
// */
// set_select_options(options)
// {
// if(options && options.length <= 2 && this.options.multiple == 'toggle')
// {
// this.set_multiple(false);
// }
// super.set_select_options(options)
// }
//
// /**
// * Set nextmatch is the function which has to be implemented for the
// * et2_INextmatchHeader interface.
// *
// * @param {et2_nextmatch} _nextmatch
// */
// setNextmatch( _nextmatch)
// {
// this.nextmatch = _nextmatch;
//
// // Set current filter value from nextmatch settings
// if(this.nextmatch.activeFilters.col_filter && typeof this.nextmatch.activeFilters.col_filter[this.id] != "undefined")
// {
// this.set_value(this.nextmatch.activeFilters.col_filter[this.id]);
//
// // Make sure it's set in the nextmatch
// _nextmatch.activeFilters.col_filter[this.id] = this.getValue();
// }
// }
//
// // Make sure selectbox is not longer than the column
// resize( )
// {
// this.div.css("height",'');
// this.div.css("max-width",jQuery(this.parentNode).innerWidth() + "px");
// super.resize();
// }
//
// }
// et2_register_widget(et2_nextmatch_taglistheader, ['nextmatch-taglistheader']);
class et2_nextmatch_taglistheader extends et2_taglist implements et2_INextmatchHeader, et2_IResizeable
{
static readonly _attributes : any = {
autocomplete_url: { default: ''},
multiple: { default: 'toggle'},
onchange: {
// @ts-ignore
default: function(event) {
if(typeof this.nextmatch === 'undefined')
{
// Not fully set up yet
return;
}
var col_filter = {};
col_filter[this.id] = this.getValue();
// Set value so it's there for response (otherwise it gets cleared if options are updated)
//event.data.set_value(event.data.input.val());
this.nextmatch.applyFilters({col_filter: col_filter});
}
},
rows: { default: 2},
class: {default: 'nm_filterheader_taglist'}
};
private nextmatch: et2_nextmatch;
/**
* Override to add change handler
*
* @memberOf et2_nextmatch_filterheader
*/
createInputWidget( )
{
// Make sure there's an option for all
if(!this.options.empty_label && (!this.options.select_options || !this.options.select_options[""]))
{
this.options.empty_label = this.options.label ? this.options.label : egw.lang("All");
}
super.createInputWidget();
}
/**
* Disable toggle if there are 2 or less options
* @param {Object[]} options
*/
set_select_options(options)
{
if(options && options.length <= 2 && this.options.multiple == 'toggle')
{
this.set_multiple(false);
}
super.set_select_options(options)
}
/**
* Set nextmatch is the function which has to be implemented for the
* et2_INextmatchHeader interface.
*
* @param {et2_nextmatch} _nextmatch
*/
setNextmatch( _nextmatch)
{
this.nextmatch = _nextmatch;
// Set current filter value from nextmatch settings
if(this.nextmatch.activeFilters.col_filter && typeof this.nextmatch.activeFilters.col_filter[this.id] != "undefined")
{
this.set_value(this.nextmatch.activeFilters.col_filter[this.id]);
// Make sure it's set in the nextmatch
_nextmatch.activeFilters.col_filter[this.id] = this.getValue();
}
}
// Make sure selectbox is not longer than the column
resize( )
{
this.div.css("height",'');
this.div.css("max-width",jQuery(this.parentNode).innerWidth() + "px");
super.resize();
}
}
et2_register_widget(et2_nextmatch_taglistheader, ['nextmatch-taglistheader']);
/**
* Nextmatch filter that can filter for a selected entry

6
api/js/etemplate/et2_extension_nextmatch_rowProvider.js
View File

@ -67,6 +67,12 @@ var et2_nextmatch_rowProvider = /** @class */ (function () {
this._context = _context;
this._createEmptyPrototype();
}
et2_nextmatch_rowProvider.prototype.destroy = function () {
this._rowProvider.destroy();
this._subgridCallback = null;
this._context = null;
this._dataRow = null;
};
/**
* Creates the data row prototype.
*

10
api/js/etemplate/et2_extension_nextmatch_rowProvider.ts
View File

@ -21,7 +21,6 @@
import {et2_widget} from "./et2_core_widget";
import {et2_arrayMgrs_expand} from "./et2_core_arrayMgr";
import {et2_dataview_rowProvider} from "./et2_dataview_view_rowProvider";
/**
* The row provider contains prototypes (full clonable dom-trees)
@ -35,6 +34,7 @@ export class et2_nextmatch_rowProvider
private _context: any;
private _rootWidget: any;
private _template: any;
private _dataRow: any;
/**
* Creates the nextmatch row provider.
*
@ -55,6 +55,14 @@ export class et2_nextmatch_rowProvider
this._createEmptyPrototype();
}
destroy()
{
this._rowProvider.destroy();
this._subgridCallback = null;
this._context = null;
this._dataRow = null;
}
/**
* Creates the data row prototype.
*

152
api/js/etemplate/et2_widget_dynheight.js Normal file
View File

@ -0,0 +1,152 @@
"use strict";
/**
* EGroupware eTemplate2 - JS Dynheight object
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package etemplate
* @subpackage api
* @link http://www.egroupware.org
* @author Andreas Stöckel
* @copyright Stylite 2011
* @version $Id$
*/
Object.defineProperty(exports, "__esModule", { value: true });
/*egw:use
/vendor/bower-asset/jquery/dist/jquery.js;
et2_core_inheritance;
*/
/**
* Object which resizes an inner node to the maximum extend of an outer node
* (without creating a scrollbar) - it achieves that by performing some very
* nasty and time consuming calculations.
*/
var et2_dynheight = /** @class */ (function () {
function et2_dynheight(_outerNode, _innerNode, _minHeight) {
this.initialized = false;
this.minHeight = 0;
this.bottomNodes = [];
this.innerMargin = 0;
this.outerMargin = 0;
this.outerNode = jQuery(_outerNode);
this.innerNode = jQuery(_innerNode);
this.minHeight = _minHeight;
}
/**
* Resizes the inner node. When this is done, the callback function is
* called.
*
* @param {function} _callback
* @param {object} _context
*/
et2_dynheight.prototype.update = function (_callback, _context) {
// Check whether the inner node is actually visible - if not, don't
// trigger the callback function
if (this.innerNode.is(":visible")) {
// Initialize the height calculation
this._initialize();
// Get the outer container height and offset, if available
var oh = this.outerNode.height();
var ot = this.outerNode.offset() ? this.outerNode.offset().top : 0;
// Get top and height of the inner node
var it = this.innerNode.offset().top;
// Calculate the height of the "bottomNodes"
var bminTop = this.bottomNodes.length ? Infinity : 0;
var bmaxBot = 0;
for (var i = 0; i < this.bottomNodes.length; i++) {
// Ignore hidden popups
if (this.bottomNodes[i].find('.action_popup').length) {
egw.debug('warn', "Had to skip a hidden popup - it should be removed", this.bottomNodes[i].find('.action_popup'));
continue;
}
// Ignore other hidden nodes
if (!this.bottomNodes[i].is(':visible'))
continue;
// Get height, top and bottom and calculate the maximum/minimum
var bh_1 = this.bottomNodes[i].outerHeight(true);
var bt = this.bottomNodes[i].offset().top;
var bb = bh_1 + bt;
if (i == 0 || bminTop > bt) {
bminTop = bt;
}
if (i == 0 || bmaxBot < bb) {
bmaxBot = bb;
}
}
// Get the height of the bottom container
var bh = Math.max(0, bmaxBot - bminTop);
// Calculate the new height of the inner container
var h = Math.max(this.minHeight, oh + ot - it - bh -
this.innerMargin - this.outerMargin);
this.innerNode.height(h);
// Update the width
// Some checking to make sure it doesn't overflow the width when user
// resizes the window
var w = this.outerNode.width();
if (w > jQuery(window).width()) {
// 50px border, totally arbitrary, but we just need to make sure it's inside
w = jQuery(window).width() - 50;
}
if (w != this.innerNode.outerWidth()) {
this.innerNode.width(w);
}
// Call the callback function
if (typeof _callback != "undefined") {
_callback.call(_context, w, h);
}
}
};
/**
* Function used internally which collects all DOM-Nodes which are located
* below this element.
*
* @param {HTMLElement} _node
* @param {number} _bottom
*/
et2_dynheight.prototype._collectBottomNodes = function (_node, _bottom) {
// Calculate the bottom position of the inner node
if (typeof _bottom == "undefined") {
_bottom = this.innerNode.offset().top + this.innerNode.height();
}
if (_node) {
// Accumulate the outer margin of the parent elements
var node = jQuery(_node);
var ooh = node.outerHeight(true);
var oh = node.height();
this.outerMargin += (ooh - oh) / 2; // Divide by 2 as the value contains margin-top and -bottom
// Iterate over the children of the given node and do the same
// recursively to the parent nodes until the _outerNode or body is
// reached.
var self_1 = this;
jQuery(_node).children().each(function () {
var $this = jQuery(this);
var top = $this.offset().top;
if (this != self_1.innerNode[0] && top >= _bottom) {
self_1.bottomNodes.push($this);
}
});
if (_node != this.outerNode[0] && _node != jQuery("body")[0]) {
this._collectBottomNodes(_node.parentNode, _bottom);
}
}
};
/**
* Used internally to calculate some information which will not change over
* the time.
*/
et2_dynheight.prototype._initialize = function () {
if (!this.initialized) {
// Collect all bottomNodes and calculates the outer margin
this.bottomNodes = [];
this.outerMargin = 0;
this._collectBottomNodes(this.innerNode[0].parentNode);
// Calculate the inner margin
var ioh = this.innerNode.outerHeight(true);
var ih = this.innerNode.height();
this.innerMargin = ioh - ih;
this.initialized = true;
}
};
return et2_dynheight;
}());
exports.et2_dynheight = et2_dynheight;
//# sourceMappingURL=et2_widget_dynheight.js.map

93
api/js/etemplate/et2_extension_nextmatch_dynheight.js → api/js/etemplate/et2_widget_dynheight.ts
View File

@ -19,32 +19,25 @@
* Object which resizes an inner node to the maximum extend of an outer node
* (without creating a scrollbar) - it achieves that by performing some very
* nasty and time consuming calculations.
*
* @augments Class
*/
var et2_dynheight = (function(){ "use strict"; return Class.extend(
export class et2_dynheight
{
private initialized: boolean = false;
private outerNode: JQuery;
private innerNode: JQuery;
private minHeight: number = 0;
private bottomNodes: any[] = [];
private innerMargin: number = 0;
private outerMargin: number = 0;
constructor(_outerNode, _innerNode, _minHeight)
{
/**
* Constructor for the dynheight object
*
* @param _outerNode is the node which surrounds the _innerNode and to
* which extend the innerNode should be expanded without creating a
* scrollbar. Note: The outer node must be a parent of the inner node.
* @param _innerNode is the node which should be scaled. Call update to
* scale the node.
* @param _minHeight is the minimum height the inner node should have
* @memberOf et2_dynheight
*/
init: function(_outerNode, _innerNode, _minHeight) {
this.outerNode = jQuery(_outerNode);
this.innerNode = jQuery(_innerNode);
this.minHeight = _minHeight;
this.bottomNodes = [];
this.initialized = false;
this.innerMargin = 0;
this.outerMargin = 0;
},
}
/**
* Resizes the inner node. When this is done, the callback function is
@ -53,7 +46,8 @@ var et2_dynheight = (function(){ "use strict"; return Class.extend(
* @param {function} _callback
* @param {object} _context
*/
update: function(_callback, _context) {
update( _callback, _context)
{
// Check whether the inner node is actually visible - if not, don't
// trigger the callback function
if (this.innerNode.is(":visible"))
@ -62,16 +56,16 @@ var et2_dynheight = (function(){ "use strict"; return Class.extend(
this._initialize();
// Get the outer container height and offset, if available
var oh = this.outerNode.height();
var ot = this.outerNode.offset() ? this.outerNode.offset().top : 0;
const oh = this.outerNode.height();
const ot = this.outerNode.offset() ? this.outerNode.offset().top : 0;
// Get top and height of the inner node
var it = this.innerNode.offset().top;
const it = this.innerNode.offset().top;
// Calculate the height of the "bottomNodes"
var bminTop = this.bottomNodes.length ? Infinity : 0;
var bmaxBot = 0;
for (var i = 0; i < this.bottomNodes.length; i++)
let bminTop = this.bottomNodes.length ? Infinity : 0;
let bmaxBot = 0;
for (let i = 0; i < this.bottomNodes.length; i++)
{
// Ignore hidden popups
if(this.bottomNodes[i].find('.action_popup').length)
@ -85,9 +79,9 @@ var et2_dynheight = (function(){ "use strict"; return Class.extend(
if(!this.bottomNodes[i].is(':visible')) continue;
// Get height, top and bottom and calculate the maximum/minimum
var bh = this.bottomNodes[i].outerHeight(true);
var bt = this.bottomNodes[i].offset().top;
var bb = bh + bt;
let bh = this.bottomNodes[i].outerHeight(true);
let bt = this.bottomNodes[i].offset().top;
const bb = bh + bt;
if (i == 0 || bminTop > bt)
{
@ -101,17 +95,17 @@ var et2_dynheight = (function(){ "use strict"; return Class.extend(
}
// Get the height of the bottom container
var bh = Math.max(0,bmaxBot - bminTop);
const bh = Math.max(0, bmaxBot - bminTop);
// Calculate the new height of the inner container
var h = Math.max(this.minHeight, oh + ot - it - bh -
const h = Math.max(this.minHeight, oh + ot - it - bh -
this.innerMargin - this.outerMargin);
this.innerNode.height(h);
// Update the width
// Some checking to make sure it doesn't overflow the width when user
// resizes the window
var w = this.outerNode.width();
let w = this.outerNode.width();
if (w > jQuery(window).width())
{
// 50px border, totally arbitrary, but we just need to make sure it's inside
@ -128,16 +122,17 @@ var et2_dynheight = (function(){ "use strict"; return Class.extend(
_callback.call(_context, w, h);
}
}
},
}
/**
* Function used internally which collects all DOM-Nodes which are located
* below this element.
*
* @param {DOMElement} _node
* @param {HTMLElement} _node
* @param {number} _bottom
*/
_collectBottomNodes: function(_node, _bottom) {
_collectBottomNodes( _node : any, _bottom? : number)
{
// Calculate the bottom position of the inner node
if (typeof _bottom == "undefined")
{
@ -147,18 +142,18 @@ var et2_dynheight = (function(){ "use strict"; return Class.extend(
if (_node)
{
// Accumulate the outer margin of the parent elements
var node = jQuery(_node);
var ooh = node.outerHeight(true);
var oh = node.height();
const node = jQuery(_node);
const ooh = node.outerHeight(true);
const oh = node.height();
this.outerMargin += (ooh - oh) / 2; // Divide by 2 as the value contains margin-top and -bottom
// Iterate over the children of the given node and do the same
// recursively to the parent nodes until the _outerNode or body is
// reached.
var self = this;
const self = this;
jQuery(_node).children().each(function() {
var $this = jQuery(this);
var top = $this.offset().top;
const $this = jQuery(this);
const top = $this.offset().top;
if (this != self.innerNode[0] && top >= _bottom)
{
self.bottomNodes.push($this);
@ -170,13 +165,14 @@ var et2_dynheight = (function(){ "use strict"; return Class.extend(
this._collectBottomNodes(_node.parentNode, _bottom);
}
}
},
}
/**
* Used internally to calculate some information which will not change over
* the time.
*/
_initialize: function() {
_initialize( )
{
if (!this.initialized)
{
// Collect all bottomNodes and calculates the outer margin
@ -185,13 +181,12 @@ var et2_dynheight = (function(){ "use strict"; return Class.extend(
this._collectBottomNodes(this.innerNode[0].parentNode);
// Calculate the inner margin
var ioh = this.innerNode.outerHeight(true);
var ih = this.innerNode.height();
const ioh = this.innerNode.outerHeight(true);
const ih = this.innerNode.height();
this.innerMargin = ioh - ih;
this.initialized = true;
}
}
});}).call(this);
}

11
api/js/etemplate/et2_widget_historylog.js
View File

@ -29,6 +29,7 @@ var et2_core_valueWidget_1 = require("./et2_core_valueWidget");
var et2_dataview_1 = require("./et2_dataview");
var et2_dataview_model_columns_1 = require("./et2_dataview_model_columns");
var et2_dataview_controller_1 = require("./et2_dataview_controller");
var et2_widget_diff_1 = require("./et2_widget_diff");
/**
* eTemplate history log widget displays a list of changes to the current record.
* The widget is encapsulated, and only needs the record's ID, and a map of
@ -200,7 +201,7 @@ var et2_historylog = /** @class */ (function (_super) {
if (this.controller)
this.controller.destroy();
if (this.dynheight)
this.dynheight.free();
this.dynheight.destroy();
_super.prototype.destroy.call(this);
};
/**
@ -285,6 +286,7 @@ var et2_historylog = /** @class */ (function (_super) {
// Widget for text diffs
var diff = et2_createWidget('diff', {}, this);
this.diff = {
// @ts-ignore
widget: diff,
nodes: jQuery(diff.getDetachedNodes())
};
@ -436,7 +438,7 @@ var et2_historylog = /** @class */ (function (_super) {
}
for (var j = 0; j < widget._children.length; j++) {
nodes.push(self.fields[_data.status].nodes[j].clone());
if (widget._children[j].instanceOf(et2_diff)) {
if (widget._children[j].instanceOf(et2_widget_diff_1.et2_diff)) {
self._spanValueColumns(jQuery(this));
}
}
@ -543,8 +545,9 @@ var et2_historylog = /** @class */ (function (_super) {
}
// Resize diff widgets to match new space
if (this.dataview) {
var columns = this.dataview.getColumnMgr().columnWidths;
jQuery('.et2_diff', this.div).closest('.innerContainer').width(columns[et2_historylog.NEW_VALUE] + columns[et2_historylog.OLD_VALUE]);
var columns = this.dataview.getColumnMgr();
jQuery('.et2_diff', this.div).closest('.innerContainer')
.width(columns.getColumnWidth(et2_historylog.NEW_VALUE) + columns.getColumnWidth(et2_historylog.OLD_VALUE));
}
};
et2_historylog._attributes = {

13
api/js/etemplate/et2_widget_historylog.ts
View File

@ -25,6 +25,7 @@ import {et2_valueWidget} from "./et2_core_valueWidget";
import {et2_dataview} from "./et2_dataview";
import {et2_dataview_column} from "./et2_dataview_model_columns";
import {et2_dataview_controller} from "./et2_dataview_controller";
import {et2_diff} from "./et2_widget_diff";
/**
* eTemplate history log widget displays a list of changes to the current record.
@ -288,7 +289,7 @@ export class et2_historylog extends et2_valueWidget implements et2_IDataProvider
// Free the grid components
if(this.dataview) this.dataview.destroy();
if(this.controller) this.controller.destroy();
if(this.dynheight) this.dynheight.free();
if(this.dynheight) this.dynheight.destroy();
super.destroy();
}
@ -395,8 +396,9 @@ export class et2_historylog extends et2_valueWidget implements et2_IDataProvider
};
}
// Widget for text diffs
var diff = et2_createWidget('diff', {}, this);
const diff = et2_createWidget('diff', {}, this);
this.diff = {
// @ts-ignore
widget: diff,
nodes: jQuery(diff.getDetachedNodes())
};
@ -582,7 +584,7 @@ export class et2_historylog extends et2_valueWidget implements et2_IDataProvider
let row = this.dataview.rowProvider.getPrototype("default");
let self = this;
jQuery("div", row).each(function (i) {
let nodes = [];
let nodes : any[] | JQuery = [];
let widget = et2_historylog.columns[i].widget;
let value = _data[et2_historylog.columns[i].id];
if(et2_historylog.OWNER === i && _data['share_email'])
@ -738,8 +740,9 @@ export class et2_historylog extends et2_valueWidget implements et2_IDataProvider
// Resize diff widgets to match new space
if(this.dataview)
{
var columns = this.dataview.getColumnMgr().columnWidths;
jQuery('.et2_diff', this.div).closest('.innerContainer').width(columns[et2_historylog.NEW_VALUE] + columns[et2_historylog.OLD_VALUE]);
var columns = this.dataview.getColumnMgr();
jQuery('.et2_diff', this.div).closest('.innerContainer')
.width(columns.getColumnWidth(et2_historylog.NEW_VALUE) + columns.getColumnWidth(et2_historylog.OLD_VALUE));
}
}
}

2
api/js/etemplate/test/test_dataview.html
View File

@ -27,7 +27,7 @@
<script src="../et2_core_interfaces.js"></script>
<script src="../et2_core_common.js"></script>
<script src="../et2_extension_nextmatch_dynheight.js"></script>
<script src="../et2_widget_dynheight.js"></script>
<script src="../et2_dataview_interfaces.js"></script>
<script src="../et2_dataview_controller.js"></script>

2
api/js/etemplate/test/test_xml.html
View File

@ -69,7 +69,7 @@
<script src="../et2_widget_progress.js"></script>
<script src="../et2_extension_nextmatch.js"></script>
<script src="../et2_extension_nextmatch_dynheight.js"></script>
<script src="../et2_widget_dynheight.js"></script>
<script src="../et2_dataview_interfaces.js"></script>
<script src="../et2_dataview_model_dataProvider.js"></script>