forked from fanruan/fineui
guy
8 years ago
50 changed files with 1132 additions and 1467 deletions
@ -1,227 +0,0 @@
|
||||
/** |
||||
* guy |
||||
* 记录内容的输入框 |
||||
* @class BI.RecordEditor |
||||
* @extends BI.Single |
||||
*/ |
||||
BI.RecordEditor = BI.inherit(BI.Single, { |
||||
_defaultConfig: function () { |
||||
var conf = BI.RecordEditor.superclass._defaultConfig.apply(this, arguments); |
||||
return BI.extend(conf, { |
||||
baseCls: (conf.baseCls || "") + " bi-record-editor", |
||||
hgap: 4, |
||||
vgap: 2, |
||||
lgap: 0, |
||||
rgap: 0, |
||||
tgap: 0, |
||||
bgap: 0, |
||||
validationChecker: BI.emptyFn, |
||||
quitChecker: BI.emptyFn, |
||||
allowBlank: true, |
||||
watermark: "", |
||||
errorText: "", |
||||
height: 30 |
||||
}) |
||||
}, |
||||
|
||||
_init: function () { |
||||
BI.RecordEditor.superclass._init.apply(this, arguments); |
||||
this.contents = []; |
||||
var self = this, o = this.options; |
||||
|
||||
this.editor = BI.createWidget({ |
||||
type: "bi.editor", |
||||
height: o.height, |
||||
hgap: o.hgap, |
||||
vgap: o.vgap, |
||||
lgap: o.lgap, |
||||
rgap: o.rgap, |
||||
tgap: o.tgap, |
||||
bgap: o.bgap, |
||||
value: o.value, |
||||
validationChecker: o.validationChecker, |
||||
quitChecker: o.quitChecker, |
||||
mouseOut: o.mouseOut, |
||||
allowBlank: o.allowBlank, |
||||
watermark: o.watermark, |
||||
errorText: o.errorText |
||||
}); |
||||
this.textContainer = BI.createWidget({ |
||||
type: "bi.vertical_adapt", |
||||
hgap: 2, |
||||
height: o.height |
||||
}); |
||||
this.editor.on(BI.Controller.EVENT_CHANGE, function () { |
||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_FOCUS, function () { |
||||
self._checkInputState(); |
||||
self.fireEvent(BI.RecordEditor.EVENT_FOCUS, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_BLUR, function () { |
||||
self._checkInputState(); |
||||
self.fireEvent(BI.RecordEditor.EVENT_BLUR, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_CLICK, function () { |
||||
self.fireEvent(BI.RecordEditor.EVENT_CLICK, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_CHANGE, function () { |
||||
self.fireEvent(BI.RecordEditor.EVENT_CHANGE, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_KEY_DOWN, function (v) { |
||||
self.fireEvent(BI.RecordEditor.EVENT_KEY_DOWN, arguments); |
||||
}); |
||||
|
||||
this.editor.on(BI.Editor.EVENT_VALID, function () { |
||||
self.fireEvent(BI.RecordEditor.EVENT_VALID, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_SPACE, function () { |
||||
self.fireEvent(BI.RecordEditor.EVENT_SPACE, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_CONFIRM, function () { |
||||
self.setState(self.getValue()); |
||||
self.editor.isValid() && self.editor.setValue(""); |
||||
self.fireEvent(BI.RecordEditor.EVENT_CONFIRM, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_START, function () { |
||||
self.fireEvent(BI.RecordEditor.EVENT_START, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_PAUSE, function () { |
||||
self.fireEvent(BI.RecordEditor.EVENT_PAUSE, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_STOP, function () { |
||||
self.fireEvent(BI.RecordEditor.EVENT_STOP, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_ENTER, function () { |
||||
self.fireEvent(BI.RecordEditor.EVENT_ENTER, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_BACKSPACE, function () { |
||||
self._checkInputState(); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_REMOVE, function () { |
||||
if (!BI.isEmpty(self.contents)) { |
||||
self.contents.pop().destroy(); |
||||
self.setValue(self.getValue()); |
||||
self._adjustInputWidth(); |
||||
} |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_ERROR, function () { |
||||
self.fireEvent(BI.RecordEditor.EVENT_ERROR, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_RESTRICT, function () { |
||||
self.fireEvent(BI.RecordEditor.EVENT_RESTRICT, arguments); |
||||
}); |
||||
this.editor.on(BI.Editor.EVENT_EMPTY, function () { |
||||
self.fireEvent(BI.RecordEditor.EVENT_EMPTY, arguments); |
||||
}); |
||||
BI.createWidget({ |
||||
type: "bi.inline", |
||||
element: this, |
||||
items: [this.textContainer, this.editor] |
||||
}); |
||||
BI.ResizeDetector.addResizeListener(this, BI.bind(this._adjustInputWidth, this)); |
||||
this._adjustInputWidth(); |
||||
}, |
||||
|
||||
_adjustInputWidth: function () { |
||||
BI.nextTick(BI.bind(function () { |
||||
this.editor.element.css("width", this.element.width() - this.textContainer.element.outerWidth() - 10); |
||||
}, this)); |
||||
}, |
||||
|
||||
_checkInputState: function () { |
||||
if (BI.isEmpty(this.contents)) { |
||||
this.editor.enableWarterMark(); |
||||
} else { |
||||
this.editor.disableWarterMark(); |
||||
} |
||||
}, |
||||
|
||||
focus: function () { |
||||
this.editor.focus(); |
||||
}, |
||||
|
||||
blur: function () { |
||||
this.editor.blur(); |
||||
}, |
||||
|
||||
isValid: function () { |
||||
return this.editor.isValid(); |
||||
}, |
||||
|
||||
setErrorText: function (text) { |
||||
this.editor.setErrorText(text); |
||||
}, |
||||
|
||||
getErrorText: function () { |
||||
return this.editor.getErrorText(); |
||||
}, |
||||
|
||||
isEditing: function () { |
||||
return this.editor.isEditing(); |
||||
}, |
||||
|
||||
getLastValidValue: function () { |
||||
return this.editor.getLastValidValue(); |
||||
}, |
||||
|
||||
setValue: function (k) { |
||||
this.editor.setValue(k); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.editor.getValue(); |
||||
}, |
||||
|
||||
getState: function () { |
||||
var values = BI.map(this.contents, function (i, lb) { |
||||
return lb.getText(); |
||||
}); |
||||
if (BI.isNotEmptyString(this.editor.getValue())) { |
||||
return values.concat([this.editor.getValue()]); |
||||
} |
||||
return values; |
||||
}, |
||||
|
||||
setState: function (v) { |
||||
BI.RecordEditor.superclass.setValue.apply(this, arguments); |
||||
v = BI.isArray(v) ? v : (v == "" ? [] : [v]); |
||||
var contents = this.contents = []; |
||||
BI.each(v, function (i, lb) { |
||||
contents.push(BI.createWidget({ |
||||
type: "bi.label", |
||||
height: 25, |
||||
cls: "record-editor-text", |
||||
text: lb |
||||
})) |
||||
}); |
||||
this.textContainer.empty(); |
||||
this.textContainer.populate(contents); |
||||
this.editor.isValid() && this.editor.setValue(""); |
||||
this._checkInputState(); |
||||
this._adjustInputWidth(); |
||||
}, |
||||
|
||||
destroy: function () { |
||||
BI.Resizers.remove(this.getName()); |
||||
BI.RecordEditor.superclass.destroy.apply(this, arguments); |
||||
} |
||||
}); |
||||
BI.RecordEditor.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.RecordEditor.EVENT_FOCUS = "EVENT_FOCUS"; |
||||
BI.RecordEditor.EVENT_BLUR = "EVENT_BLUR"; |
||||
BI.RecordEditor.EVENT_CLICK = "EVENT_CLICK"; |
||||
BI.RecordEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN"; |
||||
|
||||
BI.RecordEditor.EVENT_START = "EVENT_START"; |
||||
BI.RecordEditor.EVENT_PAUSE = "EVENT_PAUSE"; |
||||
BI.RecordEditor.EVENT_STOP = "EVENT_STOP"; |
||||
BI.RecordEditor.EVENT_CONFIRM = "EVENT_CONFIRM"; |
||||
BI.RecordEditor.EVENT_VALID = "EVENT_VALID"; |
||||
BI.RecordEditor.EVENT_ERROR = "EVENT_ERROR"; |
||||
BI.RecordEditor.EVENT_ENTER = "EVENT_ENTER"; |
||||
BI.RecordEditor.EVENT_RESTRICT = "EVENT_RESTRICT"; |
||||
BI.RecordEditor.EVENT_SPACE = "EVENT_SPACE"; |
||||
BI.RecordEditor.EVENT_EMPTY = "EVENT_EMPTY"; |
||||
|
||||
BI.shortcut("bi.record_editor", BI.RecordEditor); |
||||
@ -1,11 +0,0 @@
|
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-combine-chart .bi-linkage-list { |
||||
background-color: #ffffff; |
||||
border: 1px solid #eaeaea; |
||||
z-index: 1000000000; |
||||
} |
||||
.bi-combine-chart .bi-linkage-list .bi-linkage-list-item:hover { |
||||
background-color: #f4f4f4; |
||||
} |
||||
@ -0,0 +1,10 @@
|
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-theme-dark { |
||||
background-color: #191a2c; |
||||
color: #b2b2b2; |
||||
} |
||||
.bi-theme-dark .bi-input { |
||||
color: #ffffff; |
||||
} |
||||
@ -1,7 +1,3 @@
|
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-record-editor .record-editor-text { |
||||
font-size: 12px; |
||||
background: #f4f4f4; |
||||
} |
||||
@ -0,0 +1,3 @@
|
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
@ -1,16 +1,6 @@
|
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item, |
||||
.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item .b-font:before { |
||||
background-color: #f4f4f4; |
||||
} |
||||
.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item:disabled, |
||||
.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item.disabled, |
||||
.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item:disabled .b-font:before, |
||||
.bi-down-list-combo .down-list-group.bi-combo-hover .bi-down-list-group-item.disabled .b-font:before { |
||||
background-color: #ffffff; |
||||
} |
||||
.bi-down-list-combo .bi-down-list-spliter { |
||||
border-top: 1px solid #eaeaea; |
||||
} |
||||
|
||||
@ -1,19 +1,6 @@
|
||||
/****添加计算宽度的--运算符直接需要space****/ |
||||
/****** common color(常用颜色,可用于普遍场景) *****/ |
||||
/**** custom color(自定义颜色,用于特定场景) ****/ |
||||
.bi-down-list-popup .bi-down-list-item:hover, |
||||
.bi-down-list-popup .bi-down-list-item.hover { |
||||
background-color: #f4f4f4; |
||||
} |
||||
.bi-down-list-popup .bi-down-list-item.disabled, |
||||
.bi-down-list-popup .bi-down-list-item.disabled:hover, |
||||
.bi-down-list-popup .bi-down-list-item.disabled:active { |
||||
background-color: #ffffff; |
||||
} |
||||
.bi-down-list-popup .bi-down-list-item:active { |
||||
color: #009de3; |
||||
background-color: #f4f4f4; |
||||
} |
||||
.bi-down-list-popup .bi-down-list-item .list-item-text { |
||||
max-width: 203px; |
||||
} |
||||
|
||||
@ -1,13 +0,0 @@
|
||||
@import "../../bibase"; |
||||
.bi-combine-chart { |
||||
& .bi-linkage-list { |
||||
background-color: @background-color-default; |
||||
border: 1px solid @border-color-line; |
||||
z-index: @zIndex-tip; |
||||
& .bi-linkage-list-item { |
||||
&:hover { |
||||
background-color: @color-bi-background-gray; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,8 +0,0 @@
|
||||
@import "../../../bibase"; |
||||
|
||||
.bi-record-editor{ |
||||
.record-editor-text{ |
||||
font-size: @font-size-12; |
||||
background: @color-bi-background-gray; |
||||
} |
||||
} |
||||
@ -0,0 +1,9 @@
|
||||
@import "../bibase"; |
||||
|
||||
.bi-theme-dark { |
||||
background-color: @color-bi-background-theme-dark; |
||||
color: @color-bi-text-theme-dark; |
||||
& .bi-input { |
||||
color: @color-bi-text; |
||||
} |
||||
} |
||||
@ -0,0 +1,5 @@
|
||||
@import "../bibase"; |
||||
|
||||
.bi-theme-default{ |
||||
|
||||
} |
||||
@ -0,0 +1,4 @@
|
||||
@import "../bibase"; |
||||
|
||||
.bi-theme-light { |
||||
} |
||||
Loading…
Reference in new issue