diff --git a/demo/js/case/demo.color_chooser.js b/demo/js/case/demo.color_chooser.js index dcf7d9405..924a363d8 100644 --- a/demo/js/case/demo.color_chooser.js +++ b/demo/js/case/demo.color_chooser.js @@ -14,6 +14,22 @@ Demo.Func = BI.inherit(BI.Widget, { }, left: 100, top: 250 + }, { + el: { + type: "bi.simple_color_chooser", + width: 30, + height: 30 + }, + left: 400, + top: 250 + }, { + el: { + type: "bi.color_chooser", + width: 230, + height: 30 + }, + left: 100, + top: 350 }] }; } diff --git a/demo/js/case/demo.color_chooser_popup.js b/demo/js/case/demo.color_chooser_popup.js index 3c12df98b..68135d1c3 100644 --- a/demo/js/case/demo.color_chooser_popup.js +++ b/demo/js/case/demo.color_chooser_popup.js @@ -13,6 +13,13 @@ Demo.Func = BI.inherit(BI.Widget, { }, left: 100, top: 250 + }, { + el: { + type: "bi.simple_color_chooser_popup", + cls: "bi-card" + }, + left: 400, + top: 250 }] }; } diff --git a/dist/bundle.js b/dist/bundle.js index d21385f92..789bd066c 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -76001,8 +76001,8 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, { _init: function () { BI.CustomColorChooser.superclass._init.apply(this, arguments); - var self = this; - this.editor = BI.createWidget({ + var self = this, o = this.options; + this.editor = BI.createWidget(o.editor, { type: "bi.color_picker_editor" }); this.editor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () { @@ -76062,7 +76062,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, { _defaultConfig: function () { return BI.extend(BI.ColorChooser.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-color-chooser", - el: {} + value: "" }); }, @@ -76074,8 +76074,10 @@ BI.ColorChooser = BI.inherit(BI.Widget, { type: "bi.combo", element: this, adjustLength: 1, + isNeedAdjustWidth: false, + isNeedAdjustHeight: false, el: BI.extend({ - type: "bi.color_chooser_trigger", + type: o.width <= 30 ? "bi.color_chooser_trigger" : "bi.long_color_chooser_trigger", ref: function (_ref) { self.trigger = _ref; }, @@ -76083,7 +76085,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, { height: o.height }, o.el), popup: { - el: { + el: BI.extend({ type: "bi.color_chooser_popup", ref: function (_ref) { self.colorPicker = _ref; @@ -76100,9 +76102,9 @@ BI.ColorChooser = BI.inherit(BI.Widget, { self.combo.hideView(); } }] - }, + }, o.popup), stopPropagation: false, - minWidth: 202 + width: 202 }, value: o.value }); @@ -76167,7 +76169,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, { _init: function () { BI.ColorChooserPopup.superclass._init.apply(this, arguments); var self = this, o = this.options; - this.colorEditor = BI.createWidget({ + this.colorEditor = BI.createWidget(o.editor, { type: "bi.color_picker_editor", value: o.value }); @@ -76226,7 +76228,8 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, { }); this.customColorChooser = BI.createWidget({ - type: "bi.custom_color_chooser" + type: "bi.custom_color_chooser", + editor: o.editor }); var panel = BI.createWidget({ @@ -76348,6 +76351,108 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, { BI.ColorChooserPopup.EVENT_VALUE_CHANGE = "ColorChooserPopup.EVENT_VALUE_CHANGE"; BI.ColorChooserPopup.EVENT_CHANGE = "ColorChooserPopup.EVENT_CHANGE"; BI.shortcut("bi.color_chooser_popup", BI.ColorChooserPopup);/** + * 选色控件 + * + * 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);/** + * 简单选色控件，没有自动和透明 + * + * 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);/** * 选色控件 * * Created by GUY on 2015/11/17. @@ -76394,7 +76499,7 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, { bottom: 3 }] }); - if (this.options.value) { + if (BI.isNotNull(this.options.value)) { this.setValue(this.options.value); } }, @@ -76412,6 +76517,102 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, { }); BI.ColorChooserTrigger.EVENT_CHANGE = "ColorChooserTrigger.EVENT_CHANGE"; BI.shortcut("bi.color_chooser_trigger", BI.ColorChooserTrigger);/** + * 选色控件 + * + * 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);/** * 简单选色控件按钮 * * Created by GUY on 2015/11/16. @@ -76853,6 +77054,113 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, { }); BI.ColorPickerEditor.EVENT_CHANGE = "ColorPickerEditor.EVENT_CHANGE"; BI.shortcut("bi.color_picker_editor", BI.ColorPickerEditor);/** + * 简单选色控件 + * + * 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);/** * 选色控件 * * Created by GUY on 2015/11/16. diff --git a/dist/case.js b/dist/case.js index 4c49f4b76..31b55da08 100644 --- a/dist/case.js +++ b/dist/case.js @@ -3552,8 +3552,8 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, { _init: function () { BI.CustomColorChooser.superclass._init.apply(this, arguments); - var self = this; - this.editor = BI.createWidget({ + var self = this, o = this.options; + this.editor = BI.createWidget(o.editor, { type: "bi.color_picker_editor" }); this.editor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () { @@ -3613,7 +3613,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, { _defaultConfig: function () { return BI.extend(BI.ColorChooser.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-color-chooser", - el: {} + value: "" }); }, @@ -3625,8 +3625,10 @@ BI.ColorChooser = BI.inherit(BI.Widget, { type: "bi.combo", element: this, adjustLength: 1, + isNeedAdjustWidth: false, + isNeedAdjustHeight: false, el: BI.extend({ - type: "bi.color_chooser_trigger", + type: o.width <= 30 ? "bi.color_chooser_trigger" : "bi.long_color_chooser_trigger", ref: function (_ref) { self.trigger = _ref; }, @@ -3634,7 +3636,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, { height: o.height }, o.el), popup: { - el: { + el: BI.extend({ type: "bi.color_chooser_popup", ref: function (_ref) { self.colorPicker = _ref; @@ -3651,9 +3653,9 @@ BI.ColorChooser = BI.inherit(BI.Widget, { self.combo.hideView(); } }] - }, + }, o.popup), stopPropagation: false, - minWidth: 202 + width: 202 }, value: o.value }); @@ -3718,7 +3720,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, { _init: function () { BI.ColorChooserPopup.superclass._init.apply(this, arguments); var self = this, o = this.options; - this.colorEditor = BI.createWidget({ + this.colorEditor = BI.createWidget(o.editor, { type: "bi.color_picker_editor", value: o.value }); @@ -3777,7 +3779,8 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, { }); this.customColorChooser = BI.createWidget({ - type: "bi.custom_color_chooser" + type: "bi.custom_color_chooser", + editor: o.editor }); var panel = BI.createWidget({ @@ -3899,6 +3902,108 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, { BI.ColorChooserPopup.EVENT_VALUE_CHANGE = "ColorChooserPopup.EVENT_VALUE_CHANGE"; BI.ColorChooserPopup.EVENT_CHANGE = "ColorChooserPopup.EVENT_CHANGE"; BI.shortcut("bi.color_chooser_popup", BI.ColorChooserPopup);/** + * 选色控件 + * + * 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);/** + * 简单选色控件，没有自动和透明 + * + * 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);/** * 选色控件 * * Created by GUY on 2015/11/17. @@ -3945,7 +4050,7 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, { bottom: 3 }] }); - if (this.options.value) { + if (BI.isNotNull(this.options.value)) { this.setValue(this.options.value); } }, @@ -3963,6 +4068,102 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, { }); BI.ColorChooserTrigger.EVENT_CHANGE = "ColorChooserTrigger.EVENT_CHANGE"; BI.shortcut("bi.color_chooser_trigger", BI.ColorChooserTrigger);/** + * 选色控件 + * + * 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);/** * 简单选色控件按钮 * * Created by GUY on 2015/11/16. @@ -4404,6 +4605,113 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, { }); BI.ColorPickerEditor.EVENT_CHANGE = "ColorPickerEditor.EVENT_CHANGE"; BI.shortcut("bi.color_picker_editor", BI.ColorPickerEditor);/** + * 简单选色控件 + * + * 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);/** * 选色控件 * * Created by GUY on 2015/11/16. diff --git a/dist/demo.js b/dist/demo.js index 1f2fcb9f1..0bdff82ba 100644 --- a/dist/demo.js +++ b/dist/demo.js @@ -2410,6 +2410,13 @@ BI.shortcut("demo.clipboard", Demo.Func);Demo.Func = BI.inherit(BI.Widget, { }, left: 100, top: 250 + }, { + el: { + type: "bi.simple_color_chooser_popup", + cls: "bi-card" + }, + left: 400, + top: 250 }] }; } @@ -2430,6 +2437,22 @@ BI.shortcut("demo.color_chooser_popup", Demo.Func);Demo.Func = BI.inherit(BI.Wid }, left: 100, top: 250 + }, { + el: { + type: "bi.simple_color_chooser", + width: 30, + height: 30 + }, + left: 400, + top: 250 + }, { + el: { + type: "bi.color_chooser", + width: 230, + height: 30 + }, + left: 100, + top: 350 }] }; } diff --git a/src/case/colorchooser/colorchooser.custom.js b/src/case/colorchooser/colorchooser.custom.js index b43d67804..9d5dbe35f 100644 --- a/src/case/colorchooser/colorchooser.custom.js +++ b/src/case/colorchooser/colorchooser.custom.js @@ -17,8 +17,8 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, { _init: function () { BI.CustomColorChooser.superclass._init.apply(this, arguments); - var self = this; - this.editor = BI.createWidget({ + var self = this, o = this.options; + this.editor = BI.createWidget(o.editor, { type: "bi.color_picker_editor" }); this.editor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () { diff --git a/src/case/colorchooser/colorchooser.js b/src/case/colorchooser/colorchooser.js index ed1cfcae8..ae1e6f510 100644 --- a/src/case/colorchooser/colorchooser.js +++ b/src/case/colorchooser/colorchooser.js @@ -10,7 +10,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, { _defaultConfig: function () { return BI.extend(BI.ColorChooser.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-color-chooser", - el: {} + value: "" }); }, @@ -22,8 +22,10 @@ BI.ColorChooser = BI.inherit(BI.Widget, { type: "bi.combo", element: this, adjustLength: 1, + isNeedAdjustWidth: false, + isNeedAdjustHeight: false, el: BI.extend({ - type: "bi.color_chooser_trigger", + type: o.width <= 30 ? "bi.color_chooser_trigger" : "bi.long_color_chooser_trigger", ref: function (_ref) { self.trigger = _ref; }, @@ -31,7 +33,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, { height: o.height }, o.el), popup: { - el: { + el: BI.extend({ type: "bi.color_chooser_popup", ref: function (_ref) { self.colorPicker = _ref; @@ -48,9 +50,9 @@ BI.ColorChooser = BI.inherit(BI.Widget, { self.combo.hideView(); } }] - }, + }, o.popup), stopPropagation: false, - minWidth: 202 + width: 202 }, value: o.value }); diff --git a/src/case/colorchooser/colorchooser.popup.js b/src/case/colorchooser/colorchooser.popup.js index 433089ba8..f8fd11cc2 100644 --- a/src/case/colorchooser/colorchooser.popup.js +++ b/src/case/colorchooser/colorchooser.popup.js @@ -18,7 +18,7 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, { _init: function () { BI.ColorChooserPopup.superclass._init.apply(this, arguments); var self = this, o = this.options; - this.colorEditor = BI.createWidget({ + this.colorEditor = BI.createWidget(o.editor, { type: "bi.color_picker_editor", value: o.value }); @@ -77,7 +77,8 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, { }); this.customColorChooser = BI.createWidget({ - type: "bi.custom_color_chooser" + type: "bi.custom_color_chooser", + editor: o.editor }); var panel = BI.createWidget({ diff --git a/src/case/colorchooser/colorchooser.popup.simple.js b/src/case/colorchooser/colorchooser.popup.simple.js new file mode 100644 index 000000000..4e9386203 --- /dev/null +++ b/src/case/colorchooser/colorchooser.popup.simple.js @@ -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); \ No newline at end of file diff --git a/src/case/colorchooser/colorchooser.simple.js b/src/case/colorchooser/colorchooser.simple.js new file mode 100644 index 000000000..75244d174 --- /dev/null +++ b/src/case/colorchooser/colorchooser.simple.js @@ -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); \ No newline at end of file diff --git a/src/case/colorchooser/colorchooser.trigger.js b/src/case/colorchooser/colorchooser.trigger.js index c38b5ad72..9e725f45f 100644 --- a/src/case/colorchooser/colorchooser.trigger.js +++ b/src/case/colorchooser/colorchooser.trigger.js @@ -45,7 +45,7 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, { bottom: 3 }] }); - if (this.options.value) { + if (BI.isNotNull(this.options.value)) { this.setValue(this.options.value); } }, diff --git a/src/case/colorchooser/colorchooser.trigger.long.js b/src/case/colorchooser/colorchooser.trigger.long.js new file mode 100644 index 000000000..8fb03304a --- /dev/null +++ b/src/case/colorchooser/colorchooser.trigger.long.js @@ -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); \ No newline at end of file diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js b/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js new file mode 100644 index 000000000..405fbea24 --- /dev/null +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js @@ -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); \ No newline at end of file