Browse Source

Pull request #3385: KERNEL-14047 refactor: case/colorchoose ES6化

Merge in VISUAL/fineui from ~IMPACT/fine-ui:es6 to es6

* commit 'bac72939090fe9e4d79fcd72273080ac884a47b6':
  KERNEL-14047 refactor: 修复index
  KERNEL-14047 refactor: case/colorchoose ES6化
es6
Impact-吴家豪 2 years ago
parent
commit
82c51dcd3e
  1. 69
      src/case/colorchooser/colorchooser.custom.js
  2. 126
      src/case/colorchooser/colorchooser.js
  3. 259
      src/case/colorchooser/colorchooser.popup.hex.js
  4. 59
      src/case/colorchooser/colorchooser.popup.hex.simple.js
  5. 201
      src/case/colorchooser/colorchooser.popup.js
  6. 61
      src/case/colorchooser/colorchooser.popup.simple.js
  7. 65
      src/case/colorchooser/colorchooser.simple.js
  8. 58
      src/case/colorchooser/colorchooser.trigger.js
  9. 73
      src/case/colorchooser/colorchooser.trigger.long.js
  10. 76
      src/case/colorchooser/colorpicker/button/button.colorpicker.js
  11. 46
      src/case/colorchooser/colorpicker/button/button.colorshow.js
  12. 2
      src/case/colorchooser/colorpicker/button/index.js
  13. 163
      src/case/colorchooser/colorpicker/colorpicker.hex.js
  14. 195
      src/case/colorchooser/colorpicker/colorpicker.js
  15. 238
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.js
  16. 168
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js
  17. 166
      src/case/colorchooser/colorpicker/editor.colorpicker.js
  18. 111
      src/case/colorchooser/colorpicker/editor.colorpicker.simple.js
  19. 7
      src/case/colorchooser/colorpicker/index.js
  20. 198
      src/case/colorchooser/farbtastic/farbtastic.js
  21. 11
      src/case/colorchooser/index.js
  22. 3
      src/case/index.js
  23. 2
      src/core/structure/queue.js

69
src/case/colorchooser/colorchooser.custom.js

