Browse Source

KERNEL-13901 refactor: label、editor、input文件夹ES6化

es6
impact 2 years ago
parent
commit
b092b80dd4
  1. 2
      src/base/foundation/message.js
  2. 2
      src/base/index.js
  3. 371
      src/base/single/editor/editor.js
  4. 112
      src/base/single/editor/editor.multifile.js
  5. 250
      src/base/single/editor/editor.textarea.js
  6. 3
      src/base/single/editor/index.js
  7. 105
      src/base/single/html/html.js
  8. 23
      src/base/single/icon/icon.js
  9. 6
      src/base/single/index.js
  10. 358
      src/base/single/input/file.js
  11. 2
      src/base/single/input/index.js
  12. 341
      src/base/single/input/input.js
  13. 391
      src/base/single/label/abstract.label.js
  14. 32
      src/base/single/label/html.label.js
  15. 62
      src/base/single/label/icon.label.js
  16. 4
      src/base/single/label/index.js
  17. 36
      src/base/single/label/label.js
  18. 59
      src/base/single/text.pure.js

2
src/base/foundation/message.js

@ -49,7 +49,7 @@ export const Msg = ((() => {
},
}],
});
const height = BI.SIZE_CONSANTS.TOAST_TOP;
let height = BI.SIZE_CONSANTS.TOAST_TOP;
each(toastStack, function (i, element) {
height += element.outerHeight() + 10;
});

2
src/base/index.js

