You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
356 lines
14 KiB
356 lines
14 KiB
import { Label } from "@/base"; |
|
import { |
|
AbsoluteLayout, |
|
VerticalLayout, |
|
VerticalAdaptLayout, |
|
Layout, |
|
shortcut, |
|
Widget, |
|
createItems, |
|
map, |
|
isNumeric, |
|
range, |
|
extend, |
|
isEmptyString, |
|
isNull, |
|
DOM, |
|
i18nText |
|
} from "@/core"; |
|
import { ColorChooserShowButton } from "./button"; |
|
import { ColorPickerEditor } from "./editor.colorpicker"; |
|
import { SmallTextEditor } from "@/widget/editor/editor.text.small.js"; |
|
import { TextEditor } from "@/widget/editor/editor.text"; |
|
|
|
const RGB_WIDTH = 32, |
|
HEX_WIDTH = 70, |
|
HEX_PREFIX_POSITION = 1; |
|
|
|
/** |
|
* 简单选色控件 |
|
* |
|
* Created by GUY on 2015/11/16. |
|
* @class HexColorPickerEditor |
|
* @extends Widget |
|
*/ |
|
@shortcut() |
|
export class HexColorPickerEditor extends Widget { |
|
static xtype = "bi.hex_color_picker_editor"; |
|
|
|
static EVENT_CHANGE = "EVENT_CHANGE"; |
|
|
|
props = { |
|
baseCls: "bi-color-picker-editor", |
|
height: 30, |
|
}; |
|
|
|
render() { |
|
this.storeValue = {}; |
|
const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { |
|
type: Label.xtype, |
|
cls: "color-picker-editor-label", |
|
height: 20, |
|
}); |
|
|
|
const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; |
|
const Ws = map(range(0, 3), () => { |
|
return { |
|
type: SmallTextEditor.xtype, |
|
cls: "color-picker-editor-input bi-border-radius", |
|
validationChecker: checker, |
|
errorText: i18nText("BI-Color_Picker_Error_Text"), |
|
allowBlank: true, |
|
value: 255, |
|
width: RGB_WIDTH, |
|
height: 24, |
|
listeners: [ |
|
{ |
|
eventName: TextEditor.EVENT_CHANGE, |
|
action: () => { |
|
this._checkEditors(); |
|
if ( |
|
checker(this.storeValue.r) && |
|
checker(this.storeValue.g) && |
|
checker(this.storeValue.b) |
|
) { |
|
this.colorShow.element.css("background-color", this.getValue()); |
|
this.fireEvent(ColorPickerEditor.EVENT_CHANGE); |
|
} |
|
}, |
|
} |
|
], |
|
}; |
|
}); |
|
|
|
return { |
|
type: AbsoluteLayout.xtype, |
|
items: [ |
|
{ |
|
el: { |
|
type: VerticalLayout.xtype, |
|
tgap: 10, |
|
items: [ |
|
{ |
|
type: VerticalAdaptLayout.xtype, |
|
columnSize: ["fill", "fill"], |
|
height: 24, |
|
items: [ |
|
{ |
|
type: ColorChooserShowButton.xtype, |
|
cls: "trans-color-icon", |
|
height: 22, |
|
title: i18nText("BI-Transparent_Color"), |
|
text: i18nText("BI-Transparent_Color"), |
|
listeners: [ |
|
{ |
|
eventName: ColorChooserShowButton.EVENT_CHANGE, |
|
action: () => { |
|
this.setValue("transparent"); |
|
this.fireEvent(ColorPickerEditor.EVENT_CHANGE); |
|
}, |
|
} |
|
], |
|
ref: _ref => { |
|
this.transparent = _ref; |
|
}, |
|
}, |
|
{ |
|
el: { |
|
type: ColorChooserShowButton.xtype, |
|
cls: "auto-color-icon", |
|
height: 22, |
|
title: i18nText("BI-Basic_Auto"), |
|
text: i18nText("BI-Basic_Auto"), |
|
listeners: [ |
|
{ |
|
eventName: ColorChooserShowButton.EVENT_CHANGE, |
|
action: () => { |
|
this.setValue(""); |
|
this.fireEvent(ColorPickerEditor.EVENT_CHANGE); |
|
}, |
|
} |
|
], |
|
ref: _ref => { |
|
this.none = _ref; |
|
}, |
|
}, |
|
lgap: 10, |
|
} |
|
], |
|
}, |
|
{ |
|
el: { |
|
type: VerticalAdaptLayout.xtype, |
|
columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH], |
|
|
|
rgap: 5, |
|
items: [ |
|
{ |
|
el: { |
|
type: Layout.xtype, |
|
cls: "color-picker-editor-display bi-card bi-border", |
|
height: 22, |
|
width: 22, |
|
ref: _ref => { |
|
this.colorShow = _ref; |
|
}, |
|
}, |
|
width: 18, |
|
}, |
|
{ |
|
type: Label.xtype, |
|
text: "#", |
|
width: 10, |
|
}, |
|
{ |
|
type: SmallTextEditor.xtype, |
|
ref: _ref => { |
|
this.hexEditor = _ref; |
|
}, |
|
cls: "color-picker-editor-input bi-border-radius", |
|
validationChecker: this._hexChecker, |
|
allowBlank: true, |
|
errorText: i18nText("BI-Color_Picker_Error_Text_Hex"), |
|
width: HEX_WIDTH, |
|
height: 24, |
|
listeners: [ |
|
{ |
|
eventName: "EVENT_CHANGE", |
|
action: () => { |
|
this._checkHexEditor(); |
|
if ( |
|
checker(this.storeValue.r) && |
|
checker(this.storeValue.g) && |
|
checker(this.storeValue.b) |
|
) { |
|
this.colorShow.element.css( |
|
"background-color", |
|
this.getValue() |
|
); |
|
this.fireEvent(ColorPickerEditor.EVENT_CHANGE); |
|
} |
|
}, |
|
} |
|
], |
|
}, |
|
RGB[0], |
|
{ |
|
el: extend(Ws[0], { |
|
ref: _ref => { |
|
this.R = _ref; |
|
}, |
|
}), |
|
width: RGB_WIDTH, |
|
}, |
|
RGB[1], |
|
{ |
|
el: extend(Ws[1], { |
|
ref: _ref => { |
|
this.G = _ref; |
|
}, |
|
}), |
|
width: RGB_WIDTH, |
|
}, |
|
RGB[2], |
|
{ |
|
el: extend(Ws[2], { |
|
ref: _ref => { |
|
this.B = _ref; |
|
}, |
|
}), |
|
rgap: -5, |
|
width: RGB_WIDTH, |
|
} |
|
], |
|
}, |
|
} |
|
], |
|
}, |
|
left: 0, |
|
right: 0, |
|
top: 0, |
|
bottom: 0, |
|
} |
|
], |
|
}; |
|
} |
|
|
|
_hexChecker(v) { |
|
return /^[0-9a-fA-F]{6}$/.test(v); |
|
} |
|
|
|
_checkEditors() { |
|
if (isEmptyString(this.R.getValue())) { |
|
this.R.setValue(0); |
|
} |
|
if (isEmptyString(this.G.getValue())) { |
|
this.G.setValue(0); |
|
} |
|
if (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(HEX_PREFIX_POSITION)); |
|
} |
|
|
|
_isEmptyRGB() { |
|
return isEmptyString(this.storeValue.r) && isEmptyString(this.storeValue.g) && isEmptyString(this.storeValue.b); |
|
} |
|
|
|
_checkHexEditor() { |
|
if (isEmptyString(this.hexEditor.getValue())) { |
|
this.hexEditor.setValue("000000"); |
|
} |
|
const json = DOM.rgb2json(DOM.hex2rgb(`#${this.hexEditor.getValue()}`)); |
|
this.storeValue = { |
|
r: json.r || 0, |
|
g: json.g || 0, |
|
b: json.b || 0, |
|
}; |
|
this.R.setValue(this.storeValue.r); |
|
this.G.setValue(this.storeValue.g); |
|
this.B.setValue(this.storeValue.b); |
|
} |
|
|
|
_showPreColor(color) { |
|
if (color === "") { |
|
this.colorShow.element |
|
.css("background-color", "") |
|
.removeClass("trans-color-background") |
|
.addClass("auto-color-square-normal-background"); |
|
} else if (color === "transparent") { |
|
this.colorShow.element |
|
.css("background-color", "") |
|
.removeClass("auto-color-square-normal-background") |
|
.addClass("trans-color-background"); |
|
} else { |
|
this.colorShow.element |
|
.css({ "background-color": color }) |
|
.removeClass("auto-color-square-normal-background") |
|
.removeClass("trans-color-background"); |
|
} |
|
} |
|
|
|
_setEnable(enable) { |
|
super._setEnable(...arguments); |
|
if (enable === true) { |
|
this.element.removeClass("base-disabled disabled"); |
|
} else if (enable === false) { |
|
this.element.addClass("base-disabled disabled"); |
|
} |
|
} |
|
|
|
setValue(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); |
|
const json = DOM.rgb2json(DOM.hex2rgb(color)); |
|
this.storeValue = { |
|
r: isNull(json.r) ? "" : json.r, |
|
g: isNull(json.g) ? "" : json.g, |
|
b: 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(HEX_PREFIX_POSITION)); |
|
} |
|
|
|
getValue() { |
|
if (this._isEmptyRGB() && this.transparent.isSelected()) { |
|
return "transparent"; |
|
} |
|
|
|
return DOM.rgb2hex( |
|
DOM.json2rgb({ |
|
r: this.storeValue.r, |
|
g: this.storeValue.g, |
|
b: this.storeValue.b, |
|
}) |
|
); |
|
} |
|
}
|
|
|