Browse Source

inline布局 && rich_editor && code_editor

master
windy 7 years ago
parent
commit
96a415a431
  1. 29
      demo/js/base/editor/demo.rich_editor.js
  2. 88
      dist/_fineui.min.js
  3. 7
      dist/base.js
  4. 281
      dist/bundle.js
  5. 88
      dist/bundle.min.js
  6. 15
      dist/case.js
  7. 259
      dist/core.js
  8. 29
      dist/demo.js
  9. 88
      dist/fineui.min.js
  10. 7
      src/base/single/editor/editor.code.js
  11. 4
      src/case/richeditor/plugins/combo.backgroundcolorchooser.js
  12. 11
      src/case/richeditor/richeditor.js
  13. 100
      src/core/wrapper/layout/adapt/inline.center.js
  14. 74
      src/core/wrapper/layout/adapt/inline.vertical.js
  15. 65
      src/core/wrapper/layout/layout.inline.js

29
demo/js/base/editor/demo.rich_editor.js

@ -10,9 +10,37 @@ Demo.RichEditor = BI.inherit(BI.Widget, {
items: [{ items: [{
el: { el: {
type: "bi.rich_editor", type: "bi.rich_editor",
height: "100%",
cls: "bi-border", cls: "bi-border",
ref: function () { ref: function () {
self.editor = this; self.editor = this;
},
toolbar: {
type: "bi.rich_editor_text_toolbar",
buttons: [
{type: "bi.rich_editor_font_chooser"},
{type: "bi.rich_editor_size_chooser"},
{type: "bi.rich_editor_bold_button"},
{type: "bi.rich_editor_italic_button"},
{type: "bi.rich_editor_underline_button"},
{type: "bi.rich_editor_color_chooser"},
{
type: "bi.rich_editor_background_color_chooser",
listeners: [{
eventName: "EVENT_CHANGE",
action: function (backgroundColor) {
self.editor.element.css({
backgroundColor: backgroundColor,
color: BI.DOM.getContrastColor(backgroundColor)
});
}
}]
},
{type: "bi.rich_editor_align_left_button"},
{type: "bi.rich_editor_align_center_button"},
{type: "bi.rich_editor_align_right_button"},
{type: "bi.rich_editor_param_button"}
]
} }
}, },
left: 10, left: 10,
@ -28,7 +56,6 @@ Demo.RichEditor = BI.inherit(BI.Widget, {
var src = image.src; var src = image.src;
var style = image.style; var style = image.style;
this.editor.setValue("<div>这是一条<font size=\"4\" color=\"#009de3\">测试</font>数据<img class=\"rich-editor-param\" width='" + image.width + "' height='" + image.height + "' src='" + src + "' style='" + style + "' /></div>"); this.editor.setValue("<div>这是一条<font size=\"4\" color=\"#009de3\">测试</font>数据<img class=\"rich-editor-param\" width='" + image.width + "' height='" + image.height + "' src='" + src + "' style='" + style + "' /></div>");
this.editor.setBackColor("#aacf53");
} }
}); });
BI.shortcut("demo.rich_editor", Demo.RichEditor); BI.shortcut("demo.rich_editor", Demo.RichEditor);

88
dist/_fineui.min.js vendored

File diff suppressed because one or more lines are too long

7
dist/base.js vendored

@ -18178,11 +18178,12 @@ BI.CodeEditor = BI.inherit(BI.Single, {
left: o.lineNumbers ? 5 : 30 + 5 left: o.lineNumbers ? 5 : 30 + 5
}] }]
}); });
},
mounted: function () {
var o = this.options;
if (BI.isNumber(o.value) || BI.isString(o.value)) { if (BI.isNumber(o.value) || BI.isString(o.value)) {
BI.nextTick(function () { this.setValue(o.value);
self.setValue(o.value);
});
} }
}, },

281
dist/bundle.js vendored