@ -6,6 +6,7 @@ import GridView from "./grid/grid";
import Pager from "./pager/pager";
import * as combination from "./combination";
import { Msg } from "./foundation/message";
import * as base from "./0.base";
Object.assign(BI, {
Pane,
@ -16,6 +17,7 @@ Object.assign(BI, {
Pager,
...combination,
Msg,
...base,
});
export * from "./0.base";

371
src/base/single/editor/editor.js

@ -3,11 +3,39 @@
* @class BI.Editor
* @extends BI.Single
*/
BI.Editor = BI.inherit(BI.Single, {
_defaultConfig: function () {
var conf = BI.Editor.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
import { shortcut, Controller, extend, createWidget, isKey, isEmptyString, isFunction, isNull, trim, } from "../../../core";
import { Single } from "../0.single";
import { Input } from "../input/input";
import { Bubbles } from "../../0.base";
@shortcut()
export class Editor extends Single {
static xtype = "bi.editor";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_BLUR = "EVENT_BLUR";
static EVENT_CLICK = "EVENT_CLICK";
static EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
static EVENT_SPACE = "EVENT_SPACE";
static EVENT_BACKSPACE = "EVENT_BACKSPACE";
static EVENT_START = "EVENT_START";
static EVENT_PAUSE = "EVENT_PAUSE";
static EVENT_STOP = "EVENT_STOP";
static EVENT_CONFIRM = "EVENT_CONFIRM";
static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
static EVENT_VALID = "EVENT_VALID";
static EVENT_ERROR = "EVENT_ERROR";
static EVENT_ENTER = "EVENT_ENTER";
static EVENT_RESTRICT = "EVENT_RESTRICT";
static EVENT_REMOVE = "EVENT_REMOVE";
static EVENT_EMPTY = "EVENT_EMPTY";
_defaultConfig() {
const conf = super._defaultConfig(arguments);
return extend(conf, {
baseCls: "bi-editor bi-focus-shadow",
hgap: 4,
vgap: 2,
@ -25,21 +53,21 @@ BI.Editor = BI.inherit(BI.Single, {
errorText: "",
autoTrim: true,
});
},
}
render: function () {
var self = this, o = this.options;
render() {
const { value, watermark, validationChecker, quitChecker, allowBlank, inputType, hgap, vgap, lgap, rgap, tgap, bgap } = this.options;
// 密码输入框设置autocomplete="new-password"的情况下Firefox和chrome不会自动填充密码
var autocomplete = o.autocomplete ? " autocomplete=" + o.autocomplete : "";
this.editor = this.addWidget(BI.createWidget({
const autocomplete = this.options.autocomplete ? " autocomplete=" + this.options.autocomplete : "";
this.editor = this.addWidget(createWidget({
type: "bi.input",
element: "<input type='" + o.inputType + "'" + autocomplete + " />",
element: "<input type='" + inputType + "'" + autocomplete + " />",
root: true,
value: o.value,
watermark: o.watermark,
validationChecker: o.validationChecker,
quitChecker: o.quitChecker,
allowBlank: o.allowBlank,
value,
watermark,
validationChecker,
quitChecker,
allowBlank,
}));
this.editor.element.css({
width: "100%",
@ -50,12 +78,12 @@ BI.Editor = BI.inherit(BI.Single, {
margin: "0",
});
var items = [
const items = [
{
el: {
type: "bi.absolute",
ref: function (_ref) {
self.contentWrapper = _ref;
ref: (_ref) => {
this.contentWrapper = _ref;
},
items: [
{
@ -67,190 +95,189 @@ BI.Editor = BI.inherit(BI.Single, {
}
],
},
left: o.hgap + o.lgap,
right: o.hgap + o.rgap,
top: o.vgap + o.tgap,
bottom: o.vgap + o.bgap,
left: hgap + lgap,
right: hgap + rgap,
top: vgap + tgap,
bottom: vgap + bgap,
}
];
BI.createWidget({
createWidget({
type: "bi.absolute",
element: this,
items: items,
items,
});
this.setWaterMark(this.options.watermark);
this.editor.on(BI.Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
this.editor.on(Controller.EVENT_CHANGE, (...args) => {
this.fireEvent(Controller.EVENT_CHANGE, ...args);
});
this.editor.on(BI.Input.EVENT_FOCUS, function () {
self._checkError();
self.element.addClass("bi-editor-focus");
self.fireEvent(BI.Editor.EVENT_FOCUS, arguments);
this.editor.on(Input.EVENT_FOCUS, (...args) => {
this._checkError();
this.element.addClass("bi-editor-focus");
this.fireEvent(Editor.EVENT_FOCUS, ...args);
});
this.editor.on(BI.Input.EVENT_BLUR, function () {
self._setErrorVisible(false);
self.element.removeClass("bi-editor-focus");
self.fireEvent(BI.Editor.EVENT_BLUR, arguments);
this.editor.on(Input.EVENT_BLUR, (...args) => {
this._setErrorVisible(false);
this.element.removeClass("bi-editor-focus");
this.fireEvent(Editor.EVENT_BLUR, ...args);
});
this.editor.on(BI.Input.EVENT_CLICK, function () {
self.fireEvent(BI.Editor.EVENT_CLICK, arguments);
this.editor.on(Input.EVENT_CLICK, (...args) => {
this.fireEvent(Editor.EVENT_CLICK, ...args);
});
this.editor.on(BI.Input.EVENT_CHANGE, function () {
self.fireEvent(BI.Editor.EVENT_CHANGE, arguments);
this.editor.on(Input.EVENT_CHANGE, (...args) => {
this.fireEvent(Editor.EVENT_CHANGE, ...args);
});
this.editor.on(BI.Input.EVENT_KEY_DOWN, function (v) {
self.fireEvent(BI.Editor.EVENT_KEY_DOWN, arguments);
this.editor.on(Input.EVENT_KEY_DOWN, (v, ...args) => {
this.fireEvent(Editor.EVENT_KEY_DOWN, v, ...args);
});
this.editor.on(BI.Input.EVENT_QUICK_DOWN, function (e) {
this.editor.on(Input.EVENT_QUICK_DOWN, (e) => {
// tab键就不要隐藏了
if (e.keyCode !== BI.KeyCode.TAB && self.watermark) {
self.watermark.invisible();
if (e.keyCode !== BI.KeyCode.TAB && this.watermark) {
this.watermark.invisible();
}
});
this.editor.on(BI.Input.EVENT_VALID, function () {
self._checkWaterMark();
self._setErrorVisible(false);
self.element.removeClass("error");
self.fireEvent(BI.Editor.EVENT_VALID, arguments);
this.editor.on(Input.EVENT_VALID, (...args) => {
this._checkWaterMark();
this._setErrorVisible(false);
this.element.removeClass("error");
this.fireEvent(Editor.EVENT_VALID, ...args);
});
this.editor.on(BI.Input.EVENT_ERROR, function () {
self._checkWaterMark();
self.fireEvent(BI.Editor.EVENT_ERROR, arguments);
self._setErrorVisible(self.isEditing());
self.element.addClass("error");
this.editor.on(Input.EVENT_ERROR, (...args) => {
this._checkWaterMark();
this.fireEvent(Editor.EVENT_ERROR, ...args);
this._setErrorVisible(this.isEditing());
this.element.addClass("error");
});
this.editor.on(BI.Input.EVENT_RESTRICT, function () {
self._checkWaterMark();
var tip = self._setErrorVisible(true);
tip && tip.element.fadeOut(100, function () {
this.editor.on(Input.EVENT_RESTRICT, (...args) => {
this._checkWaterMark();
const tip = this._setErrorVisible(true);
tip && tip.element.fadeOut(100, () => {
tip.element.fadeIn(100);
});
self.fireEvent(BI.Editor.EVENT_RESTRICT, arguments);
this.fireEvent(Editor.EVENT_RESTRICT, ...args);
});
this.editor.on(BI.Input.EVENT_EMPTY, function () {
self._checkWaterMark();
self.fireEvent(BI.Editor.EVENT_EMPTY, arguments);
this.editor.on(Input.EVENT_EMPTY, (...args) => {
this._checkWaterMark();
this.fireEvent(Editor.EVENT_EMPTY, ...args);
});
this.editor.on(BI.Input.EVENT_ENTER, function () {
self.fireEvent(BI.Editor.EVENT_ENTER, arguments);
this.editor.on(Input.EVENT_ENTER, (...args) => {
this.fireEvent(Editor.EVENT_ENTER, ...args);
});
this.editor.on(BI.Input.EVENT_SPACE, function () {
self.fireEvent(BI.Editor.EVENT_SPACE, arguments);
this.editor.on(Input.EVENT_SPACE, (...args) => {
this.fireEvent(Editor.EVENT_SPACE, ...args);
});
this.editor.on(BI.Input.EVENT_BACKSPACE, function () {
self.fireEvent(BI.Editor.EVENT_BACKSPACE, arguments);
this.editor.on(Input.EVENT_BACKSPACE, (...args) => {
this.fireEvent(Editor.EVENT_BACKSPACE, ...args);
});
this.editor.on(BI.Input.EVENT_REMOVE, function () {
self.fireEvent(BI.Editor.EVENT_REMOVE, arguments);
this.editor.on(Input.EVENT_REMOVE, (...args) => {
this.fireEvent(Editor.EVENT_REMOVE, ...args);
});
this.editor.on(BI.Input.EVENT_START, function () {
self.fireEvent(BI.Editor.EVENT_START, arguments);
this.editor.on(Input.EVENT_START, (...args) => {
this.fireEvent(Editor.EVENT_START, ...args);
});
this.editor.on(BI.Input.EVENT_PAUSE, function () {
self.fireEvent(BI.Editor.EVENT_PAUSE, arguments);
this.editor.on(Input.EVENT_PAUSE, (...args) => {
this.fireEvent(Editor.EVENT_PAUSE, ...args);
});
this.editor.on(BI.Input.EVENT_STOP, function () {
self.fireEvent(BI.Editor.EVENT_STOP, arguments);
this.editor.on(Input.EVENT_STOP, (...args) => {
this.fireEvent(Editor.EVENT_STOP, ...args);
});
this.editor.on(BI.Input.EVENT_CONFIRM, function () {
self.fireEvent(BI.Editor.EVENT_CONFIRM, arguments);
this.editor.on(Input.EVENT_CONFIRM, (...args) => {
this.fireEvent(Editor.EVENT_CONFIRM, ...args);
});
this.editor.on(BI.Input.EVENT_CHANGE_CONFIRM, function () {
self.fireEvent(BI.Editor.EVENT_CHANGE_CONFIRM, arguments);
this.editor.on(Input.EVENT_CHANGE_CONFIRM, (...args) => {
this.fireEvent(Editor.EVENT_CHANGE_CONFIRM, ...args);
});
this.element.click(function (e) {
this.element.click((e) => {
e.stopPropagation();
return false;
});
if (BI.isKey(this.options.value) || BI.isEmptyString(this.options.value)) {
if (isKey(this.options.value) || isEmptyString(this.options.value)) {
this._checkError();
this._checkWaterMark();
} else {
this._checkWaterMark();
}
},
}
_checkToolTip: function () {
var o = this.options;
var errorText = o.errorText;
if (BI.isFunction(errorText)) {
_checkToolTip() {
const { errorText } = this.options;
if (isFunction(errorText)) {
errorText = errorText(this.editor.getValue());
}
if (BI.isKey(errorText)) {
if (!this.isEnabled() || this.isValid() || BI.Bubbles.has(this.getName())) {
if (isKey(errorText)) {
if (!this.isEnabled() || this.isValid() || Bubbles.has(this.getName())) {
this.setTitle("");
} else {
this.setTitle(errorText);
}
}
},
}
_assertWaterMark: function () {
var self = this, o = this.options;
if (BI.isNull(this.watermark)) {
this.watermark = BI.createWidget({
_assertWaterMark() {
const { height, vgap, tgap } = this.options;
if (isNull(this.watermark)) {
this.watermark = createWidget({
type: "bi.label",
cls: "bi-water-mark",
text: this.options.watermark,
height: o.height - 2 * o.vgap - o.tgap,
height: height - 2 * vgap - tgap,
hgap: 2,
whiteSpace: "nowrap",
textAlign: "left",
});
this.watermark.element.bind({
mousedown: function (e) {
if (self.isEnabled()) {
self.editor.isEditing() || self.editor.focus();
mousedown: (e) => {
if (this.isEnabled()) {
this.editor.isEditing() || this.editor.focus();
} else {
self.editor.isEditing() && self.editor.blur();
this.editor.isEditing() && this.editor.blur();
}
e.stopEvent();
},
});
this.watermark.element.bind("click", function (e) {
if (self.isEnabled()) {
self.editor.isEditing() || self.editor.focus();
this.watermark.element.bind("click", (e) => {
if (this.isEnabled()) {
this.editor.isEditing() || this.editor.focus();
} else {
self.editor.isEditing() && self.editor.blur();
this.editor.isEditing() && this.editor.blur();
}
e.stopEvent();
});
}
},
}
_checkError: function () {
_checkError() {
this._setErrorVisible(this.isEnabled() && !this.isValid());
this._checkToolTip();
},
}
_checkWaterMark: function () {
var o = this.options;
if (!this.disabledWaterMark && this.editor.getValue() === "" && BI.isKey(o.watermark)) {
_checkWaterMark() {
const { watermark } = this.options;
if (!this.disabledWaterMark && this.editor.getValue() === "" && isKey(watermark)) {
this.watermark && this.watermark.visible();
} else {
this.watermark && this.watermark.invisible();
}
},
}
setErrorText: function (text) {
setErrorText(text) {
this.options.errorText = text;
},
}
getErrorText: function () {
getErrorText() {
return this.options.errorText;
},
}
setWaterMark: function (v) {
setWaterMark(v) {
this.options.watermark = v;
if (BI.isNull(this.watermark)) {
if (isNull(this.watermark)) {
this._assertWaterMark();
BI.createWidget({
createWidget({
type: "bi.absolute",
element: this.contentWrapper,
items: [
@ -266,113 +293,91 @@ BI.Editor = BI.inherit(BI.Single, {
}
this.watermark.setText(v);
this._checkWaterMark();
},
}
_setErrorVisible: function (b) {
var o = this.options;
var errorText = o.errorText;
if (BI.isFunction(errorText)) {
errorText = errorText(o.autoTrim ? BI.trim(this.editor.getValue()) : this.editor.getValue());
_setErrorVisible(b) {
const { errorText, autoTrim, simple } = this.options;
if (isFunction(errorText)) {
errorText = errorText(autoTrim ? trim(this.editor.getValue()) : this.editor.getValue());
}
if (!this.disabledError && BI.isKey(errorText)) {
BI.Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, {
adjustYOffset: o.simple ? 1 : 2,
if (!this.disabledError && isKey(errorText)) {
Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, {
adjustYOffset: simple ? 1 : 2,
});
this._checkToolTip();
}
},
}
disableError: function () {
disableError() {
this.disabledError = true;
this._checkError();
},
}
enableError: function () {
enableError() {
this.disabledError = false;
this._checkError();
},
}
disableWaterMark: function () {
disableWaterMark() {
this.disabledWaterMark = true;
this._checkWaterMark();
},
}
enableWaterMark: function () {
enableWaterMark() {
this.disabledWaterMark = false;
this._checkWaterMark();
},
}
focus: function () {
focus() {
this.element.addClass("text-editor-focus");
this.editor.focus();
},
}
blur: function () {
blur() {
this.element.removeClass("text-editor-focus");
this.editor.blur();
},
}
selectAll: function () {
selectAll() {
this.editor.selectAll();
},
}
onKeyDown: function (k) {
onKeyDown(k) {
this.editor.onKeyDown(k);
},
}
setValue: function (v) {
BI.Editor.superclass.setValue.apply(this, arguments);
setValue(v) {
super.setValue(v);
this.editor.setValue(v);
this._checkError();
this._checkWaterMark();
},
}
getLastValidValue: function () {
getLastValidValue() {
return this.editor.getLastValidValue();
},
}
getLastChangedValue: function () {
getLastChangedValue() {
return this.editor.getLastChangedValue();
},
}
getValue: function () {
getValue() {
if (!this.isValid()) {
return this.options.autoTrim ? BI.trim(this.editor.getLastValidValue()) : this.editor.getLastValidValue();
return this.options.autoTrim ? trim(this.editor.getLastValidValue()) : this.editor.getLastValidValue();
}
return this.options.autoTrim ? BI.trim(this.editor.getValue()) : this.editor.getValue();
},
return this.options.autoTrim ? trim(this.editor.getValue()) : this.editor.getValue();
}
isEditing: function () {
isEditing() {
return this.editor.isEditing();
},
}
isValid: function () {
isValid() {
return this.editor.isValid();
},
}
destroyed: function () {
BI.Bubbles.remove(this.getName());
},
});
BI.Editor.EVENT_CHANGE = "EVENT_CHANGE";
BI.Editor.EVENT_FOCUS = "EVENT_FOCUS";
BI.Editor.EVENT_BLUR = "EVENT_BLUR";
BI.Editor.EVENT_CLICK = "EVENT_CLICK";
BI.Editor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
BI.Editor.EVENT_SPACE = "EVENT_SPACE";
BI.Editor.EVENT_BACKSPACE = "EVENT_BACKSPACE";
BI.Editor.EVENT_START = "EVENT_START";
BI.Editor.EVENT_PAUSE = "EVENT_PAUSE";
BI.Editor.EVENT_STOP = "EVENT_STOP";
BI.Editor.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.Editor.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
BI.Editor.EVENT_VALID = "EVENT_VALID";
BI.Editor.EVENT_ERROR = "EVENT_ERROR";
BI.Editor.EVENT_ENTER = "EVENT_ENTER";
BI.Editor.EVENT_RESTRICT = "EVENT_RESTRICT";
BI.Editor.EVENT_REMOVE = "EVENT_REMOVE";
BI.Editor.EVENT_EMPTY = "EVENT_EMPTY";
BI.shortcut("bi.editor", BI.Editor);
destroyed() {
Bubbles.remove(this.getName());
}
}

112
src/base/single/editor/editor.multifile.js

@ -6,52 +6,64 @@
* @extends BI.Single
* @abstract
*/
BI.MultifileEditor = BI.inherit(BI.Widget, {
_defaultConfig: function () {
var conf = BI.MultifileEditor.superclass._defaultConfig.apply(this, arguments);
import { shortcut, Widget, createWidget, extend } from "../../../core";
import { File } from "../input/file";
return BI.extend(conf, {
@shortcut()
export class MultifileEditor extends Widget {
static xtype = "bi.multifile_editor";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_UPLOADSTART = "EVENT_UPLOADSTART";
static EVENT_ERROR = "EVENT_ERROR";
static EVENT_PROGRESS = "EVENT_PROGRESS";
static EVENT_UPLOADED = "EVENT_UPLOADED";
_defaultConfig() {
const conf = super._defaultConfig(arguments);
return extend(conf, {
baseCls: (conf.baseCls || "") + " bi-multifile-editor",
multiple: false,
maxSize: -1, // 1024 * 1024
accept: "",
url: "",
});
},
}
render: function () {
var self = this, o = this.options;
this.file = BI.createWidget({
render() {
const { name, url, multiple, accept, maxSize, maxLength, title, errorText } = this.options;
this.file = createWidget({
type: "bi.file",
cls: "multifile-editor",
width: "100%",
height: "100%",
name: o.name,
url: o.url,
multiple: o.multiple,
accept: o.accept,
maxSize: o.maxSize,
maxLength: o.maxLength,
title: o.title,
errorText: o.errorText,
name,
url,
multiple,
accept,
maxSize,
maxLength,
title,
errorText,
});
this.file.on(BI.File.EVENT_CHANGE, function () {
self.fireEvent(BI.MultifileEditor.EVENT_CHANGE, arguments);
this.file.on(File.EVENT_CHANGE, (...args) => {
this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args);
});
this.file.on(BI.File.EVENT_UPLOADSTART, function () {
self.fireEvent(BI.MultifileEditor.EVENT_UPLOADSTART, arguments);
this.file.on(File.EVENT_UPLOADSTART, (...args) => {
this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args);
});
this.file.on(BI.File.EVENT_ERROR, function () {
self.fireEvent(BI.MultifileEditor.EVENT_ERROR, arguments);
this.file.on(File.EVENT_ERROR, (...args) => {
this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args);
});
this.file.on(BI.File.EVENT_PROGRESS, function () {
self.fireEvent(BI.MultifileEditor.EVENT_PROGRESS, arguments);
this.file.on(File.EVENT_PROGRESS, (...args) => {
this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args);
});
this.file.on(BI.File.EVENT_UPLOADED, function () {
self.fireEvent(BI.MultifileEditor.EVENT_UPLOADED, arguments);
this.file.on(File.EVENT_UPLOADED, (...args) => {
this.fireEvent(MultifileEditor.EVENT_CHANGE, ...args);
});
BI.createWidget({
createWidget({
type: "bi.absolute",
element: this,
items: [{
@ -66,50 +78,44 @@ BI.MultifileEditor = BI.inherit(BI.Widget, {
bottom: 0,
}],
});
},
}
_reset: function () {
_reset() {
this.file.reset();
},
}
setUrl: function (v) {
setUrl(v) {
this.file.setUrl(v);
},
}
setMaxFileLength: function (v) {
setMaxFileLength(v) {
this.file.setMaxFileLength(v);
},
}
select: function () {
select() {
this.file.select();
},
}
getQueue: function () {
getQueue() {
return this.file.getQueue();
},
}
getValue: function () {
getValue() {
return this.file.getValue();
},
}
upload: function () {
upload() {
this._reset();
this.file.upload();
},
}
sendFiles: function (files) {
sendFiles(files) {
this._reset();
this.file.sendFiles(files);
},
}
reset: function () {
reset() {
this._reset();
},
});
BI.MultifileEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.MultifileEditor.EVENT_UPLOADSTART = "EVENT_UPLOADSTART";
BI.MultifileEditor.EVENT_ERROR = "EVENT_ERROR";
BI.MultifileEditor.EVENT_PROGRESS = "EVENT_PROGRESS";
BI.MultifileEditor.EVENT_UPLOADED = "EVENT_UPLOADED";
BI.shortcut("bi.multifile_editor", BI.MultifileEditor);
}
}

250
src/base/single/editor/editor.textarea.js

@ -4,36 +4,50 @@
* @class BI.TextAreaEditor
* @extends BI.Single
*/
BI.TextAreaEditor = BI.inherit(BI.Single, {
_defaultConfig: function (conf) {
return BI.extend(BI.TextAreaEditor.superclass._defaultConfig.apply(), {
import { shortcut, Widget, Controller, createWidget, extend, isEmptyString, isKey, isNotEmptyString, isNotNull, trim, isFunction } from "../../../core";
import { Single } from "../0.single";
import { Bubbles } from "../../0.base";
@shortcut()
export class TextAreaEditor extends Single {
static xtype = "bi.textarea_editor";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_BLUR = "EVENT_BLUR";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_CONFIRM = "EVENT_CONFIRM";
static EVENT_EMPTY = "EVENT_EMPTY";
static EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
_defaultConfig(conf) {
return extend(super._defaultConfig(), {
baseCls: "bi-textarea-editor",
value: "",
errorText: "",
adjustYOffset: conf.simple ? 0 : 2,
adjustXOffset: 0,
offsetStyle: "left",
validationChecker: function () {
validationChecker: () => {
return true;
},
scrolly: true,
});
},
}
render: function () {
var o = this.options, self = this;
this.content = BI.createWidget({
render() {
const { scrolly, value, style } = this.options;
this.content = createWidget({
type: "bi.layout",
tagName: "textarea",
width: "100%",
height: "100%",
cls: "bi-textarea textarea-editor-content display-block",
css: o.scrolly ? null : {
css: scrolly ? null : {
overflowY: "hidden",
},
});
this.content.element.css({ resize: "none" });
BI.createWidget({
createWidget({
type: "bi.absolute",
element: this,
items: [{
@ -48,90 +62,90 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
}],
});
this.content.element.on("input propertychange", function (e) {
self._checkError();
self._checkWaterMark();
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CHANGE, self.getValue(), self);
self.fireEvent(BI.TextAreaEditor.EVENT_CHANGE);
if (BI.isEmptyString(self.getValue())) {
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, self.getValue(), self);
this.content.element.on("input propertychange", (e) => {
this._checkError();
this._checkWaterMark();
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.CHANGE, this.getValue(), this);
this.fireEvent(TextAreaEditor.EVENT_CHANGE);
if (isEmptyString(this.getValue())) {
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
}
});
this.content.element.focus(function () {
self._checkError();
self._focus();
self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) {
if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) {
BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
self.content.element.blur();
this.content.element.focus(() => {
this._checkError();
this._focus();
this.fireEvent(TextAreaEditor.EVENT_FOCUS);
Widget._renderEngine.createElement(document).bind("mousedown." + this.getName(), (e) => {
if (BI.DOM.isExist(this) && !this.element.__isMouseInBounds__(e)) {
Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName());
this.content.element.blur();
}
});
});
this.content.element.blur(function () {
self._setErrorVisible(false);
self._blur();
if (!self._isError()) {
self.fireEvent(BI.TextAreaEditor.EVENT_CONFIRM);
}
self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
this.content.element.blur(() => {
this._setErrorVisible(false);
this._blur();
if (!this._isError()) {
this.fireEvent(TextAreaEditor.EVENT_CONFIRM);
}
this.fireEvent(TextAreaEditor.EVENT_BLUR);
Widget._renderEngine.createElement(document).unbind("mousedown." + this.getName());
});
this.content.element.keydown(function () {
this.content.element.keydown(() => {
// 水印快速消失
self._checkWaterMark();
this._checkWaterMark();
});
this.content.element.keyup(function (e) {
self.fireEvent(BI.TextAreaEditor.EVENT_KEY_DOWN, e.keyCode);
this.content.element.keyup((e) => {
this.fireEvent(TextAreaEditor.EVENT_KEY_DOWN, e.keyCode);
});
this.content.element.click(function (e) {
this.content.element.click((e) => {
e.stopPropagation();
});
if (BI.isKey(o.value)) {
this.setValue(o.value);
if (isKey(value)) {
this.setValue(value);
}
if (BI.isNotNull(o.style)) {
this.setStyle(o.style);
if (isNotNull(style)) {
this.setStyle(style);
}
this._checkWaterMark();
},
}
_checkWaterMark: function () {
var self = this, o = this.options;
var val = this.getValue();
if (BI.isNotEmptyString(val)) {
_checkWaterMark() {
const { watermark, scrolly, invalid, disabled, height } = this.options;
const val = this.getValue();
if (isNotEmptyString(val)) {
this.watermark && this.watermark.destroy();
this.watermark = null;
} else {
if (BI.isNotEmptyString(o.watermark)) {
if (isNotEmptyString(watermark)) {
if (!this.watermark) {
this.watermark = BI.createWidget({
this.watermark = createWidget({
type: "bi.label",
cls: "bi-water-mark textarea-watermark",
textAlign: "left",
whiteSpace: o.scrolly ? "normal" : "nowrap",
text: o.watermark,
invalid: o.invalid,
disabled: o.disabled,
whiteSpace: scrolly ? "normal" : "nowrap",
text: watermark,
invalid,
disabled,
hgap: 6,
vgap: o.height > 24 ? 4 : 2,
height: o.height > 24 ? "" : o.height,
vgap: height > 24 ? 4 : 2,
height: height > 24 ? "" : height,
});
this.watermark.element.bind({
mousedown: function (e) {
if (self.isEnabled()) {
self.focus();
mousedown: (e) => {
if (this.isEnabled()) {
this.focus();
} else {
self.blur();
this.blur();
}
e.stopEvent();
},
click: function (e) {
click: (e) => {
e.stopPropagation();
},
});
BI.createWidget({
createWidget({
type: "bi.absolute",
element: this,
items: [{
@ -142,112 +156,104 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
}],
});
} else {
this.watermark.setText(o.watermark);
this.watermark.setValid(!o.invalid);
this.watermark.setEnable(!o.disabled);
this.watermark.setText(watermark);
this.watermark.setValid(!invalid);
this.watermark.setEnable(!disabled);
}
}
}
}
},
_isError: function () {
_isError() {
return this.isEnabled() && !this.options.validationChecker(this.getValue());
},
}
_checkError: function () {
var isError = this._isError();
_checkError() {
const isError = this._isError();
this._setErrorVisible(isError);
this.element[isError ? "addClass" : "removeClass"]("error");
},
}
_focus: function () {
_focus() {
this.content.element.addClass("textarea-editor-focus");
this._checkWaterMark();
if (BI.isEmptyString(this.getValue())) {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
if (isEmptyString(this.getValue())) {
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
}
}
},
_blur: function () {
_blur() {
this.content.element.removeClass("textarea-editor-focus");
this._checkWaterMark();
},
}
_setErrorVisible: function (b) {
var o = this.options;
var errorText = o.errorText;
if (BI.isFunction(errorText)) {
errorText = errorText(BI.trim(this.getValue()));
}
if (!this.disabledError && BI.isKey(errorText)) {
BI.Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, {
adjustYOffset: o.adjustYOffset,
adjustXOffset: o.adjustXOffset,
offsetStyle: o.offsetStyle,
_setErrorVisible(b) {
const { errorText, adjustYOffset, adjustXOffset, offsetStyle } = this.options;
if (isFunction(errorText)) {
errorText = errorText(trim(this.getValue()));
}
if (!this.disabledError && isKey(errorText)) {
Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, {
adjustYOffset,
adjustXOffset,
offsetStyle,
});
}
},
}
_defaultState: function () {
if (BI.isEmptyString(this.getValue())) {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
this.fireEvent(BI.TextAreaEditor.EVENT_EMPTY);
_defaultState() {
if (isEmptyString(this.getValue())) {
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
this.fireEvent(TextAreaEditor.EVENT_EMPTY);
}
}
},
focus: function () {
focus() {
this._focus();
this.content.element.focus();
},
}
blur: function () {
blur() {
this._blur();
this.content.element.blur();
},
}
getValue: function () {
getValue() {
return this.content.element.val();
},
}
setValue: function (value) {
setValue(value) {
this.content.element.val(value);
this._checkError();
this._checkWaterMark();
this._defaultState();
},
}
setStyle: function (style) {
setStyle(style) {
this.style = style;
this.element.css(style);
this.content.element.css(BI.extend({}, style, {
this.content.element.css(extend({}, style, {
color: style.color || BI.DOM.getContrastColor(BI.DOM.isRGBColor(style.backgroundColor) ? BI.DOM.rgb2hex(style.backgroundColor) : style.backgroundColor),
}));
},
}
getStyle: function () {
getStyle() {
return this.style;
},
}
setWatermark: function (v) {
setWatermark(v) {
this.options.watermark = v;
this._checkWaterMark();
},
}
_setValid: function (b) {
BI.TextAreaEditor.superclass._setValid.apply(this, arguments);
_setValid(b) {
super._setValid(arguments);
// this.content.setValid(b);
// this.watermark && this.watermark.setValid(b);
},
}
_setEnable: function (b) {
BI.TextAreaEditor.superclass._setEnable.apply(this, [b]);
_setEnable(b) {
super._setEnable(b);
this.content && (this.content.element[0].disabled = !b);
},
});
BI.TextAreaEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.TextAreaEditor.EVENT_BLUR = "EVENT_BLUR";
BI.TextAreaEditor.EVENT_FOCUS = "EVENT_FOCUS";
BI.TextAreaEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.TextAreaEditor.EVENT_EMPTY = "EVENT_EMPTY";
BI.TextAreaEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
BI.shortcut("bi.textarea_editor", BI.TextAreaEditor);
}
}

3
src/base/single/editor/index.js

@ -0,0 +1,3 @@
export { Editor } from "./editor";
export { MultifileEditor } from "./editor.multifile";
export { TextAreaEditor } from "./editor.textarea";

105
src/base/single/html/html.js

@ -3,9 +3,14 @@
* @class BI.Html
* @extends BI.Single
*/
BI.Html = BI.inherit(BI.Single, {
import { shortcut, isNumber, createWidget, isWidthOrHeight, isKey } from "../../../core";
import { Single } from "../0.single";
props: {
@shortcut()
export class Html extends Single {
static xtype = "bi.html";
props = {
baseCls: "bi-html",
textAlign: "left",
whiteSpace: "normal",
@ -19,57 +24,57 @@ BI.Html = BI.inherit(BI.Single, {
bgap: 0,
text: "",
highLight: false,
},
}
render: function () {
var self = this, o = this.options;
if (o.hgap + o.lgap > 0) {
render() {
const { vgap, hgap, lgap, rgap, tgap, bgap, height, lineHeight, maxWidth, textAlign, whiteSpace, handler, text, value, highLight } = this.options;
if (hgap + lgap > 0) {
this.element.css({
"padding-left": BI.pixFormat(o.hgap + o.lgap),
"padding-left": BI.pixFormat(hgap + lgap),
});
}
if (o.hgap + o.rgap > 0) {
if (hgap + rgap > 0) {
this.element.css({
"padding-right": BI.pixFormat(o.hgap + o.rgap),
"padding-right": BI.pixFormat(hgap + rgap),
});
}
if (o.vgap + o.tgap > 0) {
if (vgap + tgap > 0) {
this.element.css({
"padding-top": BI.pixFormat(o.vgap + o.tgap),
"padding-top": BI.pixFormat(vgap + tgap),
});
}
if (o.vgap + o.bgap > 0) {
if (vgap + bgap > 0) {
this.element.css({
"padding-bottom": BI.pixFormat(o.vgap + o.bgap),
"padding-bottom": BI.pixFormat(vgap + bgap),
});
}
if (BI.isNumber(o.height)) {
this.element.css({ lineHeight: BI.pixFormat(o.height) });
if (isNumber(height)) {
this.element.css({ lineHeight: BI.pixFormat(height) });
}
if (BI.isNumber(o.lineHeight)) {
this.element.css({ lineHeight: BI.pixFormat(o.lineHeight) });
if (isNumber(lineHeight)) {
this.element.css({ lineHeight: BI.pixFormat(lineHeight) });
}
if (BI.isWidthOrHeight(o.maxWidth)) {
this.element.css({ maxWidth: o.maxWidth });
if (isWidthOrHeight(maxWidth)) {
this.element.css({ maxWidth });
}
if (BI.isNumber(o.maxWidth)) {
this.element.css({ maxWidth: BI.pixFormat(o.maxWidth) })
if (isNumber(maxWidth)) {
this.element.css({ maxWidth: BI.pixFormat(maxWidth) });
}
this.element.css({
textAlign: o.textAlign,
whiteSpace: o.whiteSpace,
textOverflow: o.whiteSpace === "nowrap" ? "ellipsis" : "",
overflow: o.whiteSpace === "nowrap" ? "" : "auto",
textAlign,
whiteSpace,
textOverflow: whiteSpace === "nowrap" ? "ellipsis" : "",
overflow: whiteSpace === "nowrap" ? "" : "auto",
});
if (o.handler) {
this.text = BI.createWidget({
if (handler) {
this.text = createWidget({
type: "bi.layout",
tagName: "span",
});
this.text.element.click(function () {
o.handler(self.getValue());
this.text.element.click(() => {
handler(this.getValue());
});
BI.createWidget({
createWidget({
type: "bi.default",
element: this,
items: [this.text],
@ -78,40 +83,38 @@ BI.Html = BI.inherit(BI.Single, {
this.text = this;
}
if (BI.isKey(o.text)) {
this.setText(o.text);
} else if (BI.isKey(o.value)) {
this.setText(o.value);
if (isKey(text)) {
this.setText(text);
} else if (isKey(value)) {
this.setText(value);
}
if (o.highLight) {
if (highLight) {
this.doHighLight();
}
},
}
doHighLight: function () {
doHighLight() {
this.text.element.addClass("bi-high-light");
},
}
unHighLight: function () {
unHighLight() {
this.text.element.removeClass("bi-high-light");
},
}
setValue: function (text) {
BI.Html.superclass.setValue.apply(this, arguments);
setValue(text) {
super.setValue(text);
if (!this.isReadOnly()) {
this.setText(text);
}
},
}
setStyle: function (css) {
setStyle(css) {
this.text.element.css(css);
},
}
setText: function (text) {
BI.Html.superclass.setText.apply(this, arguments);
setText(text) {
super.setText(text);
this.options.text = text;
this.text.element.html(text);
},
});
BI.shortcut("bi.html", BI.Html);
}
}

23
src/base/single/icon/icon.js

@ -3,20 +3,25 @@
* @class BI.Icon
* @extends BI.Single
*/
BI.Icon = BI.inherit(BI.Single, {
_defaultConfig: function () {
var conf = BI.Icon.superclass._defaultConfig.apply(this, arguments);
import { shortcut, extend } from "../../../core";
import { Single } from "../0.single";
return BI.extend(conf, {
@shortcut()
export class Icon extends Single {
static xtype = "bi.icon";
_defaultConfig() {
const conf = super._defaultConfig(arguments);
return extend(conf, {
tagName: "i",
baseCls: (conf.baseCls || "") + " x-icon b-font horizon-center display-block",
});
},
}
render: function () {
render() {
if (BI.isIE9Below && BI.isIE9Below()) {
this.element.addClass("hack");
}
},
});
BI.shortcut("bi.icon", BI.Icon);
}
}

6
src/base/single/index.js

@ -1,4 +1,10 @@
export { Single } from "./0.single";
export { Text } from "./1.text";
export { PureText } from "./text.pure";
export { Icon } from "./icon/icon";
export { Html } from "./html/html";
export { A } from "./a/a";
export * from "./tip";
export * from "./label";
export * from "./input";
export * from "./editor";

358
src/base/single/input/file.js

@ -6,26 +6,29 @@
* @extends BI.Single
* @abstract
*/
((function (document) {
/**
import { shortcut, Widget, some, extend } from "../../../core";
import { Msg } from "../../foundation/message";
const document = _global.document || {};
/**
* @description normalize input.files. create if not present, add item method if not present
* @param Object generated wrap object
* @return Object the wrap object itself
*/
var F = ((function (item) {
return function (input) {
var files = input.files || [input];
const F = (((item) => {
return (input) => {
const files = input.files || [input];
if (!files.item) {
files.item = item;
}
return files;
};
})(function (i) {
})((i) => {
return this[i];
}));
}));
var event = {
const event = {
/**
* @description add an event via addEventListener or attachEvent
@ -35,12 +38,12 @@
* @return Object noswfupload.event
*/
add: document.addEventListener ?
function (node, name, callback) {
(node, name, callback) => {
node.addEventListener(name, callback, false);
return this;
} :
function (node, name, callback) {
(node, name, callback) => {
node.attachEvent("on" + name, callback);
return this;
@ -54,12 +57,12 @@
* @return Object noswfupload.event
*/
del: document.removeEventListener ?
function (node, name, callback) {
(node, name, callback) => {
node.removeEventListener(name, callback, false);
return this;
} :
function (node, name, callback) {
(node, name, callback) => {
node.detachEvent("on" + name, callback);
return this;
@ -70,7 +73,7 @@
* @param void generated event or undefined
* @return Boolean false
*/
stop: function (e) {
stop(e) {
if (!e) {
if (self.event) {
event.returnValue = !(event.cancelBubble = true);
@ -82,15 +85,15 @@
return false;
},
};
};
var sendFile = (function (toString) {
var split = "onabort.onerror.onloadstart.onprogress".split("."),
const sendFile = (((toString) => {
const split = "onabort.onerror.onloadstart.onprogress".split("."),
length = split.length,
CRLF = "\r\n",
xhr = new XMLHttpRequest,
CRLF = "\r\n";
let xhr = new XMLHttpRequest,
sendFile;
function multipart(boundary, name, file) {
const multipart = (boundary, name, file) => {
return "--".concat(
boundary, CRLF,
"Content-Disposition: form-data; name=\"", name, "\"; filename=\"", _global.encodeURIComponent(file.fileName), "\"", CRLF,
@ -100,15 +103,15 @@
"--", boundary, "--", CRLF
);
}
function isFunction (Function) {
const isFunction = (Function) => {
return toString.call(Function) === "[object Function]";
}
// FireFox 3+, Safari 4 beta (Chrome 2 beta file is buggy and will not work)
if (xhr.upload || xhr.sendAsBinary) {
sendFile = function (handler, maxSize, width, height) {
var current = handler.current;
sendFile = (handler, maxSize, width, height) => {
const current = handler.current;
if (-1 < maxSize && maxSize < handler.file.fileSize) {
if (isFunction(handler.onerror)) {
handler.onerror();
@ -116,46 +119,44 @@
return;
}
for (var xhr = new XMLHttpRequest,
const xhr = new XMLHttpRequest,
upload = xhr.upload || {
addEventListener: function (event, callback) {
addEventListener(event, callback) {
this["on" + event] = callback;
},
},
i = 0;
i < length;
i++
) {
};
for (let i = 0;i < length;i++) {
upload.addEventListener(
split[i].substring(2),
// eslint-disable-next-line no-loop-func
(function (event) {
return function (rpe) {
(((event) => {
return (rpe) => {
if (isFunction(handler[event])) {
handler[event](rpe, xhr);
}
};
}(split[i])),
})(split[i])),
false
);
}
upload.addEventListener(
"load",
function (rpe) {
(rpe) => {
if (handler.onreadystatechange === false) {
if (isFunction(handler.onload)) {
handler.onload(rpe, xhr);
}
} else {
setTimeout(function () {
const callback = () => {
if (xhr.readyState === 4) {
if (isFunction(handler.onload)) {
handler.onload(rpe, xhr);
}
} else {
setTimeout(arguments.callee, 15);
setTimeout(callback, 15);
}
}, 15);
}
setTimeout(callback, 15);
}
},
false
@ -164,21 +165,21 @@
filename: _global.encodeURIComponent(handler.file.fileName),
}), true);
if (!xhr.upload) {
var rpe = { loaded: 0, total: handler.file.fileSize || handler.file.size, simulation: true };
rpe.interval = setInterval(function () {
const rpe = { loaded: 0, total: handler.file.fileSize || handler.file.size, simulation: true };
rpe.interval = setInterval(() => {
rpe.loaded += 1024 / 4;
if (rpe.total <= rpe.loaded) {
rpe.loaded = rpe.total;
}
upload.onprogress(rpe);
}, 100);
xhr.onabort = function () {
xhr.onabort = () => {
upload.onabort({});
};
xhr.onerror = function () {
xhr.onerror = () => {
upload.onerror({});
};
xhr.onreadystatechange = function () {
xhr.onreadystatechange = () => {
switch (xhr.readyState) {
case 2:
case 3:
@ -194,7 +195,7 @@
upload.onprogress(rpe);
if (199 < xhr.status && xhr.status < 400) {
upload.onload({});
var attachO = BI.jsonDecode(xhr.responseText);
const attachO = BI.jsonDecode(xhr.responseText);
attachO.filename = handler.file.fileName;
if (handler.file.type.indexOf("image") !== -1) {
attachO.attach_type = "image";
@ -210,10 +211,10 @@
};
upload.onloadstart(rpe);
} else {
xhr.onreadystatechange = function () {
xhr.onreadystatechange = () => {
switch (xhr.readyState) {
case 4:
var attachO = BI.jsonDecode(xhr.responseText);
const attachO = BI.jsonDecode(xhr.responseText);
if (handler.file.type.indexOf("image") !== -1) {
attachO.attach_type = "image";
}
@ -233,7 +234,7 @@
upload.onloadstart();
}
}
var boundary = "AjaxUploadBoundary" + (new Date).getTime();
const boundary = "AjaxUploadBoundary" + (new Date).getTime();
xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
if (handler.file.getAsBinary) {
xhr[xhr.sendAsBinary ? "sendAsBinary" : "send"](multipart(boundary, handler.name, handler.file));
@ -241,7 +242,7 @@
xhr.setRequestHeader("Content-Type", "multipart/form-data");
// xhr.setRequestHeader("X-Name", handler.name);
// xhr.setRequestHeader("X-File-Name", handler.file.fileName);
var form = new FormData();
const form = new FormData();
form.append("FileData", handler.file);
xhr.send(form);
}
@ -250,11 +251,12 @@
};
} else {
// Internet Explorer, Opera, others
sendFile = function (handler, maxSize, width, height) {
var current = handler.current, iframe, form;
var url = handler.url.concat(-1 === handler.url.indexOf("?") ? "?" : "&", "AjaxUploadFrame=true"),
sendFile = (handler, maxSize, width, height) => {
const current = handler.current;
let iframe, form;
const url = handler.url.concat(-1 === handler.url.indexOf("?") ? "?" : "&", "AjaxUploadFrame=true"),
rpe = {
loaded: 1, total: 100, simulation: true, interval: setInterval(function () {
loaded: 1, total: 100, simulation: true, interval: setInterval(() => {
if (rpe.loaded < rpe.total) {
++rpe.loaded;
}
@ -264,15 +266,15 @@
}, 100),
},
target = ["AjaxUpload", (new Date).getTime(), String(Math.random()).substring(2)].join("_");
function onload() {
const onload = () => {
iframe.onreadystatechange = iframe.onload = iframe.onerror = null;
form.parentNode.removeChild(form);
form = null;
clearInterval(rpe.interval);
// rpe.loaded = rpe.total;
const responseText = (iframe.contentWindow.document || iframe.contentWindow.contentDocument).body.innerHTML;
try {
var responseText = (iframe.contentWindow.document || iframe.contentWindow.contentDocument).body.innerHTML;
var attachO = BI.jsonDecode(responseText);
const attachO = BI.jsonDecode(responseText);
if (handler.file.type.indexOf("image") !== -1) {
attachO.attach_type = "image";
}
@ -300,10 +302,10 @@
}
try { // IE < 8 does not accept enctype attribute ...
var form = document.createElement("<form enctype=\"multipart/form-data\"></form>"),
const form = document.createElement("<form enctype=\"multipart/form-data\"></form>"),
iframe = handler.iframe || (handler.iframe = document.createElement("<iframe id=\"" + target + "\" name=\"" + target + "\" src=\"" + url + "\"></iframe>"));
} catch (e) {
var form = document.createElement("form"),
const form = document.createElement("form"),
iframe = handler.iframe || (handler.iframe = document.createElement("iframe"));
form.setAttribute("enctype", "multipart/form-data");
iframe.setAttribute("name", iframe.id = target);
@ -312,12 +314,12 @@
iframe.style.position = "absolute";
iframe.style.left = iframe.style.top = "-10000px";
iframe.onload = onload;
iframe.onerror = function (event) {
iframe.onerror = (event) => {
if (isFunction(handler.onerror)) {
handler.onerror(rpe, event || _global.event);
}
};
iframe.onreadystatechange = function () {
iframe.onreadystatechange = () => {
if (/loaded|complete/i.test(iframe.readyState)) {
onload();
@ -344,7 +346,7 @@
if (isFunction(handler.onloadstart)) {
handler.onloadstart(rpe, {});
}
var d = document.body || document.documentElement;
const d = document.body || document.documentElement;
d.appendChild(iframe);
d.appendChild(form);
form.submit();
@ -355,10 +357,10 @@
xhr = null;
return sendFile;
}(Object.prototype.toString));
})(Object.prototype.toString));
function sendFiles(handler, maxSize, width, height) {
var length = handler.files.length,
const sendFiles = (handler, maxSize, width, height) => {
const length = handler.files.length,
onload = handler.onload,
onloadstart = handler.onloadstart;
handler.current = 0;
@ -371,24 +373,23 @@
handler.current = 0;
if (length && handler.files[0].fileSize !== -1) {
handler.file = handler.files[handler.current];
sendFile(handler, maxSize, width, height).onload = function (rpe, xhr) {
const callback = (rpe, xhr) => {
handler.onloadstart = null;
handler.sent += (handler.files[handler.current].fileSize || handler.files[handler.current].size);
if (++handler.current < length) {
handler.file = handler.files[handler.current];
sendFile(handler, maxSize, width, height).onload = arguments.callee;
sendFile(handler, maxSize, width, height).onload = callback;
} else if (onload) {
handler.onloadstart = onloadstart;
handler.onload = onload;
handler.onload(rpe, xhr);
}
};
sendFile(handler, maxSize, width, height).onload = callback;
} else if (length) {
handler.total = length * 100;
handler.file = handler.files[handler.current];
sendFile(handler, maxSize, width, height).onload = function (rpe, xhr) {
var callee = arguments.callee;
const callback = (rpe, xhr) => {
handler.onloadstart = null;
handler.sent += 100;
if (++handler.current < length) {
@ -396,12 +397,12 @@
handler.iframe.parentNode.removeChild(handler.iframe);
handler.iframe = null;
}
setTimeout(function () {
setTimeout(() => {
handler.file = handler.files[handler.current];
sendFile(handler, maxSize, width, height).onload = callee;
sendFile(handler, maxSize, width, height).onload = callback;
}, 15);
} else if (onload) {
setTimeout(function () {
setTimeout(() => {
handler.iframe.parentNode.removeChild(handler.iframe);
handler.iframe = null;
handler.onloadstart = onloadstart;
@ -410,31 +411,32 @@
}, 15);
}
};
sendFile(handler, maxSize, width, height).onload = callback;
}
return handler;
}
}
var r1 = /\.([^.]+)$/; // .png
var r2 = /\/([^/]+)$/; // image/png
const r1 = /\.([^.]+)$/; // .png
const r2 = /\/([^/]+)$/; // image/png
/**
/**
* 校验文件类型是否合法,同时兼容旧版形式
* @param fileName
* @param fileType
* @returns {boolean}
*/
function fileTypeValidate(fileName, fileType) {
const fileTypeValidate = (fileName, fileType) => {
if (!fileType) {
return true;
}
var mimes = fileType.split(",");
const mimes = fileType.split(",");
if (mimes[0] === fileType) {
mimes = (fileType + "").split(";");
}
return BI.some(mimes, function (index, mime) {
var matches;
return some(mimes, (index, mime) => {
let matches;
matches = mime.match(r1);
if (matches) {
return fileName.toLowerCase().indexOf(matches[1]) > -1;
@ -444,13 +446,22 @@
return matches[1] === "*" ? true : fileName.toLowerCase().indexOf(matches[1]) > -1;
}
});
}
}
@shortcut()
export class File extends Widget {
static xtype = "bi.file";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_UPLOADSTART = "EVENT_UPLOADSTART";
static EVENT_ERROR = "EVENT_ERROR";
static EVENT_PROGRESS = "EVENT_PROGRESS";
static EVENT_UPLOADED = "EVENT_UPLOADED";
BI.File = BI.inherit(BI.Widget, {
_defaultConfig: function () {
var conf = BI.File.superclass._defaultConfig.apply(this, arguments);
_defaultConfig() {
const conf = super._defaultConfig(arguments);
return BI.extend(conf, {
return extend(conf, {
baseCls: (conf.baseCls || "") + " bi-file display-block",
tagName: "input",
attributes: {
@ -464,39 +475,39 @@
maxLength: -1, // 无限制, 与multiple配合使用
errorText: BI.emptyFn,
});
},
}
render: function () {
var o = this.options;
if (o.multiple === true) {
render() {
const { multiple, name, title, accept } = this.options;
if (multiple === true) {
this.element.attr("multiple", "multiple");
}
this.element.attr("name", o.name || this.getName());
this.element.attr("title", o.title || "");
this.element.attr("accept", o.accept);
},
this.element.attr("name", name || this.getName());
this.element.attr("title", title || "");
this.element.attr("accept", accept);
}
created: function () {
var self = this, o = this.options;
created() {
const { maxSize, url, accept } = this.options;
// create the noswfupload.wrap Object
// wrap.maxSize 文件大小限制
// wrap.maxLength 文件个数限制
var _wrap = this.wrap = this._wrap(this.element[0], o.maxSize);
const _wrap = this.wrap = this._wrap(this.element[0], maxSize);
// fileType could contain whatever text but filter checks *.{extension}
// if present
// handlers
// handlerszhe
_wrap.onloadstart = function (rpe, xhr) {
self.fireEvent(BI.File.EVENT_UPLOADSTART, arguments);
_wrap.onloadstart = (...args) => {
this.fireEvent(File.EVENT_UPLOADSTART, ...args);
};
_wrap.onprogress = function (rpe, xhr) {
_wrap.onprogress = (rpe, xhr) => {
// percent for each bar
// fileSize is -1 only if browser does not support file info access
// this if splits recent browsers from others
if (this.file.fileSize !== -1) {
if (_wrap.file.fileSize !== -1) {
// simulation property indicates when the progress event is fake
if (rpe.simulation) {
// empty
@ -509,7 +520,7 @@
// files sent via Ajax (XMLHttpRequest)
// We can still show some information
}
self.fireEvent(BI.File.EVENT_PROGRESS, {
this.fireEvent(File.EVENT_PROGRESS, {
file: this.file,
total: rpe.total,
loaded: rpe.loaded,
@ -518,79 +529,78 @@
};
// generated if there is something wrong during upload
_wrap.onerror = function () {
_wrap.onerror = () => {
// just inform the user something was wrong
self.fireEvent(BI.File.EVENT_ERROR);
this.fireEvent(File.EVENT_ERROR);
};
// generated when every file has been sent (one or more, it does not
// matter)
_wrap.onload = function (rpe, xhr) {
var self_ = this;
_wrap.onload = (rpe, xhr) => {
// just show everything is fine ...
// ... and after a second reset the component
setTimeout(function () {
self_.clean(); // remove files from list
self_.hide(); // hide progress bars and enable input file
setTimeout(() => {
_wrap.clean(); // remove files from list
_wrap.hide(); // hide progress bars and enable input file
// enable again the submit button/element
}, 100);
if (200 > xhr.status || xhr.status > 399) {
BI.Msg.toast(BI.i18nText("BI-Upload_File_Error"), { level: "error" });
self.fireEvent(BI.File.EVENT_ERROR);
Msg.toast(BI.i18nText("BI-Upload_File_Error"), { level: "error" });
this.fireEvent(File.EVENT_ERROR);
return;
}
var error = BI.some(_wrap.attach_array, function (index, attach) {
const error = some(_wrap.attach_array, (index, attach) => {
if (attach.errorCode) {
BI.Msg.toast(BI.i18nText(attach.errorMsg), { level: "error" });
self.fireEvent(BI.File.EVENT_ERROR, attach);
Msg.toast(BI.i18nText(attach.errorMsg), { level: "error" });
this.fireEvent(File.EVENT_ERROR, attach);
return true;
}
});
!error && self.fireEvent(BI.File.EVENT_UPLOADED);
!error && this.fireEvent(File.EVENT_UPLOADED);
};
_wrap.url = o.url;
_wrap.fileType = o.accept; // 文件类型限制
_wrap.url = url;
_wrap.fileType = accept; // 文件类型限制
_wrap.attach_array = [];
_wrap.attach_names = [];
_wrap.attachNum = 0;
},
}
_events: function (wrap) {
var self = this, o = this.options;
event.add(wrap.dom.input, "change", function () {
event.del(wrap.dom.input, "change", arguments.callee);
var input = wrap.dom.input.cloneNode(true);
var files = F(wrap.dom.input);
if (o.maxLength !== -1 && o.maxLength < files.length) {
self.fireEvent(BI.File.EVENT_ERROR, {
_events(wrap) {
const { maxLength, errorText } = this.options;
const callback = () => {
event.del(wrap.dom.input, "change", callback);
const input = wrap.dom.input.cloneNode(true);
const files = F(wrap.dom.input);
if (maxLength !== -1 && maxLength < files.length) {
this.fireEvent(File.EVENT_ERROR, {
errorType: 2,
});
} else {
for (var i = 0; i < files.length; i++) {
var item = files.item(i);
var tempFile = item.value || item.name;
var value = item.fileName || (item.fileName = tempFile.split("\\").pop()),
for (let i = 0; i < files.length; i++) {
const item = files.item(i);
const tempFile = item.value || item.name;
const value = item.fileName || (item.fileName = tempFile.split("\\").pop()),
size = item.fileSize || item.size;
var validateFileType = fileTypeValidate(value, wrap.fileType);
const validateFileType = fileTypeValidate(value, wrap.fileType);
if (!validateFileType) {
// 文件类型不支持
BI.Msg.toast(o.errorText({
Msg.toast(errorText({
errorType: 0,
file: item,
}) || BI.i18nText("BI-Upload_File_Type_Error", wrap.fileType), { level: "error" });
self.fireEvent(BI.File.EVENT_ERROR, {
this.fireEvent(File.EVENT_ERROR, {
errorType: 0,
file: item,
});
} else if (wrap.maxSize !== -1 && size && wrap.maxSize < size) {
// 文件大小不支持
BI.Msg.toast(o.errorText({
Msg.toast(errorText({
errorType: 1,
file: item,
}) || BI.i18nText("BI-Upload_File_Size_Error", Math.ceil(wrap.maxSize / 1024 / 1024)), { level: "error" });
self.fireEvent(BI.File.EVENT_ERROR, {
this.fireEvent(File.EVENT_ERROR, {
errorType: 1,
file: item,
});
@ -599,23 +609,24 @@
}
}
}
wrap.files.length > 0 && self.fireEvent(BI.File.EVENT_CHANGE, {
wrap.files.length > 0 && this.fireEvent(File.EVENT_CHANGE, {
files: wrap.files,
});
input.value = "";
wrap.dom.input.parentNode.replaceChild(input, wrap.dom.input);
wrap.dom.input = input;
event.add(wrap.dom.input, "change", arguments.callee);
});
event.add(wrap.dom.input, "change", callback);
}
event.add(wrap.dom.input, "change", callback);
return wrap;
},
}
_wrap: function () {
var o = this.options;
_wrap() {
const { multiple, maxSize, maxLength } = this.options;
// be sure input accept multiple files
var input = this.element[0];
if (o.multiple === true) {
const input = this.element[0];
if (multiple === true) {
this.element.attr("multiple", "multiple");
}
input.value = "";
@ -630,21 +641,21 @@
},
name: input.name, // name to send for each file ($_FILES[{name}] in the server)
// maxSize is the maximum amount of bytes for each file
maxSize: o.maxSize ? o.maxSize >> 0 : -1,
maxLength: o.maxLength,
maxSize: maxSize ? maxSize >> 0 : -1,
maxLength,
files: [], // file list
// remove every file from the noswfupload component
clean: function () {
clean() {
this.files = [];
},
// upload one file a time (which make progress possible rather than all files in one shot)
// the handler is an object injected into the wrap one, could be the wrap itself or
// something like {onload:function(){alert("OK")},onerror:function(){alert("Error")}, etc ...}
upload: function (handler) {
upload(handler) {
if (handler) {
for (var key in handler) {
for (let key in handler) {
this[key] = handler[key];
}
}
@ -654,7 +665,7 @@
},
// hide progress bar (total + current) and enable files selection
hide: function () {
hide() {
if (this.dom.disabled) {
this.dom.disabled = false;
this.dom.input.removeAttribute("disabled");
@ -664,76 +675,69 @@
// show progress bar and disable file selection (used during upload)
// total and current are pixels used to style bars
// totalProp and currentProp are properties to change, "height" by default
show: function (total, current, totalProp, currentProp) {
show(total, current, totalProp, currentProp) {
if (!this.dom.disabled) {
this.dom.disabled = true;
this.dom.input.setAttribute("disabled", "disabled");
}
},
});
},
}
setUrl: function(v) {
setUrl(v) {
this.options.url = v;
if (this.wrap) {
this.wrap.url = v;
}
},
}
setMaxFileLength: function (v) {
setMaxFileLength(v) {
this.options.maxLength = v;
if (this.wrap) {
this.wrap.maxLength = v;
}
},
}
select: function () {
this.wrap && BI.Widget._renderEngine.createElement(this.wrap.dom.input).click();
},
select() {
this.wrap && Widget._renderEngine.createElement(this.wrap.dom.input).click();
}
upload: function (handler) {
upload(handler) {
this.wrap && this.wrap.upload(handler);
},
}
getValue: function () {
getValue() {
return this.wrap ? this.wrap.attach_array : [];
},
}
getQueue: function () {
getQueue() {
return this.wrap.files;
},
}
reset: function () {
reset() {
if (this.wrap) {
this.wrap.attach_array = [];
this.wrap.attach_names = [];
this.wrap.attachNum = 0;
}
},
}
sendFiles: function (files) {
sendFiles(files) {
if (!this.wrap) return;
this.wrap.dom.input.files = files;
var event = new CustomEvent("change");
const event = new CustomEvent("change");
this.wrap.dom.input.dispatchEvent(event);
},
}
_setEnable: function (enable) {
BI.File.superclass._setEnable.apply(this, arguments);
_setEnable(enable) {
super._setEnable(arguments);
if (enable === true) {
this.element.removeAttr("disabled");
} else {
this.element.attr("disabled", "disabled");
}
},
});
BI.File.EVENT_CHANGE = "EVENT_CHANGE";
BI.File.EVENT_UPLOADSTART = "EVENT_UPLOADSTART";
BI.File.EVENT_ERROR = "EVENT_ERROR";
BI.File.EVENT_PROGRESS = "EVENT_PROGRESS";
BI.File.EVENT_UPLOADED = "EVENT_UPLOADED";
BI.shortcut("bi.file", BI.File);
})(_global.document || {}));
}
}

2
src/base/single/input/index.js

@ -0,0 +1,2 @@
export { Input } from "./input";
export { File } from "./file";

341
src/base/single/input/input.js

@ -4,237 +4,263 @@
* @extends BI.Single
* @type {*|void|Object}
*/
BI.Input = BI.inherit(BI.Single, {
_defaultConfig: function () {
var conf = BI.Input.superclass._defaultConfig.apply(this, arguments);
import { shortcut, Controller, extend, debounce, bind, isNull, isEmptyString, isKey, delay, trim, isEqual, nextTick, isEndWithBlank } from "../../../core";
import { Single } from "../0.single";
return BI.extend(conf, {
@shortcut()
export class Input extends Single {
static xtype = "bi.input";
static EVENT_CHANGE = "EVENT_CHANGE";
static EVENT_FOCUS = "EVENT_FOCUS";
static EVENT_CLICK = "EVENT_CLICK";
static EVENT_BLUR = "EVENT_BLUR";
static EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
static EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN";
static EVENT_SPACE = "EVENT_SPACE";
static EVENT_BACKSPACE = "EVENT_BACKSPACE";
static EVENT_START = "EVENT_START";
static EVENT_PAUSE = "EVENT_PAUSE";
static EVENT_STOP = "EVENT_STOP";
static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
static EVENT_CONFIRM = "EVENT_CONFIRM";
static EVENT_REMOVE = "EVENT_REMOVE";
static EVENT_EMPTY = "EVENT_EMPTY";
static EVENT_VALID = "EVENT_VALID";
static EVENT_ERROR = "EVENT_ERROR";
static EVENT_ENTER = "EVENT_ENTER";
static EVENT_RESTRICT = "EVENT_RESTRICT";
_defaultConfig() {
const conf = super._defaultConfig(arguments);
return extend(conf, {
baseCls: (conf.baseCls || "") + " bi-input display-block overflow-dot",
tagName: "input",
validationChecker: BI.emptyFn,
quitChecker: BI.emptyFn, // 按确定键能否退出编辑
allowBlank: false,
});
},
}
render: function () {
var self = this;
var ctrlKey = false;
var keyCode = null;
var inputEventValid = false;
var _keydown = BI.debounce(function (keyCode) {
self.onKeyDown(keyCode, ctrlKey);
self._keydown_ = false;
render() {
let ctrlKey = false;
let keyCode = null;
let inputEventValid = false;
const _keydown = debounce((keyCode) => {
this.onKeyDown(keyCode, ctrlKey);
this._keydown_ = false;
}, BI.EVENT_RESPONSE_TIME);
var _clk = BI.debounce(BI.bind(this._click, this), BI.EVENT_RESPONSE_TIME, {
const _clk = debounce(bind(this._click, this), BI.EVENT_RESPONSE_TIME, {
"leading": true,
"trailing": false,
});
this._focusDebounce = BI.debounce(BI.bind(this._focus, this), BI.EVENT_RESPONSE_TIME, {
this._focusDebounce = debounce(bind(this._focus, this), BI.EVENT_RESPONSE_TIME, {
"leading": true,
"trailing": false,
});
this._blurDebounce = BI.debounce(BI.bind(this._blur, this), BI.EVENT_RESPONSE_TIME, {
this._blurDebounce = debounce(bind(this._blur, this), BI.EVENT_RESPONSE_TIME, {
"leading": true,
"trailing": false,
});
this.element
.keydown(function (e) {
.keydown((e) => {
inputEventValid = false;
ctrlKey = e.ctrlKey || e.metaKey; // mac的cmd支持一下
keyCode = e.keyCode;
self.fireEvent(BI.Input.EVENT_QUICK_DOWN, arguments);
this.fireEvent(Input.EVENT_QUICK_DOWN, e);
})
.keyup(function (e) {
.keyup((e) => {
keyCode = null;
if (!(inputEventValid && e.keyCode === BI.KeyCode.ENTER)) {
self._keydown_ = true;
this._keydown_ = true;
_keydown(e.keyCode);
}
})
.on("input propertychange", function (e) {
.on("input propertychange", (e) => {
// 输入内容全选并直接删光,如果按键没放开就失去焦点不会触发keyup,被focusout覆盖了
// 其中propertychange在元素属性发生改变的时候就会触发 是为了兼容IE8
// 通过keyCode判断会漏掉输入法点击输入(右键粘贴暂缓)
var originalEvent = e.originalEvent;
if (BI.isNull(originalEvent.propertyName) || originalEvent.propertyName === "value") {
const originalEvent = e.originalEvent;
if (isNull(originalEvent.propertyName) || originalEvent.propertyName === "value") {
inputEventValid = true;
self._keydown_ = true;
this._keydown_ = true;
_keydown(keyCode);
keyCode = null;
}
})
.click(function (e) {
.click((e) => {
e.stopPropagation();
_clk();
})
.mousedown(function (e) {
self.element.val(self.element.val());
.mousedown((e) => {
this.element.val(this.element.val());
})
.focus(function (e) { // 可以不用冒泡
self._focusDebounce();
.focus((e) => { // 可以不用冒泡
this._focusDebounce();
})
.blur(function (e) {
.blur((e) => {
// DEC-14919 IE11在浏览器重新获得焦点之后会先触发focusout再触发focus,要保持先获得焦点再失去焦点的顺序不变,因此采用blur
self._blurDebounce();
this._blurDebounce();
});
if (BI.isKey(this.options.value) || BI.isEmptyString(this.options.value)) {
if (isKey(this.options.value) || isEmptyString(this.options.value)) {
this.setValue(this.options.value);
}
},
}
_focus: function () {
_focus() {
this.element.addClass("bi-input-focus");
this._checkValidationOnValueChange();
this._isEditing = true;
if (this.getValue() === "") {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
this.fireEvent(BI.Input.EVENT_EMPTY);
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
this.fireEvent(Input.EVENT_EMPTY);
}
this.fireEvent(Input.EVENT_FOCUS);
}
_blur() {
const blur = () => {
if (!this.isValid() && this.options.quitChecker.apply(this, [trim(this.getValue())]) !== false) {
this.element.val(this._lastValidValue ? this._lastValidValue : "");
this._checkValidationOnValueChange();
this._defaultState();
}
this.element.removeClass("bi-input-focus");
this._isEditing = false;
this._start = false;
if (this.isValid()) {
const lastValidValue = this._lastValidValue;
this._lastValidValue = this.getValue();
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.CONFIRM, this.getValue(), this);
this.fireEvent(Input.EVENT_CONFIRM);
if (this._lastValidValue !== lastValidValue) {
this.fireEvent(Input.EVENT_CHANGE_CONFIRM);
}
}
this.fireEvent(Input.EVENT_BLUR);
}
this.fireEvent(BI.Input.EVENT_FOCUS);
},
_blur: function () {
var self = this;
if (self._keydown_ === true) {
BI.delay(blur, BI.EVENT_RESPONSE_TIME);
if (this._keydown_ === true) {
delay(blur, BI.EVENT_RESPONSE_TIME);
} else {
blur();
}
}
function blur () {
if (!self.isValid() && self.options.quitChecker.apply(self, [BI.trim(self.getValue())]) !== false) {
self.element.val(self._lastValidValue ? self._lastValidValue : "");
self._checkValidationOnValueChange();
self._defaultState();
}
self.element.removeClass("bi-input-focus");
self._isEditing = false;
self._start = false;
if (self.isValid()) {
var lastValidValue = self._lastValidValue;
self._lastValidValue = self.getValue();
self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CONFIRM, self.getValue(), self);
self.fireEvent(BI.Input.EVENT_CONFIRM);
if (self._lastValidValue !== lastValidValue) {
self.fireEvent(BI.Input.EVENT_CHANGE_CONFIRM);
}
}
self.fireEvent(BI.Input.EVENT_BLUR);
}
},
_click: function () {
_click() {
if (this._isEditing !== true) {
this.selectAll();
this.fireEvent(BI.Input.EVENT_CLICK);
this.fireEvent(Input.EVENT_CLICK);
}
}
},
onClick: function () {
onClick() {
this._click();
},
}
onKeyDown: function (keyCode, ctrlKey) {
if (!this.isValid() || BI.trim(this._lastChangedValue) !== BI.trim(this.getValue())) {
onKeyDown(keyCode, ctrlKey) {
if (!this.isValid() || trim(this._lastChangedValue) !== trim(this.getValue())) {
this._checkValidationOnValueChange();
}
if (this.isValid() && BI.trim(this.getValue()) !== "") {
if (BI.trim(this.getValue()) !== this._lastValue && (!this._start || BI.isNull(this._lastValue) || this._lastValue === "")
if (this.isValid() && trim(this.getValue()) !== "") {
if (trim(this.getValue()) !== this._lastValue && (!this._start || isNull(this._lastValue) || this._lastValue === "")
|| (this._pause === true && !/(\s|\u00A0)$/.test(this.getValue()))) {
this._start = true;
this._pause = false;
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STARTEDIT, this.getValue(), this);
this.fireEvent(BI.Input.EVENT_START);
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.STARTEDIT, this.getValue(), this);
this.fireEvent(Input.EVENT_START);
}
}
if (BI.isEqual(keyCode, BI.KeyCode.ENTER)) {
if (this.isValid() || this.options.quitChecker.apply(this, [BI.trim(this.getValue())]) !== false) {
if (isEqual(keyCode, BI.KeyCode.ENTER)) {
if (this.isValid() || this.options.quitChecker.apply(this, [trim(this.getValue())]) !== false) {
this.blur();
this.fireEvent(BI.Input.EVENT_ENTER);
this.fireEvent(Input.EVENT_ENTER);
} else {
this.fireEvent(BI.Input.EVENT_RESTRICT);
this.fireEvent(Input.EVENT_RESTRICT);
}
}
if (BI.isEqual(keyCode, BI.KeyCode.SPACE)) {
this.fireEvent(BI.Input.EVENT_SPACE);
if (isEqual(keyCode, BI.KeyCode.SPACE)) {
this.fireEvent(Input.EVENT_SPACE);
}
if (BI.isEqual(keyCode, BI.KeyCode.BACKSPACE) && this._lastValue === "") {
this.fireEvent(BI.Input.EVENT_REMOVE);
if (isEqual(keyCode, BI.KeyCode.BACKSPACE) && this._lastValue === "") {
this.fireEvent(Input.EVENT_REMOVE);
}
if (BI.isEqual(keyCode, BI.KeyCode.BACKSPACE) || BI.isEqual(keyCode, BI.KeyCode.DELETE)) {
this.fireEvent(BI.Input.EVENT_BACKSPACE);
if (isEqual(keyCode, BI.KeyCode.BACKSPACE) || isEqual(keyCode, BI.KeyCode.DELETE)) {
this.fireEvent(Input.EVENT_BACKSPACE);
}
this.fireEvent(BI.Input.EVENT_KEY_DOWN, arguments);
this.fireEvent(Input.EVENT_KEY_DOWN, arguments);
// _valueChange中会更新_lastValue, 这边缓存用以后续STOP事件服务
var lastValue = this._lastValue;
if (BI.trim(this.getValue()) !== BI.trim(this._lastValue || "")) {
const lastValue = this._lastValue;
if (trim(this.getValue()) !== trim(this._lastValue || "")) {
this._valueChange();
}
if (BI.isEndWithBlank(this.getValue())) {
if (isEndWithBlank(this.getValue())) {
this._pause = true;
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.PAUSE, "", this);
this.fireEvent(BI.Input.EVENT_PAUSE);
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.PAUSE, "", this);
this.fireEvent(Input.EVENT_PAUSE);
this._defaultState();
} else if ((keyCode === BI.KeyCode.BACKSPACE || keyCode === BI.KeyCode.DELETE) &&
BI.trim(this.getValue()) === "" && (lastValue !== null && BI.trim(lastValue) !== "")) {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STOPEDIT, this.getValue(), this);
this.fireEvent(BI.Input.EVENT_STOP);
trim(this.getValue()) === "" && (lastValue !== null && trim(lastValue) !== "")) {
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.STOPEDIT, this.getValue(), this);
this.fireEvent(Input.EVENT_STOP);
}
}
},
// 初始状态
_defaultState: function () {
_defaultState() {
if (this.getValue() === "") {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
this.fireEvent(BI.Input.EVENT_EMPTY);
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
this.fireEvent(Input.EVENT_EMPTY);
}
this._lastValue = this.getValue();
this._lastSubmitValue = null;
},
}
_valueChange: function () {
if (this.isValid() && BI.trim(this.getValue()) !== this._lastSubmitValue) {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CHANGE, this.getValue(), this);
this.fireEvent(BI.Input.EVENT_CHANGE);
this._lastSubmitValue = BI.trim(this.getValue());
_valueChange() {
if (this.isValid() && trim(this.getValue()) !== this._lastSubmitValue) {
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.CHANGE, this.getValue(), this);
this.fireEvent(Input.EVENT_CHANGE);
this._lastSubmitValue = trim(this.getValue());
}
if (this.getValue() === "") {
this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
this.fireEvent(BI.Input.EVENT_EMPTY);
this.fireEvent(Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
this.fireEvent(Input.EVENT_EMPTY);
}
this._lastValue = this.getValue();
},
}
_checkValidationOnValueChange: function (callback) {
var self = this, o = this.options;
var v = this.getValue();
if (o.allowBlank === true && BI.trim(v) === "") {
_checkValidationOnValueChange(callback) {
const { allowBlank, validationChecker } = this.options;
const v = this.getValue();
if (allowBlank === true && trim(v) === "") {
this.setValid(true);
callback && callback();
return;
}
if (BI.trim(v) === "") {
if (trim(v) === "") {
this.setValid(false);
callback && callback();
return;
}
var checker = o.validationChecker.apply(this, [BI.trim(v)]);
const checker = validationChecker.apply(this, [trim(v)]);
if (checker instanceof Promise) {
checker.then(function (validate) {
self.setValid(validate !== false);
checker.then((validate) => {
this.setValid(validate !== false);
callback && callback();
});
} else {
this.setValid(checker !== false);
callback && callback();
}
},
}
focus: function () {
focus() {
if (!this.element.is(":visible")) {
throw new Error("input输入框在不可见下不能focus");
}
@ -242,9 +268,9 @@ BI.Input = BI.inherit(BI.Single, {
this.element.focus();
this.selectAll();
}
},
}
blur: function () {
blur() {
if (!this.element.is(":visible")) {
throw new Error("input输入框在不可见下不能blur");
}
@ -252,84 +278,61 @@ BI.Input = BI.inherit(BI.Single, {
this.element.blur();
this._blurDebounce();
}
},
}
selectAll: function () {
selectAll() {
if (!this.element.is(":visible")) {
throw new Error("input输入框在不可见下不能select");
}
this.element.select();
this._isEditing = true;
},
}
setValue: function (textValue) {
var self = this;
setValue(textValue) {
this.element.val(textValue);
BI.nextTick(function () {
self._checkValidationOnValueChange(function () {
self._defaultState();
if (self.isValid()) {
self._lastValidValue = self._lastSubmitValue = self.getValue();
nextTick(() => {
this._checkValidationOnValueChange(() => {
this._defaultState();
if (this.isValid()) {
this._lastValidValue = this._lastSubmitValue = this.getValue();
}
});
});
},
}
getValue: function () {
getValue() {
return this.element.val() || "";
},
}
isEditing: function () {
isEditing() {
return this._isEditing;
},
}
getLastValidValue: function () {
getLastValidValue() {
return this._lastValidValue;
},
}
getLastChangedValue: function () {
getLastChangedValue() {
return this._lastChangedValue;
},
}
_setValid: function () {
BI.Input.superclass._setValid.apply(this, arguments);
_setValid() {
super._setValid(arguments);
if (this.isValid()) {
this._lastChangedValue = this.getValue();
this.element.removeClass("bi-input-error");
this.fireEvent(BI.Input.EVENT_VALID, BI.trim(this.getValue()), this);
this.fireEvent(Input.EVENT_VALID, trim(this.getValue()), this);
} else {
if (this._lastChangedValue === this.getValue()) {
this._lastChangedValue = null;
}
this.element.addClass("bi-input-error");
this.fireEvent(BI.Input.EVENT_ERROR, BI.trim(this.getValue()), this);
this.fireEvent(Input.EVENT_ERROR, trim(this.getValue()), this);
}
}
},
_setEnable: function (b) {
BI.Input.superclass._setEnable.apply(this, [b]);
_setEnable(b) {
super._setEnable([b]);
this.element[0].disabled = !b;
},
});
BI.Input.EVENT_CHANGE = "EVENT_CHANGE";
BI.Input.EVENT_FOCUS = "EVENT_FOCUS";
BI.Input.EVENT_CLICK = "EVENT_CLICK";
BI.Input.EVENT_BLUR = "EVENT_BLUR";
BI.Input.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
BI.Input.EVENT_QUICK_DOWN = "EVENT_QUICK_DOWN";
BI.Input.EVENT_SPACE = "EVENT_SPACE";
BI.Input.EVENT_BACKSPACE = "EVENT_BACKSPACE";
BI.Input.EVENT_START = "EVENT_START";
BI.Input.EVENT_PAUSE = "EVENT_PAUSE";
BI.Input.EVENT_STOP = "EVENT_STOP";
BI.Input.EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
BI.Input.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.Input.EVENT_REMOVE = "EVENT_REMOVE";
BI.Input.EVENT_EMPTY = "EVENT_EMPTY";
BI.Input.EVENT_VALID = "EVENT_VALID";
BI.Input.EVENT_ERROR = "EVENT_ERROR";
BI.Input.EVENT_ENTER = "EVENT_ENTER";
BI.Input.EVENT_RESTRICT = "EVENT_RESTRICT";
BI.shortcut("bi.input", BI.Input);
}
}

391
src/base/single/label/abstract.label.js

@ -1,13 +1,15 @@
/**
* Created by dailer on 2019/6/19.
*/
!(function () {
BI.AbstractLabel = BI.inherit(BI.Single, {
import { isNumber, createWidget, extend } from "../../../core";
import { Single } from "../0.single";
_defaultConfig: function (props) {
var conf = BI.AbstractLabel.superclass._defaultConfig.apply(this, arguments);
export class AbstractLabel extends Single {
return BI.extend(conf, {
_defaultConfig(props) {
const conf = super._defaultConfig(arguments);
return extend(conf, {
textAlign: "center",
whiteSpace: "nowrap", // normal or nowrap
textWidth: null,
@ -22,156 +24,156 @@
handler: null,
enableHover: props.title !== null,
});
},
}
_createJson: function () {
var o = this.options;
_createJson() {
const { textAlign, whiteSpace, textHeight, text, value, py, keyword, highLight, handler } = this.options;
return {
type: "bi.text",
textAlign: o.textAlign,
whiteSpace: o.whiteSpace,
lineHeight: o.textHeight,
textAlign,
whiteSpace,
lineHeight: textHeight,
maxWidth: "100%",
text: o.text,
value: o.value,
py: o.py,
keyword: o.keyword,
highLight: o.highLight,
handler: o.handler,
text,
value,
py,
keyword,
highLight,
handler,
};
},
}
render: function () {
render() {
if (this.options.textAlign === "center") {
this._createCenterEl();
} else {
this._createNotCenterEl();
}
},
}
_createCenterEl: function () {
var o = this.options;
var json = this._createJson();
_createCenterEl() {
const { width, textWidth, height, whiteSpace, hgap, vgap, lgap, rgap, tgap, bgap, textAlign } = this.options;
const json = this._createJson();
json.textAlign = "left";
if (BI.isNumber(o.width) && o.width > 0) {
if (BI.isNumber(o.textWidth) && o.textWidth > 0) {
json.maxWidth = o.textWidth;
if (BI.isNumber(o.height) && o.height > 0) { // 1.1
BI.createWidget({
if (isNumber(width) && width > 0) {
if (isNumber(textWidth) && textWidth > 0) {
json.maxWidth = textWidth;
if (isNumber(height) && height > 0) { // 1.1
createWidget({
type: "bi.center_adapt",
height: o.height,
height,
columnSize: ["auto"], // important! 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal",
scrollable: whiteSpace === "normal",
element: this,
items: [
{
el: (this.text = BI.createWidget(json)),
el: (this.text = createWidget(json)),
}
],
});
return;
}
BI.createWidget({ // 1.2
createWidget({ // 1.2
type: "bi.center_adapt",
columnSize: ["auto"], // important! 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal",
scrollable: whiteSpace === "normal",
element: this,
items: [
{
el: (this.text = BI.createWidget(json)),
el: (this.text = createWidget(json)),
}
],
});
return;
}
if (o.whiteSpace === "normal") { // 1.3
BI.extend(json, {
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
if (whiteSpace === "normal") { // 1.3
extend(json, {
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
});
this.text = BI.createWidget(json);
BI.createWidget({
this.text = createWidget(json);
createWidget({
type: "bi.center_adapt",
columnSize: ["auto"], // important! 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal",
scrollable: whiteSpace === "normal",
element: this,
items: [this.text],
});
return;
}
if (BI.isNumber(o.height) && o.height > 0) { // 1.4
if (isNumber(height) && height > 0) { // 1.4
this.element.css({
"line-height": BI.pixFormat(o.height),
"line-height": BI.pixFormat(height),
});
json.textAlign = o.textAlign;
json.textAlign = textAlign;
delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, {
this.text = createWidget(extend(json, {
element: this,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
}));
return;
}
BI.extend(json, { // 1.5
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
extend(json, { // 1.5
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
maxWidth: "100%",
});
this.text = BI.createWidget(json);
BI.createWidget({
this.text = createWidget(json);
createWidget({
type: "bi.center_adapt",
columnSize: ["auto"], // important! 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal",
scrollable: whiteSpace === "normal",
element: this,
items: [this.text],
});
return;
}
if (BI.isNumber(o.textWidth) && o.textWidth > 0) { // 1.6
json.maxWidth = o.textWidth;
BI.createWidget({
if (isNumber(textWidth) && textWidth > 0) { // 1.6
json.maxWidth = textWidth;
createWidget({
type: "bi.center_adapt",
columnSize: ["auto"], // important! 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal",
scrollable: whiteSpace === "normal",
element: this,
items: [
{
el: (this.text = BI.createWidget(json)),
el: (this.text = createWidget(json)),
}
],
});
return;
}
if (o.whiteSpace === "normal") { // 1.7
BI.extend(json, {
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
if (whiteSpace === "normal") { // 1.7
extend(json, {
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
});
this.text = BI.createWidget(json);
BI.createWidget({
this.text = createWidget(json);
createWidget({
type: "bi.center_adapt",
columnSize: ["auto"], // important! 让文字在flex布局下shrink为1
scrollable: true,
@ -181,219 +183,218 @@
return;
}
if (BI.isNumber(o.height) && o.height > 0) { // 1.8
if (isNumber(height) && height > 0) { // 1.8
this.element.css({
"line-height": BI.pixFormat(o.height),
"line-height": BI.pixFormat(height),
});
json.textAlign = o.textAlign;
json.textAlign = textAlign;
delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, {
this.text = createWidget(extend(json, {
element: this,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
}));
return;
}
this.text = BI.createWidget(BI.extend(json, {
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
this.text = createWidget(extend(json, {
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
}));
BI.createWidget({
createWidget({
type: "bi.center_adapt",
columnSize: ["auto"], // important! 让文字在flex布局下shrink为1
element: this,
items: [this.text],
});
},
}
_createNotCenterEl: function () {
var o = this.options;
var adaptLayout = "bi.vertical_adapt";
var json = this._createJson();
if (BI.isNumber(o.width) && o.width > 0) {
if (BI.isNumber(o.textWidth) && o.textWidth > 0) {
json.maxWidth = o.textWidth;
if (BI.isNumber(o.height) && o.height > 0) { // 2.1
BI.createWidget({
_createNotCenterEl() {
const { width, textWidth, height, whiteSpace, hgap, vgap, lgap, rgap, tgap, bgap, textAlign } = this.options;
const adaptLayout = "bi.vertical_adapt";
const json = this._createJson();
if (isNumber(width) && width > 0) {
if (isNumber(textWidth) && textWidth > 0) {
json.maxWidth = textWidth;
if (isNumber(height) && height > 0) { // 2.1
createWidget({
type: adaptLayout,
horizontalAlign: o.textAlign,
horizontalAlign: textAlign,
columnSize: ["auto"], // important! 让文字在flex布局下shrink为1
height: o.height,
scrollable: o.whiteSpace === "normal",
height,
scrollable: whiteSpace === "normal",
element: this,
items: [
{
el: (this.text = BI.createWidget(json)),
el: (this.text = createWidget(json)),
}
],
});
return;
}
BI.createWidget({ // 2.2
createWidget({ // 2.2
type: adaptLayout,
horizontalAlign: o.textAlign,
horizontalAlign: textAlign,
columnSize: ["auto"], // important! 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal",
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
scrollable: whiteSpace === "normal",
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
element: this,
items: [
{
el: (this.text = BI.createWidget(json)),
el: (this.text = createWidget(json)),
}
],
});
return;
}
if (BI.isNumber(o.height) && o.height > 0) { // 2.3
if (o.whiteSpace !== "normal") {
if (isNumber(height) && height > 0) { // 2.3
if (whiteSpace !== "normal") {
this.element.css({
"line-height": BI.pixFormat(o.height - (o.vgap * 2)),
"line-height": BI.pixFormat(height - (vgap * 2)),
});
}
delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, {
this.text = createWidget(extend(json, {
element: this,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
}));
return;
}
json.maxWidth = o.width - 2 * o.hgap - o.lgap - o.rgap;
BI.createWidget({ // 2.4
json.maxWidth = width - 2 * hgap - lgap - rgap;
createWidget({ // 2.4
type: adaptLayout,
horizontalAlign: o.textAlign,
horizontalAlign: textAlign,
columnSize: ["auto"], // important! 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal",
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
scrollable: whiteSpace === "normal",
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
element: this,
items: [{
el: (this.text = BI.createWidget(json)),
el: (this.text = createWidget(json)),
}],
});
return;
}
if (BI.isNumber(o.textWidth) && o.textWidth > 0) {
json.maxWidth = o.textWidth;
BI.createWidget({ // 2.5
if (isNumber(textWidth) && textWidth > 0) {
json.maxWidth = textWidth;
createWidget({ // 2.5
type: adaptLayout,
horizontalAlign: o.textAlign,
horizontalAlign: textAlign,
columnSize: ["auto"], // important! 让文字在flex布局下shrink为1
scrollable: o.whiteSpace === "normal",
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
scrollable: whiteSpace === "normal",
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
element: this,
items: [
{
el: (this.text = BI.createWidget(json)),
el: (this.text = createWidget(json)),
}
],
});
return;
}
if (BI.isNumber(o.height) && o.height > 0) {
if (o.whiteSpace !== "normal") {
if (isNumber(height) && height > 0) {
if (whiteSpace !== "normal") {
this.element.css({
"line-height": BI.pixFormat(o.height - (o.vgap * 2)),
"line-height": BI.pixFormat(height - (vgap * 2)),
});
}
delete json.maxWidth;
this.text = BI.createWidget(BI.extend(json, { // 2.6
this.text = createWidget(extend(json, { // 2.6
element: this,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
}));
return;
}
this.text = BI.createWidget(BI.extend(json, {
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
this.text = createWidget(extend(json, {
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
}));
BI.createWidget({
createWidget({
type: adaptLayout,
horizontalAlign: o.textAlign,
horizontalAlign: textAlign,
columnSize: ["auto"], // important! 让文字在flex布局下shrink为1
element: this,
scrollable: o.whiteSpace === "normal",
scrollable: whiteSpace === "normal",
items: [this.text],
});
},
}
doRedMark: function () {
doRedMark() {
this.text.doRedMark.apply(this.text, arguments);
},
}
unRedMark: function () {
unRedMark() {
this.text.unRedMark.apply(this.text, arguments);
},
}
doHighLight: function () {
doHighLight() {
this.text.doHighLight.apply(this.text, arguments);
},
}
unHighLight: function () {
unHighLight() {
this.text.unHighLight.apply(this.text, arguments);
},
}
setText: function (v) {
setText(v) {
this.options.text = v;
this.text.setText(v);
},
}
getText: function () {
getText() {
return this.options.text;
},
}
setStyle: function (css) {
setStyle(css) {
this.text.setStyle(css);
},
}
setValue: function (v) {
BI.AbstractLabel.superclass.setValue.apply(this, arguments);
setValue(v) {
super.setValue(v);
if (!this.isReadOnly()) {
this.options.text = v;
this.text.setValue(v);
}
},
});
}());
}
}

32
src/base/single/label/html.label.js

@ -1,26 +1,28 @@
/**
* Created by GUY on 2015/6/26.
*/
import { shortcut } from "../../../core";
import { AbstractLabel } from "./abstract.label"
BI.HtmlLabel = BI.inherit(BI.AbstractLabel, {
@shortcut()
export class HtmlLabel extends AbstractLabel {
static xtype = "bi.html_label";
props: {
props = {
baseCls: "bi-html-label",
},
}
_createJson: function () {
var o = this.options;
_createJson() {
const { textAlign, whiteSpace, textHeight, text, value, handler } = this.options;
return {
type: "bi.html",
textAlign: o.textAlign,
whiteSpace: o.whiteSpace,
lineHeight: o.textHeight,
text: o.text,
value: o.value,
handler: o.handler,
textAlign,
whiteSpace,
lineHeight: textHeight,
text,
value,
handler,
};
},
});
BI.shortcut("bi.html_label", BI.HtmlLabel);
}
}

62
src/base/single/label/icon.label.js

@ -1,11 +1,16 @@
/**
* @class BI.IconButton
* @extends BI.BasicButton
* @class BI.IconLabel
* @extends BI.Single
* 图标标签
*/
BI.IconLabel = BI.inherit(BI.Single, {
import { shortcut, createWidget, isNumber, isNull } from "../../../core";
import { Single } from "../0.single";
props: {
@shortcut()
export class IconLabel extends Single {
static xtype = "bi.icon_label";
props = {
baseCls: "bi-icon-label horizon-center",
hgap: 0,
vgap: 0,
@ -16,45 +21,44 @@ BI.IconLabel = BI.inherit(BI.Single, {
iconWidth: null,
iconHeight: null,
lineHeight: null,
},
}
render: function () {
var o = this.options;
render() {
const { iconWidth, iconHeight, height, lineHeight, hgap, vgap, lgap, rgap, tgap, bgap } = this.options;
this.element.css({
textAlign: "center",
});
this.icon = BI.createWidget({
this.icon = createWidget({
type: "bi.icon",
width: o.iconWidth,
height: o.iconHeight,
width: iconWidth,
height: iconHeight,
});
if (BI.isNumber(o.height) && o.height > 0 && BI.isNull(o.iconWidth) && BI.isNull(o.iconHeight)) {
this.element.css("lineHeight", BI.pixFormat(o.lineHeight || o.height));
BI.createWidget({
if (isNumber(height) && height > 0 && isNull(iconWidth) && isNull(iconHeight)) {
this.element.css("lineHeight", BI.pixFormat(lineHeight || height));
createWidget({
type: "bi.default",
element: this,
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
items: [this.icon],
});
} else {
this.element.css("lineHeight", "1");
BI.createWidget({
createWidget({
element: this,
type: "bi.center_adapt",
hgap: o.hgap,
vgap: o.vgap,
lgap: o.lgap,
rgap: o.rgap,
tgap: o.tgap,
bgap: o.bgap,
hgap,
vgap,
lgap,
rgap,
tgap,
bgap,
items: [this.icon],
});
}
},
});
BI.shortcut("bi.icon_label", BI.IconLabel);
}
}

4
src/base/single/label/index.js

@ -0,0 +1,4 @@
export { AbstractLabel } from "./abstract.label";
export { HtmlLabel } from "./html.label";
export { IconLabel } from "./icon.label";
export { Label } from "./label";

36
src/base/single/label/label.js

@ -1,39 +1,41 @@
/**
* Created by GUY on 2015/6/26.
*/
import { shortcut, isFunction, isNotNull } from "../../../core";
import { AbstractLabel } from "./abstract.label"
BI.Label = BI.inherit(BI.AbstractLabel, {
@shortcut()
export class Label extends AbstractLabel {
static xtype = "bi.label";
props: {
props = {
baseCls: "bi-label",
py: "",
keyword: "",
},
}
getTitle: function () {
var title = this.options.title;
var text = this.options.text;
if (BI.isFunction(title)) {
getTitle() {
const title = this.options.title;
const text = this.options.text;
if (isFunction(title)) {
return title();
}
if (BI.isNotNull(title)) {
if (isNotNull(title)) {
return title;
}
if (BI.isFunction(text)) {
if (isFunction(text)) {
return text();
}
return text;
},
}
doRedMark: function () {
doRedMark() {
this.text.doRedMark.apply(this.text, arguments);
},
}
unRedMark: function () {
unRedMark() {
this.text.unRedMark.apply(this.text, arguments);
},
});
BI.shortcut("bi.label", BI.Label);
}
}

59
src/base/single/text.pure.js

@ -1,46 +1,47 @@
/**
* 没有html标签的纯文本
*/
!(function () {
BI.PureText = BI.inherit(BI.Widget, {
import { Widget, shortcut, isFunction, isKey, isNotNull } from "../../core";
import { Text } from "./1.text";
props: {
@shortcut()
export class PureText extends Widget {
static xtype = "bi.pure_text";
props = {
tagName: null,
},
}
render: function () {
var self = this, o = this.options;
var text = BI.isFunction(o.text) ? this.__watch(o.text, function (context, newValue) {
self.setText(newValue);
}) : o.text;
if (BI.isKey(text)) {
render() {
const { text: optionsText, value } = this.options;
const text = isFunction(optionsText) ? this.__watch(optionsText, (context, newValue) => {
this.setText(newValue);
}) : optionsText;
if (isKey(text)) {
this.setText(text);
} else if (BI.isKey(o.value)) {
this.setText(o.value);
} else if (isKey(value)) {
this.setText(value);
}
}
},
_getShowText: function () {
var o = this.options;
var text = BI.isFunction(o.text) ? o.text() : o.text;
text = BI.isKey(text) ? text : o.value;
if (!BI.isKey(text)) {
_getShowText() {
const { text: optionsText, value } = this.options;
const text = isFunction(optionsText) ? optionsText() : optionsText;
text = isKey(text) ? text : value;
if (!isKey(text)) {
return "";
}
return BI.Text.formatText(text + "");
},
return Text.formatText(text + "");
}
setValue: function (value) {
setValue(value) {
this.options.value = value;
this.setText(value);
},
}
setText: function (text) {
this.options.text = BI.isNotNull(text) ? text : "";
setText(text) {
this.options.text = isNotNull(text) ? text : "";
this.element.__textKeywordMarked__(this._getShowText());
},
});
BI.shortcut("bi.pure_text", BI.PureText);
}());
}
}

Loading…
Cancel
Save