forked from fanruan/fineui
Zhenfei.Li
2 years ago
23 changed files with 1260 additions and 1149 deletions
@ -1,50 +1,57 @@
|
||||
import { shortcut, Widget } from "@/core"; |
||||
import { ColorChooserPopup } from "./colorchooser.popup"; |
||||
import { SimpleColorChooserPopup } from "./colorchooser.popup.simple"; |
||||
|
||||
/** |
||||
* @author windy |
||||
* @version 2.0 |
||||
* Created by windy on 2020/11/10 |
||||
*/ |
||||
BI.SimpleHexColorChooserPopup = BI.inherit(BI.Widget, { |
||||
@shortcut() |
||||
export class SimpleHexColorChooserPopup extends Widget { |
||||
static xtype = "bi.simple_hex_color_chooser_popup"; |
||||
|
||||
static EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; |
||||
static EVENT_CHANGE = "EVENT_CHANGE"; |
||||
|
||||
props: { |
||||
props = { |
||||
baseCls: "bi-color-chooser-popup", |
||||
}, |
||||
} |
||||
|
||||
render() { |
||||
const o = this.options; |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
return { |
||||
type: "bi.hex_color_chooser_popup", |
||||
recommendColorsGetter: o.recommendColorsGetter, |
||||
value: o.value, |
||||
simple: true, // 是否有自动
|
||||
listeners: [{ |
||||
eventName: BI.ColorChooserPopup.EVENT_CHANGE, |
||||
action: function () { |
||||
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_CHANGE, arguments); |
||||
} |
||||
eventName: ColorChooserPopup.EVENT_CHANGE, |
||||
action: (...args) => { |
||||
this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args); |
||||
}, |
||||
}, { |
||||
eventName: BI.ColorChooserPopup.EVENT_VALUE_CHANGE, |
||||
action: function () { |
||||
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE, arguments); |
||||
} |
||||
eventName: ColorChooserPopup.EVENT_VALUE_CHANGE, |
||||
action: (...args) => { |
||||
this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args); |
||||
}, |
||||
}], |
||||
ref: function (_ref) { |
||||
self.popup = _ref; |
||||
} |
||||
} |
||||
}, |
||||
ref: _ref => { |
||||
this.popup = _ref; |
||||
}, |
||||
}; |
||||
} |
||||
|
||||
setStoreColors: function (colors) { |
||||
setStoreColors(colors) { |
||||
this.popup.setStoreColors(colors); |
||||
}, |
||||
} |
||||
|
||||
setValue: function (color) { |
||||
setValue(color) { |
||||
this.popup.setValue(color); |
||||
}, |
||||
} |
||||
|
||||
getValue: function () { |
||||
getValue() { |
||||
return this.popup.getValue(); |
||||
} |
||||
}); |
||||
BI.SimpleHexColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; |
||||
BI.SimpleHexColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.simple_hex_color_chooser_popup", BI.SimpleHexColorChooserPopup); |
||||
} |
||||
|
||||
@ -1,47 +1,52 @@
|
||||
import { shortcut, Widget, extend, createWidget } from "@/core"; |
||||
import { ColorChooserPopup } from "./colorchooser.popup"; |
||||
|
||||
/** |
||||
* 选色控件 |
||||
* |
||||
* Created by GUY on 2015/11/17. |
||||
* @class BI.SimpleColorChooserPopup |
||||
* @extends BI.Widget |
||||
* @class SimpleColorChooserPopup |
||||
* @extends Widget |
||||
*/ |
||||
BI.SimpleColorChooserPopup = BI.inherit(BI.Widget, { |
||||
@shortcut() |
||||
export class SimpleColorChooserPopup extends Widget { |
||||
static xtype = "bi.simple_color_chooser_popup"; |
||||
|
||||
static EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; |
||||
static EVENT_CHANGE = "EVENT_CHANGE"; |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.SimpleColorChooserPopup.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-color-chooser-popup" |
||||
_defaultConfig() { |
||||
return extend(super._defaultConfig(...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: o.hex ? "bi.hex_color_chooser_popup" : "bi.color_chooser_popup", |
||||
value: o.value, |
||||
_init() { |
||||
super._init(...arguments); |
||||
const { hex, value } = this.options; |
||||
this.popup = createWidget({ |
||||
type: hex ? "bi.hex_color_chooser_popup" : "bi.color_chooser_popup", |
||||
value, |
||||
element: this, |
||||
simple: true // 是否有自动
|
||||
simple: true, // 是否有自动
|
||||
}); |
||||
this.popup.on(BI.ColorChooserPopup.EVENT_CHANGE, function () { |
||||
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_CHANGE, arguments); |
||||
this.popup.on(ColorChooserPopup.EVENT_CHANGE, (...args) => { |
||||
this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args); |
||||
}); |
||||
this.popup.on(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, function () { |
||||
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE, arguments); |
||||
this.popup.on(ColorChooserPopup.EVENT_VALUE_CHANGE, (...args) => { |
||||
this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args); |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
setStoreColors: function (colors) { |
||||
setStoreColors(colors) { |
||||
this.popup.setStoreColors(colors); |
||||
}, |
||||
} |
||||
|
||||
setValue: function (color) { |
||||
setValue(color) { |
||||
this.popup.setValue(color); |
||||
}, |
||||
} |
||||
|
||||
getValue: function () { |
||||
getValue() { |
||||
return this.popup.getValue(); |
||||
} |
||||
}); |
||||
BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; |
||||
BI.SimpleColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.simple_color_chooser_popup", BI.SimpleColorChooserPopup); |
||||
} |
||||
|
||||
@ -1,66 +1,72 @@
|
||||
import { shortcut, isNotNull, extend } from "@/core"; |
||||
import { BasicButton, Maskers } from "@/base"; |
||||
|
||||
/** |
||||
* 简单选色控件按钮 |
||||
* |
||||
* Created by GUY on 2015/11/16. |
||||
* @class BI.ColorPickerButton |
||||
* @extends BI.BasicButton |
||||
* @class ColorPickerButton |
||||
* @extends BasicButton |
||||
*/ |
||||
BI.ColorPickerButton = BI.inherit(BI.BasicButton, { |
||||
@shortcut() |
||||
export class ColorPickerButton extends BasicButton { |
||||
static xtype = "bi.color_picker_button"; |
||||
|
||||
static EVENT_CHANGE = "EVENT_CHANGE"; |
||||
|
||||
_defaultConfig: function () { |
||||
var conf = BI.ColorPickerButton.superclass._defaultConfig.apply(this, arguments); |
||||
return BI.extend(conf, { |
||||
baseCls: (conf.baseCls || "") + " bi-color-picker-button bi-background bi-border-top bi-border-left" |
||||
_defaultConfig() { |
||||
const conf = super._defaultConfig(...arguments); |
||||
|
||||
return extend(conf, { |
||||
baseCls: `${conf.baseCls || ""} bi-color-picker-button bi-background bi-border-top bi-border-left`, |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
_init: function () { |
||||
BI.ColorPickerButton.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
if (BI.isNotNull(o.value)) { |
||||
if (o.value === '') { |
||||
_init() { |
||||
super._init(...arguments); |
||||
const o = this.options; |
||||
if (isNotNull(o.value)) { |
||||
if (o.value === "") { |
||||
this.element.addClass("auto-color-no-square-normal-background"); |
||||
} else if (o.value === "transparent") { |
||||
this.element.addClass("trans-color-background"); |
||||
} else { |
||||
this.element.css("background-color", o.value); |
||||
} |
||||
var name = this.getName(); |
||||
this.element.hover(function () { |
||||
self._createMask(); |
||||
if (self.isEnabled()) { |
||||
BI.Maskers.show(name); |
||||
const name = this.getName(); |
||||
this.element.hover(() => { |
||||
this._createMask(); |
||||
if (this.isEnabled()) { |
||||
Maskers.show(name); |
||||
} |
||||
}, function () { |
||||
if (!self.isSelected()) { |
||||
BI.Maskers.hide(name); |
||||
}, () => { |
||||
if (!this.isSelected()) { |
||||
Maskers.hide(name); |
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
} |
||||
|
||||
_createMask: function () { |
||||
var o = this.options, name = this.getName(); |
||||
if (this.isEnabled() && !BI.Maskers.has(name)) { |
||||
var w = BI.Maskers.make(name, this, { |
||||
_createMask() { |
||||
const o = this.options, name = this.getName(); |
||||
if (this.isEnabled() && !Maskers.has(name)) { |
||||
const w = Maskers.make(name, this, { |
||||
offset: { |
||||
left: -1, |
||||
top: -1, |
||||
right: -1, |
||||
bottom: -1 |
||||
} |
||||
bottom: -1, |
||||
}, |
||||
}); |
||||
w.element.addClass("color-picker-button-mask").css("background-color", o.value); |
||||
} |
||||
}, |
||||
} |
||||
|
||||
setSelected: function (b) { |
||||
BI.ColorPickerButton.superclass.setSelected.apply(this, arguments); |
||||
setSelected(b) { |
||||
super.setSelected(...arguments); |
||||
if (b) { |
||||
this._createMask(); |
||||
} |
||||
BI.Maskers[b ? "show" : "hide"](this.getName()); |
||||
Maskers[b ? "show" : "hide"](this.getName()); |
||||
} |
||||
}); |
||||
BI.ColorPickerButton.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.color_picker_button", BI.ColorPickerButton); |
||||
} |
||||
|
||||
@ -0,0 +1,2 @@
|
||||
export { ColorPickerButton } from "./button.colorpicker"; |
||||
export { ColorChooserShowButton } from "./button.colorshow"; |
||||
@ -1,190 +1,195 @@
|
||||
import { shortcut, Widget, extend, createItems, createWidget } from "@/core"; |
||||
import { ButtonGroup } from "@/base"; |
||||
|
||||
/** |
||||
* 简单选色控件 |
||||
* |
||||
* Created by GUY on 2015/11/16. |
||||
* @class BI.ColorPicker |
||||
* @extends BI.Widget |
||||
* @class ColorPicker |
||||
* @extends Widget |
||||
*/ |
||||
BI.ColorPicker = BI.inherit(BI.Widget, { |
||||
@shortcut() |
||||
export class ColorPicker extends Widget { |
||||
static xtype = "bi.color_picker"; |
||||
|
||||
static EVENT_CHANGE = "EVENT_CHANGE"; |
||||
|
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.ColorPicker.superclass._defaultConfig.apply(this, arguments), { |
||||
_defaultConfig() { |
||||
return extend(super._defaultConfig(...arguments), { |
||||
baseCls: "bi-color-picker", |
||||
items: null |
||||
items: null, |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
_items: [ |
||||
_items = [ |
||||
[{ |
||||
value: "#ffffff" |
||||
value: "#ffffff", |
||||
}, { |
||||
value: "#f2f2f2" |
||||
value: "#f2f2f2", |
||||
}, { |
||||
value: "#e5e5e5" |
||||
value: "#e5e5e5", |
||||
}, { |
||||
value: "#d9d9d9" |
||||
value: "#d9d9d9", |
||||
}, { |
||||
value: "#cccccc" |
||||
value: "#cccccc", |
||||
}, { |
||||
value: "#bfbfbf" |
||||
value: "#bfbfbf", |
||||
}, { |
||||
value: "#b2b2b2" |
||||
value: "#b2b2b2", |
||||
}, { |
||||
value: "#a6a6a6" |
||||
value: "#a6a6a6", |
||||
}, { |
||||
value: "#999999" |
||||
value: "#999999", |
||||
}, { |
||||
value: "#8c8c8c" |
||||
value: "#8c8c8c", |
||||
}, { |
||||
value: "#808080" |
||||
value: "#808080", |
||||
}, { |
||||
value: "#737373" |
||||
value: "#737373", |
||||
}, { |
||||
value: "#666666" |
||||
value: "#666666", |
||||
}, { |
||||
value: "#4d4d4d" |
||||
value: "#4d4d4d", |
||||
}, { |
||||
value: "#333333" |
||||
value: "#333333", |
||||
}, { |
||||
value: "#000000" |
||||
value: "#000000", |
||||
}], |
||||
[{ |
||||
value: "#d8b5a6" |
||||
value: "#d8b5a6", |
||||
}, { |
||||
value: "#ff9e9a" |
||||
value: "#ff9e9a", |
||||
}, { |
||||
value: "#ffc17d" |
||||
value: "#ffc17d", |
||||
}, { |
||||
value: "#f5e56b" |
||||
value: "#f5e56b", |
||||
}, { |
||||
value: "#d8e698" |
||||
value: "#d8e698", |
||||
}, { |
||||
value: "#e0ebaf" |
||||
value: "#e0ebaf", |
||||
}, { |
||||
value: "#c3d825" |
||||
value: "#c3d825", |
||||
}, { |
||||
value: "#bbe2e7" |
||||
value: "#bbe2e7", |
||||
}, { |
||||
value: "#85d3cd" |
||||
value: "#85d3cd", |
||||
}, { |
||||
value: "#bde1e6" |
||||
value: "#bde1e6", |
||||
}, { |
||||
value: "#a0d8ef" |
||||
value: "#a0d8ef", |
||||
}, { |
||||
value: "#89c3eb" |
||||
value: "#89c3eb", |
||||
}, { |
||||
value: "#bbc8e6" |
||||
value: "#bbc8e6", |
||||
}, { |
||||
value: "#bbbcde" |
||||
value: "#bbbcde", |
||||
}, { |
||||
value: "#d6b4cc" |
||||
value: "#d6b4cc", |
||||
}, { |
||||
value: "#fbc0d3" |
||||
value: "#fbc0d3", |
||||
}], |
||||
[{ |
||||
value: "#bb9581" |
||||
value: "#bb9581", |
||||
}, { |
||||
value: "#f37d79" |
||||
value: "#f37d79", |
||||
}, { |
||||
value: "#fba74f" |
||||
value: "#fba74f", |
||||
}, { |
||||
value: "#ffdb4f" |
||||
value: "#ffdb4f", |
||||
}, { |
||||
value: "#c7dc68" |
||||
value: "#c7dc68", |
||||
}, { |
||||
value: "#b0ca71" |
||||
value: "#b0ca71", |
||||
}, { |
||||
value: "#99ab4e" |
||||
value: "#99ab4e", |
||||
}, { |
||||
value: "#84b9cb" |
||||
value: "#84b9cb", |
||||
}, { |
||||
value: "#00a3af" |
||||
value: "#00a3af", |
||||
}, { |
||||
value: "#2ca9e1" |
||||
value: "#2ca9e1", |
||||
}, { |
||||
value: "#0095d9" |
||||
value: "#0095d9", |
||||
}, { |
||||
value: "#4c6cb3" |
||||
value: "#4c6cb3", |
||||
}, { |
||||
value: "#8491c3" |
||||
value: "#8491c3", |
||||
}, { |
||||
value: "#a59aca" |
||||
value: "#a59aca", |
||||
}, { |
||||
value: "#cc7eb1" |
||||
value: "#cc7eb1", |
||||
}, { |
||||
value: "#e89bb4" |
||||
value: "#e89bb4", |
||||
}], |
||||
[{ |
||||
value: "#9d775f" |
||||
value: "#9d775f", |
||||
}, { |
||||
value: "#dd4b4b" |
||||
value: "#dd4b4b", |
||||
}, { |
||||
value: "#ef8b07" |
||||
value: "#ef8b07", |
||||
}, { |
||||
value: "#fcc800" |
||||
value: "#fcc800", |
||||
}, { |
||||
value: "#aacf53" |
||||
value: "#aacf53", |
||||
}, { |
||||
value: "#82ae46" |
||||
value: "#82ae46", |
||||
}, { |
||||
value: "#69821b" |
||||
value: "#69821b", |
||||
}, { |
||||
value: "#59b9c6" |
||||
value: "#59b9c6", |
||||
}, { |
||||
value: "#2a83a2" |
||||
value: "#2a83a2", |
||||
}, { |
||||
value: "#007bbb" |
||||
value: "#007bbb", |
||||
}, { |
||||
value: "#19448e" |
||||
value: "#19448e", |
||||
}, { |
||||
value: "#274a78" |
||||
value: "#274a78", |
||||
}, { |
||||
value: "#4a488e" |
||||
value: "#4a488e", |
||||
}, { |
||||
value: "#7058a3" |
||||
value: "#7058a3", |
||||
}, { |
||||
value: "#884898" |
||||
value: "#884898", |
||||
}, { |
||||
value: "#d47596" |
||||
value: "#d47596", |
||||
}] |
||||
], |
||||
] |
||||
|
||||
_init: function () { |
||||
BI.ColorPicker.superclass._init.apply(this, arguments); |
||||
var self = this, o = this.options; |
||||
this.colors = BI.createWidget({ |
||||
_init() { |
||||
super._init(...arguments); |
||||
const o = this.options; |
||||
this.colors = createWidget({ |
||||
type: "bi.button_group", |
||||
element: this, |
||||
items: BI.createItems(o.items || this._items, { |
||||
items: createItems(o.items || this._items, { |
||||
type: "bi.color_picker_button", |
||||
once: false |
||||
once: false, |
||||
}), |
||||
layouts: [{ |
||||
type: "bi.grid" |
||||
type: "bi.grid", |
||||
}], |
||||
value: o.value |
||||
value: o.value, |
||||
}); |
||||
this.colors.on(BI.ButtonGroup.EVENT_CHANGE, function () { |
||||
self.fireEvent(BI.ColorPicker.EVENT_CHANGE, arguments); |
||||
this.colors.on(ButtonGroup.EVENT_CHANGE, (...args) => { |
||||
this.fireEvent(ColorPicker.EVENT_CHANGE, ...args); |
||||
}); |
||||
}, |
||||
} |
||||
|
||||
populate: function (items) { |
||||
var args = [].slice.call(arguments); |
||||
args[0] = BI.createItems(items, { |
||||
populate(items) { |
||||
const args = [].slice.call(arguments); |
||||
args[0] = createItems(items, { |
||||
type: "bi.color_picker_button", |
||||
once: false |
||||
once: false, |
||||
}); |
||||
this.colors.populate.apply(this.colors, args); |
||||
}, |
||||
} |
||||
|
||||
setValue: function (color) { |
||||
setValue(color) { |
||||
this.colors.setValue(color); |
||||
}, |
||||
} |
||||
|
||||
getValue: function () { |
||||
getValue() { |
||||
return this.colors.getValue(); |
||||
} |
||||
}); |
||||
BI.ColorPicker.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.color_picker", BI.ColorPicker); |
||||
} |
||||
|
||||
@ -0,0 +1,7 @@
|
||||
export { ColorPicker } from "./colorpicker"; |
||||
export { HexColorPicker } from "./colorpicker.hex"; |
||||
export { ColorPickerEditor } from "./editor.colorpicker"; |
||||
export { HexColorPickerEditor } from "./editor.colorpicker.hex"; |
||||
export { SimpleHexColorPickerEditor } from "./editor.colorpicker.hex.simple"; |
||||
export { SimpleColorPickerEditor } from "./editor.colorpicker.simple"; |
||||
export * from "./button"; |
||||
@ -0,0 +1,11 @@
|
||||
export { ColorChooser } from "./colorchooser"; |
||||
export { CustomColorChooser } from "./colorchooser.custom"; |
||||
export { ColorChooserPopup } from "./colorchooser.popup"; |
||||
export { HexColorChooserPopup } from "./colorchooser.popup.hex"; |
||||
export { SimpleHexColorChooserPopup } from "./colorchooser.popup.hex.simple"; |
||||
export { SimpleColorChooserPopup } from "./colorchooser.popup.simple"; |
||||
export { SimpleColorChooser } from "./colorchooser.simple"; |
||||
export { ColorChooserTrigger } from "./colorchooser.trigger"; |
||||
export { LongColorChooserTrigger } from "./colorchooser.trigger.long"; |
||||
export { Farbtastic } from "./farbtastic/farbtastic"; |
||||
export * from "./colorpicker"; |
||||
Loading…
Reference in new issue