Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

整理代码

es6
guy 3 years ago
parent
11c1cd57ea
commit
12d7add546
7 changed files with 461 additions and 66 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      examples/config-render.html
  2. 62
      examples/dev.html
  3. 89
      examples/virtual-group.html
  4. 220
      examples/visible.html
  5. 9
      examples/插件设计.html
  6. 52
      src/core/4.widget.js
  7. 21
      src/core/7.plugin.js

74
examples/config-render.html
Unescape View File

@ -0,0 +1,74 @@
<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>
BI.Plugin.configRender("demo.parent", function (rendered) {
console.log(rendered);
return rendered;
});
var Widget = BI.inherit(BI.Widget, {
setup: function () {
var wrapper, list;
return function () {
return {
type: "bi.vertical",
items: [{
type: "bi.vertical",
invisible: true,
ref: function (_ref) {
wrapper = _ref;
},
items: [{
type: "bi.button_group",
height: 100,
ref: function (_ref) {
list = _ref;
},
items: [],
layouts: [{
type: "bi.inline",
tgap: 10,
lgap: 10
}]
}]
}, {
type: "bi.button",
text: "点击",
handler: function () {
list.populate(BI.range(10).map(function (i) {
return {
type: "bi.label",
text: i,
cls: "bi-border"
};
}));
wrapper.setVisible(true);
}
}]
};
};
}
});
BI.shortcut("demo.parent", Widget);
BI.createWidget({
type: "bi.absolute",
items: [{
el: {
type: "demo.parent"
},
top: 100,
left: 100
}],
element: "#wrapper"
});
</script>
</body>
</html>

62
examples/dev.html
Unescape View File