@ -1,39 +1,47 @@
import { shortcut, Widget, extend, createWidget } from "@/core";
import { ColorPickerEditor } from "./colorpicker";
import { Farbtastic } from "./farbtastic/farbtastic";
/**
* 自定义选色
*
* Created by GUY on 2015/11/17.
* @class BI.CustomColorChooser
* @extends BI.Widget
* @class CustomColorChooser
* @extends Widget
*/
BI.CustomColorChooser = BI.inherit(BI.Widget, {
@shortcut()
export class CustomColorChooser extends Widget {
static xtype = "bi.custom_color_chooser";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig: function () {
return BI.extend(BI.CustomColorChooser.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-custom-color-chooser",
width: 292,
height: 265
height: 265,
});
},
}
_init: function () {
BI.CustomColorChooser.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.editor = BI.createWidget(o.editor, {
_init() {
super._init(...arguments);
const o = this.options;
this.editor = createWidget(o.editor, {
type: "bi.simple_hex_color_picker_editor",
value: o.value
value: o.value,
});
this.editor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () {
self.setValue(this.getValue());
this.editor.on(ColorPickerEditor.EVENT_CHANGE, () => {
this.setValue(this.editor.getValue());
});
this.farbtastic = BI.createWidget({
this.farbtastic = createWidget({
type: "bi.farbtastic",
value: o.value
value: o.value,
});
this.farbtastic.on(BI.Farbtastic.EVENT_CHANGE, function () {
self.setValue(this.getValue());
this.farbtastic.on(Farbtastic.EVENT_CHANGE, () => {
this.setValue(this.farbtastic.getValue());
});
BI.createWidget({
createWidget({
type: "bi.vtape",
element: this,
items: [{
@ -42,30 +50,29 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, {
el: this.editor,
left: 10,
top: 0,
right: 10
right: 10,
}],
height: 50
height: 50,
}, {
type: "bi.absolute",
items: [{
el: this.farbtastic,
left: 46,
right: 46,
top: 7
top: 7,
}],
height: 215,
}],
height: 215
}]
});
},
}
setValue: function (color) {
setValue(color) {
this.editor.setValue(color);
this.farbtastic.setValue(color);
},
}
getValue: function () {
getValue() {
return this.editor.getValue();
}
});
BI.CustomColorChooser.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.custom_color_chooser", BI.CustomColorChooser);
}

126
src/case/colorchooser/colorchooser.js

@ -1,27 +1,41 @@
import { shortcut, Widget, extend, createWidget, toPix, isNotEmptyString } from "@/core";
import { Combo } from "@/base";
import { ColorChooserPopup } from "./colorchooser.popup";
/**
* 选色控件
*
* Created by GUY on 2015/11/17.
* @class BI.ColorChooser
* @extends BI.Widget
* @class ColorChooser
* @extends Widget
*/
BI.ColorChooser = BI.inherit(BI.Widget, {
@shortcut()
export class ColorChooser extends Widget {
static xtype = "bi.color_chooser";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
_defaultConfig: function () {
return BI.extend(BI.ColorChooser.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-color-chooser",
value: "",
height: 24,
el: {},
simple: false
simple: false,
});
},
}
_init: function () {
var self = this, o = this.options;
BI.ColorChooser.superclass._init.apply(this, arguments);
_init() {
const o = this.options;
const fn = () => {
const color = this.colorPicker.getValue();
this.setValue(color);
};
super._init(...arguments);
o.value = (o.value || "").toLowerCase();
this.combo = BI.createWidget({
this.combo = createWidget({
type: "bi.combo",
element: this,
container: o.container,
@ -29,83 +43,77 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
destroyWhenHide: o.destroyWhenHide,
isNeedAdjustWidth: false,
isNeedAdjustHeight: false,
el: BI.extend({
el: extend({
type: o.width <= 24 ? "bi.color_chooser_trigger" : "bi.long_color_chooser_trigger",
simple: o.simple,
ref: function (_ref) {
self.trigger = _ref;
ref: _ref => {
this.trigger = _ref;
},
value: o.value,
width: o.el.type ? o.width : BI.toPix(o.width, 2),
height: o.el.type ? o.height : BI.toPix(o.height, 2)
width: o.el.type ? o.width : toPix(o.width, 2),
height: o.el.type ? o.height : toPix(o.height, 2),
}, o.el),
popup: () => ({
el: BI.extend({
popup: () => {
return {
el: extend({
type: "bi.hex_color_chooser_popup",
recommendColorsGetter: o.recommendColorsGetter,
ref: function (_ref) {
self.colorPicker = _ref;
ref: _ref => {
this.colorPicker = _ref;
},
listeners: [{
eventName: BI.ColorChooserPopup.EVENT_VALUE_CHANGE,
action: function () {
eventName: ColorChooserPopup.EVENT_VALUE_CHANGE,
action: () => {
fn();
if (!self._isRGBColor(self.colorPicker.getValue())) {
self.combo.hideView();
}
if (!this._isRGBColor(this.colorPicker.getValue())) {
this.combo.hideView();
}
},
}, {
eventName: BI.ColorChooserPopup.EVENT_CHANGE,
action: function () {
eventName: ColorChooserPopup.EVENT_CHANGE,
action: () => {
fn();
self.combo.hideView();
}
}]
this.combo.hideView();
},
}],
}, o.popup),
value: o.value,
width: 300
}),
value: o.value
});
var fn = function () {
var color = self.colorPicker.getValue();
self.setValue(color);
width: 300,
};
},
value: o.value,
});
this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () {
self.fireEvent(BI.ColorChooser.EVENT_CHANGE, arguments);
this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, (...args) => {
this.fireEvent(ColorChooser.EVENT_CHANGE, ...args);
});
this.combo.on(BI.Combo.EVENT_AFTER_POPUPVIEW, function () {
self.fireEvent(BI.ColorChooser.EVENT_AFTER_POPUPVIEW, arguments);
this.combo.on(Combo.EVENT_AFTER_POPUPVIEW, (...args) => {
this.fireEvent(ColorChooser.EVENT_AFTER_POPUPVIEW, ...args);
});
},
}
_isRGBColor: function (color) {
return BI.isNotEmptyString(color) && color !== "transparent";
},
_isRGBColor(color) {
return isNotEmptyString(color) && color !== "transparent";
}
isViewVisible: function () {
isViewVisible() {
return this.combo.isViewVisible();
},
}
hideView: function () {
hideView() {
this.combo.hideView();
},
}
showView: function () {
showView() {
this.combo.showView();
},
}
setValue: function (color) {
setValue(color) {
this.options.value = (color || "").toLowerCase();
this.combo.setValue(this.options.value);
},
}
getValue: function () {
getValue() {
return this.combo.getValue();
}
});
BI.ColorChooser.EVENT_CHANGE = "EVENT_CHANGE";
BI.ColorChooser.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
BI.shortcut("bi.color_chooser", BI.ColorChooser);
}

259
src/case/colorchooser/colorchooser.popup.hex.js

@ -1,41 +1,52 @@
import { shortcut, Widget, isNotNull, extend, isNotEmptyString, array2String, map, count, string2Array, filter, isArray, Cache, Queue } from "@/core";
import { Combo } from "@/base";
import { ColorChooserPopup } from "./colorchooser.popup";
import { ColorPickerEditor, ColorPicker } from "./colorpicker";
/**
* @author windy
* @version 2.0
* Created by windy on 2020/11/10
*/
BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
@shortcut()
export class HexColorChooserPopup extends Widget {
static xtype = "bi.hex_color_chooser_popup";
static EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
static EVENT_CHANGE = "EVENT_CHANGE";
props: {
props = {
baseCls: "bi-color-chooser-popup",
width: 300,
recommendColorsGetter: BI.emptyFn, // 推荐色获取接口
simple: false // 简单模式, popup中没有自动和透明
},
simple: false, // 简单模式, popup中没有自动和透明
}
render() {
const o = this.options;
const hasRecommendColors = isNotNull(o.recommendColorsGetter());
render: function () {
var self = this, o = this.options;
var hasRecommendColors = BI.isNotNull(o.recommendColorsGetter());
return [{
type: "bi.vertical",
items: [{
el: {
type: "bi.vertical",
hgap: 15,
items: [BI.extend({
items: [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);
}
eventName: ColorPickerEditor.EVENT_CHANGE,
action: (...args) => {
this.setValue(this.colorEditor.getValue());
this._dealStoreColors();
this.fireEvent(ColorChooserPopup.EVENT_VALUE_CHANGE, ...args);
},
}],
ref: function (_ref) {
self.colorEditor = _ref;
}
ref: _ref => {
this.colorEditor = _ref;
},
}, o.editor), {
el: {
type: "bi.hex_color_picker",
@ -44,19 +55,19 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
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);
}
eventName: ColorPicker.EVENT_CHANGE,
action: (...args) => {
this.setValue(this.storeColors.getValue()[0]);
this._dealStoreColors();
this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
},
}],
ref: function (_ref) {
self.storeColors = _ref;
}
ref: _ref => {
this.storeColors = _ref;
},
},
tgap: 10,
height: 22
height: 22,
}, {
el: hasRecommendColors ? {
type: "bi.vertical",
@ -64,7 +75,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
type: "bi.label",
text: BI.i18nText("BI-Basic_Recommend_Color"),
textAlign: "left",
height: 24
height: 24,
}, {
type: "bi.hex_color_picker",
cls: "bi-border-bottom bi-border-right",
@ -72,27 +83,27 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
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);
}
eventName: ColorPicker.EVENT_CHANGE,
action: (...args) => {
this.setValue(this.recommendColors.getValue()[0]);
this._dealStoreColors();
this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
},
}],
ref: function (_ref) {
self.recommendColors = _ref;
}
}]
} : {type: "bi.layout"},
ref: _ref => {
this.recommendColors = _ref;
},
}],
} : { type: "bi.layout" },
tgap: hasRecommendColors ? 10 : 0,
height: hasRecommendColors ? 47 : 0
height: hasRecommendColors ? 47 : 0,
}, {
el: {
type: "bi.layout",
cls: "bi-border-top"
cls: "bi-border-top",
},
vgap: 10,
height: 1
height: 1,
}, {
type: "bi.absolute",
items: [{
@ -101,25 +112,25 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
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);
}
eventName: ColorPicker.EVENT_CHANGE,
action: (...args) => {
this.setValue(this.colorPicker.getValue()[0]);
this._dealStoreColors();
this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
},
}],
ref: function (_ref) {
self.colorPicker = _ref;
}
ref: _ref => {
this.colorPicker = _ref;
},
},
top: 0,
left: 0,
right: 0,
bottom: 1
bottom: 1,
}],
height: 80
}]
}
height: 80,
}],
},
}, {
el: {
type: "bi.combo",
@ -133,7 +144,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
textAlign: "center",
height: 24,
textLgap: 10,
text: BI.i18nText("BI-Basic_More") + "..."
text: `${BI.i18nText("BI-Basic_More")}...`,
},
popup: {
type: "bi.popup_panel",
@ -143,9 +154,9 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
type: "bi.custom_color_chooser",
value: o.value,
editor: o.editor,
ref: function (_ref) {
self.customColorChooser = _ref;
}
ref: _ref => {
this.customColorChooser = _ref;
},
},
stopPropagation: false,
bgap: -1,
@ -154,38 +165,41 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
minWidth: 227,
listeners: [{
eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON,
action: function (index) {
action: (index, ...args) => {
switch (index) {
case 0:
self.more.hideView();
this.more.hideView();
break;
case 1:
var color = self.customColorChooser.getValue();
case 1: {
const color = this.customColorChooser.getValue();
// farbtastic选择器没有透明和自动选项,点击保存不应该设置透明
if (BI.isNotEmptyString(color)) {
self.setValue(color);
self._dealStoreColors();
if (isNotEmptyString(color)) {
this.setValue(color);
this._dealStoreColors();
}
self.more.hideView();
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
this.more.hideView();
this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args);
break;
}
default:
break;
}
}]
},
}],
},
listeners: [{
eventName: BI.Combo.EVENT_AFTER_POPUPVIEW,
action: function () {
self.customColorChooser.setValue(self.getValue());
}
eventName: Combo.EVENT_AFTER_POPUPVIEW,
action: () => {
this.customColorChooser.setValue(this.getValue());
},
}],
ref: function (_ref) {
self.more = _ref;
}
ref: _ref => {
this.more = _ref;
},
},
tgap: 10,
height: 24
}]
height: 24,
}],
}, {
type: "bi.absolute",
items: [{
@ -193,89 +207,86 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
type: "bi.layout",
cls: "disable-mask",
invisible: !o.disabled,
ref: function () {
self.mask = this;
}
ref: () => {
this.mask = this;
},
},
left: 0,
right: 0,
top: 0,
bottom: 0
}]
bottom: 0,
}],
}];
},
}
// 这里就实现的不好了,setValue里面有个editor,editor的setValue会检测错误然后出bubble提示
mounted: function () {
var o = this.options;
if (BI.isNotNull(o.value)) {
mounted() {
const o = this.options;
if (isNotNull(o.value)) {
this.setValue(o.value);
}
},
}
_setEnable: function (enable) {
BI.ColorChooserPopup.superclass._setEnable.apply(this, arguments);
_setEnable(enable) {
super._setEnable(...arguments);
this.mask.setVisible(!enable);
},
}
_dealStoreColors: function () {
var color = this.getValue();
var colors = this._getStoreColors();
var que = new BI.Queue(12);
_dealStoreColors() {
const color = this.getValue();
const colors = this._getStoreColors();
const que = new Queue(12);
que.fromArray(colors);
que.remove(color);
que.unshift(color);
var array = que.toArray();
BI.Cache.setItem("colors", BI.array2String(array));
const array = que.toArray();
Cache.setItem("colors", array2String(array));
this.setStoreColors(array);
},
}
_digestStoreColors: function (colors) {
var items = BI.map(colors.slice(0, 12), function (i, color) {
_digestStoreColors(colors) {
const items = map(colors.slice(0, 12), (i, color) => {
return {
value: color
value: color,
};
});
BI.count(colors.length, 12, function (i) {
count(colors.length, 12, i => {
items.push({
value: "empty",
disabled: true
disabled: true,
});
});
return items;
},
}
_getStoreColors: function () {
var self = this, o = this.options;
var colorsArray = BI.string2Array(BI.Cache.getItem("colors") || "");
return BI.filter(colorsArray, function (idx, color) {
return o.simple ? self._isRGBColor(color) : true;
});
},
_getStoreColors() {
const o = this.options;
const colorsArray = string2Array(Cache.getItem("colors") || "");
_isRGBColor: function (color) {
return BI.isNotEmptyString(color) && color !== "transparent";
},
return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true);
}
_isRGBColor(color) {
return isNotEmptyString(color) && color !== "transparent";
}
setStoreColors: function (colors) {
if (BI.isArray(colors)) {
setStoreColors(colors) {
if (isArray(colors)) {
this.storeColors.populate([this._digestStoreColors(colors)]);
// BI-66973 选中颜色的同时选中历史
this.storeColors.setValue(this.getValue());
}
},
}
setValue: function (color) {
setValue(color) {
this.colorEditor.setValue(color);
this.colorPicker.setValue(color);
this.storeColors.setValue(color);
this.recommendColors && this.recommendColors.setValue(color);
},
}
getValue: function () {
getValue() {
return this.colorEditor.getValue();
}
});
BI.HexColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
BI.HexColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.hex_color_chooser_popup", BI.HexColorChooserPopup);
}

59
src/case/colorchooser/colorchooser.popup.hex.simple.js

@ -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);
}

201
src/case/colorchooser/colorchooser.popup.js

@ -1,67 +1,76 @@
import { shortcut, Widget, createWidget, Cache, string2Array, isNotNull, Queue, array2String, map, count, filter, isNotEmptyString, isArray } from "@/core";
import { Combo } from "@/base";
import { ColorPickerEditor, ColorPicker } from "./colorpicker";
/**
* 选色控件
*
* Created by GUY on 2015/11/17.
* @class BI.ColorChooserPopup
* @extends BI.Widget
* @class ColorChooserPopup
* @extends Widget
*/
BI.ColorChooserPopup = BI.inherit(BI.Widget, {
@shortcut()
export class ColorChooserPopup extends Widget {
static xtype = "bi.color_chooser_popup";
static EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
static EVENT_CHANGE = "EVENT_CHANGE";
props: {
props = {
baseCls: "bi-color-chooser-popup",
width: 230,
height: 145,
simple: false // 简单模式, popup中没有自动和透明
},
simple: false, // 简单模式, popup中没有自动和透明
}
render: function () {
var self = this, o = this.options;
this.colorEditor = BI.createWidget(o.editor, {
render () {
const o = this.options;
this.colorEditor = createWidget(o.editor, {
type: o.simple ? "bi.simple_color_picker_editor" : "bi.color_picker_editor",
value: o.value,
cls: "bi-header-background bi-border-bottom",
height: 30
height: 30,
});
this.colorEditor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () {
self.setValue(this.getValue());
self._dealStoreColors();
self.fireEvent(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, arguments);
this.colorEditor.on(ColorPickerEditor.EVENT_CHANGE, (...args) => {
this.setValue(this.colorEditor.getValue());
this._dealStoreColors();
this.fireEvent(ColorChooserPopup.EVENT_VALUE_CHANGE, ...args);
});
this.storeColors = BI.createWidget({
this.storeColors = createWidget({
type: "bi.color_picker",
cls: "bi-border-bottom bi-border-right",
items: [this._digestStoreColors(this._getStoreColors())],
width: 210,
height: 24,
value: o.value
value: o.value,
});
this.storeColors.on(BI.ColorPicker.EVENT_CHANGE, function () {
self.setValue(this.getValue()[0]);
self._dealStoreColors();
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
this.storeColors.on(ColorPicker.EVENT_CHANGE, (...args) => {
this.setValue(this.storeColors.getValue()[0]);
this._dealStoreColors();
this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
});
this.colorPicker = BI.createWidget({
this.colorPicker = createWidget({
type: "bi.color_picker",
width: 210,
height: 50,
value: o.value
value: o.value,
});
this.colorPicker.on(BI.ColorPicker.EVENT_CHANGE, function () {
self.setValue(this.getValue()[0]);
self._dealStoreColors();
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
this.colorPicker.on(ColorPicker.EVENT_CHANGE, (...args) => {
this.setValue(this.colorPicker.getValue()[0]);
this._dealStoreColors();
this.fireEvent(ColorChooserPopup.EVENT_CHANGE, ...args);
});
this.customColorChooser = BI.createWidget({
this.customColorChooser = createWidget({
type: "bi.custom_color_chooser",
editor: o.editor
editor: o.editor,
});
var panel = BI.createWidget({
const panel = createWidget({
type: "bi.popup_panel",
buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")],
title: BI.i18nText("BI-Custom_Color"),
@ -70,10 +79,10 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
bgap: -1,
rgap: 1,
lgap: 1,
minWidth: 227
minWidth: 227,
});
this.more = BI.createWidget({
this.more = createWidget({
type: "bi.combo",
cls: "bi-border-top",
container: null,
@ -85,24 +94,26 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
textAlign: "center",
height: 24,
textLgap: 10,
text: BI.i18nText("BI-Basic_More") + "..."
text: `${BI.i18nText("BI-Basic_More")}...`,
},
popup: panel
popup: panel,
});
this.more.on(BI.Combo.EVENT_AFTER_POPUPVIEW, function () {
self.customColorChooser.setValue(self.getValue());
this.more.on(Combo.EVENT_AFTER_POPUPVIEW, () => {
this.customColorChooser.setValue(this.getValue());
});
panel.on(BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, function (index) {
panel.on(BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, (index, ...args) => {
switch (index) {
case 0:
self.more.hideView();
this.more.hideView();
break;
case 1:
self.setValue(self.customColorChooser.getValue());
self._dealStoreColors();
self.more.hideView();
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
this.setValue(this.customColorChooser.getValue());
this._dealStoreColors();
this.more.hideView();
this.fireEvent(ColorChooserPopup.EVENT_CHANGE, index, ...args);
break;
default:
break;
}
});
@ -119,10 +130,10 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
el: this.storeColors,
left: 10,
right: 10,
top: 5
}]
top: 5,
}],
},
height: 29
height: 29,
}, {
el: {
type: "bi.absolute",
@ -131,107 +142,103 @@ BI.ColorChooserPopup = BI.inherit(BI.Widget, {
left: 10,
right: 10,
top: 5,
bottom: 5
}]
bottom: 5,
}],
},
height: 60
height: 60,
}, {
el: this.more,
height: 24
}]
height: 24,
}],
},
left: 0,
right: 0,
top: 0,
bottom: 0
bottom: 0,
}, {
el: {
type: "bi.layout",
cls: "disable-mask",
invisible: !o.disabled,
ref: function () {
self.mask = this;
}
ref: () => {
this.mask = this;
},
},
left: 0,
right: 0,
top: 0,
bottom: 0
}]
bottom: 0,
}],
};
},
}
// 这里就实现的不好了,setValue里面有个editor,editor的setValue会检测错误然后出bubble提示
mounted: function () {
var self = this;
var o = this.options;
if (BI.isNotNull(o.value)) {
mounted () {
const o = this.options;
if (isNotNull(o.value)) {
this.setValue(o.value);
}
},
}
_setEnable: function (enable) {
BI.ColorChooserPopup.superclass._setEnable.apply(this, arguments);
_setEnable (enable) {
super._setEnable(...arguments);
this.mask.setVisible(!enable);
},
}
_dealStoreColors: function () {
var color = this.getValue();
var colors = this._getStoreColors();
var que = new BI.Queue(8);
_dealStoreColors () {
const color = this.getValue();
const colors = this._getStoreColors();
const que = new Queue(8);
que.fromArray(colors);
que.remove(color);
que.unshift(color);
var array = que.toArray();
BI.Cache.setItem("colors", BI.array2String(array));
const array = que.toArray();
Cache.setItem("colors", array2String(array));
this.setStoreColors(array);
},
}
_digestStoreColors: function (colors) {
var items = BI.map(colors, function (i, color) {
_digestStoreColors (colors) {
const items = map(colors, (i, color) => {
return {
value: color
value: color,
};
});
BI.count(colors.length, 8, function (i) {
count(colors.length, 8, i => {
items.push({
value: "",
disabled: true
disabled: true,
});
});
return items;
},
}
_getStoreColors: function() {
var self = this, o = this.options;
var colorsArray = BI.string2Array(BI.Cache.getItem("colors") || "");
return BI.filter(colorsArray, function (idx, color) {
return o.simple ? self._isRGBColor(color) : true;
});
},
_getStoreColors() {
const o = this.options;
const colorsArray = string2Array(Cache.getItem("colors") || "");
_isRGBColor: function (color) {
return BI.isNotEmptyString(color) && color !== "transparent";
},
return filter(colorsArray, (idx, color) => o.simple ? this._isRGBColor(color) : true);
}
_isRGBColor (color) {
return isNotEmptyString(color) && color !== "transparent";
}
setStoreColors: function (colors) {
if (BI.isArray(colors)) {
setStoreColors (colors) {
if (isArray(colors)) {
this.storeColors.populate([this._digestStoreColors(colors)]);
// BI-66973 选中颜色的同时选中历史
this.storeColors.setValue(this.getValue());
}
},
}
setValue: function (color) {
setValue (color) {
this.colorEditor.setValue(color);
this.colorPicker.setValue(color);
this.storeColors.setValue(color);
},
}
getValue: function () {
getValue () {
return this.colorEditor.getValue();
}
});
BI.ColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
BI.ColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.color_chooser_popup", BI.ColorChooserPopup);
}

61
src/case/colorchooser/colorchooser.popup.simple.js

@ -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);
}

65
src/case/colorchooser/colorchooser.simple.js

@ -1,24 +1,32 @@
import { shortcut, Widget, extend, createWidget } from "@/core";
import { ColorChooser } from "./colorchooser";
/**
* 简单选色控件没有自动和透明
*
* Created by GUY on 2015/11/17.
* @class BI.SimpleColorChooser
* @extends BI.Widget
* @class SimpleColorChooser
* @extends Widget
*/
BI.SimpleColorChooser = BI.inherit(BI.Widget, {
@shortcut()
export class SimpleColorChooser extends Widget {
static xtype = "bi.simple_color_chooser";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
_defaultConfig: function () {
return BI.extend(BI.SimpleColorChooser.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-simple-color-chooser",
value: "#ffffff"
value: "#ffffff",
});
},
}
_init: function () {
BI.SimpleColorChooser.superclass._init.apply(this, arguments);
var self = this, o = this.options;
_init() {
super._init(...arguments);
const o = this.options;
this.combo = BI.createWidget({
this.combo = createWidget({
type: "bi.color_chooser",
simple: o.simple,
element: this,
@ -30,36 +38,33 @@ BI.SimpleColorChooser = BI.inherit(BI.Widget, {
popup: {
type: "bi.simple_hex_color_chooser_popup",
recommendColorsGetter: o.recommendColorsGetter,
}
},
});
this.combo.on(BI.ColorChooser.EVENT_CHANGE, function () {
self.fireEvent(BI.SimpleColorChooser.EVENT_CHANGE, arguments);
this.combo.on(ColorChooser.EVENT_CHANGE, (...args) => {
this.fireEvent(SimpleColorChooser.EVENT_CHANGE, ...args);
});
this.combo.on(BI.ColorChooser.EVENT_AFTER_POPUPVIEW, function () {
self.fireEvent(BI.SimpleColorChooser.EVENT_AFTER_POPUPVIEW, arguments);
this.combo.on(ColorChooser.EVENT_AFTER_POPUPVIEW, (...args) => {
this.fireEvent(SimpleColorChooser.EVENT_AFTER_POPUPVIEW, ...args);
});
},
}
isViewVisible: function () {
isViewVisible() {
return this.combo.isViewVisible();
},
}
hideView: function () {
hideView() {
this.combo.hideView();
},
}
showView: function () {
showView() {
this.combo.showView();
},
}
setValue: function (color) {
setValue(color) {
this.combo.setValue(color);
},
}
getValue: function () {
getValue() {
return this.combo.getValue();
}
});
BI.SimpleColorChooser.EVENT_CHANGE = "EVENT_CHANGE";
BI.SimpleColorChooser.EVENT_AFTER_POPUPVIEW = "EVENT_AFTER_POPUPVIEW";
BI.shortcut("bi.simple_color_chooser", BI.SimpleColorChooser);
}

58
src/case/colorchooser/colorchooser.trigger.js

@ -1,36 +1,44 @@
import { shortcut, extend, createWidget, isNotNull } from "@/core";
import { Trigger } from "@/base";
/**
* 选色控件
*
* Created by GUY on 2015/11/17.
* @class BI.ColorChooserTrigger
* @extends BI.Trigger
* @class ColorChooserTrigger
* @extends Trigger
*/
BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
@shortcut()
export class ColorChooserTrigger extends Trigger {
static xtype = "bi.color_chooser_trigger";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig (config) {
const conf = super._defaultConfig(...arguments);
_defaultConfig: function (config) {
var conf = BI.ColorChooserTrigger.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger bi-focus-shadow " + (config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"),
height: 22
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`,
height: 22,
});
},
}
_init: function () {
BI.ColorChooserTrigger.superclass._init.apply(this, arguments);
this.colorContainer = BI.createWidget({
_init () {
super._init(...arguments);
this.colorContainer = createWidget({
type: "bi.layout",
cls: "color-chooser-trigger-content" + (BI.isIE9Below && BI.isIE9Below() ? " hack" : "")
});
var down = BI.createWidget({
const down = createWidget({
type: "bi.icon_button",
disableSelected: true,
cls: "icon-combo-down-icon trigger-triangle-font icon-size-12",
width: 12,
height: 8
height: 8,
});
BI.createWidget({
createWidget({
type: "bi.absolute",
element: this,
items: [{
@ -38,28 +46,26 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
left: 2,
right: 2,
top: 2,
bottom: 2
bottom: 2,
}, {
el: down,
right: -1,
bottom: 1
}]
bottom: 1,
}],
});
if (BI.isNotNull(this.options.value)) {
if (isNotNull(this.options.value)) {
this.setValue(this.options.value);
}
},
}
setValue: function (color) {
BI.ColorChooserTrigger.superclass.setValue.apply(this, arguments);
setValue (color) {
super.setValue(...arguments);
if (color === "") {
this.colorContainer.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background");
} else if (color === "transparent") {
this.colorContainer.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background");
} else {
this.colorContainer.element.css({"background-color": color}).removeClass("auto-color-background").removeClass("trans-color-background");
this.colorContainer.element.css({ "background-color": color }).removeClass("auto-color-background").removeClass("trans-color-background");
}
}
});
BI.ColorChooserTrigger.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.color_chooser_trigger", BI.ColorChooserTrigger);
}

73
src/case/colorchooser/colorchooser.trigger.long.js

@ -1,59 +1,66 @@
import { shortcut, extend, createWidget } from "@/core";
import { Trigger } from "@/base";
/**
* 选色控件
*
* Created by GUY on 2015/11/17.
* @class BI.LongColorChooserTrigger
* @extends BI.Trigger
* @class LongColorChooserTrigger
* @extends Trigger
*/
BI.LongColorChooserTrigger = BI.inherit(BI.Trigger, {
@shortcut()
export class LongColorChooserTrigger extends Trigger {
static xtype = "bi.long_color_chooser_trigger";
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig (config) {
const conf = super._defaultConfig(...arguments);
_defaultConfig: function (config) {
var conf = BI.LongColorChooserTrigger.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-color-chooser-trigger bi-focus-shadow " + (config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"),
height: 24
return extend(conf, {
baseCls: `${conf.baseCls || ""} bi-color-chooser-trigger bi-focus-shadow ${config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"}`,
height: 24,
});
},
}
_init: function () {
BI.LongColorChooserTrigger.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.colorContainer = BI.createWidget({
_init () {
super._init(...arguments);
this.colorContainer = createWidget({
type: "bi.htape",
cls: "color-chooser-trigger-content",
items: [{
type: "bi.icon_change_button",
ref: function (_ref) {
self.changeIcon = _ref;
ref: _ref => {
this.changeIcon = _ref;
},
disableSelected: true,
iconCls: "auto-color-icon",
width: 24,
iconWidth: 16,
iconHeight: 16
iconHeight: 16,
}, {
el: {
type: "bi.label",
ref: function (_ref) {
self.label = _ref;
ref: _ref => {
this.label = _ref;
},
textAlign: "left",
hgap: 5,
height: 18,
text: BI.i18nText("BI-Basic_Auto")
}
}]
text: BI.i18nText("BI-Basic_Auto"),
},
}],
});
var down = BI.createWidget({
const down = createWidget({
type: "bi.icon_button",
disableSelected: true,
cls: "icon-combo-down-icon trigger-triangle-font icon-size-12",
width: 12,
height: 8
height: 8,
});
BI.createWidget({
createWidget({
type: "bi.absolute",
element: this,
items: [{
@ -61,20 +68,20 @@ BI.LongColorChooserTrigger = BI.inherit(BI.Trigger, {
left: 2,
right: 2,
top: 2,
bottom: 2
bottom: 2,
}, {
el: down,
right: 3,
bottom: 3
}]
bottom: 3,
}],
});
if (this.options.value) {
this.setValue(this.options.value);
}
},
}
setValue: function (color) {
BI.LongColorChooserTrigger.superclass.setValue.apply(this, arguments);
setValue (color) {
super.setValue(...arguments);
if (color === "") {
this.colorContainer.element.css("background-color", "");
this.changeIcon.setVisible(true);
@ -88,11 +95,9 @@ BI.LongColorChooserTrigger = BI.inherit(BI.Trigger, {
this.changeIcon.setIcon("trans-color-icon");
this.label.setText(BI.i18nText("BI-Transparent_Color"));
} else {
this.colorContainer.element.css({"background-color": color});
this.colorContainer.element.css({ "background-color": color });
this.changeIcon.setVisible(false);
this.label.setVisible(false);
}
}
});
BI.LongColorChooserTrigger.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.long_color_chooser_trigger", BI.LongColorChooserTrigger);
}

76
src/case/colorchooser/colorpicker/button/button.colorpicker.js

@ -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() {
const conf = super._defaultConfig(...arguments);
_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"
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);
}

46
src/case/colorchooser/colorpicker/button/button.colorshow.js

@ -1,24 +1,32 @@
import { shortcut } from "@/core";
import { BasicButton } from "@/base";
/**
* @author windy
* @version 2.0
* Created by windy on 2021/7/28
*/
BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, {
@shortcut()
export class ColorChooserShowButton extends BasicButton {
static xtype = "bi.color_picker_show_button";
props: {
baseCls: 'bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius',
},
static EVENT_CHANGE = "EVENT_CHANGE";
props = {
baseCls: "bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius",
}
render() {
const o = this.options;
render: function () {
var self = this, o = this.options;
return {
type: 'bi.htape',
type: "bi.htape",
items: [
{
el: {
type: "bi.icon_label",
ref: function (_ref) {
self.icon = _ref;
ref: _ref => {
this.icon = _ref;
},
iconWidth: 16,
iconHeight: 16,
@ -26,20 +34,18 @@ BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, {
hgap: 20,
width: 16,
}, {
type: 'bi.label',
textAlign: 'left',
type: "bi.label",
textAlign: "left",
text: o.text,
}
]
],
};
},
}
doClick: function () {
BI.ColorChooserShowButton.superclass.doClick.apply(this, arguments);
doClick() {
super.doClick(...arguments);
if (this.isValid()) {
this.fireEvent(BI.ColorChooserShowButton.EVENT_CHANGE, this);
this.fireEvent(ColorChooserShowButton.EVENT_CHANGE, this);
}
},
});
BI.ColorChooserShowButton.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.color_picker_show_button", BI.ColorChooserShowButton);
}
}

2
src/case/colorchooser/colorpicker/button/index.js

@ -0,0 +1,2 @@
export { ColorPickerButton } from "./button.colorpicker";
export { ColorChooserShowButton } from "./button.colorshow";

163
src/case/colorchooser/colorpicker/colorpicker.hex.js

@ -1,165 +1,172 @@
import { shortcut, Widget, extend, each } from "@/core";
import { ButtonGroup } from "@/base";
/**
* @author windy
* @version 2.0
* Created by windy on 2021/7/28
*/
BI.HexColorPicker = BI.inherit(BI.Widget, {
@shortcut()
export class HexColorPicker extends Widget {
static xtype = "bi.hex_color_picker";
static EVENT_CHANGE = "EVENT_CHANGE";
props: {
props = {
baseCls: "bi-hex-color-picker",
items: null,
},
}
_items: [
_items = [
[
{
"value": "#999999"
value: "#999999",
},
{
"value": "#FFFFFF"
value: "#FFFFFF",
},
{
"value": "#FFE5E5"
value: "#FFE5E5",
},
{
"value": "#FFF1E5"
value: "#FFF1E5",
},
{
"value": "#FFF9E5"
value: "#FFF9E5",
},
{
"value": "#E9F5E9"
value: "#E9F5E9",
},
{
"value": "#EAEEFF"
value: "#EAEEFF",
},
{
"value": "#EFEBF7"
value: "#EFEBF7",
},
{
"value": "#FCE8EF"
value: "#FCE8EF",
}
],
[
{
"value": "#737373"
value: "#737373",
},
{
"value": "#F2F2F2"
value: "#F2F2F2",
},
{
"value": "#FFA6A6"
value: "#FFA6A6",
},
{
"value": "#FFD0A6"
value: "#FFD0A6",
},
{
"value": "#FFEDA6"
value: "#FFEDA6",
},
{
"value": "#B3DCB2"
value: "#B3DCB2",
},
{
"value": "#B9C6FF"
value: "#B9C6FF",
},
{
"value": "#CABAE6"
value: "#CABAE6",
},
{
"value": "#F8B1C9"
value: "#F8B1C9",
}
],
[
{
"value": "#4C4C4C"
value: "#4C4C4C",
},
{
"value": "#D9D9D9"
value: "#D9D9D9",
},
{
"value": "#FF5959"
value: "#FF5959",
},
{
"value": "#FFA759"
value: "#FFA759",
},
{
"value": "#FFDD59"
value: "#FFDD59",
},
{
"value": "#7EBE70"
value: "#7EBE70",
},
{
"value": "#7B95FF"
value: "#7B95FF",
},
{
"value": "#9C7FD0"
value: "#9C7FD0",
},
{
"value": "#F06D99"
value: "#F06D99",
}
],
[
{
"value": "#262626"
value: "#262626",
},
{
"value": "#BFBFBF"
value: "#BFBFBF",
},
{
"value": "#FF0000"
value: "#FF0000",
},
{
"value": "#FF7800"
value: "#FF7800",
},
{
"value": "#FFCB00"
value: "#FFCB00",
},
{
"value": "#259B23"
value: "#259B23",
},
{
"value": "#355CFF"
value: "#355CFF",
},
{
"value": "#673AB7"
value: "#673AB7",
},
{
"value": "#E91E63"
value: "#E91E63",
}
],
[
{
"value": "#000000"
value: "#000000",
},
{
"value": "#A6A6A6"
value: "#A6A6A6",
},
{
"value": "#A80000"
value: "#A80000",
},
{
"value": "#B65600"
value: "#B65600",
},
{
"value": "#CEB000"
value: "#CEB000",
},
{
"value": "#0E550C"
value: "#0E550C",
},
{
"value": "#09269C"
value: "#09269C",
},
{
"value": "#3A1A73"
value: "#3A1A73",
},
{
"value": "#B30072"
value: "#B30072",
}
]
],
]
render: function () {
var self = this, o = this.options;
render() {
const o = this.options;
return {
type: "bi.button_group",
@ -172,52 +179,50 @@ BI.HexColorPicker = BI.inherit(BI.Widget, {
value: o.value,
listeners: [
{
eventName: BI.ButtonGroup.EVENT_CHANGE,
action: function () {
self.fireEvent(BI.HexColorPicker.EVENT_CHANGE, arguments);
}
eventName: ButtonGroup.EVENT_CHANGE,
action: (...args) => {
this.fireEvent(HexColorPicker.EVENT_CHANGE, ...args);
},
}
],
ref: function (_ref) {
self.colors = _ref;
}
};
ref: _ref => {
this.colors = _ref;
},
};
}
_digest: function (items) {
var o = this.options;
var blocks = [];
BI.each(items, function (idx, row) {
var bRow = [];
BI.each(row, function (idx, item) {
bRow.push(BI.extend({
_digest(items) {
const o = this.options;
const blocks = [];
each(items, (idx, row) => {
const bRow = [];
each(row, (idx, item) => {
bRow.push(extend({
type: "bi.color_picker_button",
once: false,
cls: o.space ? 'bi-border-right' : '',
cls: o.space ? "bi-border-right" : "",
}, item));
if (o.space && idx < row.length - 1) {
bRow.push({ type: 'bi.layout' });
bRow.push({ type: "bi.layout" });
}
});
blocks.push(bRow);
});
return blocks;
},
}
populate: function (items) {
var args = [].slice.call(arguments);
populate(items) {
const args = [].slice.call(arguments);
args[0] = this._digest(items);
this.colors.populate.apply(this.colors, args);
},
}
setValue: function (color) {
setValue(color) {
this.colors.setValue(color);
},
}
getValue: function () {
getValue() {
return this.colors.getValue();
}
});
BI.HexColorPicker.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.hex_color_picker", BI.HexColorPicker);
}

195
src/case/colorchooser/colorpicker/colorpicker.js

@ -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);
}

238
src/case/colorchooser/colorpicker/editor.colorpicker.hex.js

@ -1,36 +1,37 @@
import { shortcut, Widget, createItems, map, isNumeric, range, extend, isEmptyString, isNull, DOM } from "@/core";
import { ColorPickerEditor } from "./editor.colorpicker";
import { ColorChooserShowButton } from "./button";
const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1;
/**
* 简单选色控件
*
* Created by GUY on 2015/11/16.
* @class BI.ColorPickerEditor
* @extends BI.Widget
* @class HexColorPickerEditor
* @extends Widget
*/
BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
@shortcut()
export class HexColorPickerEditor extends Widget {
static xtype = "bi.hex_color_picker_editor";
constants: {
RGB_WIDTH: 32,
HEX_WIDTH: 70,
HEX_PREFIX_POSITION: 1
},
static EVENT_CHANGE = "EVENT_CHANGE";
props: {
props = {
baseCls: "bi-color-picker-editor",
height: 30
},
height: 30,
}
render: function () {
var self = this, o = this.options, c = this.constants;
render() {
this.storeValue = {};
var RGB = BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
type: "bi.label",
cls: "color-picker-editor-label",
height: 20
height: 20,
});
var checker = function (v) {
return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
};
var Ws = BI.map(BI.range(0, 3), function () {
const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
const Ws = map(range(0, 3), () => {
return {
type: "bi.small_text_editor",
cls: "color-picker-editor-input bi-border-radius",
@ -38,20 +39,20 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true,
value: 255,
width: c.RGB_WIDTH,
width: RGB_WIDTH,
height: 24,
listeners: [
{
eventName: BI.TextEditor.EVENT_CHANGE,
action: function () {
self._checkEditors();
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);
}
action: () => {
this._checkEditors();
if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) {
this.colorShow.element.css("background-color", this.getValue());
this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
}
},
}
]
],
};
});
@ -64,8 +65,8 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
tgap: 10,
items: [
{
type: 'bi.vertical_adapt',
columnSize: ["fill", 'fill'],
type: "bi.vertical_adapt",
columnSize: ["fill", "fill"],
height: 24,
items: [
{
@ -76,16 +77,16 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
text: BI.i18nText("BI-Transparent_Color"),
listeners: [
{
eventName: BI.ColorChooserShowButton.EVENT_CHANGE,
action: function () {
self.setValue("transparent");
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
eventName: ColorChooserShowButton.EVENT_CHANGE,
action: () => {
this.setValue("transparent");
this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
},
}
],
ref: function (_ref) {
self.transparent = _ref;
}
ref: _ref => {
this.transparent = _ref;
},
}, {
el: {
type: "bi.color_picker_show_button",
@ -95,24 +96,24 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
text: BI.i18nText("BI-Basic_Auto"),
listeners: [
{
eventName: BI.ColorChooserShowButton.EVENT_CHANGE,
action: function () {
self.setValue("");
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
eventName: ColorChooserShowButton.EVENT_CHANGE,
action: () => {
this.setValue("");
this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
},
}
],
ref: function (_ref) {
self.none = _ref;
}
ref: _ref => {
this.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],
columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH],
rgap: 5,
items: [
@ -122,107 +123,106 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
cls: "color-picker-editor-display bi-card bi-border",
height: 22,
width: 22,
ref: function (_ref) {
self.colorShow = _ref;
}
ref: _ref => {
this.colorShow = _ref;
},
},
width: 18
width: 18,
}, {
type: "bi.label",
text: "#",
width: 10
width: 10,
}, {
type: "bi.small_text_editor",
ref: function (_ref) {
self.hexEditor = _ref;
ref: _ref => {
this.hexEditor = _ref;
},
cls: "color-picker-editor-input bi-border-radius",
validationChecker: this._hexChecker,
allowBlank: true,
errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"),
width: c.HEX_WIDTH,
width: 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);
}
action: () => {
this._checkHexEditor();
if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) {
this.colorShow.element.css("background-color", this.getValue());
this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
}
},
}
]
],
}, RGB[0], {
el: BI.extend(Ws[0], {
ref: function (_ref) {
self.R = _ref;
}
el: extend(Ws[0], {
ref: _ref => {
this.R = _ref;
},
}),
width: c.RGB_WIDTH
width: RGB_WIDTH,
}, RGB[1], {
el: BI.extend(Ws[1], {
ref: function (_ref) {
self.G = _ref;
}
el: extend(Ws[1], {
ref: _ref => {
this.G = _ref;
},
}),
width: c.RGB_WIDTH
width: RGB_WIDTH,
}, RGB[2], {
el: BI.extend(Ws[2], {
ref: function (_ref) {
self.B = _ref;
}
el: extend(Ws[2], {
ref: _ref => {
this.B = _ref;
},
}),
rgap: -5,
width: c.RGB_WIDTH
}
]
width: RGB_WIDTH,
}
],
},
}
]
],
},
left: 0,
right: 0,
top: 0,
bottom: 0
bottom: 0,
}
]
],
};
},
}
_hexChecker: function (v) {
_hexChecker(v) {
return /^[0-9a-fA-F]{6}$/.test(v);
},
}
_checkEditors: function () {
if (BI.isEmptyString(this.R.getValue())) {
_checkEditors() {
if (isEmptyString(this.R.getValue())) {
this.R.setValue(0);
}
if (BI.isEmptyString(this.G.getValue())) {
if (isEmptyString(this.G.getValue())) {
this.G.setValue(0);
}
if (BI.isEmptyString(this.B.getValue())) {
if (isEmptyString(this.B.getValue())) {
this.B.setValue(0);
}
this.storeValue = {
r: this.R.getValue() || 0,
g: this.G.getValue() || 0,
b: this.B.getValue() || 0
b: this.B.getValue() || 0,
};
this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION));
},
this.hexEditor.setValue(this.getValue().slice(HEX_PREFIX_POSITION));
}
_isEmptyRGB: function () {
return BI.isEmptyString(this.storeValue.r) && BI.isEmptyString(this.storeValue.g) && BI.isEmptyString(this.storeValue.b);
},
_isEmptyRGB() {
return isEmptyString(this.storeValue.r) && isEmptyString(this.storeValue.g) && isEmptyString(this.storeValue.b);
}
_checkHexEditor: function () {
if (BI.isEmptyString(this.hexEditor.getValue())) {
_checkHexEditor() {
if (isEmptyString(this.hexEditor.getValue())) {
this.hexEditor.setValue("000000");
}
var json = BI.DOM.rgb2json(BI.DOM.hex2rgb("#" + this.hexEditor.getValue()));
const json = DOM.rgb2json(DOM.hex2rgb(`#${this.hexEditor.getValue()}`));
this.storeValue = {
r: json.r || 0,
g: json.g || 0,
@ -231,9 +231,9 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
this.R.setValue(this.storeValue.r);
this.G.setValue(this.storeValue.g);
this.B.setValue(this.storeValue.b);
},
}
_showPreColor: function (color) {
_showPreColor(color) {
if (color === "") {
this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-square-normal-background");
} else if (color === "transparent") {
@ -241,18 +241,18 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
} else {
this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-square-normal-background").removeClass("trans-color-background");
}
},
}
_setEnable: function (enable) {
BI.ColorPickerEditor.superclass._setEnable.apply(this, arguments);
_setEnable(enable) {
super._setEnable(...arguments);
if (enable === true) {
this.element.removeClass("base-disabled disabled");
} else if (enable === false) {
this.element.addClass("base-disabled disabled");
}
},
}
setValue: function (color) {
setValue(color) {
if (color === "transparent") {
this.transparent.setSelected(true);
this.none.setSelected(false);
@ -264,8 +264,9 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
this.storeValue = {
r: "",
g: "",
b: ""
b: "",
};
return;
}
if (!color) {
@ -276,28 +277,27 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
}
this.transparent.setSelected(false);
this._showPreColor(color);
var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
const json = DOM.rgb2json(DOM.hex2rgb(color));
this.storeValue = {
r: BI.isNull(json.r) ? "" : json.r,
g: BI.isNull(json.g) ? "" : json.g,
b: BI.isNull(json.b) ? "" : json.b
r: isNull(json.r) ? "" : json.r,
g: isNull(json.g) ? "" : json.g,
b: isNull(json.b) ? "" : json.b,
};
this.R.setValue(this.storeValue.r);
this.G.setValue(this.storeValue.g);
this.B.setValue(this.storeValue.b);
this.hexEditor.setValue(color.slice(this.constants.HEX_PREFIX_POSITION));
},
this.hexEditor.setValue(color.slice(HEX_PREFIX_POSITION));
}
getValue: function () {
getValue() {
if (this._isEmptyRGB() && this.transparent.isSelected()) {
return "transparent";
}
return BI.DOM.rgb2hex(BI.DOM.json2rgb({
return DOM.rgb2hex(DOM.json2rgb({
r: this.storeValue.r,
g: this.storeValue.g,
b: this.storeValue.b
b: this.storeValue.b,
}));
}
});
BI.HexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.hex_color_picker_editor", BI.HexColorPickerEditor);
}

168
src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js

@ -1,34 +1,34 @@
import { shortcut, Widget, extend, isEmptyObject, createItems, isNull, isNumeric, map, isEmptyString, range, DOM } from "@/core";
import { SimpleColorPickerEditor } from "./editor.colorpicker.simple";
import { ColorPickerEditor } from "./editor.colorpicker";
const RGB_WIDTH = 32, HEX_WIDTH = 70, HEX_PREFIX_POSITION = 1;
/**
* @author windy
* @version 2.0
* Created by windy on 2020/11/10
*/
BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
@shortcut()
export class SimpleHexColorPickerEditor extends Widget {
static xtype = "bi.simple_hex_color_picker_editor";
constants: {
RGB_WIDTH: 32,
HEX_WIDTH: 70,
HEX_PREFIX_POSITION: 1
},
static EVENT_CHANGE = "EVENT_CHANGE";
props: {
props = {
baseCls: "bi-color-picker-editor",
height: 36
},
render: function () {
var self = this, o = this.options, c = this.constants;
height: 36,
}
var RGB = BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
render () {
const RGB = createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
type: "bi.label",
cls: "color-picker-editor-label",
height: 20
height: 20,
});
var checker = function (v) {
return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
};
var Ws = BI.map(BI.range(0, 3), function () {
const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
const Ws = map(range(0, 3), () => {
return {
type: "bi.small_text_editor",
cls: "color-picker-editor-input bi-border-radius",
@ -36,20 +36,20 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true,
value: 255,
width: c.RGB_WIDTH,
width: RGB_WIDTH,
height: 24,
listeners: [
{
eventName: BI.TextEditor.EVENT_CHANGE,
action: function () {
self._checkEditors();
if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE);
}
action: () => {
this._checkEditors();
if (this.R.isValid() && this.G.isValid() && this.B.isValid()) {
this.colorShow.element.css("background-color", this.getValue());
this.fireEvent(SimpleColorPickerEditor.EVENT_CHANGE);
}
},
}
]
],
};
});
@ -61,7 +61,7 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
el: {
type: "bi.vertical_adapt",
rgap: 5,
columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH],
columnSize: [22, 10, "fill", 12, RGB_WIDTH, 12, RGB_WIDTH, 12, RGB_WIDTH],
items: [
{
el: {
@ -69,91 +69,91 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
cls: "color-picker-editor-display bi-card bi-border",
height: 22,
width: 22,
ref: function (_ref) {
self.colorShow = _ref;
}
ref: _ref => {
this.colorShow = _ref;
},
},
width: 18,
}, {
type: "bi.label",
text: "#",
width: 10
width: 10,
}, {
type: "bi.small_text_editor",
ref: function (_ref) {
self.hexEditor = _ref;
ref: _ref => {
this.hexEditor = _ref;
},
cls: "color-picker-editor-input bi-border-radius",
validationChecker: this._hexChecker,
allowBlank: true,
errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"),
width: c.HEX_WIDTH,
width: 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);
}
action: () => {
this._checkHexEditor();
if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) {
this.colorShow.element.css("background-color", this.getValue());
this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
}
},
}
]
],
}, RGB[0], {
el: BI.extend(Ws[0], {
ref: function (_ref) {
self.R = _ref;
}
el: extend(Ws[0], {
ref: _ref => {
this.R = _ref;
},
}),
width: c.RGB_WIDTH
width: RGB_WIDTH,
}, RGB[1], {
el: BI.extend(Ws[1], {
ref: function (_ref) {
self.G = _ref;
}
el: extend(Ws[1], {
ref: _ref => {
this.G = _ref;
},
}),
width: c.RGB_WIDTH
width: RGB_WIDTH,
}, RGB[2], {
el: BI.extend(Ws[2], {
ref: function (_ref) {
self.B = _ref;
}
el: extend(Ws[2], {
ref: _ref => {
this.B = _ref;
},
}),
rgap: -5,
width: c.RGB_WIDTH
}
]
width: RGB_WIDTH,
}
],
},
}
]
],
};
},
}
_hexChecker: function (v) {
_hexChecker (v) {
return /^[0-9a-fA-F]{6}$/.test(v);
},
}
_checkEditors: function () {
if (BI.isEmptyString(this.R.getValue())) {
_checkEditors () {
if (isEmptyString(this.R.getValue())) {
this.R.setValue(0);
}
if (BI.isEmptyString(this.G.getValue())) {
if (isEmptyString(this.G.getValue())) {
this.G.setValue(0);
}
if (BI.isEmptyString(this.B.getValue())) {
if (isEmptyString(this.B.getValue())) {
this.B.setValue(0);
}
this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION));
},
this.hexEditor.setValue(this.getValue().slice(HEX_PREFIX_POSITION));
}
_checkHexEditor: function () {
if (BI.isEmptyString(this.hexEditor.getValue())) {
_checkHexEditor () {
if (isEmptyString(this.hexEditor.getValue())) {
this.hexEditor.setValue("000000");
}
var json = BI.DOM.rgb2json(BI.DOM.hex2rgb("#" + this.hexEditor.getValue()));
const json = DOM.rgb2json(DOM.hex2rgb(`#${this.hexEditor.getValue()}`));
this.storeValue = {
r: json.r || 0,
g: json.g || 0,
@ -162,24 +162,22 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
this.R.setValue(this.storeValue.r);
this.G.setValue(this.storeValue.g);
this.B.setValue(this.storeValue.b);
},
}
setValue: function (color) {
setValue (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);
this.hexEditor.setValue(BI.isEmptyObject(json) ? "" : color.slice(this.constants.HEX_PREFIX_POSITION));
},
const json = DOM.rgb2json(DOM.hex2rgb(color));
this.R.setValue(isNull(json.r) ? "" : json.r);
this.G.setValue(isNull(json.g) ? "" : json.g);
this.B.setValue(isNull(json.b) ? "" : json.b);
this.hexEditor.setValue(isEmptyObject(json) ? "" : color.slice(HEX_PREFIX_POSITION));
}
getValue: function () {
return BI.DOM.rgb2hex(BI.DOM.json2rgb({
getValue () {
return DOM.rgb2hex(DOM.json2rgb({
r: this.R.getValue(),
g: this.G.getValue(),
b: this.B.getValue()
b: this.B.getValue(),
}));
}
});
BI.SimpleHexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.simple_hex_color_picker_editor", BI.SimpleHexColorPickerEditor);
}

166
src/case/colorchooser/colorpicker/editor.colorpicker.js

@ -1,60 +1,62 @@
import { shortcut, Widget, extend, createWidgets, createItems, createWidget, each, isEmptyString, isNumeric, isNull, DOM } from "@/core";
import { IconButton } from "@/base";
const RGB_WIDTH = 32;
/**
* 简单选色控件
*
* Created by GUY on 2015/11/16.
* @class BI.ColorPickerEditor
* @extends BI.Widget
* @class ColorPickerEditor
* @extends Widget
*/
BI.ColorPickerEditor = BI.inherit(BI.Widget, {
@shortcut()
export class ColorPickerEditor extends Widget {
static xtype = "bi.color_picker_editor";
constants: {
RGB_WIDTH: 32
},
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig: function () {
return BI.extend(BI.ColorPickerEditor.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig () {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-color-picker-editor",
// width: 200,
height: 30
height: 30,
});
},
}
_init: function () {
BI.ColorPickerEditor.superclass._init.apply(this, arguments);
var self = this, o = this.options, c = this.constants;
_init () {
super._init(...arguments);
this.storeValue = {};
this.colorShow = BI.createWidget({
this.colorShow = createWidget({
type: "bi.layout",
cls: "color-picker-editor-display bi-card bi-border",
height: 16,
width: 16
width: 16,
});
var RGB = BI.createWidgets(BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
const RGB = createWidgets(createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
type: "bi.label",
cls: "color-picker-editor-label",
width: 20,
height: 20
height: 20,
}));
var checker = function (v) {
return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
};
var Ws = BI.createWidgets([{}, {}, {}], {
const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
const Ws = createWidgets([{}, {}, {}], {
type: "bi.small_text_editor",
cls: "color-picker-editor-input bi-border-radius",
validationChecker: checker,
errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true,
value: 255,
width: c.RGB_WIDTH,
height: 20
width: RGB_WIDTH,
height: 20,
});
BI.each(Ws, function (i, w) {
w.on(BI.TextEditor.EVENT_CHANGE, function () {
self._checkEditors();
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);
each(Ws, (i, w) => {
w.on(BI.TextEditor.EVENT_CHANGE, () => {
this._checkEditors();
if (checker(this.storeValue.r) && checker(this.storeValue.g) && checker(this.storeValue.b)) {
this.colorShow.element.css("background-color", this.getValue());
this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
}
});
});
@ -62,37 +64,37 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.G = Ws[1];
this.B = Ws[2];
this.none = BI.createWidget({
this.none = createWidget({
type: "bi.icon_button",
cls: "auto-color-icon",
width: 16,
height: 16,
iconWidth: 16,
iconHeight: 16,
title: BI.i18nText("BI-Basic_Auto")
title: BI.i18nText("BI-Basic_Auto"),
});
this.none.on(BI.IconButton.EVENT_CHANGE, function () {
var value = self.getValue();
self.setValue("");
(value !== "") && self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
this.none.on(IconButton.EVENT_CHANGE, () => {
const value = this.getValue();
this.setValue("");
(value !== "") && this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
});
this.transparent = BI.createWidget({
this.transparent = createWidget({
type: "bi.icon_button",
cls: "trans-color-icon",
width: 16,
height: 16,
iconWidth: 16,
iconHeight: 16,
title: BI.i18nText("BI-Transparent_Color")
title: BI.i18nText("BI-Transparent_Color"),
});
this.transparent.on(BI.IconButton.EVENT_CHANGE, function () {
var value = self.getValue();
self.setValue("transparent");
(value !== "transparent") && self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
this.transparent.on(IconButton.EVENT_CHANGE, () => {
const value = this.getValue();
this.setValue("transparent");
(value !== "transparent") && this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
});
BI.createWidget({
createWidget({
type: "bi.absolute",
element: this,
items: [
@ -102,67 +104,67 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
items: [
{
el: this.colorShow,
width: 16
width: 16,
}, {
el: RGB[0],
width: 20
width: 20,
}, {
el: this.R,
width: c.RGB_WIDTH
width: RGB_WIDTH,
}, {
el: RGB[1],
width: 20
width: 20,
}, {
el: this.G,
width: c.RGB_WIDTH
width: RGB_WIDTH,
}, {
el: RGB[2],
width: 20
width: 20,
}, {
el: this.B,
width: c.RGB_WIDTH
width: RGB_WIDTH,
}, {
el: this.transparent,
width: 16,
lgap: 5
lgap: 5,
}, {
el: this.none,
width: 16,
lgap: 5
lgap: 5,
}
]
],
},
left: 10,
right: 10,
top: 0,
bottom: 0
bottom: 0,
}
]
],
});
},
}
_checkEditors: function () {
if (BI.isEmptyString(this.R.getValue())) {
_checkEditors () {
if (isEmptyString(this.R.getValue())) {
this.R.setValue(0);
}
if (BI.isEmptyString(this.G.getValue())) {
if (isEmptyString(this.G.getValue())) {
this.G.setValue(0);
}
if (BI.isEmptyString(this.B.getValue())) {
if (isEmptyString(this.B.getValue())) {
this.B.setValue(0);
}
this.storeValue = {
r: this.R.getValue() || 0,
g: this.G.getValue() || 0,
b: this.B.getValue() || 0
b: this.B.getValue() || 0,
};
},
}
_isEmptyRGB: function () {
return BI.isEmptyString(this.storeValue.r) && BI.isEmptyString(this.storeValue.g) && BI.isEmptyString(this.storeValue.b);
},
_isEmptyRGB () {
return isEmptyString(this.storeValue.r) && isEmptyString(this.storeValue.g) && isEmptyString(this.storeValue.b);
}
_showPreColor: function (color) {
_showPreColor (color) {
if (color === "") {
this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-normal-background");
} else if (color === "transparent") {
@ -170,18 +172,18 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
} else {
this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-normal-background").removeClass("trans-color-background");
}
},
}
_setEnable: function (enable) {
BI.ColorPickerEditor.superclass._setEnable.apply(this, arguments);
_setEnable (enable) {
super._setEnable(...arguments);
if (enable === true) {
this.element.removeClass("base-disabled disabled");
} else if (enable === false) {
this.element.addClass("base-disabled disabled");
}
},
}
setValue: function (color) {
setValue (color) {
if (color === "transparent") {
this.transparent.setSelected(true);
this.none.setSelected(false);
@ -192,8 +194,9 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
this.storeValue = {
r: "",
g: "",
b: ""
b: "",
};
return;
}
if (!color) {
@ -204,27 +207,26 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
}
this.transparent.setSelected(false);
this._showPreColor(color);
var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
const json = DOM.rgb2json(DOM.hex2rgb(color));
this.storeValue = {
r: BI.isNull(json.r) ? "" : json.r,
g: BI.isNull(json.g) ? "" : json.g,
b: BI.isNull(json.b) ? "" : json.b
r: isNull(json.r) ? "" : json.r,
g: isNull(json.g) ? "" : json.g,
b: isNull(json.b) ? "" : json.b,
};
this.R.setValue(this.storeValue.r);
this.G.setValue(this.storeValue.g);
this.B.setValue(this.storeValue.b);
},
}
getValue: function () {
getValue() {
if (this._isEmptyRGB() && this.transparent.isSelected()) {
return "transparent";
}
return BI.DOM.rgb2hex(BI.DOM.json2rgb({
return DOM.rgb2hex(DOM.json2rgb({
r: this.storeValue.r,
g: this.storeValue.g,
b: this.storeValue.b
b: this.storeValue.b,
}));
}
});
BI.ColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.color_picker_editor", BI.ColorPickerEditor);
}

111
src/case/colorchooser/colorpicker/editor.colorpicker.simple.js

@ -1,59 +1,60 @@
import { shortcut, Widget, extend, isNull, createWidget, isNumeric, createItems, createWidgets, each, isEmptyString, DOM } from "@/core";
const RGB_WIDTH = 32;
/**
* 简单选色控件
*
* Created by GUY on 2015/11/16.
* @class BI.SimpleColorPickerEditor
* @extends BI.Widget
* @class SimpleColorPickerEditor
* @extends Widget
*/
BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
@shortcut()
export class SimpleColorPickerEditor extends Widget {
static xtype = "bi.simple_color_picker_editor";
constants: {
RGB_WIDTH: 32
},
static EVENT_CHANGE = "EVENT_CHANGE";
_defaultConfig: function () {
return BI.extend(BI.SimpleColorPickerEditor.superclass._defaultConfig.apply(this, arguments), {
_defaultConfig() {
return extend(super._defaultConfig(...arguments), {
baseCls: "bi-color-picker-editor",
// width: 200,
height: 30
height: 30,
});
},
}
_init: function () {
BI.SimpleColorPickerEditor.superclass._init.apply(this, arguments);
var self = this, o = this.options, c = this.constants;
this.colorShow = BI.createWidget({
_init() {
super._init(...arguments);
this.colorShow = createWidget({
type: "bi.layout",
cls: "color-picker-editor-display bi-card bi-border",
height: 16,
width: 16
width: 16,
});
var RGB = BI.createWidgets(BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
const RGB = createWidgets(createItems([{ text: "R" }, { text: "G" }, { text: "B" }], {
type: "bi.label",
cls: "color-picker-editor-label",
width: 20,
height: 20
height: 20,
}));
var checker = function (v) {
return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
};
var Ws = BI.createWidgets([{}, {}, {}], {
const checker = v => isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
const Ws = createWidgets([{}, {}, {}], {
type: "bi.small_text_editor",
cls: "color-picker-editor-input bi-border-radius",
validationChecker: checker,
errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true,
value: 255,
width: c.RGB_WIDTH,
height: 20
width: RGB_WIDTH,
height: 20,
});
BI.each(Ws, function (i, w) {
w.on(BI.TextEditor.EVENT_CHANGE, function () {
self._checkEditors();
if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE);
each(Ws, (i, w) => {
w.on(BI.TextEditor.EVENT_CHANGE, () => {
this._checkEditors();
if (this.R.isValid() && this.G.isValid() && this.B.isValid()) {
this.colorShow.element.css("background-color", this.getValue());
this.fireEvent(SimpleColorPickerEditor.EVENT_CHANGE);
}
});
});
@ -61,7 +62,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
this.G = Ws[1];
this.B = Ws[2];
BI.createWidget({
createWidget({
type: "bi.vertical_adapt",
element: this,
items: [
@ -69,57 +70,55 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
el: this.colorShow,
width: 16,
lgap: 20,
rgap: 15
rgap: 15,
}, {
el: RGB[0],
width: 20
width: 20,
}, {
el: this.R,
width: c.RGB_WIDTH
width: RGB_WIDTH,
}, {
el: RGB[1],
width: 20
width: 20,
}, {
el: this.G,
width: c.RGB_WIDTH
width: RGB_WIDTH,
}, {
el: RGB[2],
width: 20
width: 20,
}, {
el: this.B,
width: c.RGB_WIDTH
width: RGB_WIDTH,
}
]
],
});
},
}
_checkEditors: function () {
if (BI.isEmptyString(this.R.getValue())) {
_checkEditors() {
if (isEmptyString(this.R.getValue())) {
this.R.setValue(0);
}
if (BI.isEmptyString(this.G.getValue())) {
if (isEmptyString(this.G.getValue())) {
this.G.setValue(0);
}
if (BI.isEmptyString(this.B.getValue())) {
if (isEmptyString(this.B.getValue())) {
this.B.setValue(0);
}
},
}
setValue: function (color) {
setValue(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);
},
const json = DOM.rgb2json(DOM.hex2rgb(color));
this.R.setValue(isNull(json.r) ? "" : json.r);
this.G.setValue(isNull(json.g) ? "" : json.g);
this.B.setValue(isNull(json.b) ? "" : json.b);
}
getValue: function () {
return BI.DOM.rgb2hex(BI.DOM.json2rgb({
getValue() {
return DOM.rgb2hex(DOM.json2rgb({
r: this.R.getValue(),
g: this.G.getValue(),
b: this.B.getValue()
b: this.B.getValue(),
}));
}
});
BI.SimpleColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor);
}

7
src/case/colorchooser/colorpicker/index.js

@ -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";

198
src/case/colorchooser/farbtastic/farbtastic.js

@ -1,98 +1,101 @@
BI.Farbtastic = BI.inherit(BI.BasicButton, {
import { shortcut, isKey, DOM } from "@/core";
import { BasicButton } from "@/base";
constants: {
RADIUS: 84,
SQUARE: 100,
WIDTH: 194
},
const RADIUS = 84, SQUARE = 100, WIDTH = 194;
@shortcut()
export class Farbtastic extends BasicButton {
static xtype = "bi.farbtastic";
props: {
static EVENT_CHANGE = "EVENT_CHANGE";
props = {
baseCls: "bi-farbtastic",
width: 195,
height: 195,
stopPropagation: true,
value: "#000000"
},
value: "#000000",
}
render: function () {
var self = this;
render() {
this._defaultState();
return {
type: "bi.absolute",
items: [{
el: {
type: "bi.layout",
cls: "",
ref: function (_ref) {
self.colorWrapper = _ref;
}
ref: _ref => {
this.colorWrapper = _ref;
},
},
top: 47,
left: 47,
width: 101,
height: 101
height: 101,
}, {
el: {
type: "bi.layout",
cls: "wheel",
ref: function (_ref) {
self.wheel = _ref;
}
ref: _ref => {
this.wheel = _ref;
},
},
left: 0,
right: 0,
top: 0,
bottom: 0
bottom: 0,
}, {
el: {
type: "bi.layout",
cls: "overlay",
ref: function (_ref) {
self.overlay = _ref;
}
ref: _ref => {
this.overlay = _ref;
},
},
top: 47,
left: 47,
width: 101,
height: 101
height: 101,
}, {
el: {
type: "bi.layout",
cls: "marker",
ref: function (_ref) {
self.hMarker = _ref;
ref: _ref => {
this.hMarker = _ref;
},
scrollable: false,
width: 17,
height: 17
}
height: 17,
},
}, {
el: {
type: "bi.layout",
cls: "marker",
ref: function (_ref) {
self.slMarker = _ref;
ref: _ref => {
this.slMarker = _ref;
},
scrollable: false,
width: 17,
height: 17
}
}]
};
height: 17,
},
}],
};
}
created: function () {
var o = this.options;
if (BI.isKey(o.value)) {
created() {
const o = this.options;
if (isKey(o.value)) {
this.setValue(o.value);
}
},
}
_defaultState: function () {
_defaultState() {
this.hsl = [0, 0, 0];
},
}
_unpack: function (color) {
_unpack(color) {
if (color.length === 7) {
return [parseInt("0x" + color.substring(1, 3)) / 255,
parseInt("0x" + color.substring(3, 5)) / 255,
@ -102,81 +105,84 @@ BI.Farbtastic = BI.inherit(BI.BasicButton, {
parseInt("0x" + color.substring(2, 3)) / 15,
parseInt("0x" + color.substring(3, 4)) / 15];
}
},
}
_pack(rgb) {
const r = Math.round(rgb[0] * 255);
const g = Math.round(rgb[1] * 255);
const b = Math.round(rgb[2] * 255);
_pack: function (rgb) {
var r = Math.round(rgb[0] * 255);
var g = Math.round(rgb[1] * 255);
var b = Math.round(rgb[2] * 255);
return "#" + (r < 16 ? "0" : "") + r.toString(16) +
(g < 16 ? "0" : "") + g.toString(16) +
(b < 16 ? "0" : "") + b.toString(16);
},
}
_setColor: function (color) {
var unpack = this._unpack(color);
_setColor(color) {
const unpack = this._unpack(color);
if (this.value !== color && unpack) {
this.value = color;
this.rgb = unpack;
this.hsl = this._RGBToHSL(this.rgb);
this._updateDisplay();
}
},
}
_setHSL: function (hsl) {
_setHSL(hsl) {
this.hsl = hsl;
this.rgb = this._HSLToRGB(hsl);
this.value = this._pack(this.rgb);
this._updateDisplay();
return this;
},
}
_HSLToRGB: function (hsl) {
return BI.DOM.hsl2rgb(hsl);
},
_HSLToRGB(hsl) {
return DOM.hsl2rgb(hsl);
}
_RGBToHSL: function (rgb) {
return BI.DOM.rgb2hsl(rgb);
},
_RGBToHSL(rgb) {
return DOM.rgb2hsl(rgb);
}
_updateDisplay: function () {
var angle = this.hsl[0] * 6.28;
_updateDisplay() {
const angle = this.hsl[0] * 6.28;
this.hMarker.element.css({
left: Math.round(Math.sin(angle) * this.constants.RADIUS + this.constants.WIDTH / 2) + "px",
top: Math.round(-Math.cos(angle) * this.constants.RADIUS + this.constants.WIDTH / 2) + "px"
left: `${Math.round(Math.sin(angle) * RADIUS + WIDTH / 2)}px`,
top: `${Math.round(-Math.cos(angle) * RADIUS + WIDTH / 2)}px`,
});
this.slMarker.element.css({
left: Math.round(this.constants.SQUARE * (.5 - this.hsl[1]) + this.constants.WIDTH / 2) + "px",
top: Math.round(this.constants.SQUARE * (.5 - this.hsl[2]) + this.constants.WIDTH / 2) + "px"
left: `${Math.round(SQUARE * (.5 - this.hsl[1]) + WIDTH / 2)}px`,
top: `${Math.round(SQUARE * (.5 - this.hsl[2]) + WIDTH / 2)}px`,
});
// Saturation/Luminance gradient
this.colorWrapper.element.css("backgroundColor", this._pack(this._HSLToRGB([this.hsl[0], 1, 0.5])));
},
}
_absolutePosition: function (el) {
var r = {x: el.offsetLeft, y: el.offsetTop};
_absolutePosition(el) {
const r = { x: el.offsetLeft, y: el.offsetTop };
// Resolve relative to offsetParent
if (el.offsetParent) {
var tmp = this._absolutePosition(el.offsetParent);
const tmp = this._absolutePosition(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
},
}
_widgetCoords: function (event) {
var x, y;
var el = event.target || event.srcElement;
var reference = this.wheel.element[0];
_widgetCoords(event) {
let x, y;
const el = event.target || event.srcElement;
const reference = this.wheel.element[0];
if (typeof event.offsetX !== "undefined") {
// Use offset coordinates and find common offsetParent
var pos = {x: event.offsetX, y: event.offsetY};
const pos = { x: event.offsetX, y: event.offsetY };
// Send the coordinates upwards through the offsetParent chain.
var e = el;
let e = el;
while (e) {
e.mouseX = pos.x;
e.mouseY = pos.y;
@ -186,8 +192,8 @@ BI.Farbtastic = BI.inherit(BI.BasicButton, {
}
// Look for the coordinates starting from the wheel widget.
var e = reference;
var offset = {x: 0, y: 0};
e = reference;
const offset = { x: 0, y: 0 };
while (e) {
if (typeof e.mouseX !== "undefined") {
x = e.mouseX - offset.x;
@ -208,46 +214,46 @@ BI.Farbtastic = BI.inherit(BI.BasicButton, {
}
} else {
// Use absolute coordinates
var pos = this._absolutePosition(reference);
const pos = this._absolutePosition(reference);
x = (event.pageX || 0) - pos.x;
y = (event.pageY || 0) - pos.y;
}
// Subtract distance to middle
return {x: x - this.constants.WIDTH / 2, y: y - this.constants.WIDTH / 2};
},
return { x: x - WIDTH / 2, y: y - WIDTH / 2 };
}
_doMouseMove: function (event) {
var pos = this._widgetCoords(event);
_doMouseMove(event) {
const pos = this._widgetCoords(event);
// Set new HSL parameters
if (this.circleDrag) {
var hue = Math.atan2(pos.x, -pos.y) / 6.28;
let hue = Math.atan2(pos.x, -pos.y) / 6.28;
if (hue < 0) hue += 1;
this._setHSL([hue, this.hsl[1], this.hsl[2]]);
} else {
var sat = Math.max(0, Math.min(1, -(pos.x / this.constants.SQUARE) + .5));
var lum = Math.max(0, Math.min(1, -(pos.y / this.constants.SQUARE) + .5));
const sat = Math.max(0, Math.min(1, -(pos.x / SQUARE) + .5));
const lum = Math.max(0, Math.min(1, -(pos.y / SQUARE) + .5));
this._setHSL([this.hsl[0], sat, lum]);
}
this.fireEvent(BI.Farbtastic.EVENT_CHANGE, this.getValue(), this);
},
this.fireEvent(Farbtastic.EVENT_CHANGE, this.getValue(), this);
}
doClick: function (event) {
var pos = this._widgetCoords(event);
this.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > this.constants.SQUARE;
doClick(event) {
const pos = this._widgetCoords(event);
this.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > SQUARE;
// Process
this._doMouseMove(event);
return false;
},
}
setValue: function (color) {
setValue(color) {
this._setColor(color);
},
}
getValue: function () {
getValue() {
return this.value;
}
});
BI.Farbtastic.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.farbtastic", BI.Farbtastic);
}

11
src/case/colorchooser/index.js

@ -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";

3
src/case/index.js

@ -10,6 +10,7 @@ import * as segment from "./segment";
import { MultiSelectBar } from "./toolbar/toolbar.multiselect";
import * as layer from "./layer";
import * as linearSegment from "./linearsegment";
import * as colorchooser from "./colorchooser";
import { SelectList } from "./list/list.select";
import * as combo from "./combo";
@ -27,6 +28,7 @@ Object.assign(BI, {
MultiSelectBar,
...layer,
...linearSegment,
...colorchooser,
SelectList,
});
@ -44,6 +46,7 @@ export * from "./segment";
export * from "./layer";
export * from "./linearsegment";
export * from "./checkbox";
export * from "./colorchooser";
export {
MultiSelectBar,
SelectList

2
src/core/structure/queue.js

@ -75,7 +75,7 @@ export class Queue {
}
fromArray(array) {
array.each(v => this.push(v));
array.forEach(v => this.push(v));
}
clear() {

Loading…
Cancel
Save