holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Color widget

Browse Source
This commit is contained in:
nathangray 2020-02-12 14:17:33 -07:00
parent 5ab4d36830
commit ec83c3a181
2 changed files with 222 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
api/js/etemplate/et2_widget_color.js
View File

@ -1,3 +1,4 @@
"use strict";
/** /**
* EGroupware eTemplate2 - JS Color picker object * EGroupware eTemplate2 - JS Color picker object
* *
@ -9,109 +10,111 @@
* @copyright Nathan Gray 2012 * @copyright Nathan Gray 2012
* @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_inputWidget; et2_core_inputWidget;
et2_core_valueWidget; 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 * Class which implements the "colorpicker" XET-Tag
* *
* @augments et2_inputWidget
*/ */
var et2_color = (function(){ "use strict"; return et2_inputWidget.extend( var et2_color = /** @class */ (function (_super) {
{ __extends(et2_color, _super);
attributes: {
},
/** /**
* Constructor * Constructor
*
* @memberOf et2_color
*/ */
init: function() { function et2_color(_parent, _attrs, _child) {
this._super.apply(this, arguments); 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 // included via etemplate2.css
//this.egw().includeCSS("phpgwapi/js/jquery/jpicker/css/jPicker-1.1.6.min.css"); //this.egw().includeCSS("phpgwapi/js/jquery/jpicker/css/jPicker-1.1.6.min.css");
this.input = this.$node = jQuery("<input type='color' class='et2_color'/>"); _this.input = jQuery("<input type='color' class='et2_color'/>");
_this.setDOMNode(_this.input[0]);
this.setDOMNode(this.$node[0]); return _this;
this.set_value(this.options.value); }
}, et2_color.prototype.getValue = function () {
var value = this.input.val();
getValue: function() { if (value === '#FFFFFF' || value === '#ffffff') {
var value = this.$node.val();
if(value === '#FFFFFF' || value === '#ffffff')
{
return ''; return '';
} }
return value; return value;
}, };
et2_color.prototype.set_value = function (color) {
set_value: function(color) { if (!color) {
if(!color)
{
color = '#ffffff'; color = '#ffffff';
} }
this.$node.val(color); this.input.val(color);
} };
});}).call(this); return et2_color;
et2_register_widget(et2_color, ["colorpicker"]); }(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. * et2_textbox_ro is the dummy readonly implementation of the textbox.
* @augments et2_valueWidget * @augments et2_valueWidget
*/ */
var et2_color_ro = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDetachedDOM], var et2_color_ro = /** @class */ (function (_super) {
{ __extends(et2_color_ro, _super);
/** /**
* Constructor * Constructor
* *
* @memberOf et2_color_ro * @memberOf et2_color_ro
*/ */
init: function() { function et2_color_ro(_parent, _attrs, _child) {
this._super.apply(this, arguments); var _this =
// Call the inherited constructor
this.value = ""; _super.call(this, _parent, _attrs, _child || {}) || this;
this.$node = jQuery(document.createElement("div")) _this.value = "";
_this.$node = jQuery(document.createElement("div"))
.addClass("et2_color"); .addClass("et2_color");
_this.setDOMNode(_this.$node[0]);
this.setDOMNode(this.$node[0]); return _this;
}, }
et2_color_ro.prototype.set_value = function (_value) {
set_value: function(_value) {
this.value = _value; this.value = _value;
if (!_value)
if(!_value) _value = "inherit"; _value = "inherit";
this.$node.css("background-color", _value); this.$node.css("background-color", _value);
}, };
/** /**
* Code for implementing et2_IDetachedDOM * Code for implementing et2_IDetachedDOM
* *
* @param {array} _attrs array to add further attributes to * @param {array} _attrs array to add further attributes to
*/ */
getDetachedAttributes: function(_attrs) et2_color_ro.prototype.getDetachedAttributes = function (_attrs) {
{
_attrs.push("value"); _attrs.push("value");
}, };
et2_color_ro.prototype.getDetachedNodes = function () {
getDetachedNodes: function()
{
return [this.node]; return [this.node];
}, };
et2_color_ro.prototype.setDetachedAttributes = function (_nodes, _values) {
setDetachedAttributes: function(_nodes, _values)
{
this.$node = jQuery(_nodes[0]); this.$node = jQuery(_nodes[0]);
if(typeof _values["value"] != 'undefined') if (typeof _values["value"] != 'undefined') {
{
this.set_value(_values["value"]); this.set_value(_values["value"]);
} }
} };
});}).call(this); return et2_color_ro;
}(et2_core_valueWidget_1.et2_valueWidget));
et2_register_widget(et2_color_ro, ["colorpicker_ro"]); 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

123
api/js/etemplate/et2_widget_color.ts Normal file
View File

@ -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("<input type='color' class='et2_color'/>");
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"]);