egroupware/api/js/etemplate/et2_widget_progress.ts

194 lines
4.5 KiB
TypeScript
Raw Normal View History

2020-02-10 15:00:48 +01:00
/**
* 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"]);