guy
4 years ago
5 changed files with 2421 additions and 0 deletions
@ -0,0 +1,118 @@ |
|||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<title></title> |
||||||
|
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> |
||||||
|
<script src="../dist/2.0/fineui.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="wrapper"></div> |
||||||
|
<script> |
||||||
|
// tab上下文环境测试 |
||||||
|
var Model = BI.inherit(Fix.Model, { |
||||||
|
state: function () { |
||||||
|
return { |
||||||
|
expand: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
childContext: ["text"], |
||||||
|
|
||||||
|
computed: { |
||||||
|
text: function () { |
||||||
|
return this.model.expand ? "text-yes" : "text-not"; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
actions: { |
||||||
|
toggle: function () { |
||||||
|
this.model.expand = !this.model.expand; |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
BI.model("demo.model", Model); |
||||||
|
var ChildModel = BI.inherit(Fix.Model, { |
||||||
|
context: ["text"] |
||||||
|
}); |
||||||
|
|
||||||
|
BI.model("demo.child_model", ChildModel); |
||||||
|
|
||||||
|
var Child = BI.inherit(BI.Widget, { |
||||||
|
setup: function () { |
||||||
|
var store = BI.useStore(function () { |
||||||
|
return BI.Models.getModel("demo.child_model"); |
||||||
|
}); |
||||||
|
return { |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.button", |
||||||
|
text: store.model.text |
||||||
|
}; |
||||||
|
} |
||||||
|
}; |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.shortcut("demo.child", Child); |
||||||
|
|
||||||
|
var Widget = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
updateMode: "auto" |
||||||
|
}, |
||||||
|
setup: function () { |
||||||
|
var child; |
||||||
|
var store = BI.useStore(function () { |
||||||
|
return BI.Models.getModel("demo.model"); |
||||||
|
}); |
||||||
|
setInterval(function () { |
||||||
|
store.toggle(); |
||||||
|
}, 1000); |
||||||
|
BI.watch("text", function () { |
||||||
|
// child.reset(); |
||||||
|
}); |
||||||
|
return function () { |
||||||
|
return { |
||||||
|
type: "bi.vertical", |
||||||
|
vgap: 20, |
||||||
|
items: [{ |
||||||
|
type: "demo.child", |
||||||
|
ref: function (_ref) { |
||||||
|
child = _ref; |
||||||
|
} |
||||||
|
}, { |
||||||
|
type: "bi.combo", |
||||||
|
el: { |
||||||
|
type: "bi.button", |
||||||
|
text: "点击" |
||||||
|
}, |
||||||
|
popup: { |
||||||
|
el: { |
||||||
|
type: "bi.tab", |
||||||
|
height: 100, |
||||||
|
showIndex: 0, |
||||||
|
cardCreator: function () { |
||||||
|
return { |
||||||
|
type: "demo.child" |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}] |
||||||
|
}; |
||||||
|
}; |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.shortcut("demo.parent", Widget); |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: { |
||||||
|
type: "demo.parent" |
||||||
|
}, |
||||||
|
top: 100, |
||||||
|
left: 100 |
||||||
|
}], |
||||||
|
element: "#wrapper" |
||||||
|
}); |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,153 @@ |
|||||||
|
/** |
||||||
|
* Created by GUY on 2015/6/26. |
||||||
|
*/ |
||||||
|
|
||||||
|
BI.Tab = BI.inherit(BI.Widget, { |
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(BI.Tab.superclass._defaultConfig.apply(this, arguments), { |
||||||
|
baseCls: "bi-tab", |
||||||
|
direction: "top", // top, bottom, left, right, custom
|
||||||
|
single: false, // 是不是单页面
|
||||||
|
logic: { |
||||||
|
dynamic: false |
||||||
|
}, |
||||||
|
showIndex: false, |
||||||
|
tab: false, |
||||||
|
cardCreator: function (v) { |
||||||
|
return BI.createWidget(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this, o = this.options; |
||||||
|
if (BI.isObject(o.tab)) { |
||||||
|
this.tab = BI.createWidget(this.options.tab, {type: "bi.button_group"}); |
||||||
|
this.tab.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { |
||||||
|
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
||||||
|
}); |
||||||
|
} |
||||||
|
this.cardMap = {}; |
||||||
|
this.layout = BI.createWidget({ |
||||||
|
type: "bi.card" |
||||||
|
}); |
||||||
|
|
||||||
|
BI.createWidget(BI.extend({ |
||||||
|
element: this |
||||||
|
}, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(o.direction), BI.extend({}, o.logic, { |
||||||
|
items: BI.LogicFactory.createLogicItemsByDirection(o.direction, this.tab, this.layout) |
||||||
|
})))); |
||||||
|
|
||||||
|
var listener = new BI.ShowListener({ |
||||||
|
eventObj: this.tab, |
||||||
|
cardLayout: this.layout, |
||||||
|
cardCreator: function (v) { |
||||||
|
var card = o.cardCreator.apply(self, arguments); |
||||||
|
self.cardMap[v] = card; |
||||||
|
return card; |
||||||
|
}, |
||||||
|
afterCardShow: function (v) { |
||||||
|
self._deleteOtherCards(v); |
||||||
|
self.curr = v; |
||||||
|
} |
||||||
|
}); |
||||||
|
listener.on(BI.ShowListener.EVENT_CHANGE, function (value) { |
||||||
|
self.fireEvent(BI.Tab.EVENT_CHANGE, value, self); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_deleteOtherCards: function (currCardName) { |
||||||
|
var self = this, o = this.options; |
||||||
|
if (o.single === true) { |
||||||
|
BI.each(this.cardMap, function (name, card) { |
||||||
|
if (name !== (currCardName + "")) { |
||||||
|
self.layout.deleteCardByName(name); |
||||||
|
delete self.cardMap[name]; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_assertCard: function (v) { |
||||||
|
if (!this.layout.isCardExisted(v)) { |
||||||
|
var card = this.options.cardCreator(v); |
||||||
|
this.cardMap[v] = card; |
||||||
|
this.layout.addCardByName(v, card); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
created: function () { |
||||||
|
var o = this.options; |
||||||
|
if (o.showIndex !== false) { |
||||||
|
this.setSelect(o.showIndex); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
setSelect: function (v) { |
||||||
|
this.tab && this.tab.setValue(v); |
||||||
|
this._assertCard(v); |
||||||
|
this.layout.showCardByName(v); |
||||||
|
this._deleteOtherCards(v); |
||||||
|
if (this.curr !== v) { |
||||||
|
this.curr = v; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
removeTab: function (cardname) { |
||||||
|
var self = this, o = this.options; |
||||||
|
BI.any(this.cardMap, function (name, card) { |
||||||
|
if (BI.isEqual(name, (cardname + ""))) { |
||||||
|
self.layout.deleteCardByName(name); |
||||||
|
delete self.cardMap[name]; |
||||||
|
return true; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
getSelect: function () { |
||||||
|
return this.curr; |
||||||
|
}, |
||||||
|
|
||||||
|
getSelectedTab: function () { |
||||||
|
return this.layout.getShowingCard(); |
||||||
|
}, |
||||||
|
|
||||||
|
getTab: function (v) { |
||||||
|
this._assertCard(v); |
||||||
|
return this.layout.getCardByName(v); |
||||||
|
}, |
||||||
|
|
||||||
|
setValue: function (v) { |
||||||
|
var card = this.layout.getShowingCard(); |
||||||
|
if (card) { |
||||||
|
card.setValue(v); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
getValue: function () { |
||||||
|
var card = this.layout.getShowingCard(); |
||||||
|
if (card) { |
||||||
|
return card.getValue(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
populate: function () { |
||||||
|
var card = this.layout.getShowingCard(); |
||||||
|
if (card) { |
||||||
|
return card.populate && card.populate.apply(card, arguments); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
empty: function () { |
||||||
|
this.layout.deleteAllCard(); |
||||||
|
this.cardMap = {}; |
||||||
|
}, |
||||||
|
|
||||||
|
destroy: function () { |
||||||
|
this.cardMap = {}; |
||||||
|
BI.Tab.superclass.destroy.apply(this, arguments); |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.Tab.EVENT_CHANGE = "EVENT_CHANGE"; |
||||||
|
|
||||||
|
BI.shortcut("bi.tab", BI.Tab); |
||||||
@ -0,0 +1,92 @@ |
|||||||
|
(function () { |
||||||
|
var kv = {}; |
||||||
|
BI.shortcut = BI.component = BI.shortcut || function (xtype, cls) { |
||||||
|
if (kv[xtype] != null) { |
||||||
|
_global.console && console.error("shortcut:[" + xtype + "] has been registed"); |
||||||
|
} |
||||||
|
if (cls) { |
||||||
|
cls["xtype"] = xtype; |
||||||
|
} |
||||||
|
kv[xtype] = cls; |
||||||
|
}; |
||||||
|
|
||||||
|
// 根据配置属性生成widget
|
||||||
|
var createWidget = function (config, context, lazy) { |
||||||
|
var cls = kv[config.type]; |
||||||
|
|
||||||
|
if (!cls) { |
||||||
|
throw new Error("组件" + config.type + "未定义"); |
||||||
|
} |
||||||
|
var pushed = false; |
||||||
|
if (context) { |
||||||
|
pushed = true; |
||||||
|
BI.Widget.pushContext(context); |
||||||
|
} |
||||||
|
var widget = new cls(); |
||||||
|
widget._initProps(config); |
||||||
|
widget._constructed(); |
||||||
|
widget._initRoot(); |
||||||
|
// if (!lazy || config.element || config.root) {
|
||||||
|
widget._lazyConstructor(); |
||||||
|
// }
|
||||||
|
pushed && BI.Widget.popContext(); |
||||||
|
return widget; |
||||||
|
}; |
||||||
|
|
||||||
|
BI.createWidget = BI.createWidget || function (item, options, context, lazy) { |
||||||
|
// 先把准备环境准备好
|
||||||
|
BI.init(); |
||||||
|
var el, w; |
||||||
|
item || (item = {}); |
||||||
|
if (BI.isWidget(options)) { |
||||||
|
context = options; |
||||||
|
options = {}; |
||||||
|
} else { |
||||||
|
options || (options = {}); |
||||||
|
} |
||||||
|
if (BI.isEmpty(item) && BI.isEmpty(options)) { |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.layout" |
||||||
|
}); |
||||||
|
} |
||||||
|
if (BI.isWidget(item)) { |
||||||
|
return item; |
||||||
|
} |
||||||
|
if (item.type || options.type) { |
||||||
|
el = BI.extend({}, options, item); |
||||||
|
w = BI.Plugin.getWidget(el.type, el); |
||||||
|
w.listeners = (w.listeners || []).concat([{ |
||||||
|
eventName: BI.Events.MOUNT, |
||||||
|
action: function () { |
||||||
|
BI.Plugin.getObject(el.type, this); |
||||||
|
} |
||||||
|
}]); |
||||||
|
return w.type === el.type ? createWidget(w, context, lazy) : BI.createWidget(BI.extend({/**important**/}, el, {type: w.type}), options, context, lazy); |
||||||
|
} |
||||||
|
if (item.el && (item.el.type || options.type)) { |
||||||
|
el = BI.extend({}, options, item.el); |
||||||
|
w = BI.Plugin.getWidget(el.type, el); |
||||||
|
w.listeners = (w.listeners || []).concat([{ |
||||||
|
eventName: BI.Events.MOUNT, |
||||||
|
action: function () { |
||||||
|
BI.Plugin.getObject(el.type, this); |
||||||
|
} |
||||||
|
}]); |
||||||
|
return w.type === el.type ? createWidget(w, context, lazy) : BI.createWidget(BI.extend({/**important**/}, el, {type: w.type}), options, context, lazy); |
||||||
|
} |
||||||
|
if (BI.isWidget(item.el)) { |
||||||
|
return item.el; |
||||||
|
} |
||||||
|
throw new Error("无法根据item创建组件"); |
||||||
|
}; |
||||||
|
|
||||||
|
BI._lazyCreateWidget = BI._lazyCreateWidget || function (item, options, context) { |
||||||
|
return BI.createWidget(item, options, context, true); |
||||||
|
}; |
||||||
|
|
||||||
|
BI.createElement = BI.createElement || function () { |
||||||
|
var widget = BI.createWidget.apply(this, arguments); |
||||||
|
return widget.element; |
||||||
|
}; |
||||||
|
|
||||||
|
})(); |
||||||
@ -0,0 +1,750 @@ |
|||||||
|
/** |
||||||
|
* Widget超类 |
||||||
|
* @class BI.Widget |
||||||
|
* @extends BI.OB |
||||||
|
* |
||||||
|
* @cfg {JSON} options 配置属性 |
||||||
|
*/ |
||||||
|
|
||||||
|
!(function () { |
||||||
|
function callLifeHook (self, life) { |
||||||
|
var hook = self.options[life] || self[life]; |
||||||
|
if (hook) { |
||||||
|
var hooks = BI.isArray(hook) ? hook : [hook]; |
||||||
|
BI.each(hooks, function (i, hook) { |
||||||
|
hook.call(self); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
BI.Widget = BI.Widget || BI.inherit(BI.OB, { |
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(BI.Widget.superclass._defaultConfig.apply(this), { |
||||||
|
root: false, |
||||||
|
tagName: "div", |
||||||
|
attributes: null, |
||||||
|
data: null, |
||||||
|
|
||||||
|
tag: null, |
||||||
|
disabled: false, |
||||||
|
invisible: false, |
||||||
|
invalid: false, |
||||||
|
baseCls: "", |
||||||
|
extraCls: "", |
||||||
|
cls: "", |
||||||
|
css: null, |
||||||
|
updateMode: "manual" // manual / auto
|
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_constructor: function () { |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
// 覆盖父类的_constructor方法，widget不走ob的生命周期
|
||||||
|
_constructed: function () { |
||||||
|
if (this.setup) { |
||||||
|
pushTarget(this); |
||||||
|
this.service = this.setup(this.options); |
||||||
|
this.render = BI.isPlainObject(this.service) ? this.service.render : this.service; |
||||||
|
popTarget(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_lazyConstructor: function () { |
||||||
|
if (!this.__constructed) { |
||||||
|
this.__constructed = true; |
||||||
|
this._init(); |
||||||
|
this._initRef(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 生命周期函数
|
||||||
|
beforeInit: null, |
||||||
|
|
||||||
|
beforeRender: null, |
||||||
|
|
||||||
|
beforeCreate: null, |
||||||
|
|
||||||
|
created: null, |
||||||
|
|
||||||
|
render: null, |
||||||
|
|
||||||
|
beforeMount: null, |
||||||
|
|
||||||
|
mounted: null, |
||||||
|
|
||||||
|
shouldUpdate: null, |
||||||
|
|
||||||
|
update: null, |
||||||
|
|
||||||
|
beforeUpdate: null, |
||||||
|
|
||||||
|
updated: null, |
||||||
|
|
||||||
|
beforeDestroy: null, |
||||||
|
|
||||||
|
destroyed: null, |
||||||
|
|
||||||
|
_init: function () { |
||||||
|
BI.Widget.superclass._init.apply(this, arguments); |
||||||
|
this._initElementWidth(); |
||||||
|
this._initElementHeight(); |
||||||
|
this._initVisual(); |
||||||
|
this._initState(); |
||||||
|
this._initRender(); |
||||||
|
}, |
||||||
|
|
||||||
|
_initRender: function () { |
||||||
|
var self = this; |
||||||
|
|
||||||
|
function render () { |
||||||
|
if (self.options.beforeRender || self.beforeRender) { |
||||||
|
(self.options.beforeRender || self.beforeRender).call(self, BI.bind(self._render, self)); |
||||||
|
} else { |
||||||
|
self._render(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (this.options.beforeInit || this.beforeInit) { |
||||||
|
this.__asking = true; |
||||||
|
(this.options.beforeInit || this.beforeInit).call(this, render); |
||||||
|
if (this.__asking === true) { |
||||||
|
this.__async = true; |
||||||
|
} |
||||||
|
} else { |
||||||
|
render(); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_render: function () { |
||||||
|
this.__asking = false; |
||||||
|
callLifeHook(this, "beforeCreate"); |
||||||
|
this._initElement(); |
||||||
|
this._initEffects(); |
||||||
|
callLifeHook(this, "created"); |
||||||
|
}, |
||||||
|
|
||||||
|
_initCurrent: function () { |
||||||
|
var o = this.options; |
||||||
|
if (o._baseCls || o.baseCls || o.extraCls || o.cls) { |
||||||
|
this.element.addClass((o._baseCls || "") + " " + (o.baseCls || "") + " " + (o.extraCls || "") + " " + (o.cls || "")); |
||||||
|
} |
||||||
|
if (o.attributes) { |
||||||
|
this.element.attr(o.attributes); |
||||||
|
} |
||||||
|
if (o.data) { |
||||||
|
this.element.data(o.data); |
||||||
|
} |
||||||
|
if (o.css) { |
||||||
|
this.element.css(o.css); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* 初始化根节点 |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
_initRoot: function () { |
||||||
|
var o = this.options; |
||||||
|
this.widgetName = o.widgetName || BI.uniqueId("widget"); |
||||||
|
this._isRoot = o.root; |
||||||
|
this._children = {}; |
||||||
|
if (BI.isWidget(o.element)) { |
||||||
|
this.element = this.options.element.element; |
||||||
|
if (o.element instanceof BI.Widget) { |
||||||
|
this._parent = o.element; |
||||||
|
this._parent.addWidget(this.widgetName, this); |
||||||
|
} else { |
||||||
|
this._isRoot = true; |
||||||
|
} |
||||||
|
} else if (o.element) { |
||||||
|
// if (o.root !== true) {
|
||||||
|
// throw new Error("root is a required property");
|
||||||
|
// }
|
||||||
|
this.element = BI.Widget._renderEngine.createElement(this); |
||||||
|
this._isRoot = true; |
||||||
|
} else { |
||||||
|
this.element = BI.Widget._renderEngine.createElement(this); |
||||||
|
} |
||||||
|
this.element._isWidget = true; |
||||||
|
this._initCurrent(); |
||||||
|
}, |
||||||
|
|
||||||
|
_initElementWidth: function () { |
||||||
|
var o = this.options; |
||||||
|
if (BI.isWidthOrHeight(o.width)) { |
||||||
|
this.element.css("width", BI.isNumber(o.width) ? o.width / BI.pixRatio + BI.pixUnit : o.width); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_initElementHeight: function () { |
||||||
|
var o = this.options; |
||||||
|
if (BI.isWidthOrHeight(o.height)) { |
||||||
|
this.element.css("height", BI.isNumber(o.height) ? o.height / BI.pixRatio + BI.pixUnit : o.height); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_initVisual: function () { |
||||||
|
var o = this.options; |
||||||
|
if (o.invisible) { |
||||||
|
// 用display属性做显示和隐藏，否则jquery会在显示时将display设为block会覆盖掉display:flex属性
|
||||||
|
this.element.css("display", "none"); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_initEffects: function () { |
||||||
|
var o = this.options; |
||||||
|
if (o.disabled || o.invalid) { |
||||||
|
if (this.options.disabled) { |
||||||
|
this.setEnable(false); |
||||||
|
} |
||||||
|
if (this.options.invalid) { |
||||||
|
this.setValid(false); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_initState: function () { |
||||||
|
this._isMounted = false; |
||||||
|
}, |
||||||
|
|
||||||
|
_initElement: function () { |
||||||
|
var self = this; |
||||||
|
var render = BI.isFunction(this.options.render) ? this.options.render : this.render; |
||||||
|
var els = render && render.call(this); |
||||||
|
if (BI.isPlainObject(els)) { |
||||||
|
els = [els]; |
||||||
|
} |
||||||
|
if (BI.isArray(els)) { |
||||||
|
BI.each(els, function (i, el) { |
||||||
|
if (el) { |
||||||
|
BI._lazyCreateWidget(el, { |
||||||
|
element: self |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
// if (this._isRoot === true || !(this instanceof BI.Layout)) {
|
||||||
|
this._mount(); |
||||||
|
// }
|
||||||
|
}, |
||||||
|
|
||||||
|
_setParent: function (parent) { |
||||||
|
this._parent = parent; |
||||||
|
}, |
||||||
|
|
||||||
|
/** |
||||||
|
* |
||||||
|
* @param force 是否强制挂载子节点 |
||||||
|
* @param deep 子节点是否也是按照当前force处理 |
||||||
|
* @param lifeHook 生命周期钩子触不触发，默认触发 |
||||||
|
* @param predicate 递归每个widget的回调 |
||||||
|
* @returns {boolean} |
||||||
|
* @private |
||||||
|
*/ |
||||||
|
_mount: function (force, deep, lifeHook, predicate, layer) { |
||||||
|
var self = this; |
||||||
|
if (!force && (this._isMounted || !this.isVisible() || this.__asking === true || !(this._isRoot === true || (this._parent && this._parent._isMounted === true)))) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
layer = layer || 0; |
||||||
|
lifeHook !== false && callLifeHook(this, "beforeMount"); |
||||||
|
this._isMounted = true; |
||||||
|
for (var key in this._children) { |
||||||
|
var child = this._children[key]; |
||||||
|
!self.isEnabled() && child._setEnable(false); |
||||||
|
!self.isValid() && child._setValid(false); |
||||||
|
child._mount && child._mount(deep ? force : false, deep, lifeHook, predicate, layer + 1); |
||||||
|
} |
||||||
|
this._mountChildren && this._mountChildren(); |
||||||
|
if (layer === 0) { |
||||||
|
// mounted里面会执行scrollTo之类的方法，如果放宏任务里会闪
|
||||||
|
// setTimeout(function () {
|
||||||
|
self.__afterMount(lifeHook, predicate); |
||||||
|
// }, 0);
|
||||||
|
} |
||||||
|
return true; |
||||||
|
}, |
||||||
|
|
||||||
|
__afterMount: function (lifeHook, predicate) { |
||||||
|
if (this._isMounted) { |
||||||
|
for (var key in this._children) { |
||||||
|
var child = this._children[key]; |
||||||
|
child.__afterMount && child.__afterMount(lifeHook, predicate); |
||||||
|
} |
||||||
|
lifeHook !== false && callLifeHook(this, "mounted"); |
||||||
|
this.fireEvent(BI.Events.MOUNT); |
||||||
|
predicate && predicate(this); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_mountChildren: null, |
||||||
|
|
||||||
|
_update: function (nextProps, shouldUpdate) { |
||||||
|
var o = this.options; |
||||||
|
callLifeHook(this, "beforeUpdate"); |
||||||
|
if (shouldUpdate) { |
||||||
|
var res = this.update && this.update(nextProps, shouldUpdate); |
||||||
|
} else if (BI.isNull(shouldUpdate)) { |
||||||
|
// 默认使用shallowCompare的方式进行更新
|
||||||
|
var nextChange = {}; |
||||||
|
BI.each(nextProps, function (key, value) { |
||||||
|
if (o[key] !== value) { |
||||||
|
nextChange[key] = value; |
||||||
|
} |
||||||
|
}); |
||||||
|
var res = this.update && BI.isNotEmptyObject(nextChange) && this.update(nextChange); |
||||||
|
} |
||||||
|
callLifeHook(this, "updated"); |
||||||
|
return res; |
||||||
|
}, |
||||||
|
|
||||||
|
isMounted: function () { |
||||||
|
return this._isMounted; |
||||||
|
}, |
||||||
|
|
||||||
|
setWidth: function (w) { |
||||||
|
this.options.width = w; |
||||||
|
this._initElementWidth(); |
||||||
|
}, |
||||||
|
|
||||||
|
setHeight: function (h) { |
||||||
|
this.options.height = h; |
||||||
|
this._initElementHeight(); |
||||||
|
}, |
||||||
|
|
||||||
|
_setEnable: function (enable) { |
||||||
|
if (enable === true) { |
||||||
|
this.options.disabled = false; |
||||||
|
} else if (enable === false) { |
||||||
|
this.options.disabled = true; |
||||||
|
} |
||||||
|
// 递归将所有子组件使能
|
||||||
|
BI.each(this._children, function (i, child) { |
||||||
|
!child._manualSetEnable && child._setEnable && child._setEnable(enable); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_setValid: function (valid) { |
||||||
|
if (valid === true) { |
||||||
|
this.options.invalid = false; |
||||||
|
} else if (valid === false) { |
||||||
|
this.options.invalid = true; |
||||||
|
} |
||||||
|
// 递归将所有子组件使有效
|
||||||
|
BI.each(this._children, function (i, child) { |
||||||
|
!child._manualSetValid && child._setValid && child._setValid(valid); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_setVisible: function (visible) { |
||||||
|
if (visible === true) { |
||||||
|
this.options.invisible = false; |
||||||
|
} else if (visible === false) { |
||||||
|
this.options.invisible = true; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
setEnable: function (enable) { |
||||||
|
this._manualSetEnable = true; |
||||||
|
this._setEnable(enable); |
||||||
|
if (enable === true) { |
||||||
|
this.element.removeClass("base-disabled disabled"); |
||||||
|
} else if (enable === false) { |
||||||
|
this.element.addClass("base-disabled disabled"); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
setVisible: function (visible) { |
||||||
|
this._setVisible(visible); |
||||||
|
if (visible === true) { |
||||||
|
// 用this.element.show()会把display属性改成block
|
||||||
|
this.element.css("display", ""); |
||||||
|
this._mount(); |
||||||
|
} else if (visible === false) { |
||||||
|
this.element.css("display", "none"); |
||||||
|
} |
||||||
|
this.fireEvent(BI.Events.VIEW, visible); |
||||||
|
}, |
||||||
|
|
||||||
|
setValid: function (valid) { |
||||||
|
this._manualSetValid = true; |
||||||
|
this._setValid(valid); |
||||||
|
if (valid === true) { |
||||||
|
this.element.removeClass("base-invalid invalid"); |
||||||
|
} else if (valid === false) { |
||||||
|
this.element.addClass("base-invalid invalid"); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
doBehavior: function () { |
||||||
|
var args = arguments; |
||||||
|
// 递归将所有子组件使有效
|
||||||
|
BI.each(this._children, function (i, child) { |
||||||
|
child.doBehavior && child.doBehavior.apply(child, args); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
getWidth: function () { |
||||||
|
return this.options.width; |
||||||
|
}, |
||||||
|
|
||||||
|
getHeight: function () { |
||||||
|
return this.options.height; |
||||||
|
}, |
||||||
|
|
||||||
|
isValid: function () { |
||||||
|
return !this.options.invalid; |
||||||
|
}, |
||||||
|
|
||||||
|
addWidget: function (name, widget) { |
||||||
|
var self = this; |
||||||
|
if (name instanceof BI.Widget) { |
||||||
|
widget = name; |
||||||
|
name = widget.getName(); |
||||||
|
} |
||||||
|
if (BI.isKey(name)) { |
||||||
|
name = name + ""; |
||||||
|
} |
||||||
|
name = name || widget.getName() || BI.uniqueId("widget"); |
||||||
|
if (this._children[name]) { |
||||||
|
throw new Error("name has already been existed"); |
||||||
|
} |
||||||
|
widget._setParent && widget._setParent(this); |
||||||
|
widget.on(BI.Events.DESTROY, function () { |
||||||
|
BI.remove(self._children, this); |
||||||
|
}); |
||||||
|
return (this._children[name] = widget); |
||||||
|
}, |
||||||
|
|
||||||
|
getWidgetByName: function (name) { |
||||||
|
if (!BI.isKey(name) || name === this.getName()) { |
||||||
|
return this; |
||||||
|
} |
||||||
|
name = name + ""; |
||||||
|
var widget = void 0, other = {}; |
||||||
|
BI.any(this._children, function (i, wi) { |
||||||
|
if (i === name) { |
||||||
|
widget = wi; |
||||||
|
return true; |
||||||
|
} |
||||||
|
other[i] = wi; |
||||||
|
}); |
||||||
|
if (!widget) { |
||||||
|
BI.any(other, function (i, wi) { |
||||||
|
return (widget = wi.getWidgetByName(i)); |
||||||
|
}); |
||||||
|
} |
||||||
|
return widget; |
||||||
|
}, |
||||||
|
|
||||||
|
removeWidget: function (nameOrWidget) { |
||||||
|
var self = this; |
||||||
|
if (BI.isWidget(nameOrWidget)) { |
||||||
|
BI.remove(this._children, nameOrWidget); |
||||||
|
} else { |
||||||
|
delete this._children[nameOrWidget]; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
hasWidget: function (name) { |
||||||
|
return this._children[name] != null; |
||||||
|
}, |
||||||
|
|
||||||
|
getName: function () { |
||||||
|
return this.widgetName; |
||||||
|
}, |
||||||
|
|
||||||
|
setTag: function (tag) { |
||||||
|
this.options.tag = tag; |
||||||
|
}, |
||||||
|
|
||||||
|
getTag: function () { |
||||||
|
return this.options.tag; |
||||||
|
}, |
||||||
|
|
||||||
|
attr: function (key, value) { |
||||||
|
var self = this; |
||||||
|
if (BI.isPlainObject(key)) { |
||||||
|
BI.each(key, function (k, v) { |
||||||
|
self.attr(k, v); |
||||||
|
}); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (BI.isNotNull(value)) { |
||||||
|
return this.options[key] = value; |
||||||
|
} |
||||||
|
return this.options[key]; |
||||||
|
}, |
||||||
|
|
||||||
|
css: function (name, value) { |
||||||
|
return this.element.css(name, value); |
||||||
|
}, |
||||||
|
|
||||||
|
getText: function () { |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
setText: function (text) { |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
getValue: function () { |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
setValue: function (value) { |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
isEnabled: function () { |
||||||
|
return !this.options.disabled; |
||||||
|
}, |
||||||
|
|
||||||
|
isVisible: function () { |
||||||
|
return !this.options.invisible; |
||||||
|
}, |
||||||
|
|
||||||
|
disable: function () { |
||||||
|
this.setEnable(false); |
||||||
|
}, |
||||||
|
|
||||||
|
enable: function () { |
||||||
|
this.setEnable(true); |
||||||
|
}, |
||||||
|
|
||||||
|
valid: function () { |
||||||
|
this.setValid(true); |
||||||
|
}, |
||||||
|
|
||||||
|
invalid: function () { |
||||||
|
this.setValid(false); |
||||||
|
}, |
||||||
|
|
||||||
|
invisible: function () { |
||||||
|
this.setVisible(false); |
||||||
|
}, |
||||||
|
|
||||||
|
visible: function () { |
||||||
|
this.setVisible(true); |
||||||
|
}, |
||||||
|
|
||||||
|
__d: function () { |
||||||
|
callLifeHook(this, "beforeDestroy"); |
||||||
|
this.beforeDestroy = null; |
||||||
|
BI.each(this._children, function (i, widget) { |
||||||
|
widget && widget._unMount && widget._unMount(); |
||||||
|
}); |
||||||
|
this._children = {}; |
||||||
|
this._parent = null; |
||||||
|
this._isMounted = false; |
||||||
|
callLifeHook(this, "destroyed"); |
||||||
|
this.destroyed = null; |
||||||
|
}, |
||||||
|
|
||||||
|
_unMount: function () { |
||||||
|
this.__d(); |
||||||
|
this.fireEvent(BI.Events.UNMOUNT); |
||||||
|
this.purgeListeners(); |
||||||
|
}, |
||||||
|
|
||||||
|
isolate: function () { |
||||||
|
if (this._parent) { |
||||||
|
this._parent.removeWidget(this); |
||||||
|
} |
||||||
|
BI.DOM.hang([this]); |
||||||
|
}, |
||||||
|
|
||||||
|
empty: function () { |
||||||
|
BI.each(this._children, function (i, widget) { |
||||||
|
widget && widget._unMount && widget._unMount(); |
||||||
|
}); |
||||||
|
this._children = {}; |
||||||
|
this.element.empty(); |
||||||
|
}, |
||||||
|
|
||||||
|
// 默认的populate方法就是干掉重来
|
||||||
|
reset: function () { |
||||||
|
this.purgeListeners(); |
||||||
|
this.empty(); |
||||||
|
this._initCurrent(); |
||||||
|
this._init(); |
||||||
|
this._initRef(); |
||||||
|
}, |
||||||
|
|
||||||
|
_destroy: function () { |
||||||
|
this.__d(); |
||||||
|
this.element.destroy(); |
||||||
|
this.purgeListeners(); |
||||||
|
}, |
||||||
|
|
||||||
|
destroy: function () { |
||||||
|
this.__d(); |
||||||
|
this.element.destroy(); |
||||||
|
this.fireEvent(BI.Events.UNMOUNT); |
||||||
|
this.fireEvent(BI.Events.DESTROY); |
||||||
|
this._purgeRef(); |
||||||
|
this.purgeListeners(); |
||||||
|
} |
||||||
|
}); |
||||||
|
var context = null, current = null; |
||||||
|
var contextStack = [], currentStack = []; |
||||||
|
|
||||||
|
BI.Widget.pushContext = function (_context) { |
||||||
|
if (context) contextStack.push(context); |
||||||
|
BI.Widget.context = context = _context; |
||||||
|
}; |
||||||
|
|
||||||
|
BI.Widget.popContext = function () { |
||||||
|
BI.Widget.context = context = contextStack.pop(); |
||||||
|
}; |
||||||
|
|
||||||
|
function pushTarget (_current) { |
||||||
|
if (current) currentStack.push(current); |
||||||
|
BI.Widget.current = current = _current; |
||||||
|
} |
||||||
|
|
||||||
|
function popTarget () { |
||||||
|
BI.Widget.current = current = currentStack.pop(); |
||||||
|
} |
||||||
|
|
||||||
|
BI.useStore = function (_store) { |
||||||
|
if (current && current.store) { |
||||||
|
return current.store; |
||||||
|
} |
||||||
|
if (current && current.$storeDelegate) { |
||||||
|
return current.$storeDelegate; |
||||||
|
} |
||||||
|
if (current) { |
||||||
|
var delegate = {}, origin; |
||||||
|
if (_global.Proxy) { |
||||||
|
var proxy = new Proxy(delegate, { |
||||||
|
get: function (target, key) { |
||||||
|
return Reflect.get(origin, key); |
||||||
|
}, |
||||||
|
set: function (target, key, value) { |
||||||
|
return Reflect.set(origin, key, value); |
||||||
|
} |
||||||
|
}); |
||||||
|
current._store = function () { |
||||||
|
origin = _store.apply(this, arguments); |
||||||
|
return origin; |
||||||
|
}; |
||||||
|
return current.$storeDelegate = proxy; |
||||||
|
} |
||||||
|
current._store = function () { |
||||||
|
var st = _store.apply(this, arguments); |
||||||
|
BI.extend(delegate, st); |
||||||
|
return st; |
||||||
|
}; |
||||||
|
return current.$storeDelegate = delegate; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
BI.watch = function (watch, handler) { |
||||||
|
if (BI.Widget.current) { |
||||||
|
BI.Widget.current.$watchDelayCallbacks || (BI.Widget.current.$watchDelayCallbacks = []); |
||||||
|
BI.Widget.current.$watchDelayCallbacks.push([watch, handler]); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
BI.onBeforeMount = function (beforeMount) { |
||||||
|
if (current) { |
||||||
|
if (!current.beforeMount) { |
||||||
|
current.beforeMount = []; |
||||||
|
} else if (!BI.isArray(current.beforeMount)) { |
||||||
|
current.beforeMount = [current.beforeMount]; |
||||||
|
} |
||||||
|
current.beforeMount.push(beforeMount); |
||||||
|
} |
||||||
|
}; |
||||||
|
BI.onMounted = function (mounted) { |
||||||
|
if (current) { |
||||||
|
if (!current.mounted) { |
||||||
|
current.mounted = []; |
||||||
|
} else if (!BI.isArray(current.mounted)) { |
||||||
|
current.mounted = [current.mounted]; |
||||||
|
} |
||||||
|
current.mounted.push(mounted); |
||||||
|
} |
||||||
|
}; |
||||||
|
BI.onBeforeUnmount = function (beforeDestroy) { |
||||||
|
if (current) { |
||||||
|
if (!current.beforeDestroy) { |
||||||
|
current.beforeDestroy = []; |
||||||
|
} else if (!BI.isArray(current.beforeDestroy)) { |
||||||
|
current.beforeDestroy = [current.beforeDestroy]; |
||||||
|
} |
||||||
|
current.beforeDestroy.push(beforeDestroy); |
||||||
|
} |
||||||
|
}; |
||||||
|
BI.onUnmounted = function (destroyed) { |
||||||
|
if (current) { |
||||||
|
if (!current.destroyed) { |
||||||
|
current.destroyed = []; |
||||||
|
} else if (!BI.isArray(current.destroyed)) { |
||||||
|
current.destroyed = [current.destroyed]; |
||||||
|
} |
||||||
|
current.destroyed.push(destroyed); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
BI.Widget.registerRenderEngine = function (engine) { |
||||||
|
BI.Widget._renderEngine = engine; |
||||||
|
}; |
||||||
|
BI.Widget.registerRenderEngine({ |
||||||
|
createElement: function (widget) { |
||||||
|
if (BI.isWidget(widget)) { |
||||||
|
var o = widget.options; |
||||||
|
if (o.element) { |
||||||
|
return BI.$(o.element); |
||||||
|
} |
||||||
|
if (o.tagName) { |
||||||
|
return BI.$(document.createElement(o.tagName)); |
||||||
|
} |
||||||
|
return BI.$(document.createDocumentFragment()); |
||||||
|
} |
||||||
|
return BI.$(widget); |
||||||
|
}, |
||||||
|
createFragment: function () { |
||||||
|
return document.createDocumentFragment(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
BI.mount = function (widget, container, predicate, hydrate) { |
||||||
|
if (hydrate === true) { |
||||||
|
// 将widget的element元素都挂载好，并建立相互关系
|
||||||
|
widget.element.data("__widgets", [widget]); |
||||||
|
var res = widget._mount(true, false, false, function (w) { |
||||||
|
BI.each(w._children, function (i, child) { |
||||||
|
var ws = child.element.data("__widgets"); |
||||||
|
if (!ws) { |
||||||
|
ws = []; |
||||||
|
} |
||||||
|
ws.push(child); |
||||||
|
child.element.data("__widgets", ws); |
||||||
|
}); |
||||||
|
predicate && predicate.apply(this, arguments); |
||||||
|
}); |
||||||
|
// 将新的dom树属性（事件等）patch到已存在的dom上
|
||||||
|
var c = BI.Widget._renderEngine.createElement; |
||||||
|
BI.DOM.patchProps(widget.element, c(c(container).children()[0])); |
||||||
|
|
||||||
|
var triggerLifeHook = function (w) { |
||||||
|
w.beforeMount && w.beforeMount(); |
||||||
|
w.mounted && w.mounted(); |
||||||
|
BI.each(w._children, function (i, child) { |
||||||
|
triggerLifeHook(child); |
||||||
|
}); |
||||||
|
}; |
||||||
|
// 最后触发组件树生命周期函数
|
||||||
|
triggerLifeHook(widget); |
||||||
|
return res; |
||||||
|
} |
||||||
|
if (container) { |
||||||
|
BI.Widget._renderEngine.createElement(container).append(widget.element); |
||||||
|
} |
||||||
|
return widget._mount(true, false, false, predicate); |
||||||
|
}; |
||||||
|
})(); |
||||||
Loading…
Reference in new issue