forked from fanruan/fineui
windy
4 years ago
11 changed files with 786 additions and 22 deletions
@ -0,0 +1,250 @@
|
||||
/** |
||||
* @author windy |
||||
* @version 2.0 |
||||
* Created by windy on 2020/11/10 |
||||
*/ |
||||
BI.HexColorChooserPopup = BI.inherit(BI.Widget, { |
||||
|
||||
props: { |
||||
baseCls: "bi-color-chooser-popup", |
||||
width: 292, |
||||
height: 195, |
||||
simple: false // 简单模式, popup中没有自动和透明
|
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
|
||||
this.customColorChooser = BI.createWidget(); |
||||
|
||||
return { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.vtape", |
||||
items: [{ |
||||
el: BI.extend({ |
||||
type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor", |
||||
value: o.value, |
||||
height: 30, |
||||
listeners: [{ |
||||
eventName: BI.ColorPickerEditor.EVENT_CHANGE, |
||||
action: function () { |
||||
self.setValue(this.getValue()); |
||||
self._dealStoreColors(); |
||||
self.fireEvent(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, arguments); |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.colorEditor = _ref; |
||||
} |
||||
}, o.editor), |
||||
height: 50 |
||||
}, { |
||||
el: { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.color_picker", |
||||
cls: "bi-border-bottom bi-border-right", |
||||
items: [this._digestStoreColors(this._getStoreColors())], |
||||
height: 34, |
||||
value: o.value, |
||||
listeners: [{ |
||||
eventName: BI.ColorPicker.EVENT_CHANGE, |
||||
action: function () { |
||||
self.setValue(this.getValue()[0]); |
||||
self._dealStoreColors(); |
||||
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.storeColors = _ref; |
||||
} |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 5 |
||||
}] |
||||
}, |
||||
height: 38 |
||||
}, { |
||||
el: { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.color_picker", |
||||
value: o.value, |
||||
listeners: [{ |
||||
eventName: BI.ColorPicker.EVENT_CHANGE, |
||||
action: function () { |
||||
self.setValue(this.getValue()[0]); |
||||
self._dealStoreColors(); |
||||
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.colorPicker = _ref; |
||||
} |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 5, |
||||
bottom: 10 |
||||
}] |
||||
} |
||||
}, { |
||||
el: { |
||||
type: "bi.combo", |
||||
cls: "bi-border-top", |
||||
container: null, |
||||
direction: "right,top", |
||||
isNeedAdjustHeight: false, |
||||
el: { |
||||
type: "bi.text_item", |
||||
cls: "color-chooser-popup-more bi-list-item", |
||||
textAlign: "center", |
||||
height: 24, |
||||
textLgap: 10, |
||||
text: BI.i18nText("BI-Basic_More") + "..." |
||||
}, |
||||
popup: { |
||||
type: "bi.popup_panel", |
||||
buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")], |
||||
title: BI.i18nText("BI-Custom_Color"), |
||||
el: { |
||||
type: "bi.custom_color_chooser", |
||||
editor: o.editor, |
||||
ref: function (_ref) { |
||||
self.customColorChooser = _ref; |
||||
} |
||||
}, |
||||
stopPropagation: false, |
||||
bgap: -1, |
||||
rgap: 1, |
||||
lgap: 1, |
||||
minWidth: 227, |
||||
listeners: [{ |
||||
eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, |
||||
action: function (index) { |
||||
switch (index) { |
||||
case 0: |
||||
self.more.hideView(); |
||||
break; |
||||
case 1: |
||||
self.setValue(self.customColorChooser.getValue()); |
||||
self._dealStoreColors(); |
||||
self.more.hideView(); |
||||
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); |
||||
break; |
||||
} |
||||
} |
||||
}] |
||||
}, |
||||
listeners: [{ |
||||
eventName: BI.Combo.EVENT_AFTER_POPUPVIEW, |
||||
action: function () { |
||||
self.customColorChooser.setValue(self.getValue()); |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.more = _ref; |
||||
} |
||||
}, |
||||
height: 24 |
||||
}] |
||||
}, |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0 |
||||
}, { |
||||
el: { |
||||
type: "bi.layout", |
||||
cls: "disable-mask", |
||||
invisible: !o.disabled, |
||||
ref: function () { |
||||
self.mask = this; |
||||
} |
||||
}, |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0 |
||||
}] |
||||
}; |
||||
}, |
||||
|
||||
mounted: function () { |
||||
var self = this; |
||||
var o = this.options; |
||||
if (BI.isNotNull(o.value)) { |
||||
this.setValue(o.value); |
||||
} |
||||
}, |
||||
|
||||
_setEnable: function (enable) { |
||||
BI.ColorChooserPopup.superclass._setEnable.apply(this, arguments); |
||||
this.mask.setVisible(!enable); |
||||
}, |
||||
|
||||
_dealStoreColors: function () { |
||||
var color = this.getValue(); |
||||
var colors = this._getStoreColors(); |
||||
var que = new BI.Queue(8); |
||||
que.fromArray(colors); |
||||
que.remove(color); |
||||
que.unshift(color); |
||||
var array = que.toArray(); |
||||
BI.Cache.setItem("colors", BI.array2String(array)); |
||||
this.setStoreColors(array); |
||||
}, |
||||
|
||||
_digestStoreColors: function (colors) { |
||||
var items = BI.map(colors, function (i, color) { |
||||
return { |
||||
value: color |
||||
}; |
||||
}); |
||||
BI.count(colors.length, 8, function (i) { |
||||
items.push({ |
||||
value: "", |
||||
disabled: true |
||||
}); |
||||
}); |
||||
return items; |
||||
}, |
||||
|
||||
_getStoreColors: function() { |
||||
var self = this, o = this.options; |
||||
var colorsArray = BI.string2Array(BI.Cache.getItem("colors") || ""); |
||||
return BI.filter(colorsArray, function (idx, color) { |
||||
return o.simple ? self._isRGBColor(color) : true; |
||||
}); |
||||
}, |
||||
|
||||
_isRGBColor: function (color) { |
||||
return BI.isNotEmptyString(color) && color !== "transparent"; |
||||
}, |
||||
|
||||
setStoreColors: function (colors) { |
||||
if (BI.isArray(colors)) { |
||||
this.storeColors.populate([this._digestStoreColors(colors)]); |
||||
// BI-66973 选中颜色的同时选中历史
|
||||
this.storeColors.setValue(this.getValue()); |
||||
} |
||||
}, |
||||
|
||||
setValue: function (color) { |
||||
this.colorEditor.setValue(color); |
||||
this.colorPicker.setValue(color); |
||||
this.storeColors.setValue(color); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.colorEditor.getValue(); |
||||
} |
||||
}); |
||||
BI.HexColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; |
||||
BI.HexColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.hex_color_chooser_popup", BI.HexColorChooserPopup); |
||||
@ -0,0 +1,49 @@
|
||||
/** |
||||
* @author windy |
||||
* @version 2.0 |
||||
* Created by windy on 2020/11/10 |
||||
*/ |
||||
BI.SimpleHexColorChooserPopup = BI.inherit(BI.Widget, { |
||||
|
||||
props: { |
||||
baseCls: "bi-color-chooser-popup", |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
return { |
||||
type: "bi.hex_color_chooser_popup", |
||||
value: o.value, |
||||
simple: true, // 是否有自动
|
||||
listeners: [{ |
||||
eventName: BI.ColorChooserPopup.EVENT_CHANGE, |
||||
action: function () { |
||||
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_CHANGE, arguments); |
||||
} |
||||
}, { |
||||
eventName: BI.ColorChooserPopup.EVENT_VALUE_CHANGE, |
||||
action: function () { |
||||
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE, arguments); |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.popup = _ref; |
||||
} |
||||
} |
||||
}, |
||||
|
||||
setStoreColors: function (colors) { |
||||
this.popup.setStoreColors(colors); |
||||
}, |
||||
|
||||
setValue: function (color) { |
||||
this.popup.setValue(color); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.popup.getValue(); |
||||
} |
||||
}); |
||||
BI.SimpleHexColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; |
||||
BI.SimpleHexColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.simple_hex_color_chooser_popup", BI.SimpleHexColorChooserPopup); |
||||
@ -0,0 +1,297 @@
|
||||
/** |
||||
* 简单选色控件 |
||||
* |
||||
* Created by GUY on 2015/11/16. |
||||
* @class BI.ColorPickerEditor |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.HexColorPickerEditor = BI.inherit(BI.Widget, { |
||||
|
||||
constants: { |
||||
RGB_WIDTH: 32, |
||||
HEX_WIDTH: 70, |
||||
HEX_PREFIX_POSITION: 1 |
||||
}, |
||||
|
||||
props: { |
||||
baseCls: "bi-color-picker-editor", |
||||
// width: 200,
|
||||
height: 50 |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options, c = this.constants; |
||||
this.storeValue = {}; |
||||
var RGB = BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { |
||||
type: "bi.label", |
||||
cls: "color-picker-editor-label", |
||||
height: 20 |
||||
}); |
||||
|
||||
var checker = function (v) { |
||||
return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; |
||||
}; |
||||
var Ws = BI.createWidgets([{}, {}, {}], { |
||||
type: "bi.small_text_editor", |
||||
cls: "color-picker-editor-input", |
||||
validationChecker: checker, |
||||
errorText: BI.i18nText("BI-Color_Picker_Error_Text"), |
||||
allowBlank: true, |
||||
value: 255, |
||||
width: c.RGB_WIDTH, |
||||
height: 20, |
||||
listeners: [{ |
||||
eventName: BI.TextEditor.EVENT_CHANGE, |
||||
action: function () { |
||||
self._checkEditors(); |
||||
if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { |
||||
self.colorShow.element.css("background-color", self.getValue()); |
||||
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
||||
} |
||||
} |
||||
}] |
||||
}); |
||||
this.R = Ws[0]; |
||||
this.G = Ws[1]; |
||||
this.B = Ws[2]; |
||||
|
||||
return { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.vertical", |
||||
tgap: 5, |
||||
items: [{ |
||||
type: "bi.vertical_adapt", |
||||
rgap: 5, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.layout", |
||||
cls: "color-picker-editor-display bi-card bi-border", |
||||
height: 16, |
||||
width: 16, |
||||
ref: function (_ref) { |
||||
self.colorShow = _ref; |
||||
} |
||||
}, |
||||
width: 16 |
||||
}, { |
||||
type: "bi.label", |
||||
text: "#", |
||||
width: 10 |
||||
}, { |
||||
type: "bi.small_text_editor", |
||||
ref: function (_ref) { |
||||
self.hexEditor = _ref; |
||||
}, |
||||
cls: "color-picker-editor-input", |
||||
validationChecker: this._hexChecker, |
||||
errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"), |
||||
width: c.HEX_WIDTH, |
||||
height: 20, |
||||
listeners: [{ |
||||
eventName: "EVENT_CHANGE", |
||||
action: function () { |
||||
self.setValue("#" + this.getValue()); |
||||
self.colorShow.element.css("background-color", self.getValue()); |
||||
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
||||
} |
||||
}] |
||||
}, { |
||||
el: this.R, |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: this.G, |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: this.B, |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: { |
||||
type: "bi.icon_button", |
||||
cls: "trans-color-icon", |
||||
width: 16, |
||||
height: 16, |
||||
iconWidth: 16, |
||||
iconHeight: 16, |
||||
title: BI.i18nText("BI-Transparent_Color"), |
||||
listeners: [{ |
||||
eventName: BI.IconButton.EVENT_CHANGE, |
||||
action: function () { |
||||
if (this.isSelected()) { |
||||
self.lastColor = self.getValue(); |
||||
self.setValue("transparent"); |
||||
} else { |
||||
if (self.lastColor === "transparent") { |
||||
self.lastColor = ""; |
||||
} |
||||
self.setValue(self.lastColor || "#ffffff"); |
||||
} |
||||
if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) || |
||||
self._isEmptyRGB()) { |
||||
self.colorShow.element.css("background-color", self.getValue()); |
||||
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
||||
} |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.transparent = _ref; |
||||
} |
||||
}, |
||||
width: 16, |
||||
lgap: 5 |
||||
}, { |
||||
el: { |
||||
type: "bi.icon_button", |
||||
cls: "auto-color-icon", |
||||
width: 16, |
||||
height: 16, |
||||
iconWidth: 16, |
||||
iconHeight: 16, |
||||
title: BI.i18nText("BI-Basic_Auto"), |
||||
listeners: [{ |
||||
eventName: BI.IconButton.EVENT_CHANGE, |
||||
action: function () { |
||||
if (this.isSelected()) { |
||||
self.lastColor = self.getValue(); |
||||
self.setValue(""); |
||||
} else { |
||||
self.setValue(self.lastColor || "#ffffff"); |
||||
} |
||||
if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) || self._isEmptyRGB()) { |
||||
self.colorShow.element.css("background-color", self.getValue()); |
||||
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
||||
} |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.none = _ref; |
||||
} |
||||
}, |
||||
width: 16, |
||||
lgap: 5 |
||||
}] |
||||
}, { |
||||
type: "bi.vertical_adapt", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "color-picker-editor-label", |
||||
height: 20, |
||||
text: "HEX" |
||||
}, |
||||
lgap: 60 |
||||
},{ |
||||
el: RGB[0].el, |
||||
lgap: 44 |
||||
}, { |
||||
el: RGB[1].el, |
||||
lgap: 28 |
||||
}, { |
||||
el: RGB[2].el, |
||||
lgap: 28 |
||||
}] |
||||
}] |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 0, |
||||
bottom: 0 |
||||
}] |
||||
}; |
||||
}, |
||||
|
||||
_hexChecker: function (v) { |
||||
return /^[0-9a-fA-F]{6}$/.test(v); |
||||
}, |
||||
|
||||
_checkEditors: function () { |
||||
if(BI.isEmptyString(this.R.getValue())) { |
||||
this.R.setValue(0); |
||||
} |
||||
if(BI.isEmptyString(this.G.getValue())) { |
||||
this.G.setValue(0); |
||||
} |
||||
if(BI.isEmptyString(this.B.getValue())) { |
||||
this.B.setValue(0); |
||||
} |
||||
this.storeValue = { |
||||
r: this.R.getValue() || 0, |
||||
g: this.G.getValue() || 0, |
||||
b: this.B.getValue() || 0 |
||||
}; |
||||
this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION)); |
||||
}, |
||||
|
||||
_isEmptyRGB: function () { |
||||
return BI.isEmptyString(this.storeValue.r) && BI.isEmptyString(this.storeValue.g) && BI.isEmptyString(this.storeValue.b); |
||||
}, |
||||
|
||||
_showPreColor: function (color) { |
||||
if (color === "") { |
||||
this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-normal-background"); |
||||
} else if (color === "transparent") { |
||||
this.colorShow.element.css("background-color", "").removeClass("auto-color-normal-background").addClass("trans-color-background"); |
||||
} else { |
||||
this.colorShow.element.css({"background-color": color}).removeClass("auto-color-normal-background").removeClass("trans-color-background"); |
||||
} |
||||
}, |
||||
|
||||
_setEnable: function (enable) { |
||||
BI.ColorPickerEditor.superclass._setEnable.apply(this, arguments); |
||||
if (enable === true) { |
||||
this.element.removeClass("base-disabled disabled"); |
||||
} else if (enable === false) { |
||||
this.element.addClass("base-disabled disabled"); |
||||
} |
||||
}, |
||||
|
||||
setValue: function (color) { |
||||
if (color === "transparent") { |
||||
this.transparent.setSelected(true); |
||||
this.none.setSelected(false); |
||||
this._showPreColor("transparent"); |
||||
this.R.setValue(""); |
||||
this.G.setValue(""); |
||||
this.B.setValue(""); |
||||
this.hexEditor.setValue(""); |
||||
this.storeValue = { |
||||
r: "", |
||||
g: "", |
||||
b: "" |
||||
}; |
||||
return; |
||||
} |
||||
if (!color) { |
||||
color = ""; |
||||
this.none.setSelected(true); |
||||
} else { |
||||
this.none.setSelected(false); |
||||
} |
||||
this.transparent.setSelected(false); |
||||
this._showPreColor(color); |
||||
var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color)); |
||||
this.storeValue = { |
||||
r: BI.isNull(json.r) ? "" : json.r, |
||||
g: BI.isNull(json.g) ? "" : json.g, |
||||
b: BI.isNull(json.b) ? "" : json.b |
||||
}; |
||||
this.R.setValue(this.storeValue.r); |
||||
this.G.setValue(this.storeValue.g); |
||||
this.B.setValue(this.storeValue.b); |
||||
this.hexEditor.setValue(color.slice(this.constants.HEX_PREFIX_POSITION)); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
if (this._isEmptyRGB() && this.transparent.isSelected()) { |
||||
return "transparent"; |
||||
} |
||||
return BI.DOM.rgb2hex(BI.DOM.json2rgb({ |
||||
r: this.storeValue.r, |
||||
g: this.storeValue.g, |
||||
b: this.storeValue.b |
||||
})); |
||||
} |
||||
}); |
||||
BI.HexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.hex_color_picker_editor", BI.HexColorPickerEditor); |
||||
@ -0,0 +1,167 @@
|
||||
/** |
||||
* @author windy |
||||
* @version 2.0 |
||||
* Created by windy on 2020/11/10 |
||||
*/ |
||||
BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { |
||||
|
||||
constants: { |
||||
RGB_WIDTH: 40, |
||||
HEX_WIDTH: 70, |
||||
HEX_PREFIX_POSITION: 1 |
||||
}, |
||||
|
||||
props: { |
||||
baseCls: "bi-color-picker-editor", |
||||
// width: 200,
|
||||
height: 50 |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options, c = this.constants; |
||||
|
||||
var RGB = BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { |
||||
type: "bi.label", |
||||
cls: "color-picker-editor-label", |
||||
height: 20 |
||||
}); |
||||
|
||||
var checker = function (v) { |
||||
return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; |
||||
}; |
||||
var Ws = BI.createWidgets([{}, {}, {}], { |
||||
type: "bi.small_text_editor", |
||||
cls: "color-picker-editor-input", |
||||
validationChecker: checker, |
||||
errorText: BI.i18nText("BI-Color_Picker_Error_Text"), |
||||
allowBlank: true, |
||||
value: 255, |
||||
width: c.RGB_WIDTH, |
||||
height: 20, |
||||
listeners: [{ |
||||
eventName: BI.TextEditor.EVENT_CHANGE, |
||||
action: function () { |
||||
self._checkEditors(); |
||||
if (self.R.isValid() && self.G.isValid() && self.B.isValid()) { |
||||
self.colorShow.element.css("background-color", self.getValue()); |
||||
self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE); |
||||
} |
||||
} |
||||
}] |
||||
}); |
||||
this.R = Ws[0]; |
||||
this.G = Ws[1]; |
||||
this.B = Ws[2]; |
||||
|
||||
return { |
||||
type: "bi.vertical", |
||||
tgap: 5, |
||||
items: [{ |
||||
type: "bi.vertical_adapt", |
||||
rgap: 10, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.layout", |
||||
cls: "color-picker-editor-display bi-card bi-border", |
||||
height: 16, |
||||
width: 16, |
||||
ref: function (_ref) { |
||||
self.colorShow = _ref; |
||||
} |
||||
}, |
||||
width: 16, |
||||
lgap: 10, |
||||
rgap: 5 |
||||
}, { |
||||
type: "bi.label", |
||||
text: "#", |
||||
width: 10 |
||||
}, { |
||||
type: "bi.small_text_editor", |
||||
ref: function (_ref) { |
||||
self.hexEditor = _ref; |
||||
}, |
||||
cls: "color-picker-editor-input", |
||||
validationChecker: this._hexChecker, |
||||
errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"), |
||||
width: c.HEX_WIDTH, |
||||
height: 20, |
||||
listeners: [{ |
||||
eventName: "EVENT_CHANGE", |
||||
action: function () { |
||||
self.setValue("#" + this.getValue()); |
||||
self.colorShow.element.css("background-color", self.getValue()); |
||||
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
||||
} |
||||
}] |
||||
}, { |
||||
el: this.R, |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: this.G, |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: this.B, |
||||
width: c.RGB_WIDTH |
||||
}] |
||||
}, { |
||||
type: "bi.vertical_adapt", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "color-picker-editor-label", |
||||
height: 20, |
||||
text: "HEX" |
||||
}, |
||||
lgap: 86 |
||||
},{ |
||||
el: RGB[0].el, |
||||
lgap: 50 |
||||
}, { |
||||
el: RGB[1].el, |
||||
lgap: 40 |
||||
}, { |
||||
el: RGB[2].el, |
||||
lgap: 40 |
||||
}] |
||||
}] |
||||
|
||||
} |
||||
}, |
||||
|
||||
_hexChecker: function (v) { |
||||
return /^[0-9a-fA-F]{6}$/.test(v); |
||||
}, |
||||
|
||||
_checkEditors: function () { |
||||
if(BI.isEmptyString(this.R.getValue())) { |
||||
this.R.setValue(0); |
||||
} |
||||
if(BI.isEmptyString(this.G.getValue())) { |
||||
this.G.setValue(0); |
||||
} |
||||
if(BI.isEmptyString(this.B.getValue())) { |
||||
this.B.setValue(0); |
||||
} |
||||
this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION)); |
||||
}, |
||||
|
||||
setValue: function (color) { |
||||
this.colorShow.element.css({"background-color": color}); |
||||
var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color)); |
||||
this.R.setValue(BI.isNull(json.r) ? "" : json.r); |
||||
this.G.setValue(BI.isNull(json.g) ? "" : json.g); |
||||
this.B.setValue(BI.isNull(json.b) ? "" : json.b); |
||||
this.hexEditor.setValue(color.slice(this.constants.HEX_PREFIX_POSITION)); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return BI.DOM.rgb2hex(BI.DOM.json2rgb({ |
||||
r: this.R.getValue(), |
||||
g: this.G.getValue(), |
||||
b: this.B.getValue() |
||||
})); |
||||
} |
||||
}); |
||||
BI.SimpleHexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.simple_hex_color_picker_editor", BI.SimpleHexColorPickerEditor); |
||||
Loading…
Reference in new issue