From ec83c3a1812a99daaf8227806cbc826ed792d1a5 Mon Sep 17 00:00:00 2001 From: nathangray Date: Wed, 12 Feb 2020 14:17:33 -0700 Subject: [PATCH] Color widget --- api/js/etemplate/et2_widget_color.js | 195 ++++++++++++++------------- api/js/etemplate/et2_widget_color.ts | 123 +++++++++++++++++ 2 files changed, 222 insertions(+), 96 deletions(-) create mode 100644 api/js/etemplate/et2_widget_color.ts diff --git a/api/js/etemplate/et2_widget_color.js b/api/js/etemplate/et2_widget_color.js index d33448217b..193d07e303 100644 --- a/api/js/etemplate/et2_widget_color.js +++ b/api/js/etemplate/et2_widget_color.js @@ -1,3 +1,4 @@ +"use strict"; /** * EGroupware eTemplate2 - JS Color picker object * @@ -9,109 +10,111 @@ * @copyright Nathan Gray 2012 * @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_inputWidget; - et2_core_valueWidget; + /vendor/bower-asset/jquery/dist/jquery.js; + et2_core_inputWidget; + et2_core_valueWidget; */ - +var et2_core_widget_1 = require("./et2_core_widget"); +var et2_core_valueWidget_1 = require("./et2_core_valueWidget"); +var et2_core_inputWidget_1 = require("./et2_core_inputWidget"); +var et2_core_inheritance_1 = require("./et2_core_inheritance"); /** * Class which implements the "colorpicker" XET-Tag * - * @augments et2_inputWidget */ -var et2_color = (function(){ "use strict"; return et2_inputWidget.extend( -{ - attributes: { - }, - - /** - * Constructor - * - * @memberOf et2_color - */ - init: function() { - this._super.apply(this, arguments); - - // included via etemplate2.css - //this.egw().includeCSS("phpgwapi/js/jquery/jpicker/css/jPicker-1.1.6.min.css"); - this.input = this.$node = jQuery(""); - - this.setDOMNode(this.$node[0]); - this.set_value(this.options.value); - }, - - getValue: function() { - var value = this.$node.val(); - if(value === '#FFFFFF' || value === '#ffffff') - { - return ''; - } - return value; - }, - - set_value: function(color) { - if(!color) - { - color = '#ffffff'; - } - this.$node.val(color); - } -});}).call(this); -et2_register_widget(et2_color, ["colorpicker"]); - +var et2_color = /** @class */ (function (_super) { + __extends(et2_color, _super); + /** + * Constructor + */ + function et2_color(_parent, _attrs, _child) { + var _this = + // Call the inherited constructor + _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_color._attributes, _child || {})) || this; + // included via etemplate2.css + //this.egw().includeCSS("phpgwapi/js/jquery/jpicker/css/jPicker-1.1.6.min.css"); + _this.input = jQuery(""); + _this.setDOMNode(_this.input[0]); + return _this; + } + et2_color.prototype.getValue = function () { + var value = this.input.val(); + if (value === '#FFFFFF' || value === '#ffffff') { + return ''; + } + return value; + }; + et2_color.prototype.set_value = function (color) { + if (!color) { + color = '#ffffff'; + } + this.input.val(color); + }; + return et2_color; +}(et2_core_inputWidget_1.et2_inputWidget)); +exports.et2_color = et2_color; +et2_core_widget_1.et2_register_widget(et2_color, ["colorpicker"]); /** * et2_textbox_ro is the dummy readonly implementation of the textbox. * @augments et2_valueWidget */ -var et2_color_ro = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDetachedDOM], -{ - /** - * Constructor - * - * @memberOf et2_color_ro - */ - init: function() { - this._super.apply(this, arguments); - - this.value = ""; - this.$node = jQuery(document.createElement("div")) - .addClass("et2_color"); - - this.setDOMNode(this.$node[0]); - }, - - set_value: function(_value) { - this.value = _value; - - if(!_value) _value = "inherit"; - this.$node.css("background-color", _value); - }, - /** - * Code for implementing et2_IDetachedDOM - * - * @param {array} _attrs array to add further attributes to - */ - getDetachedAttributes: function(_attrs) - { - _attrs.push("value"); - }, - - getDetachedNodes: function() - { - return [this.node]; - }, - - setDetachedAttributes: function(_nodes, _values) - { - this.$node = jQuery(_nodes[0]); - if(typeof _values["value"] != 'undefined') - { - this.set_value(_values["value"]); - } - } -});}).call(this); - -et2_register_widget(et2_color_ro, ["colorpicker_ro"]); - +var et2_color_ro = /** @class */ (function (_super) { + __extends(et2_color_ro, _super); + /** + * Constructor + * + * @memberOf et2_color_ro + */ + function et2_color_ro(_parent, _attrs, _child) { + var _this = + // Call the inherited constructor + _super.call(this, _parent, _attrs, _child || {}) || this; + _this.value = ""; + _this.$node = jQuery(document.createElement("div")) + .addClass("et2_color"); + _this.setDOMNode(_this.$node[0]); + return _this; + } + et2_color_ro.prototype.set_value = function (_value) { + this.value = _value; + if (!_value) + _value = "inherit"; + this.$node.css("background-color", _value); + }; + /** + * Code for implementing et2_IDetachedDOM + * + * @param {array} _attrs array to add further attributes to + */ + et2_color_ro.prototype.getDetachedAttributes = function (_attrs) { + _attrs.push("value"); + }; + et2_color_ro.prototype.getDetachedNodes = function () { + return [this.node]; + }; + et2_color_ro.prototype.setDetachedAttributes = function (_nodes, _values) { + this.$node = jQuery(_nodes[0]); + if (typeof _values["value"] != 'undefined') { + this.set_value(_values["value"]); + } + }; + return et2_color_ro; +}(et2_core_valueWidget_1.et2_valueWidget)); +exports.et2_color_ro = et2_color_ro; +et2_core_widget_1.et2_register_widget(et2_color_ro, ["colorpicker_ro"]); +//# sourceMappingURL=et2_widget_color.js.map \ No newline at end of file diff --git a/api/js/etemplate/et2_widget_color.ts b/api/js/etemplate/et2_widget_color.ts new file mode 100644 index 0000000000..70df271e0c --- /dev/null +++ b/api/js/etemplate/et2_widget_color.ts @@ -0,0 +1,123 @@ +/** + * EGroupware eTemplate2 - JS Color picker object + * + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @package etemplate + * @subpackage api + * @link http://www.egroupware.org + * @author Nathan Gray + * @copyright Nathan Gray 2012 + * @version $Id$ + */ + +/*egw:uses + /vendor/bower-asset/jquery/dist/jquery.js; + et2_core_inputWidget; + et2_core_valueWidget; +*/ + +import {et2_register_widget, WidgetConfig} from "./et2_core_widget"; +import {et2_valueWidget} from "./et2_core_valueWidget"; +import {et2_inputWidget} from "./et2_core_inputWidget"; +import {ClassWithAttributes} from "./et2_core_inheritance"; + +/** + * Class which implements the "colorpicker" XET-Tag + * + */ +export class et2_color extends et2_inputWidget +{ + private input: JQuery; + /** + * Constructor + */ + constructor(_parent, _attrs? : WidgetConfig, _child? : object) + { + // Call the inherited constructor + super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_color._attributes, _child || {})); + // included via etemplate2.css + //this.egw().includeCSS("phpgwapi/js/jquery/jpicker/css/jPicker-1.1.6.min.css"); + this.input = jQuery(""); + + this.setDOMNode(this.input[0]); + } + + getValue( ) + { + var value = this.input.val(); + if(value === '#FFFFFF' || value === '#ffffff') + { + return ''; + } + return value; + } + + set_value( color) + { + if(!color) + { + color = '#ffffff'; + } + this.input.val(color); + } +} +et2_register_widget(et2_color, ["colorpicker"]); + +/** + * et2_textbox_ro is the dummy readonly implementation of the textbox. + * @augments et2_valueWidget + */ +export class et2_color_ro extends et2_valueWidget implements et2_IDetachedDOM +{ + private value: string; + private $node: JQuery; + /** + * Constructor + * + * @memberOf et2_color_ro + */ + constructor(_parent, _attrs? : WidgetConfig, _child? : object) + { + // Call the inherited constructor + super(_parent, _attrs, _child || {}); + + this.value = ""; + this.$node = jQuery(document.createElement("div")) + .addClass("et2_color"); + + this.setDOMNode(this.$node[0]); + } + + set_value( _value) + { + this.value = _value; + + if(!_value) _value = "inherit"; + this.$node.css("background-color", _value); + } + /** + * Code for implementing et2_IDetachedDOM + * + * @param {array} _attrs array to add further attributes to + */ + getDetachedAttributes(_attrs) + { + _attrs.push("value"); + } + + getDetachedNodes() + { + return [this.node]; + } + + setDetachedAttributes(_nodes, _values) + { + this.$node = jQuery(_nodes[0]); + if(typeof _values["value"] != 'undefined') + { + this.set_value(_values["value"]); + } + } +} +et2_register_widget(et2_color_ro, ["colorpicker_ro"]); +