forked from extern/egroupware
Color widget
This commit is contained in:
nathangray
parent
5ab4d36830
commit
ec83c3a181
@ -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;
|
||||
*/
|
||||
|
||||
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: {
|
||||
},
|
||||
|
||||
var et2_color = /** @class */ (function (_super) {
|
||||
__extends(et2_color, _super);
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @memberOf et2_color
|
||||
*/
|
||||
init: function() {
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
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 = this.$node = jQuery("<input type='color' class='et2_color'/>");
|
||||
|
||||
this.setDOMNode(this.$node[0]);
|
||||
this.set_value(this.options.value);
|
||||
},
|
||||
|
||||
getValue: function() {
|
||||
var value = this.$node.val();
|
||||
if(value === '#FFFFFF' || value === '#ffffff')
|
||||
{
|
||||
_this.input = jQuery("<input type='color' class='et2_color'/>");
|
||||
_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;
|
||||
},
|
||||
|
||||
set_value: function(color) {
|
||||
if(!color)
|
||||
{
|
||||
};
|
||||
et2_color.prototype.set_value = function (color) {
|
||||
if (!color) {
|
||||
color = '#ffffff';
|
||||
}
|
||||
this.$node.val(color);
|
||||
}
|
||||
});}).call(this);
|
||||
et2_register_widget(et2_color, ["colorpicker"]);
|
||||
|
||||
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],
|
||||
{
|
||||
var et2_color_ro = /** @class */ (function (_super) {
|
||||
__extends(et2_color_ro, _super);
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @memberOf et2_color_ro
|
||||
*/
|
||||
init: function() {
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
this.value = "";
|
||||
this.$node = jQuery(document.createElement("div"))
|
||||
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]);
|
||||
},
|
||||
|
||||
set_value: function(_value) {
|
||||
_this.setDOMNode(_this.$node[0]);
|
||||
return _this;
|
||||
}
|
||||
et2_color_ro.prototype.set_value = function (_value) {
|
||||
this.value = _value;
|
||||
|
||||
if(!_value) _value = "inherit";
|
||||
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)
|
||||
{
|
||||
et2_color_ro.prototype.getDetachedAttributes = function (_attrs) {
|
||||
_attrs.push("value");
|
||||
},
|
||||
|
||||
getDetachedNodes: function()
|
||||
{
|
||||
};
|
||||
et2_color_ro.prototype.getDetachedNodes = function () {
|
||||
return [this.node];
|
||||
},
|
||||
|
||||
setDetachedAttributes: function(_nodes, _values)
|
||||
{
|
||||
};
|
||||
et2_color_ro.prototype.setDetachedAttributes = function (_nodes, _values) {
|
||||
this.$node = jQuery(_nodes[0]);
|
||||
if(typeof _values["value"] != 'undefined')
|
||||
{
|
||||
if (typeof _values["value"] != 'undefined') {
|
||||
this.set_value(_values["value"]);
|
||||
}
|
||||
}
|
||||
});}).call(this);
|
||||
|
||||
et2_register_widget(et2_color_ro, ["colorpicker_ro"]);
|
||||
|
||||
};
|
||||
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
|
||||
123
api/js/etemplate/et2_widget_color.ts
Normal file
123
api/js/etemplate/et2_widget_color.ts
Normal 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"]);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user