guy
4 years ago
43 changed files with 6258 additions and 2881 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,248 @@
|
||||
/** |
||||
* @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; |
||||
|
||||
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,308 @@
|
||||
/** |
||||
* 简单选色控件 |
||||
* |
||||
* 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.map(BI.range(0, 3), function () { |
||||
return { |
||||
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); |
||||
} |
||||
} |
||||
}] |
||||
}; |
||||
}); |
||||
|
||||
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: BI.extend(Ws[0], { |
||||
ref: function (_ref) { |
||||
self.R = _ref |
||||
} |
||||
}), |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: BI.extend(Ws[1], { |
||||
ref: function (_ref) { |
||||
self.G = _ref |
||||
} |
||||
}), |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: BI.extend(Ws[2], { |
||||
ref: function (_ref) { |
||||
self.B = _ref |
||||
} |
||||
}), |
||||
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,178 @@
|
||||
/** |
||||
* @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.map(BI.range(0, 3), function () { |
||||
return { |
||||
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); |
||||
} |
||||
} |
||||
}] |
||||
} |
||||
}); |
||||
|
||||
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: BI.extend(Ws[0], { |
||||
ref: function (_ref) { |
||||
self.R = _ref |
||||
} |
||||
}), |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: BI.extend(Ws[1], { |
||||
ref: function (_ref) { |
||||
self.G = _ref |
||||
} |
||||
}), |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: BI.extend(Ws[2], { |
||||
ref: function (_ref) { |
||||
self.B = _ref |
||||
} |
||||
}), |
||||
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