mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-08 09:05:16 +01:00
Convert et2_widget_progress to TS
This commit is contained in:
Hadi Nategh
parent
c19ea5a8ec
commit
e0ec34493b
@ -1,3 +1,4 @@
|
|||||||
|
"use strict";
|
||||||
/**
|
/**
|
||||||
* EGroupware eTemplate2 - JS Progrss object
|
* EGroupware eTemplate2 - JS Progrss object
|
||||||
*
|
*
|
||||||
@ -6,178 +7,165 @@
|
|||||||
* @subpackage api
|
* @subpackage api
|
||||||
* @link http://www.egroupware.org
|
* @link http://www.egroupware.org
|
||||||
* @author Ralf Becker
|
* @author Ralf Becker
|
||||||
* @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;
|
||||||
*/
|
*/
|
||||||
|
var et2_core_widget_1 = require("./et2_core_widget");
|
||||||
|
var et2_core_valueWidget_1 = require("./et2_core_valueWidget");
|
||||||
|
var et2_core_inheritance_1 = require("./et2_core_inheritance");
|
||||||
/**
|
/**
|
||||||
* Class which implements the "progress" XET-Tag
|
* Class which implements the "progress" XET-Tag
|
||||||
*
|
*
|
||||||
* @augments et2_valueWidget
|
* @augments et2_valueWidget
|
||||||
*/
|
*/
|
||||||
var et2_progress = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDetachedDOM],
|
var et2_progress = /** @class */ (function (_super) {
|
||||||
{
|
__extends(et2_progress, _super);
|
||||||
attributes: {
|
/**
|
||||||
"href": {
|
* Constructor
|
||||||
"name": "Link Target",
|
*
|
||||||
"type": "string",
|
* @memberOf et2_progress
|
||||||
"description": "Link URL, empty if you don't wan't to display a link."
|
*/
|
||||||
},
|
function et2_progress(_parent, _attrs, _child) {
|
||||||
"extra_link_target": {
|
var _this =
|
||||||
"name": "Link target",
|
// Call the inherited constructor
|
||||||
"type": "string",
|
_super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_progress._attributes, _child || {})) || this;
|
||||||
"default": "_self",
|
_this.legacyOptions = ["href", "extra_link_target", "imagemap", "extra_link_popup", "id"];
|
||||||
"description": "Link target descriptor"
|
_this.progress = null;
|
||||||
},
|
var outer = document.createElement("div");
|
||||||
"extra_link_popup": {
|
outer.className = "et2_progress";
|
||||||
"name": "Popup",
|
_this.progress = document.createElement("div");
|
||||||
"type": "string",
|
_this.progress.style.width = "0";
|
||||||
"description": "widthxheight, if popup should be used, eg. 640x480"
|
outer.appendChild(_this.progress);
|
||||||
},
|
if (_this.options.href) {
|
||||||
"label": {
|
outer.className += ' et2_clickable';
|
||||||
"name": "Label",
|
}
|
||||||
"default": "",
|
if (_this.options["class"]) {
|
||||||
"type": "string",
|
outer.className += ' ' + _this.options["class"];
|
||||||
"description": "The label is displayed as the title. The label can contain variables, as descript for name. If the label starts with a '@' it is replaced by the value of the content-array at this index (with the '@'-removed and after expanding the variables).",
|
}
|
||||||
"translate": true
|
_this.setDOMNode(outer); // set's this.node = outer
|
||||||
}
|
return _this;
|
||||||
},
|
}
|
||||||
legacyOptions: ["href", "extra_link_target", "imagemap", "extra_link_popup", "id"],
|
et2_progress.prototype.click = function (e) {
|
||||||
|
_super.prototype.click.call(this, e);
|
||||||
/**
|
if (this.options.href) {
|
||||||
* Constructor
|
this.egw().open_link(this.options.href, this.options.extra_link_target, this.options.extra_link_popup);
|
||||||
*
|
}
|
||||||
* @memberOf et2_progress
|
};
|
||||||
*/
|
// setting the value as width of the progress-bar
|
||||||
init: function()
|
et2_progress.prototype.set_value = function (_value) {
|
||||||
{
|
_value = parseInt(_value) + "%"; // make sure we have percent attached
|
||||||
this._super.apply(this, arguments);
|
this.progress.style.width = _value;
|
||||||
|
if (!this.options.label)
|
||||||
var outer = document.createElement("div");
|
this.set_label(_value);
|
||||||
outer.className = "et2_progress";
|
};
|
||||||
this.progress = document.createElement("div");
|
// set's label as title of this.node
|
||||||
this.progress.style.width = "0";
|
et2_progress.prototype.set_label = function (_value) {
|
||||||
outer.appendChild(this.progress);
|
this.node.title = _value;
|
||||||
|
};
|
||||||
if (this.options.href)
|
// set's class of this.node; preserve baseclasses et2_progress and if this.options.href is set et2_clickable
|
||||||
{
|
et2_progress.prototype.set_class = function (_value) {
|
||||||
outer.className += ' et2_clickable';
|
var baseClass = "et2_progress";
|
||||||
}
|
if (this.options.href) {
|
||||||
if(this.options["class"])
|
baseClass += ' et2_clickable';
|
||||||
{
|
}
|
||||||
outer.className += ' '+this.options["class"];
|
this.node.setAttribute('class', baseClass + ' ' + _value);
|
||||||
}
|
};
|
||||||
this.setDOMNode(outer); // set's this.node = outer
|
et2_progress.prototype.set_href = function (_value) {
|
||||||
},
|
if (!this.isInTree()) {
|
||||||
|
return false;
|
||||||
click: function()
|
}
|
||||||
{
|
this.options.href = _value;
|
||||||
this._super.apply(this, arguments);
|
if (_value) {
|
||||||
|
jQuery(this.node).addClass('et2_clickable')
|
||||||
if(this.options.href)
|
.wrapAll('<a href="' + _value + '"></a>"');
|
||||||
{
|
var href_1 = this.options.href;
|
||||||
this.egw().open_link(this.options.href, this.options.extra_link_target, this.options.extra_link_popup);
|
var popup_1 = this.options.extra_link_popup;
|
||||||
}
|
var target_1 = this.options.extra_link_target;
|
||||||
},
|
jQuery(this.node).parent().click(function (e) {
|
||||||
|
egw.open_link(href_1, target_1, popup_1);
|
||||||
// setting the value as width of the progress-bar
|
e.preventDefault();
|
||||||
set_value: function(_value)
|
return false;
|
||||||
{
|
});
|
||||||
_value = parseInt(_value)+"%"; // make sure we have percent attached
|
}
|
||||||
this.progress.style.width = _value;
|
else if (jQuery(this.node).parent('a').length) {
|
||||||
if (!this.options.label) this.set_label(_value);
|
jQuery(this.node).removeClass('et2_clickable')
|
||||||
},
|
.unwrap();
|
||||||
|
}
|
||||||
// set's label as title of this.node
|
return true;
|
||||||
set_label: function(_value)
|
};
|
||||||
{
|
/**
|
||||||
this.node.title = _value;
|
* Implementation of "et2_IDetachedDOM" for fast viewing in gridview
|
||||||
},
|
*
|
||||||
|
* * @param {array} _attrs array to add further attributes to
|
||||||
// set's class of this.node; preserve baseclasses et2_progress and if this.options.href is set et2_clickable
|
*/
|
||||||
set_class: function(_value)
|
et2_progress.prototype.getDetachedAttributes = function (_attrs) {
|
||||||
{
|
_attrs.push("value", "label", "href");
|
||||||
var baseClass = "et2_progress";
|
};
|
||||||
if (this.options.href)
|
et2_progress.prototype.getDetachedNodes = function () {
|
||||||
{
|
return [this.node, this.progress];
|
||||||
baseClass += ' et2_clickable';
|
};
|
||||||
}
|
et2_progress.prototype.setDetachedAttributes = function (_nodes, _values) {
|
||||||
this.node.setAttribute('class', baseClass + ' ' + _value);
|
// Set the given DOM-Nodes
|
||||||
},
|
this.node = _nodes[0];
|
||||||
|
this.progress = _nodes[1];
|
||||||
set_href: function (_value)
|
// Set the attributes
|
||||||
{
|
if (_values["label"]) {
|
||||||
if (!this.isInTree())
|
this.set_label(_values["label"]);
|
||||||
{
|
}
|
||||||
return false;
|
if (_values["value"]) {
|
||||||
}
|
this.set_value(_values["value"]);
|
||||||
|
}
|
||||||
this.options.href = _value;
|
else if (_values["label"]) {
|
||||||
if (_value)
|
this.set_value(_values["label"]);
|
||||||
{
|
}
|
||||||
jQuery(this.node).addClass('et2_clickable')
|
if (_values["href"]) {
|
||||||
.wrapAll('<a href="'+_value+'"></a>"');
|
jQuery(this.node).addClass('et2_clickable');
|
||||||
|
this.set_href(_values["href"]);
|
||||||
var href = this.options.href;
|
}
|
||||||
var popup = this.options.extra_link_popup;
|
};
|
||||||
var target = this.options.extra_link_target;
|
et2_progress._attributes = {
|
||||||
jQuery(this.node).parent().click(function(e)
|
"href": {
|
||||||
{
|
"name": "Link Target",
|
||||||
egw.open_link(href,target,popup);
|
"type": "string",
|
||||||
e.preventDefault();
|
"description": "Link URL, empty if you don't wan't to display a link."
|
||||||
return false;
|
},
|
||||||
});
|
"extra_link_target": {
|
||||||
}
|
"name": "Link target",
|
||||||
else if (jQuery(this.node).parent('a').length)
|
"type": "string",
|
||||||
{
|
"default": "_self",
|
||||||
jQuery(this.node).removeClass('et2_clickable')
|
"description": "Link target descriptor"
|
||||||
.unwrap();
|
},
|
||||||
}
|
"extra_link_popup": {
|
||||||
|
"name": "Popup",
|
||||||
return true;
|
"type": "string",
|
||||||
},
|
"description": "widthxheight, if popup should be used, eg. 640x480"
|
||||||
|
},
|
||||||
/**
|
"label": {
|
||||||
* Implementation of "et2_IDetachedDOM" for fast viewing in gridview
|
"name": "Label",
|
||||||
*
|
"default": "",
|
||||||
* * @param {array} _attrs array to add further attributes to
|
"type": "string",
|
||||||
*/
|
"description": "The label is displayed as the title. The label can contain variables, as descript for name. If the label starts with a '@' it is replaced by the value of the content-array at this index (with the '@'-removed and after expanding the variables).",
|
||||||
getDetachedAttributes: function(_attrs) {
|
"translate": true
|
||||||
_attrs.push("value", "label", "href");
|
}
|
||||||
},
|
};
|
||||||
|
return et2_progress;
|
||||||
getDetachedNodes: function() {
|
}(et2_core_valueWidget_1.et2_valueWidget));
|
||||||
return [this.node, this.progress];
|
et2_core_widget_1.et2_register_widget(et2_progress, ["progress"]);
|
||||||
},
|
//# sourceMappingURL=et2_widget_progress.js.map
|
||||||
|
|
||||||
setDetachedAttributes: function(_nodes, _values) {
|
|
||||||
// Set the given DOM-Nodes
|
|
||||||
this.node = _nodes[0];
|
|
||||||
this.progress = _nodes[1];
|
|
||||||
|
|
||||||
// Set the attributes
|
|
||||||
if (_values["label"])
|
|
||||||
{
|
|
||||||
this.set_label(_values["label"]);
|
|
||||||
}
|
|
||||||
if (_values["value"])
|
|
||||||
{
|
|
||||||
this.set_value(_values["value"]);
|
|
||||||
}
|
|
||||||
else if (_values["label"])
|
|
||||||
{
|
|
||||||
this.set_value(_values["label"]);
|
|
||||||
}
|
|
||||||
if(_values["href"])
|
|
||||||
{
|
|
||||||
jQuery(this.node).addClass('et2_clickable');
|
|
||||||
this.set_href(_values["href"]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});}).call(this);
|
|
||||||
et2_register_widget(et2_progress, ["progress"]);
|
|
||||||
193
api/js/etemplate/et2_widget_progress.ts
Normal file
193
api/js/etemplate/et2_widget_progress.ts
Normal file
@ -0,0 +1,193 @@
|
|||||||
|
/**
|
||||||
|
* EGroupware eTemplate2 - JS Progrss object
|
||||||
|
*
|
||||||
|
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
||||||
|
* @package etemplate
|
||||||
|
* @subpackage api
|
||||||
|
* @link http://www.egroupware.org
|
||||||
|
* @author Ralf Becker
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*egw:uses
|
||||||
|
/vendor/bower-asset/jquery/dist/jquery.js;
|
||||||
|
et2_core_interfaces;
|
||||||
|
et2_core_valueWidget;
|
||||||
|
*/
|
||||||
|
|
||||||
|
import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
|
||||||
|
import {et2_valueWidget} from "./et2_core_valueWidget";
|
||||||
|
import {ClassWithAttributes} from "./et2_core_inheritance";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Class which implements the "progress" XET-Tag
|
||||||
|
*
|
||||||
|
* @augments et2_valueWidget
|
||||||
|
*/
|
||||||
|
class et2_progress extends et2_valueWidget implements et2_IDetachedDOM
|
||||||
|
{
|
||||||
|
static readonly _attributes : any = {
|
||||||
|
"href": {
|
||||||
|
"name": "Link Target",
|
||||||
|
"type": "string",
|
||||||
|
"description": "Link URL, empty if you don't wan't to display a link."
|
||||||
|
},
|
||||||
|
"extra_link_target": {
|
||||||
|
"name": "Link target",
|
||||||
|
"type": "string",
|
||||||
|
"default": "_self",
|
||||||
|
"description": "Link target descriptor"
|
||||||
|
},
|
||||||
|
"extra_link_popup": {
|
||||||
|
"name": "Popup",
|
||||||
|
"type": "string",
|
||||||
|
"description": "widthxheight, if popup should be used, eg. 640x480"
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"name": "Label",
|
||||||
|
"default": "",
|
||||||
|
"type": "string",
|
||||||
|
"description": "The label is displayed as the title. The label can contain variables, as descript for name. If the label starts with a '@' it is replaced by the value of the content-array at this index (with the '@'-removed and after expanding the variables).",
|
||||||
|
"translate": true
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
legacyOptions : string[] = ["href", "extra_link_target", "imagemap", "extra_link_popup", "id"];
|
||||||
|
private progress : HTMLElement = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor
|
||||||
|
*
|
||||||
|
* @memberOf et2_progress
|
||||||
|
*/
|
||||||
|
constructor(_parent, _attrs? : WidgetConfig, _child? : object)
|
||||||
|
{
|
||||||
|
// Call the inherited constructor
|
||||||
|
super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_progress._attributes, _child || {}));
|
||||||
|
|
||||||
|
let outer = document.createElement("div");
|
||||||
|
outer.className = "et2_progress";
|
||||||
|
this.progress = document.createElement("div");
|
||||||
|
this.progress.style.width = "0";
|
||||||
|
outer.appendChild(this.progress);
|
||||||
|
|
||||||
|
if (this.options.href)
|
||||||
|
{
|
||||||
|
outer.className += ' et2_clickable';
|
||||||
|
}
|
||||||
|
if(this.options["class"])
|
||||||
|
{
|
||||||
|
outer.className += ' '+this.options["class"];
|
||||||
|
}
|
||||||
|
this.setDOMNode(outer); // set's this.node = outer
|
||||||
|
}
|
||||||
|
|
||||||
|
click(e)
|
||||||
|
{
|
||||||
|
super.click(e);
|
||||||
|
|
||||||
|
if(this.options.href)
|
||||||
|
{
|
||||||
|
this.egw().open_link(this.options.href, this.options.extra_link_target, this.options.extra_link_popup);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// setting the value as width of the progress-bar
|
||||||
|
set_value(_value)
|
||||||
|
{
|
||||||
|
_value = parseInt(_value)+"%"; // make sure we have percent attached
|
||||||
|
this.progress.style.width = _value;
|
||||||
|
if (!this.options.label) this.set_label(_value);
|
||||||
|
}
|
||||||
|
|
||||||
|
// set's label as title of this.node
|
||||||
|
set_label(_value)
|
||||||
|
{
|
||||||
|
this.node.title = _value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// set's class of this.node; preserve baseclasses et2_progress and if this.options.href is set et2_clickable
|
||||||
|
set_class(_value)
|
||||||
|
{
|
||||||
|
let baseClass = "et2_progress";
|
||||||
|
if (this.options.href)
|
||||||
|
{
|
||||||
|
baseClass += ' et2_clickable';
|
||||||
|
}
|
||||||
|
this.node.setAttribute('class', baseClass + ' ' + _value);
|
||||||
|
}
|
||||||
|
|
||||||
|
set_href(_value)
|
||||||
|
{
|
||||||
|
if (!this.isInTree())
|
||||||
|
{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.options.href = _value;
|
||||||
|
if (_value)
|
||||||
|
{
|
||||||
|
jQuery(this.node).addClass('et2_clickable')
|
||||||
|
.wrapAll('<a href="'+_value+'"></a>"');
|
||||||
|
|
||||||
|
let href = this.options.href;
|
||||||
|
let popup = this.options.extra_link_popup;
|
||||||
|
let target = this.options.extra_link_target;
|
||||||
|
jQuery(this.node).parent().click(function(e)
|
||||||
|
{
|
||||||
|
egw.open_link(href,target,popup);
|
||||||
|
e.preventDefault();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (jQuery(this.node).parent('a').length)
|
||||||
|
{
|
||||||
|
jQuery(this.node).removeClass('et2_clickable')
|
||||||
|
.unwrap();
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Implementation of "et2_IDetachedDOM" for fast viewing in gridview
|
||||||
|
*
|
||||||
|
* * @param {array} _attrs array to add further attributes to
|
||||||
|
*/
|
||||||
|
getDetachedAttributes(_attrs)
|
||||||
|
{
|
||||||
|
_attrs.push("value", "label", "href");
|
||||||
|
}
|
||||||
|
|
||||||
|
getDetachedNodes()
|
||||||
|
{
|
||||||
|
return [this.node, this.progress];
|
||||||
|
}
|
||||||
|
|
||||||
|
setDetachedAttributes(_nodes, _values)
|
||||||
|
{
|
||||||
|
// Set the given DOM-Nodes
|
||||||
|
this.node = _nodes[0];
|
||||||
|
this.progress = _nodes[1];
|
||||||
|
|
||||||
|
// Set the attributes
|
||||||
|
if (_values["label"])
|
||||||
|
{
|
||||||
|
this.set_label(_values["label"]);
|
||||||
|
}
|
||||||
|
if (_values["value"])
|
||||||
|
{
|
||||||
|
this.set_value(_values["value"]);
|
||||||
|
}
|
||||||
|
else if (_values["label"])
|
||||||
|
{
|
||||||
|
this.set_value(_values["label"]);
|
||||||
|
}
|
||||||
|
if(_values["href"])
|
||||||
|
{
|
||||||
|
jQuery(this.node).addClass('et2_clickable');
|
||||||
|
this.set_href(_values["href"]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
et2_register_widget(et2_progress, ["progress"]);
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user