forked from fanruan/fineui
windy
7 years ago
13 changed files with 1004 additions and 30 deletions
@ -0,0 +1,49 @@
|
||||
/** |
||||
* 选色控件 |
||||
* |
||||
* Created by GUY on 2015/11/17. |
||||
* @class BI.SimpleColorChooserPopup |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.SimpleColorChooserPopup = BI.inherit(BI.Widget, { |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.SimpleColorChooserPopup.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-color-chooser-popup" |
||||
}); |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.SimpleColorChooserPopup.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
this.popup = BI.createWidget({ |
||||
type: "bi.color_chooser_popup", |
||||
value: o.value, |
||||
element: this, |
||||
editor: { |
||||
type: "bi.simple_color_picker_editor" |
||||
} |
||||
}); |
||||
this.popup.on(BI.ColorChooserPopup.EVENT_CHANGE, function () { |
||||
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_CHANGE, arguments); |
||||
}); |
||||
this.popup.on(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, function () { |
||||
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE, arguments); |
||||
}); |
||||
}, |
||||
|
||||
setStoreColors: function (colors) { |
||||
this.popup.setStoreColors(colors); |
||||
}, |
||||
|
||||
setValue: function (color) { |
||||
this.popup.setValue(color); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.popup.getValue(); |
||||
} |
||||
}); |
||||
BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE = "ColorChooserPopup.EVENT_VALUE_CHANGE"; |
||||
BI.SimpleColorChooserPopup.EVENT_CHANGE = "ColorChooserPopup.EVENT_CHANGE"; |
||||
BI.shortcut("bi.simple_color_chooser_popup", BI.SimpleColorChooserPopup); |
||||
@ -0,0 +1,55 @@
|
||||
/** |
||||
* 简单选色控件，没有自动和透明 |
||||
* |
||||
* Created by GUY on 2015/11/17. |
||||
* @class BI.SimpleColorChooser |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.SimpleColorChooser = BI.inherit(BI.Widget, { |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.SimpleColorChooser.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-simple-color-chooser", |
||||
value: "#ffffff" |
||||
}); |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.SimpleColorChooser.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
|
||||
this.combo = BI.createWidget({ |
||||
type: "bi.color_chooser", |
||||
element: this, |
||||
value: o.value, |
||||
popup: { |
||||
type: "bi.simple_color_chooser_popup" |
||||
} |
||||
}); |
||||
this.combo.on(BI.ColorChooser.EVENT_CHANGE, function () { |
||||
self.fireEvent(BI.SimpleColorChooser.EVENT_CHANGE, arguments); |
||||
}); |
||||
}, |
||||
|
||||
isViewVisible: function () { |
||||
return this.combo.isViewVisible(); |
||||
}, |
||||
|
||||
hideView: function () { |
||||
this.combo.hideView(); |
||||
}, |
||||
|
||||
showView: function () { |
||||
this.combo.showView(); |
||||
}, |
||||
|
||||
setValue: function (color) { |
||||
this.combo.setValue(color); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.combo.getValue(); |
||||
} |
||||
}); |
||||
BI.SimpleColorChooser.EVENT_CHANGE = "ColorChooser.EVENT_CHANGE"; |
||||
BI.shortcut("bi.simple_color_chooser", BI.SimpleColorChooser); |
||||
@ -0,0 +1,97 @@
|
||||
/** |
||||
* 选色控件 |
||||
* |
||||
* Created by GUY on 2015/11/17. |
||||
* @class BI.LongColorChooserTrigger |
||||
* @extends BI.Trigger |
||||
*/ |
||||
BI.LongColorChooserTrigger = BI.inherit(BI.Trigger, { |
||||
|
||||
_defaultConfig: function () { |
||||
var conf = BI.LongColorChooserTrigger.superclass._defaultConfig.apply(this, arguments); |
||||
return BI.extend(conf, { |
||||
baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger", |
||||
height: 30 |
||||
}); |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.LongColorChooserTrigger.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
this.colorContainer = BI.createWidget({ |
||||
type: "bi.htape", |
||||
cls: "bi-card color-chooser-trigger-content", |
||||
items: [{ |
||||
type: "bi.icon_change_button", |
||||
ref: function (_ref) { |
||||
self.changeIcon = _ref; |
||||
}, |
||||
iconCls: "auto-color-icon", |
||||
width: 24, |
||||
iconWidth: 16, |
||||
iconHeight: 16 |
||||
}, { |
||||
el: { |
||||
type: "bi.label", |
||||
ref: function (_ref) { |
||||
self.label = _ref; |
||||
}, |
||||
textAlign: "left", |
||||
hgap: 5, |
||||
height: 24, |
||||
text: BI.i18nText("BI-Basic_Auto") |
||||
} |
||||
}] |
||||
}); |
||||
|
||||
var down = BI.createWidget({ |
||||
type: "bi.icon_button", |
||||
disableSelected: true, |
||||
cls: "icon-combo-down-icon trigger-triangle-font", |
||||
width: 12, |
||||
height: 8 |
||||
}); |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: this, |
||||
items: [{ |
||||
el: this.colorContainer, |
||||
left: 3, |
||||
right: 3, |
||||
top: 3, |
||||
bottom: 3 |
||||
}, { |
||||
el: down, |
||||
right: 3, |
||||
bottom: 3 |
||||
}] |
||||
}); |
||||
if (this.options.value) { |
||||
this.setValue(this.options.value); |
||||
} |
||||
}, |
||||
|
||||
setValue: function (color) { |
||||
BI.LongColorChooserTrigger.superclass.setValue.apply(this, arguments); |
||||
if (color === "") { |
||||
this.colorContainer.element.css("background-color", ""); |
||||
this.changeIcon.setVisible(true); |
||||
this.label.setVisible(true); |
||||
this.changeIcon.setIcon("auto-color-icon"); |
||||
this.label.setText(BI.i18nText("BI-Basic_Auto")); |
||||
} else if (color === "transparent") { |
||||
this.colorContainer.element.css("background-color", ""); |
||||
this.changeIcon.setVisible(true); |
||||
this.label.setVisible(true); |
||||
this.changeIcon.setIcon("trans-color-icon"); |
||||
this.label.setText(BI.i18nText("BI-Transparent_Color")); |
||||
} else { |
||||
this.colorContainer.element.css({"background-color": color}); |
||||
this.changeIcon.setVisible(false); |
||||
this.label.setVisible(false); |
||||
} |
||||
} |
||||
}); |
||||
BI.LongColorChooserTrigger.EVENT_CHANGE = "ColorChooserTrigger.EVENT_CHANGE"; |
||||
BI.shortcut("bi.long_color_chooser_trigger", BI.LongColorChooserTrigger); |
||||
@ -0,0 +1,108 @@
|
||||
/** |
||||
* 简单选色控件 |
||||
* |
||||
* Created by GUY on 2015/11/16. |
||||
* @class BI.SimpleColorPickerEditor |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.SimpleColorPickerEditor.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-color-picker-editor", |
||||
// width: 200,
|
||||
height: 20 |
||||
}); |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.SimpleColorPickerEditor.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
this.colorShow = BI.createWidget({ |
||||
type: "bi.layout", |
||||
cls: "color-picker-editor-display bi-card", |
||||
height: 20 |
||||
}); |
||||
var RGB = BI.createWidgets(BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { |
||||
type: "bi.label", |
||||
cls: "color-picker-editor-label", |
||||
width: 10, |
||||
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: 32, |
||||
height: 20 |
||||
}); |
||||
BI.each(Ws, function (i, w) { |
||||
w.on(BI.TextEditor.EVENT_CHANGE, function () { |
||||
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]; |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.htape", |
||||
element: this, |
||||
items: [{ |
||||
el: this.colorShow, |
||||
lgap: 5, |
||||
rgap: 5 |
||||
}, { |
||||
el: RGB[0], |
||||
lgap: 10, |
||||
width: 16 |
||||
}, { |
||||
el: this.R, |
||||
width: 36 |
||||
}, { |
||||
el: RGB[1], |
||||
lgap: 10, |
||||
width: 16 |
||||
}, { |
||||
el: this.G, |
||||
width: 36 |
||||
}, { |
||||
el: RGB[2], |
||||
lgap: 10, |
||||
width: 16 |
||||
}, { |
||||
el: this.B, |
||||
width: 36, |
||||
rgap: 10 |
||||
}] |
||||
}); |
||||
}, |
||||
|
||||
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); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return BI.DOM.rgb2hex(BI.DOM.json2rgb({ |
||||
r: this.R.getValue(), |
||||
g: this.G.getValue(), |
||||
b: this.B.getValue() |
||||
})); |
||||
} |
||||
}); |
||||
BI.SimpleColorPickerEditor.EVENT_CHANGE = "SimpleColorPickerEditor.EVENT_CHANGE"; |
||||
BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor); |
||||
Loading…
Reference in new issue