fanruan
/
fineui
4
1
Fork 2
Code Issues 1 Pull Requests Releases Wiki Activity
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
66c4aa840c bac7293909
commit
82c51dcd3e
23 changed files with 1260 additions and 1149 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 69
      src/case/colorchooser/colorchooser.custom.js
  2. 146
      src/case/colorchooser/colorchooser.js
  3. 271
      src/case/colorchooser/colorchooser.popup.hex.js
  4. 61
      src/case/colorchooser/colorchooser.popup.hex.simple.js
  5. 209
      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. 165
      src/case/colorchooser/colorpicker/colorpicker.hex.js
  14. 195
      src/case/colorchooser/colorpicker/colorpicker.js
  15. 242
      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. 202
      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
Unescape View File

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

146
src/case/colorchooser/colorchooser.js
Unescape View File

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

271
src/case/colorchooser/colorchooser.popup.hex.js
Unescape View File

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

61
src/case/colorchooser/colorchooser.popup.hex.simple.js
Unescape View File

@ -1,50 +1,57 @@
import { shortcut, Widget } from "@/core";
import { ColorChooserPopup } from "./colorchooser.popup";
import { SimpleColorChooserPopup } from "./colorchooser.popup.simple";
/** /**
* @author windy * @author windy
* @version 2.0 * @version 2.0
* Created by windy on 2020/11/10 * 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", baseCls: "bi-color-chooser-popup",
}, }
render() {
const o = this.options;
render: function () {
var self = this, o = this.options;
return { return {
type: "bi.hex_color_chooser_popup", type: "bi.hex_color_chooser_popup",
recommendColorsGetter: o.recommendColorsGetter, recommendColorsGetter: o.recommendColorsGetter,
value: o.value, value: o.value,
simple: true, // 是否有自动 simple: true, // 是否有自动
listeners: [{ listeners: [{
eventName: BI.ColorChooserPopup.EVENT_CHANGE, eventName: ColorChooserPopup.EVENT_CHANGE,
action: function () { action: (...args) => {
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_CHANGE, arguments); this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args);
} },
}, { }, {
eventName: BI.ColorChooserPopup.EVENT_VALUE_CHANGE, eventName: ColorChooserPopup.EVENT_VALUE_CHANGE,
action: function () { action: (...args) => {
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE, arguments); this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args);
} },
}], }],
ref: function (_ref) { ref: _ref => {
self.popup = _ref; this.popup = _ref;
} },
} };
}, }
setStoreColors: function (colors) { setStoreColors(colors) {
this.popup.setStoreColors(colors); this.popup.setStoreColors(colors);
}, }
setValue: function (color) { setValue(color) {
this.popup.setValue(color); this.popup.setValue(color);
}, }
getValue: function () { getValue() {
return this.popup.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);

209
src/case/colorchooser/colorchooser.popup.js
Unescape View File

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

@ -1,47 +1,52 @@
import { shortcut, Widget, extend, createWidget } from "@/core";
import { ColorChooserPopup } from "./colorchooser.popup";
/** /**
* 选色控件 * 选色控件
* *
* Created by GUY on 2015/11/17. * Created by GUY on 2015/11/17.
* @class BI.SimpleColorChooserPopup * @class SimpleColorChooserPopup
* @extends BI.Widget * @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 () { _defaultConfig() {
return BI.extend(BI.SimpleColorChooserPopup.superclass._defaultConfig.apply(this, arguments), { return extend(super._defaultConfig(...arguments), {
baseCls: "bi-color-chooser-popup" baseCls: "bi-color-chooser-popup",
}); });
}, }
_init: function () { _init() {
BI.SimpleColorChooserPopup.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const { hex, value } = this.options;
this.popup = BI.createWidget({ this.popup = createWidget({
type: o.hex ? "bi.hex_color_chooser_popup" : "bi.color_chooser_popup", type: hex ? "bi.hex_color_chooser_popup" : "bi.color_chooser_popup",
value: o.value, value,
element: this, element: this,
simple: true // 是否有自动 simple: true, // 是否有自动
}); });
this.popup.on(BI.ColorChooserPopup.EVENT_CHANGE, function () { this.popup.on(ColorChooserPopup.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_CHANGE, arguments); this.fireEvent(SimpleColorChooserPopup.EVENT_CHANGE, ...args);
}); });
this.popup.on(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, function () { this.popup.on(ColorChooserPopup.EVENT_VALUE_CHANGE, (...args) => {
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE, arguments); this.fireEvent(SimpleColorChooserPopup.EVENT_VALUE_CHANGE, ...args);
}); });
}, }
setStoreColors: function (colors) { setStoreColors(colors) {
this.popup.setStoreColors(colors); this.popup.setStoreColors(colors);
}, }
setValue: function (color) { setValue(color) {
this.popup.setValue(color); this.popup.setValue(color);
}, }
getValue: function () { getValue() {
return this.popup.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
Unescape View File

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

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

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

@ -1,66 +1,72 @@
import { shortcut, isNotNull, extend } from "@/core";
import { BasicButton, Maskers } from "@/base";
/** /**
* 简单选色控件按钮 * 简单选色控件按钮
* *
* Created by GUY on 2015/11/16. * Created by GUY on 2015/11/16.
* @class BI.ColorPickerButton * @class ColorPickerButton
* @extends BI.BasicButton * @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 () { _defaultConfig() {
var conf = BI.ColorPickerButton.superclass._defaultConfig.apply(this, arguments); const conf = super._defaultConfig(...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 () { _init() {
BI.ColorPickerButton.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const o = this.options;
if (BI.isNotNull(o.value)) { if (isNotNull(o.value)) {
if (o.value === '') { if (o.value === "") {
this.element.addClass("auto-color-no-square-normal-background"); this.element.addClass("auto-color-no-square-normal-background");
} else if (o.value === "transparent") { } else if (o.value === "transparent") {
this.element.addClass("trans-color-background"); this.element.addClass("trans-color-background");
} else { } else {
this.element.css("background-color", o.value); this.element.css("background-color", o.value);
} }
var name = this.getName(); const name = this.getName();
this.element.hover(function () { this.element.hover(() => {
self._createMask(); this._createMask();
if (self.isEnabled()) { if (this.isEnabled()) {
BI.Maskers.show(name); Maskers.show(name);
} }
}, function () { }, () => {
if (!self.isSelected()) { if (!this.isSelected()) {
BI.Maskers.hide(name); Maskers.hide(name);
} }
}); });
} }
}, }
_createMask: function () { _createMask() {
var o = this.options, name = this.getName(); const o = this.options, name = this.getName();
if (this.isEnabled() && !BI.Maskers.has(name)) { if (this.isEnabled() && !Maskers.has(name)) {
var w = BI.Maskers.make(name, this, { const w = Maskers.make(name, this, {
offset: { offset: {
left: -1, left: -1,
top: -1, top: -1,
right: -1, right: -1,
bottom: -1 bottom: -1,
} },
}); });
w.element.addClass("color-picker-button-mask").css("background-color", o.value); w.element.addClass("color-picker-button-mask").css("background-color", o.value);
} }
}, }
setSelected: function (b) { setSelected(b) {
BI.ColorPickerButton.superclass.setSelected.apply(this, arguments); super.setSelected(...arguments);
if (b) { if (b) {
this._createMask(); 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
Unescape View File

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

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

165
src/case/colorchooser/colorpicker/colorpicker.hex.js
Unescape View File

@ -1,166 +1,173 @@
import { shortcut, Widget, extend, each } from "@/core";
import { ButtonGroup } from "@/base";
/** /**
* @author windy * @author windy
* @version 2.0 * @version 2.0
* Created by windy on 2021/7/28 * 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", baseCls: "bi-hex-color-picker",
items: null, 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() {
const o = this.options;
render: function () {
var self = this, o = this.options;
return { return {
type: "bi.button_group", type: "bi.button_group",
items: this._digest(o.items || this._items), items: this._digest(o.items || this._items),
@ -172,52 +179,50 @@ BI.HexColorPicker = BI.inherit(BI.Widget, {
value: o.value, value: o.value,
listeners: [ listeners: [
{ {
eventName: BI.ButtonGroup.EVENT_CHANGE, eventName: ButtonGroup.EVENT_CHANGE,
action: function () { action: (...args) => {
self.fireEvent(BI.HexColorPicker.EVENT_CHANGE, arguments); this.fireEvent(HexColorPicker.EVENT_CHANGE, ...args);
} },
} }
], ],
ref: function (_ref) { ref: _ref => {
self.colors = _ref; this.colors = _ref;
} },
}; };
}, }
_digest: function (items) { _digest(items) {
var o = this.options; const o = this.options;
var blocks = []; const blocks = [];
BI.each(items, function (idx, row) { each(items, (idx, row) => {
var bRow = []; const bRow = [];
BI.each(row, function (idx, item) { each(row, (idx, item) => {
bRow.push(BI.extend({ bRow.push(extend({
type: "bi.color_picker_button", type: "bi.color_picker_button",
once: false, once: false,
cls: o.space ? 'bi-border-right' : '', cls: o.space ? "bi-border-right" : "",
}, item)); }, item));
if (o.space && idx < row.length - 1) { if (o.space && idx < row.length - 1) {
bRow.push({ type: 'bi.layout' }); bRow.push({ type: "bi.layout" });
} }
}); });
blocks.push(bRow); blocks.push(bRow);
}); });
return blocks; return blocks;
}, }
populate: function (items) { populate(items) {
var args = [].slice.call(arguments); const args = [].slice.call(arguments);
args[0] = this._digest(items); args[0] = this._digest(items);
this.colors.populate.apply(this.colors, args); this.colors.populate.apply(this.colors, args);
}, }
setValue: function (color) { setValue(color) {
this.colors.setValue(color); this.colors.setValue(color);
}, }
getValue: function () { getValue() {
return this.colors.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
Unescape View File

@ -1,190 +1,195 @@
import { shortcut, Widget, extend, createItems, createWidget } from "@/core";
import { ButtonGroup } from "@/base";
/** /**
* 简单选色控件 * 简单选色控件
* *
* Created by GUY on 2015/11/16. * Created by GUY on 2015/11/16.
* @class BI.ColorPicker * @class ColorPicker
* @extends BI.Widget * @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 () { _defaultConfig() {
return BI.extend(BI.ColorPicker.superclass._defaultConfig.apply(this, arguments), { return extend(super._defaultConfig(...arguments), {
baseCls: "bi-color-picker", 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 () { _init() {
BI.ColorPicker.superclass._init.apply(this, arguments); super._init(...arguments);
var self = this, o = this.options; const o = this.options;
this.colors = BI.createWidget({ this.colors = createWidget({
type: "bi.button_group", type: "bi.button_group",
element: this, element: this,
items: BI.createItems(o.items || this._items, { items: createItems(o.items || this._items, {
type: "bi.color_picker_button", type: "bi.color_picker_button",
once: false once: false,
}), }),
layouts: [{ layouts: [{
type: "bi.grid" type: "bi.grid",
}], }],
value: o.value value: o.value,
}); });
this.colors.on(BI.ButtonGroup.EVENT_CHANGE, function () { this.colors.on(ButtonGroup.EVENT_CHANGE, (...args) => {
self.fireEvent(BI.ColorPicker.EVENT_CHANGE, arguments); this.fireEvent(ColorPicker.EVENT_CHANGE, ...args);
}); });
}, }
populate: function (items) { populate(items) {
var args = [].slice.call(arguments); const args = [].slice.call(arguments);
args[0] = BI.createItems(items, { args[0] = createItems(items, {
type: "bi.color_picker_button", type: "bi.color_picker_button",
once: false once: false,
}); });
this.colors.populate.apply(this.colors, args); this.colors.populate.apply(this.colors, args);
}, }
setValue: function (color) { setValue(color) {
this.colors.setValue(color); this.colors.setValue(color);
}, }
getValue: function () { getValue() {
return this.colors.getValue(); return this.colors.getValue();
} }
}); }
BI.ColorPicker.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.color_picker", BI.ColorPicker);

242
src/case/colorchooser/colorpicker/editor.colorpicker.hex.js
Unescape View File

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

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

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

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

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

202
src/case/colorchooser/farbtastic/farbtastic.js
Unescape View File

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

11
src/case/colorchooser/index.js
Unescape View File

@ -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
Unescape View File

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

2
src/core/structure/queue.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save