From 7576742cbc2526a0a5ed5c433e08ec1462b103c8 Mon Sep 17 00:00:00 2001 From: nathangray Date: Tue, 21 Jan 2020 07:36:45 -0700 Subject: [PATCH] TS for Box widget --- api/js/etemplate/et2_core_widget.js | 4 + api/js/etemplate/et2_core_widget.ts | 4 +- api/js/etemplate/et2_widget_box.js | 403 +++++++++++++--------------- api/js/etemplate/et2_widget_box.ts | 262 ++++++++++++++++++ 4 files changed, 459 insertions(+), 214 deletions(-) create mode 100644 api/js/etemplate/et2_widget_box.ts diff --git a/api/js/etemplate/et2_core_widget.js b/api/js/etemplate/et2_core_widget.js index 32d0395de7..36cdcc1ca9 100644 --- a/api/js/etemplate/et2_core_widget.js +++ b/api/js/etemplate/et2_core_widget.js @@ -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 = {}; /** diff --git a/api/js/etemplate/et2_core_widget.ts b/api/js/etemplate/et2_core_widget.ts index 9c276afa2f..177b7ff1d6 100644 --- a/api/js/etemplate/et2_core_widget.ts +++ b/api/js/etemplate/et2_core_widget.ts @@ -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 diff --git a/api/js/etemplate/et2_widget_box.js b/api/js/etemplate/et2_widget_box.js index 8fd5f98a13..99ebf4e84b 100644 --- a/api/js/etemplate/et2_widget_box.js +++ b/api/js/etemplate/et2_widget_box.js @@ -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; + /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,137 +40,108 @@ * * @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, - - /** - * Constructor - * - * @memberOf et2_box - */ - init: function() { - this._super.apply(this, arguments); - - this.div = jQuery(document.createElement("div")) - .addClass("et2_" + this._type) - .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: function(_node) { - if(this._type != "box") - { - return this._super.apply(this, arguments); - } - // 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: 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"]); - +var et2_box = /** @class */ (function (_super) { + __extends(et2_box, _super); + /** + * Constructor + * + * @memberOf et2_box + */ + 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]); + 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 + */ + 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++) { + 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_core_xml_1.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 + */ + et2_box.prototype.getDetachedAttributes = function (_attrs) { + _attrs.push('data'); + }; + et2_box.prototype.getDetachedNodes = function () { + return [this.getDOMNode()]; + }; + et2_box.prototype.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]); + } + } + }; + 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"]); *
* */ -var et2_details = (function(){ "use strict"; return et2_box.extend( -{ - attributes:{ - "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 - } - }, - - 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"]); \ No newline at end of file +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", + 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 + } + }; + return et2_details; +}(et2_box)); +exports.et2_details = et2_details; +et2_core_widget_1.et2_register_widget(et2_details, ["details"]); diff --git a/api/js/etemplate/et2_widget_box.ts b/api/js/etemplate/et2_widget_box.ts new file mode 100644 index 0000000000..6076c24284 --- /dev/null +++ b/api/js/etemplate/et2_widget_box.ts @@ -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 + * + *
+ * + * .... + *
+ * + */ +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"]); \ No newline at end of file