mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-26 01:43:47 +01:00
TS for Box widget
This commit is contained in:
nathangray
Hadi Nategh
parent
368f20ab5a
commit
7576742cbc
@ -124,6 +124,10 @@ var et2_widget = /** @class */ (function (_super) {
|
||||
// Set the legacyOptions array to the names of the properties the "options"
|
||||
// attribute defines.
|
||||
_this.legacyOptions = [];
|
||||
/**
|
||||
* Set this variable to true if this widget can have namespaces
|
||||
*/
|
||||
_this.createNamespace = false;
|
||||
_this._children = [];
|
||||
_this._mgrs = {};
|
||||
/**
|
||||
|
||||
@ -170,7 +170,7 @@ export class et2_widget extends ClassWithAttributes
|
||||
"ignore": true,
|
||||
"description": "Object of widget attributes"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Set the legacyOptions array to the names of the properties the "options"
|
||||
// attribute defines.
|
||||
@ -185,7 +185,7 @@ export class et2_widget extends ClassWithAttributes
|
||||
/**
|
||||
* Set this variable to true if this widget can have namespaces
|
||||
*/
|
||||
createNamespace: false;
|
||||
createNamespace: boolean = false;
|
||||
|
||||
/**
|
||||
* Widget constructor
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
"use strict";
|
||||
/**
|
||||
* EGroupware eTemplate2 - JS Box object
|
||||
*
|
||||
@ -9,12 +10,28 @@
|
||||
* @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
|
||||
/vendor/bower-asset/jquery/dist/jquery.js;
|
||||
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
|
||||
*
|
||||
@ -23,104 +40,77 @@
|
||||
*
|
||||
* @augments et2_baseWidget
|
||||
*/
|
||||
var et2_box = (function(){ "use strict"; return et2_baseWidget.extend([et2_IDetachedDOM],
|
||||
{
|
||||
attributes: {
|
||||
// Not needed
|
||||
"rows": {"ignore": true},
|
||||
"cols": {"ignore": true}
|
||||
},
|
||||
|
||||
createNamespace: true,
|
||||
|
||||
var et2_box = /** @class */ (function (_super) {
|
||||
__extends(et2_box, _super);
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @memberOf et2_box
|
||||
*/
|
||||
init: function() {
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
this.div = jQuery(document.createElement("div"))
|
||||
.addClass("et2_" + this._type)
|
||||
function et2_box(_parent, _attrs, _child) {
|
||||
var _this = _super.call(this, arguments) || this;
|
||||
_this.createNamespace = true;
|
||||
_this.div = jQuery(document.createElement("div"))
|
||||
.addClass("et2_" + _this.getType())
|
||||
.addClass("et2_box_widget");
|
||||
|
||||
this.setDOMNode(this.div[0]);
|
||||
},
|
||||
|
||||
_this.setDOMNode(_this.div[0]);
|
||||
return _this;
|
||||
}
|
||||
/**
|
||||
* Overriden so we can check for autorepeating children. We only check for
|
||||
* $ in the immediate children & grandchildren of this node.
|
||||
*
|
||||
* @param {object} _node
|
||||
*/
|
||||
loadFromXML: function(_node) {
|
||||
if(this._type != "box")
|
||||
{
|
||||
return this._super.apply(this, arguments);
|
||||
et2_box.prototype.loadFromXML = function (_node) {
|
||||
if (this.getType() != "box") {
|
||||
return _super.prototype.loadFromXML.call(this, _node);
|
||||
}
|
||||
// Load the child nodes.
|
||||
var childIndex = 0;
|
||||
var repeatNode = null;
|
||||
for (var i=0; i < _node.childNodes.length; i++)
|
||||
{
|
||||
for (var i = 0; i < _node.childNodes.length; i++) {
|
||||
var node = _node.childNodes[i];
|
||||
var widgetType = node.nodeName.toLowerCase();
|
||||
|
||||
if (widgetType == "#comment")
|
||||
{
|
||||
if (widgetType == "#comment") {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (widgetType == "#text")
|
||||
{
|
||||
if (node.data.replace(/^\s+|\s+$/g, ''))
|
||||
{
|
||||
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')
|
||||
{
|
||||
var id = et2_core_xml_1.et2_readAttrWithDefault(node, "id", "");
|
||||
if (id.indexOf('$') < 0 || widgetType != 'box') {
|
||||
this.createElementFromNode(node);
|
||||
childIndex++;
|
||||
}
|
||||
else
|
||||
{
|
||||
else {
|
||||
repeatNode = node;
|
||||
}
|
||||
}
|
||||
|
||||
// Only the last child repeats(?)
|
||||
if(repeatNode != null)
|
||||
{
|
||||
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++) {
|
||||
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))
|
||||
{
|
||||
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())
|
||||
{
|
||||
for (var name in this.getArrayMgrs()) {
|
||||
this.getArrayMgr(name).perspectiveData = currentPerspective;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
/**
|
||||
* Code for implementing et2_IDetachedDOM
|
||||
* This doesn't need to be implemented.
|
||||
@ -128,32 +118,30 @@ var et2_box = (function(){ "use strict"; return et2_baseWidget.extend([et2_IDeta
|
||||
*
|
||||
* @param {array} _attrs array to add further attributes to
|
||||
*/
|
||||
getDetachedAttributes: function(_attrs)
|
||||
{
|
||||
et2_box.prototype.getDetachedAttributes = function (_attrs) {
|
||||
_attrs.push('data');
|
||||
},
|
||||
|
||||
getDetachedNodes: function()
|
||||
{
|
||||
};
|
||||
et2_box.prototype.getDetachedNodes = function () {
|
||||
return [this.getDOMNode()];
|
||||
},
|
||||
|
||||
setDetachedAttributes: function(_nodes, _values)
|
||||
{
|
||||
if (_values.data)
|
||||
{
|
||||
};
|
||||
et2_box.prototype.setDetachedAttributes = function (_nodes, _values) {
|
||||
if (_values.data) {
|
||||
var pairs = _values.data.split(/,/g);
|
||||
for(var i=0; i < pairs.length; ++i)
|
||||
{
|
||||
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]);
|
||||
jQuery(_nodes[0]).attr('data-' + name_value[0], name_value[1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});}).call(this);
|
||||
et2_register_widget(et2_box, ["vbox", "box"]);
|
||||
|
||||
};
|
||||
et2_box._attributes = {
|
||||
// Not needed
|
||||
"rows": { "ignore": true },
|
||||
"cols": { "ignore": true }
|
||||
};
|
||||
return et2_box;
|
||||
}(et2_core_baseWidget_1.et2_baseWidget));
|
||||
exports.et2_box = et2_box;
|
||||
et2_core_widget_1.et2_register_widget(et2_box, ["vbox", "box"]);
|
||||
/**
|
||||
* Details widget implementation
|
||||
* widget name is "details" and can be use as a wrapping container
|
||||
@ -167,80 +155,71 @@ et2_register_widget(et2_box, ["vbox", "box"]);
|
||||
* <details/>
|
||||
*
|
||||
*/
|
||||
var et2_details = (function(){ "use strict"; return et2_box.extend(
|
||||
{
|
||||
attributes:{
|
||||
var et2_details = /** @class */ (function (_super) {
|
||||
__extends(et2_details, _super);
|
||||
function et2_details(_parent, _attrs, _child) {
|
||||
var _this = _super.call(this, _parent, _attrs, _child) || this;
|
||||
_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();
|
||||
return _this;
|
||||
}
|
||||
/**
|
||||
* Function happens on toggle action
|
||||
*/
|
||||
et2_details.prototype._toggle = function () {
|
||||
this.div.toggleClass('et2_details_expanded');
|
||||
};
|
||||
/**
|
||||
* Create widget, set contents, and binds handlers
|
||||
*/
|
||||
et2_details.prototype._createWidget = function () {
|
||||
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' });
|
||||
};
|
||||
et2_details.prototype.getDOMNode = function (_sender) {
|
||||
if (!_sender || _sender === this) {
|
||||
return this.div[0];
|
||||
}
|
||||
else {
|
||||
return this.wrapper[0];
|
||||
}
|
||||
};
|
||||
et2_details._attributes = {
|
||||
"toggle_align": {
|
||||
name: "Toggle button alignment",
|
||||
description:" Defines where to align the toggle button, default is right alignment",
|
||||
type:"string",
|
||||
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",
|
||||
description: "Set a header title for box and shows it next to toggle button, default is no title",
|
||||
type: "string",
|
||||
default: "",
|
||||
translate: true
|
||||
}
|
||||
},
|
||||
|
||||
init: function() {
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
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: function (){
|
||||
this.div.toggleClass('et2_details_expanded');
|
||||
},
|
||||
|
||||
/**
|
||||
* Create widget, set contents, and binds handlers
|
||||
*/
|
||||
_createWidget: function () {
|
||||
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: function(_sender) {
|
||||
if (!_sender || _sender === this)
|
||||
{
|
||||
return this.div[0];
|
||||
}
|
||||
else
|
||||
{
|
||||
return this.wrapper[0];
|
||||
}
|
||||
}
|
||||
});}).call(this);
|
||||
et2_register_widget(et2_details, ["details"]);
|
||||
};
|
||||
return et2_details;
|
||||
}(et2_box));
|
||||
exports.et2_details = et2_details;
|
||||
et2_core_widget_1.et2_register_widget(et2_details, ["details"]);
|
||||
|
||||
262
api/js/etemplate/et2_widget_box.ts
Normal file
262
api/js/etemplate/et2_widget_box.ts
Normal 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"]);
|
||||
Loading…
Reference in New Issue
Block a user