@ -26504,21 +26504,18 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
// 注册布局 // 注册布局
var isSupportFlex = BI.isSupportCss3("flex"); var isSupportFlex = BI.isSupportCss3("flex");
BI.Plugin.registerWidget("bi.horizontal", function (ob) { BI.Plugin.registerWidget("bi.horizontal", function (ob) {
if (isSupportFlex) { if (!BI.isIE() && isSupportFlex) {
return BI.extend(ob, {type: "bi.flex_horizontal"}); return BI.extend(ob, {type: "bi.flex_horizontal"});
} }
return ob; return ob;
}); });
BI.Plugin.registerWidget("bi.center_adapt", function (ob) { BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
if (isSupportFlex && ob.items && ob.items.length <= 1) { if (!BI.isIE() && isSupportFlex && ob.items && ob.items.length <= 1) {
// 有滚动条的情况下需要用到flex_wrapper_center布局 // 有滚动条的情况下需要用到flex_wrapper_center布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) { if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局 // 不是IE用flex_wrapper_center布局
if (!BI.isIE()) { return BI.extend(ob, {type: "bi.flex_wrapper_center"});
return BI.extend(ob, {type: "bi.flex_wrapper_center"});
}
return ob;
} }
return BI.extend(ob, {type: "bi.flex_center"}); return BI.extend(ob, {type: "bi.flex_center"});
} }
@ -26526,14 +26523,11 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
}); });
BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) { BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
if (isSupportFlex) { if (!BI.isIE() && isSupportFlex) {
// 有滚动条的情况下需要用到flex_wrapper_center布局 // 有滚动条的情况下需要用到flex_wrapper_center布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) { if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局 // 不是IE用flex_wrapper_center布局
if (!BI.isIE()) { return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
}
return ob;
} }
return BI.extend(ob, {type: "bi.flex_vertical_center"}); return BI.extend(ob, {type: "bi.flex_vertical_center"});
} }
@ -26541,14 +26535,11 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
}); });
BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) { BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
if (isSupportFlex) { if (!BI.isIE() && isSupportFlex) {
// 有滚动条的情况下需要用到flex_wrapper_center布局 // 有滚动条的情况下需要用到flex_wrapper_center布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) { if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局 // 不是IE用flex_wrapper_center布局
if (!BI.isIE()) { return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
}
return ob;
} }
return BI.extend(ob, {type: "bi.flex_center"}); return BI.extend(ob, {type: "bi.flex_center"});
} }
@ -31413,6 +31404,178 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
} }
}); });
BI.shortcut("bi.horizontal_float", BI.FloatHorizontalLayout);/** BI.shortcut("bi.horizontal_float", BI.FloatHorizontalLayout);/**
* 内联布局
* @class BI.InlineCenterAdaptLayout
* @extends BI.Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-inline-center-adapt-layout",
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.InlineCenterAdaptLayout.superclass.render.apply(this, arguments);
this.element.css({
whiteSpace: "nowrap"
});
this.populate(this.options.items);
},
_addElement: function (i, item, length) {
var o = this.options;
if (!this.hasWidget(this.getName() + i)) {
var t = BI.createWidget(item);
t.element.css({
position: "relative"
});
var w = BI.createWidget({
type: "bi.horizontal_auto",
items: [t]
});
this.addWidget(this.getName() + i, w);
} else {
var w = this.getWidgetByName(this.getName() + i);
}
w.element.css({
position: "relative",
display: "inline-block",
"vertical-align": "middle",
"*display": "inline",
"*zoom": 1,
"min-width": 100 / length + "%"
});
if (o.hgap + o.lgap + (item.lgap || 0) > 0) {
w.element.css({
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) > 0) {
w.element.css({
"margin-right": o.hgap + o.rgap + (item.rgap || 0) + "px"
});
}
if (o.vgap + o.tgap + (item.tgap || 0) > 0) {
w.element.css({
"margin-top": o.vgap + o.tgap + (item.tgap || 0) + "px"
});
}
if (o.vgap + o.bgap + (item.bgap || 0) > 0) {
w.element.css({
"margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + "px"
});
}
return w;
},
resize: function () {
this.stroke(this.options.items);
},
addItem: function (item) {
throw new Error("不能添加元素");
},
stroke: function (items) {
var self = this;
BI.each(items, function (i, item) {
if (item) {
self._addElement(i, item, items.length);
}
});
},
populate: function (items) {
BI.InlineCenterAdaptLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.inline_center_adapt", BI.InlineCenterAdaptLayout);/**
* 内联布局
* @class BI.InlineVerticalAdaptLayout
* @extends BI.Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-inline-vertical-adapt-layout",
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.InlineVerticalAdaptLayout.superclass.render.apply(this, arguments);
this.element.css({
whiteSpace: "nowrap"
});
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.InlineVerticalAdaptLayout.superclass._addElement.apply(this, arguments);
w.element.css({
position: "relative",
display: "inline-block",
"vertical-align": "middle",
"*display": "inline",
"*zoom": 1
});
if (o.hgap + o.lgap + (item.lgap || 0) > 0) {
w.element.css({
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) > 0) {
w.element.css({
"margin-right": o.hgap + o.rgap + (item.rgap || 0) + "px"
});
}
if (o.vgap + o.tgap + (item.tgap || 0) > 0) {
w.element.css({
"margin-top": o.vgap + o.tgap + (item.tgap || 0) + "px"
});
}
if (o.vgap + o.bgap + (item.bgap || 0) > 0) {
w.element.css({
"margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + "px"
});
}
return w;
},
resize: function () {
this.stroke(this.options.items);
},
populate: function (items) {
BI.InlineVerticalAdaptLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
@ -33007,6 +33170,70 @@ BI.HorizontalCellLayout = BI.inherit(BI.Layout, {
} }
}); });
BI.shortcut("bi.horizontal_cell", BI.HorizontalCellLayout);/** BI.shortcut("bi.horizontal_cell", BI.HorizontalCellLayout);/**
* 内联布局
* @class BI.InlineLayout
* @extends BI.Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.InlineLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-inline-layout",
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.InlineLayout.superclass.render.apply(this, arguments);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.InlineLayout.superclass._addElement.apply(this, arguments);
w.element.css({"position": "relative", display: "inline-block", "*display": "inline", "*zoom": 1});
if (o.hgap + o.lgap + (item.lgap || 0) > 0) {
w.element.css({
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) > 0) {
w.element.css({
"margin-right": o.hgap + o.rgap + (item.rgap || 0) + "px"
});
}
if (o.vgap + o.tgap + (item.tgap || 0) > 0) {
w.element.css({
"margin-top": o.vgap + o.tgap + (item.tgap || 0) + "px"
});
}
if (o.vgap + o.bgap + (item.bgap || 0) > 0) {
w.element.css({
"margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + "px"
});
}
return w;
},
resize: function () {
this.stroke(this.options.items);
},
populate: function (items) {
BI.InlineLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.inline", BI.InlineLayout);/**
* 靠左对齐的自由浮动布局 * 靠左对齐的自由浮动布局
* @class BI.LatticeLayout * @class BI.LatticeLayout
* @extends BI.Layout * @extends BI.Layout
@ -53699,11 +53926,12 @@ BI.CodeEditor = BI.inherit(BI.Single, {
left: o.lineNumbers ? 5 : 30 + 5 left: o.lineNumbers ? 5 : 30 + 5
}] }]
}); });
},
mounted: function () {
var o = this.options;
if (BI.isNumber(o.value) || BI.isString(o.value)) { if (BI.isNumber(o.value) || BI.isString(o.value)) {
BI.nextTick(function () { this.setValue(o.value);
self.setValue(o.value);
});
} }
}, },
@ -83197,10 +83425,6 @@ BI.RichEditorBackgroundColorChooser = BI.inherit(BI.RichEditorAction, {
}); });
this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () {
var backgroundColor = this.getValue(); var backgroundColor = this.getValue();
o.editor.element.css({
backgroundColor: backgroundColor,
color: BI.DOM.getContrastColor(backgroundColor)
});
self.fireEvent("EVENT_CHANGE", backgroundColor); self.fireEvent("EVENT_CHANGE", backgroundColor);
}); });
}, },
@ -83455,9 +83679,7 @@ BI.RichEditor = BI.inherit(BI.Widget, {
if(o.readOnly) { if(o.readOnly) {
return editor; return editor;
} }
this.editor = BI.createWidget(BI.extend(editor, { this.editor = BI.createWidget(editor);
height: "100%"
}));
return { return {
type: "bi.combo", type: "bi.combo",
toggle: false, toggle: false,
@ -83503,13 +83725,6 @@ BI.RichEditor = BI.inherit(BI.Widget, {
this.editor.setValue(v); this.editor.setValue(v);
}, },
setBackColor: function (backgroundColor) {
this.editor.element.css({
backgroundColor: backgroundColor,
color: BI.DOM.getContrastColor(backgroundColor)
});
},
getValue: function () { getValue: function () {
return this.editor.getValue(); return this.editor.getValue();
} }

88
dist/bundle.min.js vendored

File diff suppressed because one or more lines are too long

15
dist/case.js vendored

@ -10992,10 +10992,6 @@ BI.RichEditorBackgroundColorChooser = BI.inherit(BI.RichEditorAction, {
}); });
this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () {
var backgroundColor = this.getValue(); var backgroundColor = this.getValue();
o.editor.element.css({
backgroundColor: backgroundColor,
color: BI.DOM.getContrastColor(backgroundColor)
});
self.fireEvent("EVENT_CHANGE", backgroundColor); self.fireEvent("EVENT_CHANGE", backgroundColor);
}); });
}, },
@ -11250,9 +11246,7 @@ BI.RichEditor = BI.inherit(BI.Widget, {
if(o.readOnly) { if(o.readOnly) {
return editor; return editor;
} }
this.editor = BI.createWidget(BI.extend(editor, { this.editor = BI.createWidget(editor);
height: "100%"
}));
return { return {
type: "bi.combo", type: "bi.combo",
toggle: false, toggle: false,
@ -11298,13 +11292,6 @@ BI.RichEditor = BI.inherit(BI.Widget, {
this.editor.setValue(v); this.editor.setValue(v);
}, },
setBackColor: function (backgroundColor) {
this.editor.element.css({
backgroundColor: backgroundColor,
color: BI.DOM.getContrastColor(backgroundColor)
});
},
getValue: function () { getValue: function () {
return this.editor.getValue(); return this.editor.getValue();
} }

259
dist/core.js vendored

@ -26504,21 +26504,18 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
// 注册布局 // 注册布局
var isSupportFlex = BI.isSupportCss3("flex"); var isSupportFlex = BI.isSupportCss3("flex");
BI.Plugin.registerWidget("bi.horizontal", function (ob) { BI.Plugin.registerWidget("bi.horizontal", function (ob) {
if (isSupportFlex) { if (!BI.isIE() && isSupportFlex) {
return BI.extend(ob, {type: "bi.flex_horizontal"}); return BI.extend(ob, {type: "bi.flex_horizontal"});
} }
return ob; return ob;
}); });
BI.Plugin.registerWidget("bi.center_adapt", function (ob) { BI.Plugin.registerWidget("bi.center_adapt", function (ob) {
if (isSupportFlex && ob.items && ob.items.length <= 1) { if (!BI.isIE() && isSupportFlex && ob.items && ob.items.length <= 1) {
// 有滚动条的情况下需要用到flex_wrapper_center布局 // 有滚动条的情况下需要用到flex_wrapper_center布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) { if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局 // 不是IE用flex_wrapper_center布局
if (!BI.isIE()) { return BI.extend(ob, {type: "bi.flex_wrapper_center"});
return BI.extend(ob, {type: "bi.flex_wrapper_center"});
}
return ob;
} }
return BI.extend(ob, {type: "bi.flex_center"}); return BI.extend(ob, {type: "bi.flex_center"});
} }
@ -26526,14 +26523,11 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
}); });
BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) { BI.Plugin.registerWidget("bi.vertical_adapt", function (ob) {
if (isSupportFlex) { if (!BI.isIE() && isSupportFlex) {
// 有滚动条的情况下需要用到flex_wrapper_center布局 // 有滚动条的情况下需要用到flex_wrapper_center布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) { if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局 // 不是IE用flex_wrapper_center布局
if (!BI.isIE()) { return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
return BI.extend({}, ob, {type: "bi.flex_wrapper_vertical_center"});
}
return ob;
} }
return BI.extend(ob, {type: "bi.flex_vertical_center"}); return BI.extend(ob, {type: "bi.flex_vertical_center"});
} }
@ -26541,14 +26535,11 @@ BI.RedMarkBehavior = BI.inherit(BI.Behavior, {
}); });
BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) { BI.Plugin.registerWidget("bi.float_center_adapt", function (ob) {
if (isSupportFlex) { if (!BI.isIE() && isSupportFlex) {
// 有滚动条的情况下需要用到flex_wrapper_center布局 // 有滚动条的情况下需要用到flex_wrapper_center布局
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) { if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
// 不是IE用flex_wrapper_center布局 // 不是IE用flex_wrapper_center布局
if (!BI.isIE()) { return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
return BI.extend({}, ob, {type: "bi.flex_wrapper_center"});
}
return ob;
} }
return BI.extend(ob, {type: "bi.flex_center"}); return BI.extend(ob, {type: "bi.flex_center"});
} }
@ -31413,6 +31404,178 @@ BI.FloatHorizontalLayout = BI.inherit(BI.Layout, {
} }
}); });
BI.shortcut("bi.horizontal_float", BI.FloatHorizontalLayout);/** BI.shortcut("bi.horizontal_float", BI.FloatHorizontalLayout);/**
* 内联布局
* @class BI.InlineCenterAdaptLayout
* @extends BI.Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-inline-center-adapt-layout",
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.InlineCenterAdaptLayout.superclass.render.apply(this, arguments);
this.element.css({
whiteSpace: "nowrap"
});
this.populate(this.options.items);
},
_addElement: function (i, item, length) {
var o = this.options;
if (!this.hasWidget(this.getName() + i)) {
var t = BI.createWidget(item);
t.element.css({
position: "relative"
});
var w = BI.createWidget({
type: "bi.horizontal_auto",
items: [t]
});
this.addWidget(this.getName() + i, w);
} else {
var w = this.getWidgetByName(this.getName() + i);
}
w.element.css({
position: "relative",
display: "inline-block",
"vertical-align": "middle",
"*display": "inline",
"*zoom": 1,
"min-width": 100 / length + "%"
});
if (o.hgap + o.lgap + (item.lgap || 0) > 0) {
w.element.css({
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) > 0) {
w.element.css({
"margin-right": o.hgap + o.rgap + (item.rgap || 0) + "px"
});
}
if (o.vgap + o.tgap + (item.tgap || 0) > 0) {
w.element.css({
"margin-top": o.vgap + o.tgap + (item.tgap || 0) + "px"
});
}
if (o.vgap + o.bgap + (item.bgap || 0) > 0) {
w.element.css({
"margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + "px"
});
}
return w;
},
resize: function () {
this.stroke(this.options.items);
},
addItem: function (item) {
throw new Error("不能添加元素");
},
stroke: function (items) {
var self = this;
BI.each(items, function (i, item) {
if (item) {
self._addElement(i, item, items.length);
}
});
},
populate: function (items) {
BI.InlineCenterAdaptLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.inline_center_adapt", BI.InlineCenterAdaptLayout);/**
* 内联布局
* @class BI.InlineVerticalAdaptLayout
* @extends BI.Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-inline-vertical-adapt-layout",
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.InlineVerticalAdaptLayout.superclass.render.apply(this, arguments);
this.element.css({
whiteSpace: "nowrap"
});
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.InlineVerticalAdaptLayout.superclass._addElement.apply(this, arguments);
w.element.css({
position: "relative",
display: "inline-block",
"vertical-align": "middle",
"*display": "inline",
"*zoom": 1
});
if (o.hgap + o.lgap + (item.lgap || 0) > 0) {
w.element.css({
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) > 0) {
w.element.css({
"margin-right": o.hgap + o.rgap + (item.rgap || 0) + "px"
});
}
if (o.vgap + o.tgap + (item.tgap || 0) > 0) {
w.element.css({
"margin-top": o.vgap + o.tgap + (item.tgap || 0) + "px"
});
}
if (o.vgap + o.bgap + (item.bgap || 0) > 0) {
w.element.css({
"margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + "px"
});
}
return w;
},
resize: function () {
this.stroke(this.options.items);
},
populate: function (items) {
BI.InlineVerticalAdaptLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);/**
*自适应水平和垂直方向都居中容器 *自适应水平和垂直方向都居中容器
* Created by GUY on 2016/12/2. * Created by GUY on 2016/12/2.
* *
@ -33007,6 +33170,70 @@ BI.HorizontalCellLayout = BI.inherit(BI.Layout, {
} }
}); });
BI.shortcut("bi.horizontal_cell", BI.HorizontalCellLayout);/** BI.shortcut("bi.horizontal_cell", BI.HorizontalCellLayout);/**
* 内联布局
* @class BI.InlineLayout
* @extends BI.Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.InlineLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-inline-layout",
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.InlineLayout.superclass.render.apply(this, arguments);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.InlineLayout.superclass._addElement.apply(this, arguments);
w.element.css({"position": "relative", display: "inline-block", "*display": "inline", "*zoom": 1});
if (o.hgap + o.lgap + (item.lgap || 0) > 0) {
w.element.css({
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) > 0) {
w.element.css({
"margin-right": o.hgap + o.rgap + (item.rgap || 0) + "px"
});
}
if (o.vgap + o.tgap + (item.tgap || 0) > 0) {
w.element.css({
"margin-top": o.vgap + o.tgap + (item.tgap || 0) + "px"
});
}
if (o.vgap + o.bgap + (item.bgap || 0) > 0) {
w.element.css({
"margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + "px"
});
}
return w;
},
resize: function () {
this.stroke(this.options.items);
},
populate: function (items) {
BI.InlineLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.inline", BI.InlineLayout);/**
* 靠左对齐的自由浮动布局 * 靠左对齐的自由浮动布局
* @class BI.LatticeLayout * @class BI.LatticeLayout
* @extends BI.Layout * @extends BI.Layout

29
dist/demo.js vendored

@ -863,9 +863,37 @@ BI.shortcut("demo.multifile_editor", Demo.CodeEditor);Demo.RichEditor = BI.inher
items: [{ items: [{
el: { el: {
type: "bi.rich_editor", type: "bi.rich_editor",
height: "100%",
cls: "bi-border", cls: "bi-border",
ref: function () { ref: function () {
self.editor = this; self.editor = this;
},
toolbar: {
type: "bi.rich_editor_text_toolbar",
buttons: [
{type: "bi.rich_editor_font_chooser"},
{type: "bi.rich_editor_size_chooser"},
{type: "bi.rich_editor_bold_button"},
{type: "bi.rich_editor_italic_button"},
{type: "bi.rich_editor_underline_button"},
{type: "bi.rich_editor_color_chooser"},
{
type: "bi.rich_editor_background_color_chooser",
listeners: [{
eventName: "EVENT_CHANGE",
action: function (backgroundColor) {
self.editor.element.css({
backgroundColor: backgroundColor,
color: BI.DOM.getContrastColor(backgroundColor)
});
}
}]
},
{type: "bi.rich_editor_align_left_button"},
{type: "bi.rich_editor_align_center_button"},
{type: "bi.rich_editor_align_right_button"},
{type: "bi.rich_editor_param_button"}
]
} }
}, },
left: 10, left: 10,
@ -881,7 +909,6 @@ BI.shortcut("demo.multifile_editor", Demo.CodeEditor);Demo.RichEditor = BI.inher
var src = image.src; var src = image.src;
var style = image.style; var style = image.style;
this.editor.setValue("<div>这是一条<font size=\"4\" color=\"#009de3\">测试</font>数据<img class=\"rich-editor-param\" width='" + image.width + "' height='" + image.height + "' src='" + src + "' style='" + style + "' /></div>"); this.editor.setValue("<div>这是一条<font size=\"4\" color=\"#009de3\">测试</font>数据<img class=\"rich-editor-param\" width='" + image.width + "' height='" + image.height + "' src='" + src + "' style='" + style + "' /></div>");
this.editor.setBackColor("#aacf53");
} }
}); });
BI.shortcut("demo.rich_editor", Demo.RichEditor);/** BI.shortcut("demo.rich_editor", Demo.RichEditor);/**

88
dist/fineui.min.js vendored

File diff suppressed because one or more lines are too long

7
src/base/single/editor/editor.code.js

@ -87,11 +87,12 @@ BI.CodeEditor = BI.inherit(BI.Single, {
left: o.lineNumbers ? 5 : 30 + 5 left: o.lineNumbers ? 5 : 30 + 5
}] }]
}); });
},
mounted: function () {
var o = this.options;
if (BI.isNumber(o.value) || BI.isString(o.value)) { if (BI.isNumber(o.value) || BI.isString(o.value)) {
BI.nextTick(function () { this.setValue(o.value);
self.setValue(o.value);
});
} }
}, },

4
src/case/richeditor/plugins/combo.backgroundcolorchooser.js

@ -29,10 +29,6 @@ BI.RichEditorBackgroundColorChooser = BI.inherit(BI.RichEditorAction, {
}); });
this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () { this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () {
var backgroundColor = this.getValue(); var backgroundColor = this.getValue();
o.editor.element.css({
backgroundColor: backgroundColor,
color: BI.DOM.getContrastColor(backgroundColor)
});
self.fireEvent("EVENT_CHANGE", backgroundColor); self.fireEvent("EVENT_CHANGE", backgroundColor);
}); });
}, },

11
src/case/richeditor/richeditor.js

@ -41,9 +41,7 @@ BI.RichEditor = BI.inherit(BI.Widget, {
if(o.readOnly) { if(o.readOnly) {
return editor; return editor;
} }
this.editor = BI.createWidget(BI.extend(editor, { this.editor = BI.createWidget(editor);
height: "100%"
}));
return { return {
type: "bi.combo", type: "bi.combo",
toggle: false, toggle: false,
@ -89,13 +87,6 @@ BI.RichEditor = BI.inherit(BI.Widget, {
this.editor.setValue(v); this.editor.setValue(v);
}, },
setBackColor: function (backgroundColor) {
this.editor.element.css({
backgroundColor: backgroundColor,
color: BI.DOM.getContrastColor(backgroundColor)
});
},
getValue: function () { getValue: function () {
return this.editor.getValue(); return this.editor.getValue();
} }

100
src/core/wrapper/layout/adapt/inline.center.js

@ -0,0 +1,100 @@
/**
* 内联布局
* @class BI.InlineCenterAdaptLayout
* @extends BI.Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.InlineCenterAdaptLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-inline-center-adapt-layout",
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.InlineCenterAdaptLayout.superclass.render.apply(this, arguments);
this.element.css({
whiteSpace: "nowrap"
});
this.populate(this.options.items);
},
_addElement: function (i, item, length) {
var o = this.options;
if (!this.hasWidget(this.getName() + i)) {
var t = BI.createWidget(item);
t.element.css({
position: "relative"
});
var w = BI.createWidget({
type: "bi.horizontal_auto",
items: [t]
});
this.addWidget(this.getName() + i, w);
} else {
var w = this.getWidgetByName(this.getName() + i);
}
w.element.css({
position: "relative",
display: "inline-block",
"vertical-align": "middle",
"*display": "inline",
"*zoom": 1,
"min-width": 100 / length + "%"
});
if (o.hgap + o.lgap + (item.lgap || 0) > 0) {
w.element.css({
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) > 0) {
w.element.css({
"margin-right": o.hgap + o.rgap + (item.rgap || 0) + "px"
});
}
if (o.vgap + o.tgap + (item.tgap || 0) > 0) {
w.element.css({
"margin-top": o.vgap + o.tgap + (item.tgap || 0) + "px"
});
}
if (o.vgap + o.bgap + (item.bgap || 0) > 0) {
w.element.css({
"margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + "px"
});
}
return w;
},
resize: function () {
this.stroke(this.options.items);
},
addItem: function (item) {
throw new Error("不能添加元素");
},
stroke: function (items) {
var self = this;
BI.each(items, function (i, item) {
if (item) {
self._addElement(i, item, items.length);
}
});
},
populate: function (items) {
BI.InlineCenterAdaptLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.inline_center_adapt", BI.InlineCenterAdaptLayout);

74
src/core/wrapper/layout/adapt/inline.vertical.js

@ -0,0 +1,74 @@
/**
* 内联布局
* @class BI.InlineVerticalAdaptLayout
* @extends BI.Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.InlineVerticalAdaptLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-inline-vertical-adapt-layout",
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.InlineVerticalAdaptLayout.superclass.render.apply(this, arguments);
this.element.css({
whiteSpace: "nowrap"
});
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.InlineVerticalAdaptLayout.superclass._addElement.apply(this, arguments);
w.element.css({
position: "relative",
display: "inline-block",
"vertical-align": "middle",
"*display": "inline",
"*zoom": 1
});
if (o.hgap + o.lgap + (item.lgap || 0) > 0) {
w.element.css({
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) > 0) {
w.element.css({
"margin-right": o.hgap + o.rgap + (item.rgap || 0) + "px"
});
}
if (o.vgap + o.tgap + (item.tgap || 0) > 0) {
w.element.css({
"margin-top": o.vgap + o.tgap + (item.tgap || 0) + "px"
});
}
if (o.vgap + o.bgap + (item.bgap || 0) > 0) {
w.element.css({
"margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + "px"
});
}
return w;
},
resize: function () {
this.stroke(this.options.items);
},
populate: function (items) {
BI.InlineVerticalAdaptLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.inline_vertical_adapt", BI.InlineVerticalAdaptLayout);

65
src/core/wrapper/layout/layout.inline.js

@ -0,0 +1,65 @@
/**
* 内联布局
* @class BI.InlineLayout
* @extends BI.Layout
*
* @cfg {JSON} options 配置属性
* @cfg {Number} [hgap=0] 水平间隙
* @cfg {Number} [vgap=0] 垂直间隙
*/
BI.InlineLayout = BI.inherit(BI.Layout, {
props: function () {
return BI.extend(BI.InlineLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-inline-layout",
hgap: 0,
vgap: 0,
lgap: 0,
rgap: 0,
tgap: 0,
bgap: 0
});
},
render: function () {
BI.InlineLayout.superclass.render.apply(this, arguments);
this.populate(this.options.items);
},
_addElement: function (i, item) {
var o = this.options;
var w = BI.InlineLayout.superclass._addElement.apply(this, arguments);
w.element.css({"position": "relative", display: "inline-block", "*display": "inline", "*zoom": 1});
if (o.hgap + o.lgap + (item.lgap || 0) > 0) {
w.element.css({
"margin-left": o.hgap + o.lgap + (item.lgap || 0) + "px"
});
}
if (o.hgap + o.rgap + (item.rgap || 0) > 0) {
w.element.css({
"margin-right": o.hgap + o.rgap + (item.rgap || 0) + "px"
});
}
if (o.vgap + o.tgap + (item.tgap || 0) > 0) {
w.element.css({
"margin-top": o.vgap + o.tgap + (item.tgap || 0) + "px"
});
}
if (o.vgap + o.bgap + (item.bgap || 0) > 0) {
w.element.css({
"margin-bottom": o.vgap + o.bgap + (item.bgap || 0) + "px"
});
}
return w;
},
resize: function () {
this.stroke(this.options.items);
},
populate: function (items) {
BI.InlineLayout.superclass.populate.apply(this, arguments);
this._mount();
}
});
BI.shortcut("bi.inline", BI.InlineLayout);
Loading…
Cancel
Save