|
|
|
@ -16,32 +16,59 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
|
|
|
|
|
var self = this, o = this.options; |
|
|
|
|
var hasRecommendColors = BI.isNotNull(o.recommendColorsGetter()); |
|
|
|
|
return [{ |
|
|
|
|
el: { |
|
|
|
|
type: 'bi.vertical', |
|
|
|
|
items: [{ |
|
|
|
|
el: { |
|
|
|
|
type: "bi.vertical", |
|
|
|
|
hgap: 15, |
|
|
|
|
items: [BI.extend({ |
|
|
|
|
type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor", |
|
|
|
|
type: "bi.vertical", |
|
|
|
|
items: [{ |
|
|
|
|
el: { |
|
|
|
|
type: "bi.vertical", |
|
|
|
|
hgap: 15, |
|
|
|
|
items: [BI.extend({ |
|
|
|
|
type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor", |
|
|
|
|
value: o.value, |
|
|
|
|
height: o.simple ? 36 : 70, |
|
|
|
|
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), { |
|
|
|
|
el: { |
|
|
|
|
type: "bi.hex_color_picker", |
|
|
|
|
cls: "bi-border-bottom bi-border-right", |
|
|
|
|
items: [this._digestStoreColors(this._getStoreColors())], |
|
|
|
|
height: 22, |
|
|
|
|
value: o.value, |
|
|
|
|
height: o.simple ? 36 : 70, |
|
|
|
|
listeners: [{ |
|
|
|
|
eventName: BI.ColorPickerEditor.EVENT_CHANGE, |
|
|
|
|
eventName: BI.ColorPicker.EVENT_CHANGE, |
|
|
|
|
action: function () { |
|
|
|
|
self.setValue(this.getValue()); |
|
|
|
|
self.setValue(this.getValue()[0]); |
|
|
|
|
self._dealStoreColors(); |
|
|
|
|
self.fireEvent(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, arguments); |
|
|
|
|
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); |
|
|
|
|
} |
|
|
|
|
}], |
|
|
|
|
ref: function (_ref) { |
|
|
|
|
self.colorEditor = _ref; |
|
|
|
|
self.storeColors = _ref; |
|
|
|
|
} |
|
|
|
|
}, o.editor), { |
|
|
|
|
el: { |
|
|
|
|
}, |
|
|
|
|
tgap: 10, |
|
|
|
|
height: 22 |
|
|
|
|
}, { |
|
|
|
|
el: hasRecommendColors ? { |
|
|
|
|
type: "bi.vertical", |
|
|
|
|
items: [{ |
|
|
|
|
type: "bi.label", |
|
|
|
|
text: BI.i18nText("BI-Basic_Recommend_Color"), |
|
|
|
|
textAlign: "left", |
|
|
|
|
height: 24 |
|
|
|
|
}, { |
|
|
|
|
type: "bi.hex_color_picker", |
|
|
|
|
cls: "bi-border-bottom bi-border-right", |
|
|
|
|
items: [this._digestStoreColors(this._getStoreColors())], |
|
|
|
|
items: [this._digestStoreColors(o.recommendColorsGetter())], |
|
|
|
|
height: 22, |
|
|
|
|
value: o.value, |
|
|
|
|
listeners: [{ |
|
|
|
@ -53,144 +80,111 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
|
|
|
|
|
} |
|
|
|
|
}], |
|
|
|
|
ref: function (_ref) { |
|
|
|
|
self.storeColors = _ref; |
|
|
|
|
self.recommendColors = _ref; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tgap: 10, |
|
|
|
|
height: 22 |
|
|
|
|
}, { |
|
|
|
|
el: hasRecommendColors ? { |
|
|
|
|
type: 'bi.vertical', |
|
|
|
|
items: [{ |
|
|
|
|
type: 'bi.label', |
|
|
|
|
text: BI.i18nText('BI-Basic_Recommend_Color'), |
|
|
|
|
textAlign: 'left', |
|
|
|
|
height: 24, |
|
|
|
|
}, { |
|
|
|
|
type: "bi.hex_color_picker", |
|
|
|
|
cls: "bi-border-bottom bi-border-right", |
|
|
|
|
items: [this._digestStoreColors(o.recommendColorsGetter())], |
|
|
|
|
height: 22, |
|
|
|
|
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.recommendColors = _ref; |
|
|
|
|
} |
|
|
|
|
}] |
|
|
|
|
} : { type: 'bi.layout' }, |
|
|
|
|
tgap: hasRecommendColors ? 10 : 0, |
|
|
|
|
height: hasRecommendColors ? 47 : 0 |
|
|
|
|
}, { |
|
|
|
|
el: { |
|
|
|
|
type: 'bi.layout', |
|
|
|
|
cls: 'bi-border-top', |
|
|
|
|
}, |
|
|
|
|
vgap: 10, |
|
|
|
|
height: 1 |
|
|
|
|
}, { |
|
|
|
|
type: 'bi.absolute', |
|
|
|
|
items: [{ |
|
|
|
|
el: { |
|
|
|
|
type: "bi.hex_color_picker", |
|
|
|
|
space: true, |
|
|
|
|
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; |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
top: 0, |
|
|
|
|
left: 0, |
|
|
|
|
right: 0, |
|
|
|
|
bottom: 1, |
|
|
|
|
}], |
|
|
|
|
height: 80, |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
}, { |
|
|
|
|
el: { |
|
|
|
|
type: "bi.combo", |
|
|
|
|
cls: "bi-border-top", |
|
|
|
|
container: null, |
|
|
|
|
direction: "right,top", |
|
|
|
|
isNeedAdjustHeight: false, |
|
|
|
|
}] |
|
|
|
|
} : {type: "bi.layout"}, |
|
|
|
|
tgap: hasRecommendColors ? 10 : 0, |
|
|
|
|
height: hasRecommendColors ? 47 : 0 |
|
|
|
|
}, { |
|
|
|
|
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") + "..." |
|
|
|
|
type: "bi.layout", |
|
|
|
|
cls: "bi-border-top" |
|
|
|
|
}, |
|
|
|
|
popup: { |
|
|
|
|
type: "bi.popup_panel", |
|
|
|
|
buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")], |
|
|
|
|
title: BI.i18nText("BI-Custom_Color"), |
|
|
|
|
vgap: 10, |
|
|
|
|
height: 1 |
|
|
|
|
}, { |
|
|
|
|
type: "bi.absolute", |
|
|
|
|
items: [{ |
|
|
|
|
el: { |
|
|
|
|
type: "bi.custom_color_chooser", |
|
|
|
|
editor: o.editor, |
|
|
|
|
type: "bi.hex_color_picker", |
|
|
|
|
space: true, |
|
|
|
|
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.customColorChooser = _ref; |
|
|
|
|
self.colorPicker = _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: |
|
|
|
|
var color = self.customColorChooser.getValue(); |
|
|
|
|
// farbtastic选择器没有透明和自动选项,点击保存不应该设置透明
|
|
|
|
|
if (BI.isNotEmptyString(color)) { |
|
|
|
|
self.setValue(color); |
|
|
|
|
self._dealStoreColors(); |
|
|
|
|
} |
|
|
|
|
self.more.hideView(); |
|
|
|
|
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}] |
|
|
|
|
top: 0, |
|
|
|
|
left: 0, |
|
|
|
|
right: 0, |
|
|
|
|
bottom: 1 |
|
|
|
|
}], |
|
|
|
|
height: 80 |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
}, { |
|
|
|
|
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.Combo.EVENT_AFTER_POPUPVIEW, |
|
|
|
|
action: function () { |
|
|
|
|
self.customColorChooser.setValue(self.getValue()); |
|
|
|
|
eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, |
|
|
|
|
action: function (index) { |
|
|
|
|
switch (index) { |
|
|
|
|
case 0: |
|
|
|
|
self.more.hideView(); |
|
|
|
|
break; |
|
|
|
|
case 1: |
|
|
|
|
var color = self.customColorChooser.getValue(); |
|
|
|
|
// farbtastic选择器没有透明和自动选项,点击保存不应该设置透明
|
|
|
|
|
if (BI.isNotEmptyString(color)) { |
|
|
|
|
self.setValue(color); |
|
|
|
|
self._dealStoreColors(); |
|
|
|
|
} |
|
|
|
|
self.more.hideView(); |
|
|
|
|
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}], |
|
|
|
|
ref: function (_ref) { |
|
|
|
|
self.more = _ref; |
|
|
|
|
} |
|
|
|
|
}] |
|
|
|
|
}, |
|
|
|
|
tgap: 10, |
|
|
|
|
height: 24 |
|
|
|
|
}] |
|
|
|
|
}, |
|
|
|
|
left: 0, |
|
|
|
|
right: 0, |
|
|
|
|
top: 0, |
|
|
|
|
bottom: 0 |
|
|
|
|
listeners: [{ |
|
|
|
|
eventName: BI.Combo.EVENT_AFTER_POPUPVIEW, |
|
|
|
|
action: function () { |
|
|
|
|
self.customColorChooser.setValue(self.getValue()); |
|
|
|
|
} |
|
|
|
|
}], |
|
|
|
|
ref: function (_ref) { |
|
|
|
|
self.more = _ref; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
tgap: 10, |
|
|
|
|
height: 24 |
|
|
|
|
}] |
|
|
|
|
}, { |
|
|
|
|
type: "bi.absolute", |
|
|
|
|
items: [{ |
|
|
|
@ -212,7 +206,6 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
|
|
|
|
|
|
|
|
|
|
// 这里就实现的不好了,setValue里面有个editor,editor的setValue会检测错误然后出bubble提示
|
|
|
|
|
mounted: function () { |
|
|
|
|
var self = this; |
|
|
|
|
var o = this.options; |
|
|
|
|
if (BI.isNotNull(o.value)) { |
|
|
|
|
this.setValue(o.value); |
|
|
|
@ -251,7 +244,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
|
|
|
|
|
return items; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
_getStoreColors: function() { |
|
|
|
|
_getStoreColors: function () { |
|
|
|
|
var self = this, o = this.options; |
|
|
|
|
var colorsArray = BI.string2Array(BI.Cache.getItem("colors") || ""); |
|
|
|
|
return BI.filter(colorsArray, function (idx, color) { |
|
|
|
|