|
|
@ -21,7 +21,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { |
|
|
|
render: function () { |
|
|
|
render: function () { |
|
|
|
var self = this, o = this.options, c = this.constants; |
|
|
|
var self = this, o = this.options, c = this.constants; |
|
|
|
this.storeValue = {}; |
|
|
|
this.storeValue = {}; |
|
|
|
var RGB = BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { |
|
|
|
var RGB = BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { |
|
|
|
type: "bi.label", |
|
|
|
type: "bi.label", |
|
|
|
cls: "color-picker-editor-label", |
|
|
|
cls: "color-picker-editor-label", |
|
|
|
height: 20 |
|
|
|
height: 20 |
|
|
@ -33,146 +33,162 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { |
|
|
|
var Ws = BI.map(BI.range(0, 3), function () { |
|
|
|
var Ws = BI.map(BI.range(0, 3), function () { |
|
|
|
return { |
|
|
|
return { |
|
|
|
type: "bi.small_text_editor", |
|
|
|
type: "bi.small_text_editor", |
|
|
|
cls: "color-picker-editor-input", |
|
|
|
cls: "color-picker-editor-input bi-border-radius", |
|
|
|
validationChecker: checker, |
|
|
|
validationChecker: checker, |
|
|
|
errorText: BI.i18nText("BI-Color_Picker_Error_Text"), |
|
|
|
errorText: BI.i18nText("BI-Color_Picker_Error_Text"), |
|
|
|
allowBlank: true, |
|
|
|
allowBlank: true, |
|
|
|
value: 255, |
|
|
|
value: 255, |
|
|
|
width: c.RGB_WIDTH, |
|
|
|
width: c.RGB_WIDTH, |
|
|
|
height: 24, |
|
|
|
height: 24, |
|
|
|
listeners: [{ |
|
|
|
listeners: [ |
|
|
|
eventName: BI.TextEditor.EVENT_CHANGE, |
|
|
|
{ |
|
|
|
action: function () { |
|
|
|
eventName: BI.TextEditor.EVENT_CHANGE, |
|
|
|
self._checkEditors(); |
|
|
|
action: function () { |
|
|
|
if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { |
|
|
|
self._checkEditors(); |
|
|
|
self.colorShow.element.css("background-color", self.getValue()); |
|
|
|
if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { |
|
|
|
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
|
|
|
self.colorShow.element.css("background-color", self.getValue()); |
|
|
|
|
|
|
|
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}] |
|
|
|
] |
|
|
|
}; |
|
|
|
}; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
return { |
|
|
|
return { |
|
|
|
type: "bi.absolute", |
|
|
|
type: "bi.absolute", |
|
|
|
items: [{ |
|
|
|
items: [ |
|
|
|
el: { |
|
|
|
{ |
|
|
|
type: "bi.vertical", |
|
|
|
el: { |
|
|
|
tgap: 10, |
|
|
|
type: "bi.vertical", |
|
|
|
items: [{ |
|
|
|
tgap: 10, |
|
|
|
type: 'bi.vertical_adapt', |
|
|
|
items: [ |
|
|
|
columnSize: ["fill", 'fill'], |
|
|
|
{ |
|
|
|
height: 24, |
|
|
|
type: 'bi.vertical_adapt', |
|
|
|
items: [{ |
|
|
|
columnSize: ["fill", 'fill'], |
|
|
|
type: "bi.color_picker_show_button", |
|
|
|
|
|
|
|
cls: "trans-color-icon", |
|
|
|
|
|
|
|
height: 22, |
|
|
|
|
|
|
|
title: BI.i18nText("BI-Transparent_Color"), |
|
|
|
|
|
|
|
text: BI.i18nText("BI-Transparent_Color"), |
|
|
|
|
|
|
|
listeners: [{ |
|
|
|
|
|
|
|
eventName: BI.ColorChooserShowButton.EVENT_CHANGE, |
|
|
|
|
|
|
|
action: function () { |
|
|
|
|
|
|
|
self.setValue("transparent"); |
|
|
|
|
|
|
|
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}], |
|
|
|
|
|
|
|
ref: function (_ref) { |
|
|
|
|
|
|
|
self.transparent = _ref; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, { |
|
|
|
|
|
|
|
el: { |
|
|
|
|
|
|
|
type: "bi.color_picker_show_button", |
|
|
|
|
|
|
|
cls: "auto-color-icon", |
|
|
|
|
|
|
|
height: 22, |
|
|
|
|
|
|
|
title: BI.i18nText("BI-Basic_Auto"), |
|
|
|
|
|
|
|
text: BI.i18nText("BI-Basic_Auto"), |
|
|
|
|
|
|
|
listeners: [{ |
|
|
|
|
|
|
|
eventName: BI.ColorChooserShowButton.EVENT_CHANGE, |
|
|
|
|
|
|
|
action: function () { |
|
|
|
|
|
|
|
self.setValue(""); |
|
|
|
|
|
|
|
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}], |
|
|
|
|
|
|
|
ref: function (_ref) { |
|
|
|
|
|
|
|
self.none = _ref; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
lgap: 10, |
|
|
|
|
|
|
|
}] |
|
|
|
|
|
|
|
}, { |
|
|
|
|
|
|
|
el: { |
|
|
|
|
|
|
|
type: "bi.vertical_adapt", |
|
|
|
|
|
|
|
columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH], |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
rgap: 5, |
|
|
|
|
|
|
|
items: [{ |
|
|
|
|
|
|
|
el: { |
|
|
|
|
|
|
|
type: "bi.layout", |
|
|
|
|
|
|
|
cls: "color-picker-editor-display bi-card bi-border", |
|
|
|
|
|
|
|
height: 22, |
|
|
|
|
|
|
|
width: 22, |
|
|
|
|
|
|
|
ref: function (_ref) { |
|
|
|
|
|
|
|
self.colorShow = _ref; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
width: 18 |
|
|
|
|
|
|
|
}, { |
|
|
|
|
|
|
|
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, |
|
|
|
|
|
|
|
allowBlank: true, |
|
|
|
|
|
|
|
errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"), |
|
|
|
|
|
|
|
width: c.HEX_WIDTH, |
|
|
|
|
|
|
|
height: 24, |
|
|
|
height: 24, |
|
|
|
listeners: [{ |
|
|
|
items: [ |
|
|
|
eventName: "EVENT_CHANGE", |
|
|
|
{ |
|
|
|
action: function () { |
|
|
|
type: "bi.color_picker_show_button", |
|
|
|
self._checkHexEditor(); |
|
|
|
cls: "trans-color-icon", |
|
|
|
if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { |
|
|
|
height: 22, |
|
|
|
self.colorShow.element.css("background-color", self.getValue()); |
|
|
|
title: BI.i18nText("BI-Transparent_Color"), |
|
|
|
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
|
|
|
text: BI.i18nText("BI-Transparent_Color"), |
|
|
|
|
|
|
|
listeners: [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
eventName: BI.ColorChooserShowButton.EVENT_CHANGE, |
|
|
|
|
|
|
|
action: function () { |
|
|
|
|
|
|
|
self.setValue("transparent"); |
|
|
|
|
|
|
|
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
ref: function (_ref) { |
|
|
|
|
|
|
|
self.transparent = _ref; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}, { |
|
|
|
|
|
|
|
el: { |
|
|
|
|
|
|
|
type: "bi.color_picker_show_button", |
|
|
|
|
|
|
|
cls: "auto-color-icon", |
|
|
|
|
|
|
|
height: 22, |
|
|
|
|
|
|
|
title: BI.i18nText("BI-Basic_Auto"), |
|
|
|
|
|
|
|
text: BI.i18nText("BI-Basic_Auto"), |
|
|
|
|
|
|
|
listeners: [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
eventName: BI.ColorChooserShowButton.EVENT_CHANGE, |
|
|
|
|
|
|
|
action: function () { |
|
|
|
|
|
|
|
self.setValue(""); |
|
|
|
|
|
|
|
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
ref: function (_ref) { |
|
|
|
|
|
|
|
self.none = _ref; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
lgap: 10, |
|
|
|
} |
|
|
|
} |
|
|
|
}] |
|
|
|
] |
|
|
|
}, RGB[0], { |
|
|
|
}, { |
|
|
|
el: BI.extend(Ws[0], { |
|
|
|
el: { |
|
|
|
ref: function (_ref) { |
|
|
|
type: "bi.vertical_adapt", |
|
|
|
self.R = _ref |
|
|
|
columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH], |
|
|
|
} |
|
|
|
|
|
|
|
}), |
|
|
|
rgap: 5, |
|
|
|
width: c.RGB_WIDTH |
|
|
|
items: [ |
|
|
|
}, RGB[1], { |
|
|
|
{ |
|
|
|
el: BI.extend(Ws[1], { |
|
|
|
el: { |
|
|
|
ref: function (_ref) { |
|
|
|
type: "bi.layout", |
|
|
|
self.G = _ref |
|
|
|
cls: "color-picker-editor-display bi-card bi-border", |
|
|
|
} |
|
|
|
height: 22, |
|
|
|
}), |
|
|
|
width: 22, |
|
|
|
width: c.RGB_WIDTH |
|
|
|
ref: function (_ref) { |
|
|
|
}, RGB[2], { |
|
|
|
self.colorShow = _ref; |
|
|
|
el: BI.extend(Ws[2], { |
|
|
|
} |
|
|
|
ref: function (_ref) { |
|
|
|
}, |
|
|
|
self.B = _ref |
|
|
|
width: 18 |
|
|
|
} |
|
|
|
}, { |
|
|
|
}), |
|
|
|
type: "bi.label", |
|
|
|
rgap: -5, |
|
|
|
text: "#", |
|
|
|
width: c.RGB_WIDTH |
|
|
|
width: 10 |
|
|
|
}] |
|
|
|
}, { |
|
|
|
} |
|
|
|
type: "bi.small_text_editor", |
|
|
|
}] |
|
|
|
ref: function (_ref) { |
|
|
|
}, |
|
|
|
self.hexEditor = _ref; |
|
|
|
left: 0, |
|
|
|
}, |
|
|
|
right: 0, |
|
|
|
cls: "color-picker-editor-input bi-border-radius", |
|
|
|
top: 0, |
|
|
|
validationChecker: this._hexChecker, |
|
|
|
bottom: 0 |
|
|
|
allowBlank: true, |
|
|
|
}] |
|
|
|
errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"), |
|
|
|
|
|
|
|
width: c.HEX_WIDTH, |
|
|
|
|
|
|
|
height: 24, |
|
|
|
|
|
|
|
listeners: [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
eventName: "EVENT_CHANGE", |
|
|
|
|
|
|
|
action: function () { |
|
|
|
|
|
|
|
self._checkHexEditor(); |
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}, RGB[0], { |
|
|
|
|
|
|
|
el: BI.extend(Ws[0], { |
|
|
|
|
|
|
|
ref: function (_ref) { |
|
|
|
|
|
|
|
self.R = _ref; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}), |
|
|
|
|
|
|
|
width: c.RGB_WIDTH |
|
|
|
|
|
|
|
}, RGB[1], { |
|
|
|
|
|
|
|
el: BI.extend(Ws[1], { |
|
|
|
|
|
|
|
ref: function (_ref) { |
|
|
|
|
|
|
|
self.G = _ref; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}), |
|
|
|
|
|
|
|
width: c.RGB_WIDTH |
|
|
|
|
|
|
|
}, RGB[2], { |
|
|
|
|
|
|
|
el: BI.extend(Ws[2], { |
|
|
|
|
|
|
|
ref: function (_ref) { |
|
|
|
|
|
|
|
self.B = _ref; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}), |
|
|
|
|
|
|
|
rgap: -5, |
|
|
|
|
|
|
|
width: c.RGB_WIDTH |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
left: 0, |
|
|
|
|
|
|
|
right: 0, |
|
|
|
|
|
|
|
top: 0, |
|
|
|
|
|
|
|
bottom: 0 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
@ -181,13 +197,13 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
_checkEditors: function () { |
|
|
|
_checkEditors: function () { |
|
|
|
if(BI.isEmptyString(this.R.getValue())) { |
|
|
|
if (BI.isEmptyString(this.R.getValue())) { |
|
|
|
this.R.setValue(0); |
|
|
|
this.R.setValue(0); |
|
|
|
} |
|
|
|
} |
|
|
|
if(BI.isEmptyString(this.G.getValue())) { |
|
|
|
if (BI.isEmptyString(this.G.getValue())) { |
|
|
|
this.G.setValue(0); |
|
|
|
this.G.setValue(0); |
|
|
|
} |
|
|
|
} |
|
|
|
if(BI.isEmptyString(this.B.getValue())) { |
|
|
|
if (BI.isEmptyString(this.B.getValue())) { |
|
|
|
this.B.setValue(0); |
|
|
|
this.B.setValue(0); |
|
|
|
} |
|
|
|
} |
|
|
|
this.storeValue = { |
|
|
|
this.storeValue = { |
|
|
@ -223,7 +239,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { |
|
|
|
} else if (color === "transparent") { |
|
|
|
} else if (color === "transparent") { |
|
|
|
this.colorShow.element.css("background-color", "").removeClass("auto-color-square-normal-background").addClass("trans-color-background"); |
|
|
|
this.colorShow.element.css("background-color", "").removeClass("auto-color-square-normal-background").addClass("trans-color-background"); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
this.colorShow.element.css({"background-color": color}).removeClass("auto-color-square-normal-background").removeClass("trans-color-background"); |
|
|
|
this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-square-normal-background").removeClass("trans-color-background"); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|