forked from fanruan/fineui
zsmj1994
4 years ago
62 changed files with 7626 additions and 3732 deletions
@ -0,0 +1,29 @@
|
||||
if (this.importScripts) { |
||||
importScripts("./dist/fineui_without_jquery_polyfill.js"); |
||||
BI.initWorker(); |
||||
} |
||||
var Model = BI.inherit(Fix.Model, { |
||||
state: function () { |
||||
return { |
||||
count: 0 |
||||
}; |
||||
}, |
||||
|
||||
computed: { |
||||
name: function () { |
||||
return this.getText(this.model.count); |
||||
} |
||||
}, |
||||
|
||||
actions: { |
||||
addCount: function () { |
||||
this.model.count += 1; |
||||
} |
||||
}, |
||||
|
||||
getText (count) { |
||||
return "被点击了" + count + "次"; |
||||
} |
||||
}); |
||||
|
||||
BI.model("demo.model", Model); |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,157 @@
|
||||
;(function () { |
||||
var contexts = {}; |
||||
|
||||
var WORKER; |
||||
BI.useWorker = function (wk) { |
||||
WORKER = wk; |
||||
|
||||
var _init = BI.Widget.prototype._init; |
||||
BI.Widget.prototype._init = function () { |
||||
this.$destroyWorker = createWorker.call(this); |
||||
try { |
||||
_init.apply(this, arguments); |
||||
} catch (e) { |
||||
console.error(e); |
||||
} |
||||
}; |
||||
|
||||
var _initRender = BI.Widget.prototype._initRender; |
||||
var postMessage = function (data) { |
||||
switch (data.eventType) { |
||||
case "create": |
||||
this.model = data.msg; |
||||
_initRender.call(this); |
||||
break; |
||||
case "watch": |
||||
var watchArgs = data.args; |
||||
this.watch[data.currentWatchType].apply(this, watchArgs); |
||||
break; |
||||
} |
||||
}; |
||||
BI.Widget.prototype._initRender = function () { |
||||
if (WORKER && this._worker) { |
||||
this.__asking = true; |
||||
this.__async = true; |
||||
} else { |
||||
_initRender.apply(this, arguments); |
||||
} |
||||
}; |
||||
|
||||
var unMount = BI.Widget.prototype.__d; |
||||
BI.Widget.prototype.__d = function () { |
||||
this.$destroyWorker && this.$destroyWorker(); |
||||
try { |
||||
unMount.apply(this, arguments); |
||||
} catch (e) { |
||||
console.error(e); |
||||
} |
||||
}; |
||||
|
||||
if (WORKER) { |
||||
WORKER.addEventListener("message", function (e) { |
||||
var data = e.data; |
||||
postMessage.apply(contexts[data.name], [data]); |
||||
}, false); |
||||
} |
||||
}; |
||||
|
||||
function createWorker () { |
||||
var self = this; |
||||
if (this._worker) { |
||||
var name = this.getName(); |
||||
var modelType = this._worker(); |
||||
var options; |
||||
if (BI.isArray(modelType)) { |
||||
options = modelType[1]; |
||||
modelType = modelType[0]; |
||||
} |
||||
if (WORKER) { |
||||
contexts[name] = this; |
||||
WORKER.postMessage({ |
||||
type: modelType, |
||||
name: name, |
||||
eventType: "create", |
||||
options: options, |
||||
watches: BI.map(this.watch, function (key) { |
||||
return key; |
||||
}) |
||||
}); |
||||
var store = {}; |
||||
this.store = new Proxy(store, { |
||||
get (target, key) { |
||||
return function () { |
||||
WORKER.postMessage({ |
||||
type: modelType, |
||||
name: name, |
||||
eventType: "action", |
||||
action: key, |
||||
args: [].slice.call(arguments) |
||||
}); |
||||
}; |
||||
}, |
||||
set (target, key, value) { |
||||
return Reflect.set(target, key, value); |
||||
} |
||||
}); |
||||
return function () { |
||||
delete contexts[name]; |
||||
WORKER.postMessage({ |
||||
type: modelType, |
||||
name: name, |
||||
eventType: "destroy" |
||||
}); |
||||
}; |
||||
} else { |
||||
this.store = BI.Models.getModel(modelType, options); |
||||
this.store && (this.store._widget = this); |
||||
if (this.store instanceof Fix.Model) { |
||||
this.model = this.store.model; |
||||
} else { |
||||
this.model = this.store; |
||||
} |
||||
initWatch(this, this.watch); |
||||
return function () { |
||||
this.store && BI.isFunction(this.store.destroy) && this.store.destroy(); |
||||
BI.each(this._watchers, function (i, unwatches) { |
||||
unwatches = BI.isArray(unwatches) ? unwatches : [unwatches]; |
||||
BI.each(unwatches, function (j, unwatch) { |
||||
unwatch(); |
||||
}); |
||||
}); |
||||
this._watchers && (this._watchers = []); |
||||
if (this.store) { |
||||
this.store._parent && (this.store._parent = null); |
||||
this.store._widget && (this.store._widget = null); |
||||
this.store = null; |
||||
} |
||||
}; |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
function initWatch (vm, watch) { |
||||
vm._watchers || (vm._watchers = []); |
||||
for (var key in watch) { |
||||
var handler = watch[key]; |
||||
if (BI.isArray(handler)) { |
||||
for (var i = 0; i < handler.length; i++) { |
||||
vm._watchers.push(createWatcher(vm, key, handler[i])); |
||||
} |
||||
} else { |
||||
vm._watchers.push(createWatcher(vm, key, handler)); |
||||
} |
||||
} |
||||
} |
||||
|
||||
function createWatcher (vm, keyOrFn, cb, options) { |
||||
if (BI.isPlainObject(cb)) { |
||||
options = cb; |
||||
cb = cb.handler; |
||||
} |
||||
options = options || {}; |
||||
return Fix.watch(vm.model, keyOrFn, _.bind(cb, vm), BI.extend(options, { |
||||
store: vm.store |
||||
})); |
||||
} |
||||
}()); |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,248 @@
|
||||
/** |
||||
* @author windy |
||||
* @version 2.0 |
||||
* Created by windy on 2020/11/10 |
||||
*/ |
||||
BI.HexColorChooserPopup = BI.inherit(BI.Widget, { |
||||
|
||||
props: { |
||||
baseCls: "bi-color-chooser-popup", |
||||
width: 292, |
||||
height: 195, |
||||
simple: false // 简单模式, popup中没有自动和透明
|
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
|
||||
return { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.vtape", |
||||
items: [{ |
||||
el: BI.extend({ |
||||
type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor", |
||||
value: o.value, |
||||
height: 30, |
||||
listeners: [{ |
||||
eventName: BI.ColorPickerEditor.EVENT_CHANGE, |
||||
action: function () { |
||||
self.setValue(this.getValue()); |
||||
self._dealStoreColors(); |
||||
self.fireEvent(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, arguments); |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.colorEditor = _ref; |
||||
} |
||||
}, o.editor), |
||||
height: 50 |
||||
}, { |
||||
el: { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.color_picker", |
||||
cls: "bi-border-bottom bi-border-right", |
||||
items: [this._digestStoreColors(this._getStoreColors())], |
||||
height: 34, |
||||
value: o.value, |
||||
listeners: [{ |
||||
eventName: BI.ColorPicker.EVENT_CHANGE, |
||||
action: function () { |
||||
self.setValue(this.getValue()[0]); |
||||
self._dealStoreColors(); |
||||
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.storeColors = _ref; |
||||
} |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 5 |
||||
}] |
||||
}, |
||||
height: 38 |
||||
}, { |
||||
el: { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.color_picker", |
||||
value: o.value, |
||||
listeners: [{ |
||||
eventName: BI.ColorPicker.EVENT_CHANGE, |
||||
action: function () { |
||||
self.setValue(this.getValue()[0]); |
||||
self._dealStoreColors(); |
||||
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.colorPicker = _ref; |
||||
} |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 5, |
||||
bottom: 10 |
||||
}] |
||||
} |
||||
}, { |
||||
el: { |
||||
type: "bi.combo", |
||||
cls: "bi-border-top", |
||||
container: null, |
||||
direction: "right,top", |
||||
isNeedAdjustHeight: false, |
||||
el: { |
||||
type: "bi.text_item", |
||||
cls: "color-chooser-popup-more bi-list-item", |
||||
textAlign: "center", |
||||
height: 24, |
||||
textLgap: 10, |
||||
text: BI.i18nText("BI-Basic_More") + "..." |
||||
}, |
||||
popup: { |
||||
type: "bi.popup_panel", |
||||
buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")], |
||||
title: BI.i18nText("BI-Custom_Color"), |
||||
el: { |
||||
type: "bi.custom_color_chooser", |
||||
editor: o.editor, |
||||
ref: function (_ref) { |
||||
self.customColorChooser = _ref; |
||||
} |
||||
}, |
||||
stopPropagation: false, |
||||
bgap: -1, |
||||
rgap: 1, |
||||
lgap: 1, |
||||
minWidth: 227, |
||||
listeners: [{ |
||||
eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, |
||||
action: function (index) { |
||||
switch (index) { |
||||
case 0: |
||||
self.more.hideView(); |
||||
break; |
||||
case 1: |
||||
self.setValue(self.customColorChooser.getValue()); |
||||
self._dealStoreColors(); |
||||
self.more.hideView(); |
||||
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); |
||||
break; |
||||
} |
||||
} |
||||
}] |
||||
}, |
||||
listeners: [{ |
||||
eventName: BI.Combo.EVENT_AFTER_POPUPVIEW, |
||||
action: function () { |
||||
self.customColorChooser.setValue(self.getValue()); |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.more = _ref; |
||||
} |
||||
}, |
||||
height: 24 |
||||
}] |
||||
}, |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0 |
||||
}, { |
||||
el: { |
||||
type: "bi.layout", |
||||
cls: "disable-mask", |
||||
invisible: !o.disabled, |
||||
ref: function () { |
||||
self.mask = this; |
||||
} |
||||
}, |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0 |
||||
}] |
||||
}; |
||||
}, |
||||
|
||||
mounted: function () { |
||||
var self = this; |
||||
var o = this.options; |
||||
if (BI.isNotNull(o.value)) { |
||||
this.setValue(o.value); |
||||
} |
||||
}, |
||||
|
||||
_setEnable: function (enable) { |
||||
BI.ColorChooserPopup.superclass._setEnable.apply(this, arguments); |
||||
this.mask.setVisible(!enable); |
||||
}, |
||||
|
||||
_dealStoreColors: function () { |
||||
var color = this.getValue(); |
||||
var colors = this._getStoreColors(); |
||||
var que = new BI.Queue(8); |
||||
que.fromArray(colors); |
||||
que.remove(color); |
||||
que.unshift(color); |
||||
var array = que.toArray(); |
||||
BI.Cache.setItem("colors", BI.array2String(array)); |
||||
this.setStoreColors(array); |
||||
}, |
||||
|
||||
_digestStoreColors: function (colors) { |
||||
var items = BI.map(colors, function (i, color) { |
||||
return { |
||||
value: color |
||||
}; |
||||
}); |
||||
BI.count(colors.length, 8, function (i) { |
||||
items.push({ |
||||
value: "", |
||||
disabled: true |
||||
}); |
||||
}); |
||||
return items; |
||||
}, |
||||
|
||||
_getStoreColors: function() { |
||||
var self = this, o = this.options; |
||||
var colorsArray = BI.string2Array(BI.Cache.getItem("colors") || ""); |
||||
return BI.filter(colorsArray, function (idx, color) { |
||||
return o.simple ? self._isRGBColor(color) : true; |
||||
}); |
||||
}, |
||||
|
||||
_isRGBColor: function (color) { |
||||
return BI.isNotEmptyString(color) && color !== "transparent"; |
||||
}, |
||||
|
||||
setStoreColors: function (colors) { |
||||
if (BI.isArray(colors)) { |
||||
this.storeColors.populate([this._digestStoreColors(colors)]); |
||||
// BI-66973 选中颜色的同时选中历史
|
||||
this.storeColors.setValue(this.getValue()); |
||||
} |
||||
}, |
||||
|
||||
setValue: function (color) { |
||||
this.colorEditor.setValue(color); |
||||
this.colorPicker.setValue(color); |
||||
this.storeColors.setValue(color); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
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); |
||||
@ -0,0 +1,49 @@
|
||||
/** |
||||
* @author windy |
||||
* @version 2.0 |
||||
* Created by windy on 2020/11/10 |
||||
*/ |
||||
BI.SimpleHexColorChooserPopup = BI.inherit(BI.Widget, { |
||||
|
||||
props: { |
||||
baseCls: "bi-color-chooser-popup", |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
return { |
||||
type: "bi.hex_color_chooser_popup", |
||||
value: o.value, |
||||
simple: true, // 是否有自动
|
||||
listeners: [{ |
||||
eventName: BI.ColorChooserPopup.EVENT_CHANGE, |
||||
action: function () { |
||||
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_CHANGE, arguments); |
||||
} |
||||
}, { |
||||
eventName: BI.ColorChooserPopup.EVENT_VALUE_CHANGE, |
||||
action: function () { |
||||
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE, arguments); |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.popup = _ref; |
||||
} |
||||
} |
||||
}, |
||||
|
||||
setStoreColors: function (colors) { |
||||
this.popup.setStoreColors(colors); |
||||
}, |
||||
|
||||
setValue: function (color) { |
||||
this.popup.setValue(color); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
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); |
||||
@ -0,0 +1,308 @@
|
||||
/** |
||||
* 简单选色控件 |
||||
* |
||||
* Created by GUY on 2015/11/16. |
||||
* @class BI.ColorPickerEditor |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.HexColorPickerEditor = BI.inherit(BI.Widget, { |
||||
|
||||
constants: { |
||||
RGB_WIDTH: 32, |
||||
HEX_WIDTH: 70, |
||||
HEX_PREFIX_POSITION: 1 |
||||
}, |
||||
|
||||
props: { |
||||
baseCls: "bi-color-picker-editor", |
||||
// width: 200,
|
||||
height: 50 |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options, c = this.constants; |
||||
this.storeValue = {}; |
||||
var RGB = BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { |
||||
type: "bi.label", |
||||
cls: "color-picker-editor-label", |
||||
height: 20 |
||||
}); |
||||
|
||||
var checker = function (v) { |
||||
return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; |
||||
}; |
||||
var Ws = BI.map(BI.range(0, 3), function () { |
||||
return { |
||||
type: "bi.small_text_editor", |
||||
cls: "color-picker-editor-input", |
||||
validationChecker: checker, |
||||
errorText: BI.i18nText("BI-Color_Picker_Error_Text"), |
||||
allowBlank: true, |
||||
value: 255, |
||||
width: c.RGB_WIDTH, |
||||
height: 20, |
||||
listeners: [{ |
||||
eventName: BI.TextEditor.EVENT_CHANGE, |
||||
action: function () { |
||||
self._checkEditors(); |
||||
if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { |
||||
self.colorShow.element.css("background-color", self.getValue()); |
||||
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
||||
} |
||||
} |
||||
}] |
||||
}; |
||||
}); |
||||
|
||||
return { |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.vertical", |
||||
tgap: 5, |
||||
items: [{ |
||||
type: "bi.vertical_adapt", |
||||
rgap: 5, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.layout", |
||||
cls: "color-picker-editor-display bi-card bi-border", |
||||
height: 16, |
||||
width: 16, |
||||
ref: function (_ref) { |
||||
self.colorShow = _ref; |
||||
} |
||||
}, |
||||
width: 16 |
||||
}, { |
||||
type: "bi.label", |
||||
text: "#", |
||||
width: 10 |
||||
}, { |
||||
type: "bi.small_text_editor", |
||||
ref: function (_ref) { |
||||
self.hexEditor = _ref; |
||||
}, |
||||
cls: "color-picker-editor-input", |
||||
validationChecker: this._hexChecker, |
||||
errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"), |
||||
width: c.HEX_WIDTH, |
||||
height: 20, |
||||
listeners: [{ |
||||
eventName: "EVENT_CHANGE", |
||||
action: function () { |
||||
self.setValue("#" + this.getValue()); |
||||
self.colorShow.element.css("background-color", self.getValue()); |
||||
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
||||
} |
||||
}] |
||||
}, { |
||||
el: BI.extend(Ws[0], { |
||||
ref: function (_ref) { |
||||
self.R = _ref |
||||
} |
||||
}), |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: BI.extend(Ws[1], { |
||||
ref: function (_ref) { |
||||
self.G = _ref |
||||
} |
||||
}), |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: BI.extend(Ws[2], { |
||||
ref: function (_ref) { |
||||
self.B = _ref |
||||
} |
||||
}), |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: { |
||||
type: "bi.icon_button", |
||||
cls: "trans-color-icon", |
||||
width: 16, |
||||
height: 16, |
||||
iconWidth: 16, |
||||
iconHeight: 16, |
||||
title: BI.i18nText("BI-Transparent_Color"), |
||||
listeners: [{ |
||||
eventName: BI.IconButton.EVENT_CHANGE, |
||||
action: function () { |
||||
if (this.isSelected()) { |
||||
self.lastColor = self.getValue(); |
||||
self.setValue("transparent"); |
||||
} else { |
||||
if (self.lastColor === "transparent") { |
||||
self.lastColor = ""; |
||||
} |
||||
self.setValue(self.lastColor || "#ffffff"); |
||||
} |
||||
if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) || |
||||
self._isEmptyRGB()) { |
||||
self.colorShow.element.css("background-color", self.getValue()); |
||||
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
||||
} |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.transparent = _ref; |
||||
} |
||||
}, |
||||
width: 16, |
||||
lgap: 5 |
||||
}, { |
||||
el: { |
||||
type: "bi.icon_button", |
||||
cls: "auto-color-icon", |
||||
width: 16, |
||||
height: 16, |
||||
iconWidth: 16, |
||||
iconHeight: 16, |
||||
title: BI.i18nText("BI-Basic_Auto"), |
||||
listeners: [{ |
||||
eventName: BI.IconButton.EVENT_CHANGE, |
||||
action: function () { |
||||
if (this.isSelected()) { |
||||
self.lastColor = self.getValue(); |
||||
self.setValue(""); |
||||
} else { |
||||
self.setValue(self.lastColor || "#ffffff"); |
||||
} |
||||
if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) || self._isEmptyRGB()) { |
||||
self.colorShow.element.css("background-color", self.getValue()); |
||||
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
||||
} |
||||
} |
||||
}], |
||||
ref: function (_ref) { |
||||
self.none = _ref; |
||||
} |
||||
}, |
||||
width: 16, |
||||
lgap: 5 |
||||
}] |
||||
}, { |
||||
type: "bi.vertical_adapt", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "color-picker-editor-label", |
||||
height: 20, |
||||
text: "HEX" |
||||
}, |
||||
lgap: 60 |
||||
},{ |
||||
el: RGB[0].el, |
||||
lgap: 44 |
||||
}, { |
||||
el: RGB[1].el, |
||||
lgap: 28 |
||||
}, { |
||||
el: RGB[2].el, |
||||
lgap: 28 |
||||
}] |
||||
}] |
||||
}, |
||||
left: 10, |
||||
right: 10, |
||||
top: 0, |
||||
bottom: 0 |
||||
}] |
||||
}; |
||||
}, |
||||
|
||||
_hexChecker: function (v) { |
||||
return /^[0-9a-fA-F]{6}$/.test(v); |
||||
}, |
||||
|
||||
_checkEditors: function () { |
||||
if(BI.isEmptyString(this.R.getValue())) { |
||||
this.R.setValue(0); |
||||
} |
||||
if(BI.isEmptyString(this.G.getValue())) { |
||||
this.G.setValue(0); |
||||
} |
||||
if(BI.isEmptyString(this.B.getValue())) { |
||||
this.B.setValue(0); |
||||
} |
||||
this.storeValue = { |
||||
r: this.R.getValue() || 0, |
||||
g: this.G.getValue() || 0, |
||||
b: this.B.getValue() || 0 |
||||
}; |
||||
this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION)); |
||||
}, |
||||
|
||||
_isEmptyRGB: function () { |
||||
return BI.isEmptyString(this.storeValue.r) && BI.isEmptyString(this.storeValue.g) && BI.isEmptyString(this.storeValue.b); |
||||
}, |
||||
|
||||
_showPreColor: function (color) { |
||||
if (color === "") { |
||||
this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-normal-background"); |
||||
} else if (color === "transparent") { |
||||
this.colorShow.element.css("background-color", "").removeClass("auto-color-normal-background").addClass("trans-color-background"); |
||||
} else { |
||||
this.colorShow.element.css({"background-color": color}).removeClass("auto-color-normal-background").removeClass("trans-color-background"); |
||||
} |
||||
}, |
||||
|
||||
_setEnable: function (enable) { |
||||
BI.ColorPickerEditor.superclass._setEnable.apply(this, arguments); |
||||
if (enable === true) { |
||||
this.element.removeClass("base-disabled disabled"); |
||||
} else if (enable === false) { |
||||
this.element.addClass("base-disabled disabled"); |
||||
} |
||||
}, |
||||
|
||||
setValue: function (color) { |
||||
if (color === "transparent") { |
||||
this.transparent.setSelected(true); |
||||
this.none.setSelected(false); |
||||
this._showPreColor("transparent"); |
||||
this.R.setValue(""); |
||||
this.G.setValue(""); |
||||
this.B.setValue(""); |
||||
this.hexEditor.setValue(""); |
||||
this.storeValue = { |
||||
r: "", |
||||
g: "", |
||||
b: "" |
||||
}; |
||||
return; |
||||
} |
||||
if (!color) { |
||||
color = ""; |
||||
this.none.setSelected(true); |
||||
} else { |
||||
this.none.setSelected(false); |
||||
} |
||||
this.transparent.setSelected(false); |
||||
this._showPreColor(color); |
||||
var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color)); |
||||
this.storeValue = { |
||||
r: BI.isNull(json.r) ? "" : json.r, |
||||
g: BI.isNull(json.g) ? "" : json.g, |
||||
b: BI.isNull(json.b) ? "" : json.b |
||||
}; |
||||
this.R.setValue(this.storeValue.r); |
||||
this.G.setValue(this.storeValue.g); |
||||
this.B.setValue(this.storeValue.b); |
||||
this.hexEditor.setValue(color.slice(this.constants.HEX_PREFIX_POSITION)); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
if (this._isEmptyRGB() && this.transparent.isSelected()) { |
||||
return "transparent"; |
||||
} |
||||
return BI.DOM.rgb2hex(BI.DOM.json2rgb({ |
||||
r: this.storeValue.r, |
||||
g: this.storeValue.g, |
||||
b: this.storeValue.b |
||||
})); |
||||
} |
||||
}); |
||||
BI.HexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.hex_color_picker_editor", BI.HexColorPickerEditor); |
||||
@ -0,0 +1,178 @@
|
||||
/** |
||||
* @author windy |
||||
* @version 2.0 |
||||
* Created by windy on 2020/11/10 |
||||
*/ |
||||
BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { |
||||
|
||||
constants: { |
||||
RGB_WIDTH: 40, |
||||
HEX_WIDTH: 70, |
||||
HEX_PREFIX_POSITION: 1 |
||||
}, |
||||
|
||||
props: { |
||||
baseCls: "bi-color-picker-editor", |
||||
// width: 200,
|
||||
height: 50 |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options, c = this.constants; |
||||
|
||||
var RGB = BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { |
||||
type: "bi.label", |
||||
cls: "color-picker-editor-label", |
||||
height: 20 |
||||
}); |
||||
|
||||
var checker = function (v) { |
||||
return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255; |
||||
}; |
||||
var Ws = BI.map(BI.range(0, 3), function () { |
||||
return { |
||||
type: "bi.small_text_editor", |
||||
cls: "color-picker-editor-input", |
||||
validationChecker: checker, |
||||
errorText: BI.i18nText("BI-Color_Picker_Error_Text"), |
||||
allowBlank: true, |
||||
value: 255, |
||||
width: c.RGB_WIDTH, |
||||
height: 20, |
||||
listeners: [{ |
||||
eventName: BI.TextEditor.EVENT_CHANGE, |
||||
action: function () { |
||||
self._checkEditors(); |
||||
if (self.R.isValid() && self.G.isValid() && self.B.isValid()) { |
||||
self.colorShow.element.css("background-color", self.getValue()); |
||||
self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE); |
||||
} |
||||
} |
||||
}] |
||||
} |
||||
}); |
||||
|
||||
return { |
||||
type: "bi.vertical", |
||||
tgap: 5, |
||||
items: [{ |
||||
type: "bi.vertical_adapt", |
||||
rgap: 10, |
||||
items: [{ |
||||
el: { |
||||
type: "bi.layout", |
||||
cls: "color-picker-editor-display bi-card bi-border", |
||||
height: 16, |
||||
width: 16, |
||||
ref: function (_ref) { |
||||
self.colorShow = _ref; |
||||
} |
||||
}, |
||||
width: 16, |
||||
lgap: 10, |
||||
rgap: 5 |
||||
}, { |
||||
type: "bi.label", |
||||
text: "#", |
||||
width: 10 |
||||
}, { |
||||
type: "bi.small_text_editor", |
||||
ref: function (_ref) { |
||||
self.hexEditor = _ref; |
||||
}, |
||||
cls: "color-picker-editor-input", |
||||
validationChecker: this._hexChecker, |
||||
errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"), |
||||
width: c.HEX_WIDTH, |
||||
height: 20, |
||||
listeners: [{ |
||||
eventName: "EVENT_CHANGE", |
||||
action: function () { |
||||
self.setValue("#" + this.getValue()); |
||||
self.colorShow.element.css("background-color", self.getValue()); |
||||
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); |
||||
} |
||||
}] |
||||
}, { |
||||
el: BI.extend(Ws[0], { |
||||
ref: function (_ref) { |
||||
self.R = _ref |
||||
} |
||||
}), |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: BI.extend(Ws[1], { |
||||
ref: function (_ref) { |
||||
self.G = _ref |
||||
} |
||||
}), |
||||
width: c.RGB_WIDTH |
||||
}, { |
||||
el: BI.extend(Ws[2], { |
||||
ref: function (_ref) { |
||||
self.B = _ref |
||||
} |
||||
}), |
||||
width: c.RGB_WIDTH |
||||
}] |
||||
}, { |
||||
type: "bi.vertical_adapt", |
||||
items: [{ |
||||
el: { |
||||
type: "bi.label", |
||||
cls: "color-picker-editor-label", |
||||
height: 20, |
||||
text: "HEX" |
||||
}, |
||||
lgap: 86 |
||||
},{ |
||||
el: RGB[0].el, |
||||
lgap: 50 |
||||
}, { |
||||
el: RGB[1].el, |
||||
lgap: 40 |
||||
}, { |
||||
el: RGB[2].el, |
||||
lgap: 40 |
||||
}] |
||||
}] |
||||
|
||||
} |
||||
}, |
||||
|
||||
_hexChecker: function (v) { |
||||
return /^[0-9a-fA-F]{6}$/.test(v); |
||||
}, |
||||
|
||||
_checkEditors: function () { |
||||
if(BI.isEmptyString(this.R.getValue())) { |
||||
this.R.setValue(0); |
||||
} |
||||
if(BI.isEmptyString(this.G.getValue())) { |
||||
this.G.setValue(0); |
||||
} |
||||
if(BI.isEmptyString(this.B.getValue())) { |
||||
this.B.setValue(0); |
||||
} |
||||
this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION)); |
||||
}, |
||||
|
||||
setValue: function (color) { |
||||
this.colorShow.element.css({"background-color": color}); |
||||
var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color)); |
||||
this.R.setValue(BI.isNull(json.r) ? "" : json.r); |
||||
this.G.setValue(BI.isNull(json.g) ? "" : json.g); |
||||
this.B.setValue(BI.isNull(json.b) ? "" : json.b); |
||||
this.hexEditor.setValue(color.slice(this.constants.HEX_PREFIX_POSITION)); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return BI.DOM.rgb2hex(BI.DOM.json2rgb({ |
||||
r: this.R.getValue(), |
||||
g: this.G.getValue(), |
||||
b: this.B.getValue() |
||||
})); |
||||
} |
||||
}); |
||||
BI.SimpleHexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.simple_hex_color_picker_editor", BI.SimpleHexColorPickerEditor); |
||||
@ -0,0 +1,47 @@
|
||||
!(function () { |
||||
BI.initWorker = function () { |
||||
function createWatcher (model, keyOrFn, cb, options) { |
||||
options = options || {}; |
||||
return Fix.watch(model, keyOrFn, cb, BI.extend(options, { |
||||
store: model |
||||
})); |
||||
} |
||||
|
||||
var models = {}, watches = {}; |
||||
addEventListener("message", function (e) { |
||||
var data = e.data; |
||||
switch (data.eventType) { |
||||
case "action": |
||||
models[data.name][data.action].apply(models[data.name], data.args); |
||||
break; |
||||
case "destroy": |
||||
BI.each(watches[data.name], function (i, unwatches) { |
||||
unwatches = BI.isArray(unwatches) ? unwatches : [unwatches]; |
||||
BI.each(unwatches, function (j, unwatch) { |
||||
unwatch(); |
||||
}); |
||||
}); |
||||
delete models[data.name]; |
||||
delete watches[data.name]; |
||||
break; |
||||
case "create": |
||||
var store = models[data.name] = BI.Models.getModel(data.type, data.options); |
||||
watches[data.name] = []; |
||||
BI.each(data.watches, function (i, key) { |
||||
watches[data.name].push(createWatcher(store.model, key, function (newValue, oldValue) { |
||||
postMessage(BI.extend({}, data, { |
||||
eventType: "watch", |
||||
currentWatchType: key |
||||
}, {args: [newValue, oldValue]})); |
||||
})); |
||||
}); |
||||
postMessage(BI.extend({}, data, { |
||||
eventType: "create" |
||||
}, {msg: store.model})); |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
}, false); |
||||
}; |
||||
}()); |
||||
@ -0,0 +1,58 @@
|
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title></title> |
||||
<link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css"/> |
||||
<!-- 下面是不包含normalize.css的css --> |
||||
<!-- <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui_without_normalize.min.css" /> --> |
||||
<script src="./dist/fineui.js"></script> |
||||
<script src="./dist/fix/worker.compact.js"></script> |
||||
<script src="demo.worker.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="wrapper"></div> |
||||
<script> |
||||
if (window.Worker) { |
||||
var worker = new Worker("./demo.worker.js"); |
||||
} |
||||
BI.useWorker(worker); |
||||
|
||||
var Widget = BI.inherit(BI.Widget, { |
||||
_worker: function () { |
||||
return "demo.model"; |
||||
}, |
||||
watch: { |
||||
name: function (val) { |
||||
this.button.setText(val); |
||||
} |
||||
}, |
||||
render: function () { |
||||
var self = this; |
||||
console.log(this.model); |
||||
return { |
||||
type: "bi.button", |
||||
ref: function (_ref) { |
||||
self.button = _ref; |
||||
}, |
||||
text: this.model.name, |
||||
handler: function () { |
||||
self.store.addCount(); |
||||
} |
||||
}; |
||||
} |
||||
}); |
||||
BI.shortcut("demo.worker", Widget); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "demo.worker" |
||||
}, |
||||
top: 100, |
||||
left: 100 |
||||
}], |
||||
element: "#wrapper" |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue