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