@ -11,62 +11,42 @@
<script> <script>
var Widget = BI.inherit(BI.Widget, { var Widget = BI.inherit(BI.Widget, {
props: {
vdom: true
},
watch: {
text: function () {
this.reset();
}
},
setup: function () { setup: function () {
var list, count = 0; var wrapper, list;
return function () { return function () {
return { return {
type: "bi.vertical", type: "bi.vertical",
items: [{ items: [{
type: "bi.virtual_group", type: "bi.vertical",
height: 100, invisible: true,
ref: function (_ref) { ref: function (_ref) {
list = _ref; wrapper = _ref;
}, },
items: BI.range(10).map(function (item, i) { items: [{
var r = { type: "bi.button_group",
type: "bi.label", height: 100,
text: item, ref: function (_ref) {
// 指定key后，会根据key值进行前后两次数据对比，否则会根据数组索引进行数据对比 list = _ref;
key: item, },
cls: "bi-border" items: [],
}; layouts: [{
if (i === 9) { type: "bi.inline",
r.width = "fill"; tgap: 10,
r.key = "唯一的标识"; lgap: 10
} }]
return r;
}),
layouts: [{
type: "bi.inline",
tgap: 10,
lgap: 10
}] }]
}, { }, {
type: "bi.button", type: "bi.button",
text: "点击删除第一个元素", text: "点击",
handler: function () { handler: function () {
count++; list.populate(BI.range(10).map(function (i) {
list.populate(BI.range(10 - count).map(function (i) { return {
var r = {
type: "bi.label", type: "bi.label",
text: i + count, text: i,
key: i + count,
cls: "bi-border" cls: "bi-border"
}; };
if (i + count === 9) {
r.width = "fill";
r.key = "唯一的标识";
}
return r;
})); }));
wrapper.setVisible(true);
} }
}] }]
}; };

89
examples/virtual-group.html
Unescape View File

@ -0,0 +1,89 @@
<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>
var Widget = BI.inherit(BI.Widget, {
props: {
vdom: true
},
watch: {
text: function () {
this.reset();
}
},
setup: function () {
var list, count = 0;
return function () {
return {
type: "bi.vertical",
items: [{
type: "bi.virtual_group",
height: 100,
ref: function (_ref) {
list = _ref;
},
items: BI.range(10).map(function (item, i) {
var r = {
type: "bi.label",
text: item,
// 指定key后，会根据key值进行前后两次数据对比，否则会根据数组索引进行数据对比
key: item,
cls: "bi-border"
};
if (i === 9) {
r.width = "fill";
r.key = "唯一的标识";
}
return r;
}),
layouts: [{
type: "bi.inline",
tgap: 10,
lgap: 10
}]
}, {
type: "bi.button",
text: "点击删除第一个元素",
handler: function () {
count++;
list.populate(BI.range(10 - count).map(function (i) {
var r = {
type: "bi.label",
text: i + count,
key: i + count,
cls: "bi-border"
};
if (i + count === 9) {
r.width = "fill";
r.key = "唯一的标识";
}
return r;
}));
}
}]
};
};
}
});
BI.shortcut("demo.parent", Widget);
BI.createWidget({
type: "bi.absolute",
items: [{
el: {
type: "demo.parent"
},
top: 100,
left: 100
}],
element: "#wrapper"
});
</script>
</body>
</html>

220
examples/visible.html
Unescape View File

@ -0,0 +1,220 @@
<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>
var Item = BI.inherit(BI.BasicButton, {
props: {
baseCls: "bi-list-item-active"
},
render: function () {
var self = this;
return {
type: "bi.vertical_adapt",
items: [
{
el: {
type: "bi.label",
textAlign: "left",
text: this.options.text
},
lgap: this.options.layer * 24 + 24
}
]
};
},
getValue: function () {
return this.options.id;
}
});
BI.shortcut("bi.example.single_custom_tree.item", Item);
var Node = BI.inherit(BI.NodeButton, {
props: {
baseCls: "bi-list-item"
},
render: function () {
var self = this;
return {
type: "bi.vertical_adapt",
items: [
{
el: {
type: "bi.label",
ref: function (_ref) {
self.icon = _ref;
},
text: this.options.open ? "-" : "+",
height: 24,
width: 24
},
lgap: this.options.layer * 24
}, {
type: "bi.label",
textAlign: "left",
text: this.options.text
}
]
};
},
setOpened: function (b) {
Node.superclass.setOpened.apply(this, arguments);
this.icon.setText(b ? "-" : "+");
},
getValue: function () {
return this.options.id;
}
});
BI.shortcut("bi.example.single_custom_tree.node", Node);
var mockData = [
{
id: "无锡",
text: "无锡",
isParent: true
}, {
id: "锡山区",
text: "锡山区",
pId: "无锡",
isParent: true
}, {
id: "安镇街道",
text: "安镇街道",
pId: "锡山区"
}, {
id: "滨湖区",
text: "滨湖区",
pId: "无锡"
}, {
id: "南京",
text: "南京",
isParent: true
}, {
id: "建邺区",
text: "建邺区",
pId: "南京"
}
];
var Tree = BI.inherit(BI.Widget, {
render: function () {
var self = this;
return {
type: "bi.custom_tree",
ref: function (_ref) {
self.tree = _ref;
},
expander: {
type: "bi.expander",
isDefaultInit: false,
el: {},
popup: {
type: "bi.custom_tree"
}
},
el: {
type: "bi.button_tree",
chooseType: 0,
layouts: [
{
type: "bi.vertical"
}
]
},
items: []
};
},
_formatItems: function (items) {
var nodes = BI.map(items, function (index, item) {
return BI.extend({
type: item.isParent ? "bi.example.single_custom_tree.node" : "bi.example.single_custom_tree.item"
}, item);
});
return this.traversalLayers(BI.Tree.transformToTreeFormat(nodes), 0);
},
traversalLayers: function (items, layer) {
var self = this;
BI.each(items, function (index, item) {
item.layer = layer;
if (item.children) {
self.traversalLayers(item.children, layer + 1);
}
});
return items;
},
populate: function (items) {
this.tree.populate(this._formatItems(items));
}
});
BI.shortcut("bi.example.single_custom_tree", Tree);
var Widget = BI.inherit(BI.Widget, {
setup: function () {
var wrapper, tree;
return function () {
return {
type: "bi.vertical",
items: [{
type: "bi.vertical",
invisible: true,
ref: function (_ref) {
wrapper = _ref;
},
items: [{
type: "bi.example.single_custom_tree",
height: 100,
ref: function (_ref) {
tree = _ref;
}
}]
}, {
type: "bi.button",
text: "点击",
handler: function () {
tree.populate(mockData);
wrapper.setVisible(true);
}
}]
};
};
}
});
BI.shortcut("demo.parent", Widget);
BI.createWidget({
type: "bi.absolute",
items: [{
el: {
type: "demo.parent"
},
top: 100,
left: 100
}],
element: "#wrapper"
});
</script>
</body>
</html>

9
examples/插件设计.html
Unescape View File

@ -3,13 +3,14 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/>
<!-- <script src="../dist/2.0/fineui.js"></script>--> <script src="../dist/2.0/fineui.js"></script>
<script src="http://localhost:9001/fineui.js"></script> <!-- <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css" />-->
<!-- <script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>-->
</head> </head>
<body> <body>
<div id="wrapper"></div> <div id="wrapper"></div>
<script> <script>
BI.config("demo.parent", function (config){ BI.config("demo.parent", function (config) {
console.log("123"); console.log("123");
return { return {
type: "bi.button", type: "bi.button",
@ -34,7 +35,7 @@
minVersion: "2.0", minVersion: "2.0",
maxVersion: "4.0" maxVersion: "4.0"
} }
}) });
}); });
</script> </script>
<script> <script>

52
src/core/4.widget.js
Unescape View File

@ -114,6 +114,7 @@
return; return;
} }
initCallbackCalled = true; initCallbackCalled = true;
function render () { function render () {
// 加个保险 // 加个保险
if (renderCallbackCalled === true) { if (renderCallbackCalled === true) {
@ -123,6 +124,7 @@
renderCallbackCalled = true; renderCallbackCalled = true;
self._render(); self._render();
} }
if (self.options.beforeRender || self.beforeRender) { if (self.options.beforeRender || self.beforeRender) {
self.__async = true; self.__async = true;
(self.options.beforeRender || self.beforeRender).call(self, render); (self.options.beforeRender || self.beforeRender).call(self, render);
@ -235,27 +237,14 @@
var self = this; var self = this;
var isMounted = this._isMounted; var isMounted = this._isMounted;
this.__async === true && isMounted && callLifeHook(this, "beforeMount"); this.__async === true && isMounted && callLifeHook(this, "beforeMount");
var render = BI.isFunction(this.options.render) ? this.options.render : this.render; if (!this._initVNode()) {
var els = render && render.call(this); var render = BI.isFunction(this.options.render) ? this.options.render : this.render;
if (BI.isPlainObject(els)) { var els = render && render.call(this);
els = [els]; els = BI.Plugin.getRender(this.options.type, els);
} if (BI.isPlainObject(els)) {
if (BI.isArray(els)) { els = [els];
if (this.options.vdom) { }
var div = document.createElement("div"); if (BI.isArray(els)) {
var element = this.element;
element.append(div);
this.vnode = this._renderVNode();
BI.patchVNode(div, this.vnode);
// 去除这个临时的div
BI.DOM.hang([div]);
element.attr("style", self.vnode.elm.getAttribute("style"));
element.addClass(self.vnode.elm.getAttribute("class"));
element.empty();
BI.each(BI.jQuery(self.vnode.elm).children(), function (i, node) {
element.append(node);
});
} else {
BI.each(els, function (i, el) { BI.each(els, function (i, el) {
if (el) { if (el) {
BI._lazyCreateWidget(el, { BI._lazyCreateWidget(el, {
@ -272,10 +261,31 @@
} }
}, },
_initVNode: function () {
if (this.options.vdom) {
var div = document.createElement("div");
var element = this.element;
element.append(div);
this.vnode = this._renderVNode();
BI.patchVNode(div, this.vnode);
// 去除这个临时的div
BI.DOM.hang([div]);
element.attr("style", self.vnode.elm.getAttribute("style"));
element.addClass(self.vnode.elm.getAttribute("class"));
element.empty();
BI.each(BI.jQuery(self.vnode.elm).children(), function (i, node) {
element.append(node);
});
return true;
}
return false;
},
_renderVNode: function () { _renderVNode: function () {
var self = this; var self = this;
var render = BI.isFunction(this.options.render) ? this.options.render : this.render; var render = BI.isFunction(this.options.render) ? this.options.render : this.render;
var els = render && render.call(this); var els = render && render.call(this);
els = BI.Plugin.getRender(this.options.type, els);
if (BI.isPlainObject(els)) { if (BI.isPlainObject(els)) {
els = [els]; els = [els];
} }

21
src/core/7.plugin.js
Unescape View File

@ -3,6 +3,7 @@ BI.Plugin = BI.Plugin || {};
var _WidgetsPlugin = {}; var _WidgetsPlugin = {};
var _ObjectPlugin = {}; var _ObjectPlugin = {};
var _ConfigPlugin = {}; var _ConfigPlugin = {};
var _ConfigRenderPlugin = {};
var _GlobalWidgetConfigFns = []; var _GlobalWidgetConfigFns = [];
var __GlobalObjectConfigFns = []; var __GlobalObjectConfigFns = [];
BI.defaults(BI.Plugin, { BI.defaults(BI.Plugin, {
@ -47,6 +48,25 @@ BI.Plugin = BI.Plugin || {};
_ConfigPlugin[type].push(fn); _ConfigPlugin[type].push(fn);
}, },
getRender: function (type, rendered) {
var res;
if (_ConfigRenderPlugin[type]) {
for (var i = _ConfigRenderPlugin[type].length - 1; i >= 0; i--) {
if (res = _ConfigRenderPlugin[type][i](rendered)) {
rendered = res;
}
}
}
return rendered;
},
configRender: function (type, fn) {
if (!_ConfigRenderPlugin[type]) {
_ConfigRenderPlugin[type] = [];
}
_ConfigRenderPlugin[type].push(fn);
},
// Deprecated // Deprecated
registerWidget: function (type, fn) { registerWidget: function (type, fn) {
if (!_WidgetsPlugin[type]) { if (!_WidgetsPlugin[type]) {
@ -58,6 +78,7 @@ BI.Plugin = BI.Plugin || {};
_WidgetsPlugin[type].push(fn); _WidgetsPlugin[type].push(fn);
}, },
// Deprecated
relieveWidget: function (type) { relieveWidget: function (type) {
delete _WidgetsPlugin[type]; delete _WidgetsPlugin[type];
}, },

Write Preview
Loading…
Cancel
Save