extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-26 01:43:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

TS for Box widget

Browse Source
This commit is contained in:
nathangray 2020-01-21 07:36:45 -07:00 committed by Hadi Nategh
parent 368f20ab5a
commit 7576742cbc
4 changed files with 459 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api/js/etemplate/et2_core_widget.js
View File

@ -124,6 +124,10 @@ var et2_widget = /** @class */ (function (_super) {
// Set the legacyOptions array to the names of the properties the "options" // Set the legacyOptions array to the names of the properties the "options"
// attribute defines. // attribute defines.
_this.legacyOptions = []; _this.legacyOptions = [];
/**
* Set this variable to true if this widget can have namespaces
*/
_this.createNamespace = false;
_this._children = []; _this._children = [];
_this._mgrs = {}; _this._mgrs = {};
/** /**

4
api/js/etemplate/et2_core_widget.ts
View File

@ -170,7 +170,7 @@ export class et2_widget extends ClassWithAttributes
"ignore": true, "ignore": true,
"description": "Object of widget attributes" "description": "Object of widget attributes"
} }
} };
// Set the legacyOptions array to the names of the properties the "options" // Set the legacyOptions array to the names of the properties the "options"
// attribute defines. // attribute defines.
@ -185,7 +185,7 @@ export class et2_widget extends ClassWithAttributes
/** /**
* Set this variable to true if this widget can have namespaces * Set this variable to true if this widget can have namespaces
*/ */
createNamespace: false; createNamespace: boolean = false;
/** /**
* Widget constructor * Widget constructor

403
api/js/etemplate/et2_widget_box.js
View File

@ -1,3 +1,4 @@
"use strict";
/** /**
* EGroupware eTemplate2 - JS Box object * EGroupware eTemplate2 - JS Box object
* *
@ -9,12 +10,28 @@
* @copyright Stylite 2011 * @copyright Stylite 2011
* @version $Id$ * @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_baseWidget; et2_core_baseWidget;
*/ */
var et2_core_widget_1 = require("./et2_core_widget");
var et2_core_baseWidget_1 = require("./et2_core_baseWidget");
var jQuery = require("jquery");
var et2_core_xml_1 = require("./et2_core_xml");
/** /**
* Class which implements box and vbox tag * Class which implements box and vbox tag
* *
@ -23,137 +40,108 @@
* *
* @augments et2_baseWidget * @augments et2_baseWidget
*/ */
var et2_box = (function(){ "use strict"; return et2_baseWidget.extend([et2_IDetachedDOM], var et2_box = /** @class */ (function (_super) {
{ __extends(et2_box, _super);
attributes: { /**
// Not needed * Constructor
"rows": {"ignore": true}, *
"cols": {"ignore": true} * @memberOf et2_box
}, */
function et2_box(_parent, _attrs, _child) {
createNamespace: true, var _this = _super.call(this, arguments) || this;
_this.createNamespace = true;
/** _this.div = jQuery(document.createElement("div"))
* Constructor .addClass("et2_" + _this.getType())
* .addClass("et2_box_widget");
* @memberOf et2_box _this.setDOMNode(_this.div[0]);
*/ return _this;
init: function() { }
this._super.apply(this, arguments); /**
* Overriden so we can check for autorepeating children. We only check for
this.div = jQuery(document.createElement("div")) * $ in the immediate children & grandchildren of this node.
.addClass("et2_" + this._type) *
.addClass("et2_box_widget"); * @param {object} _node
*/
this.setDOMNode(this.div[0]); et2_box.prototype.loadFromXML = function (_node) {
}, if (this.getType() != "box") {
return _super.prototype.loadFromXML.call(this, _node);
/** }
* Overriden so we can check for autorepeating children. We only check for // Load the child nodes.
* $ in the immediate children & grandchildren of this node. var childIndex = 0;
* var repeatNode = null;
* @param {object} _node for (var i = 0; i < _node.childNodes.length; i++) {
*/ var node = _node.childNodes[i];
loadFromXML: function(_node) { var widgetType = node.nodeName.toLowerCase();
if(this._type != "box") if (widgetType == "#comment") {
{ continue;
return this._super.apply(this, arguments); }
} if (widgetType == "#text") {
// Load the child nodes. if (node.data.replace(/^\s+|\s+$/g, '')) {
var childIndex = 0; this.loadContent(node.data);
var repeatNode = null; }
for (var i=0; i < _node.childNodes.length; i++) continue;
{ }
var node = _node.childNodes[i]; // Create the new element, if no expansion needed
var widgetType = node.nodeName.toLowerCase(); var id = et2_core_xml_1.et2_readAttrWithDefault(node, "id", "");
if (id.indexOf('$') < 0 || widgetType != 'box') {
if (widgetType == "#comment") this.createElementFromNode(node);
{ childIndex++;
continue; }
} else {
repeatNode = node;
if (widgetType == "#text") }
{ }
if (node.data.replace(/^\s+|\s+$/g, '')) // Only the last child repeats(?)
{ if (repeatNode != null) {
this.loadContent(node.data); var currentPerspective = this.getArrayMgr("content").perspectiveData;
} // Extra content
continue; for (childIndex; typeof this.getArrayMgr("content").data[childIndex] != "undefined" && this.getArrayMgr("content").data[childIndex]; childIndex++) {
} // Adjust for the row
var mgrs = this.getArrayMgrs();
// Create the new element, if no expansion needed for (var name in mgrs) {
var id = et2_readAttrWithDefault(node, "id", ""); if (this.getArrayMgr(name).getEntry(childIndex)) {
if(id.indexOf('$') < 0 || widgetType != 'box') this.getArrayMgr(name).perspectiveData.row = childIndex;
{ }
this.createElementFromNode(node); }
childIndex++; this.createElementFromNode(repeatNode);
} }
else // Reset
{ for (var name in this.getArrayMgrs()) {
repeatNode = node; this.getArrayMgr(name).perspectiveData = currentPerspective;
} }
} }
};
// Only the last child repeats(?) /**
if(repeatNode != null) * Code for implementing et2_IDetachedDOM
{ * This doesn't need to be implemented.
var currentPerspective = this.getArrayMgr("content").perspectiveData; * Individual widgets are detected and handled by the grid, but the interface is needed for this to happen
// Extra content *
for(childIndex; typeof this.getArrayMgr("content").data[childIndex] != "undefined" && this.getArrayMgr("content").data[childIndex]; childIndex++) { * @param {array} _attrs array to add further attributes to
// Adjust for the row */
var mgrs = this.getArrayMgrs(); et2_box.prototype.getDetachedAttributes = function (_attrs) {
for(var name in mgrs) _attrs.push('data');
{ };
if(this.getArrayMgr(name).getEntry(childIndex)) et2_box.prototype.getDetachedNodes = function () {
{ return [this.getDOMNode()];
this.getArrayMgr(name).perspectiveData.row = childIndex; };
} et2_box.prototype.setDetachedAttributes = function (_nodes, _values) {
} if (_values.data) {
var pairs = _values.data.split(/,/g);
this.createElementFromNode(repeatNode); for (var i = 0; i < pairs.length; ++i) {
} var name_value = pairs[i].split(':');
jQuery(_nodes[0]).attr('data-' + name_value[0], name_value[1]);
// Reset }
for(var name in this.getArrayMgrs()) }
{ };
this.getArrayMgr(name).perspectiveData = currentPerspective; et2_box._attributes = {
} // Not needed
} "rows": { "ignore": true },
}, "cols": { "ignore": true }
};
/** return et2_box;
* Code for implementing et2_IDetachedDOM }(et2_core_baseWidget_1.et2_baseWidget));
* This doesn't need to be implemented. exports.et2_box = et2_box;
* Individual widgets are detected and handled by the grid, but the interface is needed for this to happen et2_core_widget_1.et2_register_widget(et2_box, ["vbox", "box"]);
*
* @param {array} _attrs array to add further attributes to
*/
getDetachedAttributes: function(_attrs)
{
_attrs.push('data');
},
getDetachedNodes: function()
{
return [this.getDOMNode()];
},
setDetachedAttributes: function(_nodes, _values)
{
if (_values.data)
{
var pairs = _values.data.split(/,/g);
for(var i=0; i < pairs.length; ++i)
{
var name_value = pairs[i].split(':');
jQuery(_nodes[0]).attr('data-'+name_value[0], name_value[1]);
}
}
}
});}).call(this);
et2_register_widget(et2_box, ["vbox", "box"]);
/** /**
* Details widget implementation * Details widget implementation
* widget name is "details" and can be use as a wrapping container * widget name is "details" and can be use as a wrapping container
@ -167,80 +155,71 @@ et2_register_widget(et2_box, ["vbox", "box"]);
* <details/> * <details/>
* *
*/ */
var et2_details = (function(){ "use strict"; return et2_box.extend( var et2_details = /** @class */ (function (_super) {
{ __extends(et2_details, _super);
attributes:{ function et2_details(_parent, _attrs, _child) {
"toggle_align": { var _this = _super.call(this, _parent, _attrs, _child) || this;
name: "Toggle button alignment", _this.div = jQuery(document.createElement('div')).addClass('et2_details');
description:" Defines where to align the toggle button, default is right alignment", _this.title = jQuery(document.createElement('span'))
type:"string", .addClass('et2_label et2_details_title')
default: "right" .appendTo(_this.div);
}, _this.span = jQuery(document.createElement('span'))
title: { .addClass('et2_details_toggle')
name: "title", .appendTo(_this.div);
description:"Set a header title for box and shows it next to toggle button, default is no title", _this.wrapper = jQuery(document.createElement('div'))
type:"string", .addClass('et2_details_wrapper')
default: "", .appendTo(_this.div);
translate: true _this._createWidget();
} return _this;
}, }
/**
init: function() { * Function happens on toggle action
this._super.apply(this, arguments); */
et2_details.prototype._toggle = function () {
this.div = jQuery(document.createElement('div')).addClass('et2_details'); this.div.toggleClass('et2_details_expanded');
this.title = jQuery(document.createElement('span')) };
.addClass('et2_label et2_details_title') /**
.appendTo(this.div); * Create widget, set contents, and binds handlers
this.span = jQuery(document.createElement('span')) */
.addClass('et2_details_toggle') et2_details.prototype._createWidget = function () {
.appendTo(this.div); var self = this;
this.wrapper = jQuery(document.createElement('div')) this.span.on('click', function (e) {
.addClass('et2_details_wrapper') self._toggle();
.appendTo(this.div); });
//Set header title
if (this.options.title) {
this._createWidget(); this.title
}, .click(function () { self._toggle(); })
.text(this.options.title);
/** }
* Function happens on toggle action // Align toggle button left/right
*/ if (this.options.toggle_align === "left")
_toggle: function (){ this.span.css({ float: 'left' });
this.div.toggleClass('et2_details_expanded'); };
}, et2_details.prototype.getDOMNode = function (_sender) {
if (!_sender || _sender === this) {
/** return this.div[0];
* Create widget, set contents, and binds handlers }
*/ else {
_createWidget: function () { return this.wrapper[0];
var self = this; }
};
this.span.on('click', function (e){ et2_details._attributes = {
self._toggle(); "toggle_align": {
}); name: "Toggle button alignment",
description: " Defines where to align the toggle button, default is right alignment",
//Set header title type: "string",
if (this.options.title) default: "right"
{ },
this.title title: {
.click (function(){self._toggle();}) name: "title",
.text(this.options.title); description: "Set a header title for box and shows it next to toggle button, default is no title",
} type: "string",
default: "",
// Align toggle button left/right translate: true
if (this.options.toggle_align === "left") this.span.css({float:'left'}); }
}, };
return et2_details;
getDOMNode: function(_sender) { }(et2_box));
if (!_sender || _sender === this) exports.et2_details = et2_details;
{ et2_core_widget_1.et2_register_widget(et2_details, ["details"]);
return this.div[0];
}
else
{
return this.wrapper[0];
}
}
});}).call(this);
et2_register_widget(et2_details, ["details"]);

262
api/js/etemplate/et2_widget_box.ts Normal file
View File

@ -0,0 +1,262 @@
/**
* EGroupware eTemplate2 - JS Box 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$
*/
/*egw:uses
/vendor/bower-asset/jquery/dist/jquery.js;
et2_core_baseWidget;
*/
import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
import {et2_baseWidget} from "./et2_core_baseWidget";
import * as jQuery from "jquery";
import {et2_readAttrWithDefault} from './et2_core_xml'
/**
* Class which implements box and vbox tag
*
* Auto-repeat: In order to get box auto repeat to work we need to have another
* box as a wrapper with an id set.
*
* @augments et2_baseWidget
*/
export class et2_box extends et2_baseWidget implements et2_IDetachedDOM
{
static readonly _attributes: any = {
// Not needed
"rows": {"ignore": true},
"cols": {"ignore": true}
};
createNamespace: boolean = true;
div: JQuery;
/**
* Constructor
*
* @memberOf et2_box
*/
constructor(_parent, _attrs? : WidgetConfig, _child? : object)
{
super(arguments);
this.div = jQuery(document.createElement("div"))
.addClass("et2_" + this.getType())
.addClass("et2_box_widget");
this.setDOMNode(this.div[0]);
}
/**
* Overriden so we can check for autorepeating children. We only check for
* $ in the immediate children & grandchildren of this node.
*
* @param {object} _node
*/
loadFromXML(_node) {
if(this.getType() != "box")
{
return super.loadFromXML(_node);
}
// Load the child nodes.
var childIndex = 0;
var repeatNode = null;
for (var i=0; i < _node.childNodes.length; i++)
{
var node = _node.childNodes[i];
var widgetType = node.nodeName.toLowerCase();
if (widgetType == "#comment")
{
continue;
}
if (widgetType == "#text")
{
if (node.data.replace(/^\s+|\s+$/g, ''))
{
this.loadContent(node.data);
}
continue;
}
// Create the new element, if no expansion needed
var id = et2_readAttrWithDefault(node, "id", "");
if(id.indexOf('$') < 0 || widgetType != 'box')
{
this.createElementFromNode(node);
childIndex++;
}
else
{
repeatNode = node;
}
}
// Only the last child repeats(?)
if(repeatNode != null)
{
var currentPerspective = this.getArrayMgr("content").perspectiveData;
// Extra content
for(childIndex; typeof this.getArrayMgr("content").data[childIndex] != "undefined" && this.getArrayMgr("content").data[childIndex]; childIndex++) {
// Adjust for the row
var mgrs = this.getArrayMgrs();
for(var name in mgrs)
{
if(this.getArrayMgr(name).getEntry(childIndex))
{
this.getArrayMgr(name).perspectiveData.row = childIndex;
}
}
this.createElementFromNode(repeatNode);
}
// Reset
for(var name in this.getArrayMgrs())
{
this.getArrayMgr(name).perspectiveData = currentPerspective;
}
}
}
/**
* Code for implementing et2_IDetachedDOM
* This doesn't need to be implemented.
* Individual widgets are detected and handled by the grid, but the interface is needed for this to happen
*
* @param {array} _attrs array to add further attributes to
*/
getDetachedAttributes(_attrs)
{
_attrs.push('data');
}
getDetachedNodes()
{
return [this.getDOMNode()];
}
setDetachedAttributes(_nodes, _values)
{
if (_values.data)
{
var pairs = _values.data.split(/,/g);
for(var i=0; i < pairs.length; ++i)
{
var name_value = pairs[i].split(':');
jQuery(_nodes[0]).attr('data-'+name_value[0], name_value[1]);
}
}
}
}
et2_register_widget(et2_box, ["vbox", "box"]);
/**
* Details widget implementation
* widget name is "details" and can be use as a wrapping container
* in order to make its children collapsible.
*
* Note: details widget does not represent html5 "details" tag in DOM
*
* <details>
* <widgets>
* ....
* <details/>
*
*/
export class et2_details extends et2_box
{
static readonly _attributes: any = {
"toggle_align": {
name: "Toggle button alignment",
description:" Defines where to align the toggle button, default is right alignment",
type:"string",
default: "right"
},
title: {
name: "title",
description:"Set a header title for box and shows it next to toggle button, default is no title",
type:"string",
default: "",
translate: true
}
};
private title : JQuery;
private span : JQuery;
private wrapper : JQuery;
constructor(_parent, _attrs? : WidgetConfig, _child? : object)
{
super(_parent, _attrs, _child);
this.div = jQuery(document.createElement('div')).addClass('et2_details');
this.title = jQuery(document.createElement('span'))
.addClass('et2_label et2_details_title')
.appendTo(this.div);
this.span = jQuery(document.createElement('span'))
.addClass('et2_details_toggle')
.appendTo(this.div);
this.wrapper = jQuery(document.createElement('div'))
.addClass('et2_details_wrapper')
.appendTo(this.div);
this._createWidget();
}
/**
* Function happens on toggle action
*/
_toggle ()
{
this.div.toggleClass('et2_details_expanded');
}
/**
* Create widget, set contents, and binds handlers
*/
_createWidget()
{
var self = this;
this.span.on('click', function (e){
self._toggle();
});
//Set header title
if (this.options.title)
{
this.title
.click (function(){self._toggle();})
.text(this.options.title);
}
// Align toggle button left/right
if (this.options.toggle_align === "left") this.span.css({float:'left'});
}
getDOMNode(_sender)
{
if (!_sender || _sender === this)
{
return this.div[0];
}
else
{
return this.wrapper[0];
}
}
}
et2_register_widget(et2_details, ["details"]);