holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Second run at TS for valueWidget, restoring what was lost

Browse Source
This commit is contained in:
nathangray 2020-01-21 07:06:34 -07:00 committed by Hadi Nategh
parent e0259fe6f2
commit 3a21a5bc6b
2 changed files with 274 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

576
api/js/etemplate/et2_core_inputWidget.js
View File

@ -1,3 +1,4 @@
"use strict";
/** /**
* EGroupware eTemplate2 - JS Widget base class * EGroupware eTemplate2 - JS Widget base class
* *
@ -6,317 +7,280 @@
* @subpackage api * @subpackage api
* @link http://www.egroupware.org * @link http://www.egroupware.org
* @author Andreas Stöckel * @author Andreas Stöckel
* @copyright Stylite 2011
* @version $Id$
*/ */
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
/*egw:uses /*egw:uses
/vendor/bower-asset/jquery/dist/jquery.js; /vendor/bower-asset/jquery/dist/jquery.js;
et2_core_interfaces; et2_core_interfaces;
et2_core_valueWidget; et2_core_valueWidget;
*/ */
require("./et2_core_common");
var et2_core_inheritance_1 = require("./et2_core_inheritance");
var et2_core_DOMWidget_1 = require("./et2_core_DOMWidget");
var et2_core_valueWidget_1 = require("./et2_core_valueWidget");
require("./et2_types");
/** /**
* et2_inputWidget derrives from et2_simpleWidget and implements the IInput * et2_inputWidget derrives from et2_simpleWidget and implements the IInput
* interface. When derriving from this class, call setDOMNode with an input * interface. When derriving from this class, call setDOMNode with an input
* DOMNode. * DOMNode.
*
* @augments et2_valueWidget
*/ */
var et2_inputWidget = (function(){ "use strict"; return et2_valueWidget.extend([et2_IInput,et2_ISubmitListener], var et2_inputWidget = /** @class */ (function (_super) {
{ __extends(et2_inputWidget, _super);
attributes: { /**
"needed": { * Constructor
"name": "Required", */
"default": false, function et2_inputWidget(_parent, _attrs, _child) {
"type": "boolean", var _this =
"description": "If required, the user must enter a value before the form can be submitted" // Call the inherited constructor
}, _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_core_DOMWidget_1.et2_DOMWidget._attributes, _child || {})) || this;
"onchange": { // mark value as not initialised, so set_value can determine if it is necessary to trigger change event
"name": "onchange", _this._oldValue = et2_no_init;
"type": "js", _this._labelContainer = null;
"default": et2_no_init, return _this;
"description": "JS code which is executed when the value changes." }
}, et2_inputWidget.prototype.destroy = function () {
"onfocus": { var node = this.getInputNode();
"name": "onfocus", if (node) {
"type": "js", jQuery(node).unbind("change.et2_inputWidget");
"default": et2_no_init, jQuery(node).unbind("focus");
"description": "JS code which get executed when wiget receives focus." }
}, _super.prototype.destroy.call(this);
"validation_error": { this._labelContainer = null;
"name": "Validation Error", };
"type": "string", /**
"default": et2_no_init, * Load the validation errors from the server
"description": "Used internally to store the validation error that came from the server." *
}, * @param {object} _attrs
"tabindex": { */
"name": "Tab index", et2_inputWidget.prototype.transformAttributes = function (_attrs) {
"type": "integer", _super.prototype.transformAttributes.call(this, _attrs);
"default": et2_no_init, // Check whether an validation error entry exists
"description": "Specifies the tab order of a widget when the 'tab' button is used for navigating." if (this.id && this.getArrayMgr("validation_errors")) {
}, var val = this.getArrayMgr("validation_errors").getEntry(this.id);
readonly: { if (val) {
name: "readonly", _attrs["validation_error"] = val;
type: "boolean", }
"default": false, }
description: "Does NOT allow user to enter data, just displays existing data" };
} et2_inputWidget.prototype.attachToDOM = function () {
}, var node = this.getInputNode();
if (node) {
/** jQuery(node)
* Constructor .off('.et2_inputWidget')
* .bind("change.et2_inputWidget", this, function (e) {
* @memberOf et2_inputWidget e.data.change.call(e.data, this);
*/ })
init: function() { .bind("focus.et2_inputWidget", this, function (e) {
this._super.apply(this, arguments); e.data.focus.call(e.data, this);
});
// mark value as not initialised, so set_value can determine if it is necessary to trigger change event }
this._oldValue = et2_no_init; return _super.prototype.attachToDOM.call(this);
this._labelContainer = null; // jQuery(this.getInputNode()).attr("novalidate","novalidate"); // Stop browser from getting involved
}, // jQuery(this.getInputNode()).validator();
};
destroy: function() { et2_inputWidget.prototype.detatchFromDOM = function () {
var node = this.getInputNode(); // if(this.getInputNode()) {
if (node) // jQuery(this.getInputNode()).data("validator").destroy();
{ // }
jQuery(node).unbind("change.et2_inputWidget"); _super.prototype.detachFromDOM.call(this);
jQuery(node).unbind("focus"); };
} et2_inputWidget.prototype.change = function (_node) {
var messages = [];
this._super.apply(this, arguments); var valid = this.isValid(messages);
// Passing false will clear any set messages
this._labelContainer = null; this.set_validation_error(valid ? false : messages);
}, if (valid && this.onchange) {
if (typeof this.onchange == 'function') {
/** // Make sure function gets a reference to the widget
* Load the validation errors from the server var args = Array.prototype.slice.call(arguments);
* if (args.indexOf(this) == -1)
* @param {object} _attrs args.push(this);
*/ return this.onchange.apply(this, args);
transformAttributes: function(_attrs) { }
this._super.apply(this, arguments); else {
return (et2_compileLegacyJS(this.options.onchange, this, _node))();
// Check whether an validation error entry exists }
if (this.id && this.getArrayMgr("validation_errors")) }
{ return valid;
var val = this.getArrayMgr("validation_errors").getEntry(this.id); };
if (val) et2_inputWidget.prototype.focus = function (_node) {
{ if (typeof this.options.onfocus == 'function') {
_attrs["validation_error"] = val; // Make sure function gets a reference to the widget
} var args = Array.prototype.slice.call(arguments);
} if (args.indexOf(this) == -1)
}, args.push(this);
return this.options.onfocus.apply(this, args);
attachToDOM: function() { }
var node = this.getInputNode(); };
if (node) /**
{ * Set value of widget and trigger for real changes a change event
jQuery(node) *
.off('.et2_inputWidget') * First initialisation (_oldValue === et2_no_init) is NOT considered a change!
.bind("change.et2_inputWidget", this, function(e) { *
e.data.change.call(e.data, this); * @param {string} _value value to set
}) */
.bind("focus.et2_inputWidget", this, function(e) { et2_inputWidget.prototype.set_value = function (_value) {
e.data.focus.call(e.data, this); var node = this.getInputNode();
}); if (node) {
} jQuery(node).val(_value);
if (this.isAttached() && this._oldValue !== et2_no_init && this._oldValue !== _value) {
this._super.apply(this,arguments); jQuery(node).change();
}
// jQuery(this.getInputNode()).attr("novalidate","novalidate"); // Stop browser from getting involved }
// jQuery(this.getInputNode()).validator(); this._oldValue = _value;
}, };
et2_inputWidget.prototype.set_id = function (_value) {
detatchFromDOM: function() { this.id = _value;
// if(this.getInputNode()) { this.dom_id = _value && this.getInstanceManager() ? this.getInstanceManager().uniqueId + '_' + this.id : _value;
// jQuery(this.getInputNode()).data("validator").destroy(); // Set the id of the _input_ node (in contrast to the default
// } // implementation, which sets the base node)
this._super.apply(this,arguments); var node = this.getInputNode();
}, if (node) {
// Unique ID to prevent DOM collisions across multiple templates
change: function(_node) { if (_value != "") {
var messages = []; node.setAttribute("id", this.dom_id);
var valid = this.isValid(messages); node.setAttribute("name", _value);
}
// Passing false will clear any set messages else {
this.set_validation_error(valid ? false : messages); node.removeAttribute("id");
node.removeAttribute("name");
if (valid && this.onchange) }
{ }
if(typeof this.onchange == 'function') };
{ et2_inputWidget.prototype.set_needed = function (_value) {
// Make sure function gets a reference to the widget var node = this.getInputNode();
var args = Array.prototype.slice.call(arguments); if (node) {
if(args.indexOf(this) == -1) args.push(this); if (_value && !this.options.readonly) {
jQuery(node).attr("required", "required");
return this.onchange.apply(this, args); }
} else { else {
return (et2_compileLegacyJS(this.options.onchange, this, _node))(); node.removeAttribute("required");
} }
} }
return valid; };
}, et2_inputWidget.prototype.set_validation_error = function (_value) {
var node = this.getInputNode();
focus: function(_node) if (node) {
{ if (_value === false) {
if(typeof this.options.onfocus == 'function') this.hideMessage();
{ jQuery(node).removeClass("invalid");
// Make sure function gets a reference to the widget }
var args = Array.prototype.slice.call(arguments); else {
if(args.indexOf(this) == -1) args.push(this); this.showMessage(_value, "validation_error");
jQuery(node).addClass("invalid");
return this.options.onfocus.apply(this, args); // If on a tab, switch to that tab so user can see it
} var widget = this;
}, while (widget.getParent() && widget.getType() != 'tabbox') {
widget = widget.getParent();
/** }
* Set value of widget and trigger for real changes a change event if (widget.getType() == 'tabbox')
* widget.activateTab(this);
* First initialisation (_oldValue === et2_no_init) is NOT considered a change! }
* }
* @param {string} _value value to set };
*/ /**
set_value: function(_value) * Set tab index
{ *
var node = this.getInputNode(); * @param {number} index
if (node) */
{ et2_inputWidget.prototype.set_tabindex = function (index) {
jQuery(node).val(_value); jQuery(this.getInputNode()).attr("tabindex", index);
if(this.isAttached() && this._oldValue !== et2_no_init && this._oldValue !== _value) };
{ et2_inputWidget.prototype.getInputNode = function () {
jQuery(node).change(); return this.node;
} };
} et2_inputWidget.prototype.get_value = function () {
this._oldValue = _value; return this.getValue();
}, };
et2_inputWidget.prototype.getValue = function () {
set_id: function(_value) { var node = this.getInputNode();
this.id = _value; if (node) {
this.dom_id = _value && this.getInstanceManager() ? this.getInstanceManager().uniqueId+'_'+this.id : _value; var val = jQuery(node).val();
return val;
// Set the id of the _input_ node (in contrast to the default }
// implementation, which sets the base node) return this._oldValue;
var node = this.getInputNode(); };
if (node) et2_inputWidget.prototype.isDirty = function () {
{ return this._oldValue != this.getValue();
// Unique ID to prevent DOM collisions across multiple templates };
if (_value != "") et2_inputWidget.prototype.resetDirty = function () {
{ this._oldValue = this.getValue();
node.setAttribute("id", this.dom_id); };
node.setAttribute("name", _value); et2_inputWidget.prototype.isValid = function (messages) {
} var ok = true;
else // Check for required
{ if (this.options && this.options.needed && !this.options.readonly && !this.disabled &&
node.removeAttribute("id"); (this.getValue() == null || this.getValue().valueOf() == '')) {
node.removeAttribute("name"); messages.push(this.egw().lang('Field must not be empty !!!'));
} ok = false;
} }
}, return ok;
};
set_needed: function(_value) { /**
var node = this.getInputNode(); * Called whenever the template gets submitted. We return false if the widget
if (node) * is not valid, which cancels the submission.
{ *
if(_value && !this.options.readonly) { * @param _values contains the values which will be sent to the server.
jQuery(node).attr("required", "required"); * Listeners may change these values before they get submitted.
} else { */
node.removeAttribute("required"); et2_inputWidget.prototype.submit = function (_values) {
} var messages = [];
} var valid = this.isValid(messages);
// Passing false will clear any set messages
}, this.set_validation_error(valid ? false : messages);
return valid;
set_validation_error: function(_value) { };
var node = this.getInputNode(); et2_inputWidget._attributes = {
if (node) "needed": {
{ "name": "Required",
if (_value === false) "default": false,
{ "type": "boolean",
this.hideMessage(); "description": "If required, the user must enter a value before the form can be submitted"
jQuery(node).removeClass("invalid"); },
} "onchange": {
else "name": "onchange",
{ "type": "js",
this.showMessage(_value, "validation_error"); "default": et2_no_init,
jQuery(node).addClass("invalid"); "description": "JS code which is executed when the value changes."
},
// If on a tab, switch to that tab so user can see it "onfocus": {
var widget = this; "name": "onfocus",
while(widget._parent && widget._type != 'tabbox') "type": "js",
{ "default": et2_no_init,
widget = widget._parent; "description": "JS code which get executed when wiget receives focus."
} },
if (widget._type == 'tabbox') widget.activateTab(this); "validation_error": {
} "name": "Validation Error",
} "type": "string",
}, "default": et2_no_init,
"description": "Used internally to store the validation error that came from the server."
/** },
* Set tab index "tabindex": {
* "name": "Tab index",
* @param {number} index "type": "integer",
*/ "default": et2_no_init,
set_tabindex: function(index) { "description": "Specifies the tab order of a widget when the 'tab' button is used for navigating."
jQuery(this.getInputNode()).attr("tabindex", index); },
}, readonly: {
name: "readonly",
getInputNode: function() { type: "boolean",
return this.node; "default": false,
}, description: "Does NOT allow user to enter data, just displays existing data"
}
get_value: function() { };
return this.getValue(); return et2_inputWidget;
}, }(et2_core_valueWidget_1.et2_valueWidget));
exports.et2_inputWidget = et2_inputWidget;
getValue: function() {
var node = this.getInputNode();
if (node)
{
var val = jQuery(node).val();
return val;
}
return this._oldValue;
},
isDirty: function() {
return this._oldValue != this.getValue();
},
resetDirty: function() {
this._oldValue = this.getValue();
},
isValid: function(messages) {
var ok = true;
// Check for required
if (this.options && this.options.needed && !this.options.readonly && !this.disabled &&
(this.getValue() == null || this.getValue().valueOf() == ''))
{
messages.push(this.egw().lang('Field must not be empty !!!'));
ok = false;
}
return ok;
},
/**
* Called whenever the template gets submitted. We return false if the widget
* is not valid, which cancels the submission.
*
* @param _values contains the values which will be sent to the server.
* Listeners may change these values before they get submitted.
*/
submit: function(_values) {
var messages = [];
var valid = this.isValid(messages);
// Passing false will clear any set messages
this.set_validation_error(valid ? false : messages);
return valid;
}
});}).call(this);

5
api/js/etemplate/et2_core_valueWidget.ts
View File

@ -41,6 +41,9 @@ export class et2_valueWidget extends et2_baseWidget
} }
}; };
label: string = '';
private _labelContainer: JQuery = null;
/** /**
* *
* *
@ -71,7 +74,7 @@ export class et2_valueWidget extends et2_baseWidget
} }
} }
set_label(_value) set_label(_value : string)
{ {
// Abort if there was no change in the label // Abort if there was no change in the label
if (_value == this.label) if (_value == this.label)