forked from fanruan/fineui
iapyang
4 years ago
66 changed files with 10379 additions and 13987 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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> |
||||
@ -0,0 +1,125 @@
|
||||
<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> |
||||
!(function () { |
||||
|
||||
var element2InstanceMap = new WeakMap(); |
||||
|
||||
BI.getInstanceByElement = function (element) { |
||||
return element2InstanceMap.get(element); |
||||
}; |
||||
|
||||
BI.Plugin.config(function (options) { |
||||
|
||||
}, function (shortcut, instance) { |
||||
instance.element.attr("shortcut", shortcut); |
||||
if (instance.options.$testId) { |
||||
setIDAttribute(instance.element[0], instance.options.$testId); |
||||
} |
||||
element2InstanceMap.set(instance.element[0], instance); |
||||
}); |
||||
|
||||
function setIDAttribute (element, id) { |
||||
if (element.id !== "") { |
||||
throw new Error("不能修改有默认id的元素"); |
||||
} |
||||
element.setAttribute("id", id); |
||||
} |
||||
|
||||
function registerWidgetIdGenerator () { |
||||
|
||||
const idSet = new Set(); |
||||
|
||||
return function (shortcut, id) { |
||||
if (idSet.has(id)) { |
||||
throw new Error("id重复了"); |
||||
} |
||||
idSet.add(id); |
||||
BI.Plugin.registerObject(shortcut, function (widget) { |
||||
setIDAttribute(widget.element[0], id); |
||||
}); |
||||
}; |
||||
} |
||||
|
||||
BI.registerWidgetId = registerWidgetIdGenerator(); |
||||
}()); |
||||
</script> |
||||
<script> |
||||
|
||||
function setTestId (parentShortcut, childShortcut, testId) { |
||||
BI.Plugin.configRender(parentShortcut, function (rendered) { |
||||
var queue = BI.isArray(rendered) ? rendered : [rendered];// 广度遍历 |
||||
while (queue.length > 0) { |
||||
var element = queue.shift(); |
||||
BI.each(element, function (key, value) { |
||||
if (BI.isArray(value)) { |
||||
queue = queue.concat(value); |
||||
} else if (BI.isPlainObject(value)) { |
||||
queue.push(value); |
||||
} else if ("type" === key && value === childShortcut) { |
||||
element.$testId = testId; |
||||
} |
||||
}); |
||||
} |
||||
return rendered; |
||||
}); |
||||
} |
||||
|
||||
setTestId("demo.parent", "bi.button_group", "测试testId"); |
||||
|
||||
var Widget = BI.inherit(BI.Widget, { |
||||
setup: function () { |
||||
var list; |
||||
return function () { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.button_group", |
||||
height: 100, |
||||
ref: function (_ref) { |
||||
list = _ref; |
||||
}, |
||||
items: BI.range(10).map(function (i) { |
||||
return { |
||||
type: "bi.label", |
||||
text: i, |
||||
cls: "bi-border" |
||||
}; |
||||
}), |
||||
layouts: [{ |
||||
type: "bi.inline", |
||||
tgap: 10, |
||||
lgap: 10 |
||||
}] |
||||
}, { |
||||
type: "bi.button", |
||||
text: "点击", |
||||
handler: function () { |
||||
} |
||||
}] |
||||
}; |
||||
}; |
||||
} |
||||
}); |
||||
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,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> |
||||
@ -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> |
||||
@ -0,0 +1,150 @@
|
||||
/** |
||||
* 同时用于virtualGroup和virtualList特性的虚拟列表 |
||||
* |
||||
* Created by GUY on 2017/5/22. |
||||
* @class BI.VirtualList |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.VirtualGroupList = BI.inherit(BI.Widget, { |
||||
props: function () { |
||||
return { |
||||
baseCls: "bi-virtual-group-list", |
||||
overscanHeight: 100, |
||||
blockSize: 10, |
||||
scrollTop: 0, |
||||
rowHeight: "auto", |
||||
items: [] |
||||
}; |
||||
}, |
||||
|
||||
init: function () { |
||||
var self = this; |
||||
this.renderedIndex = -1; |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.layout", |
||||
ref: function () { |
||||
self.topBlank = this; |
||||
} |
||||
}, { |
||||
type: "bi.virtual_group", |
||||
height: o.rowHeight * o.items.length, |
||||
ref: function () { |
||||
self.container = this; |
||||
}, |
||||
layouts: [{ |
||||
type: "bi.vertical", |
||||
scrolly: false |
||||
}] |
||||
}, { |
||||
type: "bi.layout", |
||||
ref: function () { |
||||
self.bottomBlank = this; |
||||
} |
||||
}], |
||||
element: this |
||||
}; |
||||
}, |
||||
|
||||
// mounted之后绑定事件
|
||||
mounted: function () { |
||||
var self = this, o = this.options; |
||||
this._populate(); |
||||
this.element.scroll(function (e) { |
||||
o.scrollTop = self.element.scrollTop(); |
||||
self._calculateBlocksToRender(); |
||||
}); |
||||
BI.ResizeDetector.addResizeListener(this, function () { |
||||
self._calculateBlocksToRender(); |
||||
}); |
||||
}, |
||||
|
||||
_isAutoHeight: function () { |
||||
return this.options.rowHeight === "auto"; |
||||
}, |
||||
|
||||
_renderMoreIf: function () { |
||||
var self = this, o = this.options; |
||||
var height = this.element.height(); |
||||
var minContentHeight = o.scrollTop + height + o.overscanHeight; |
||||
var index = (this.renderedIndex + 1) * o.blockSize, cnt = this.renderedIndex + 1; |
||||
var lastHeight; |
||||
var getElementHeight = function () { |
||||
return self.container.element.height() + self.topBlank.element.height() + self.bottomBlank.element.height(); |
||||
}; |
||||
while ((lastHeight = getElementHeight()) < minContentHeight && index < o.items.length) { |
||||
var items = o.items.slice(index, index + o.blockSize); |
||||
this.container.addItems(items, this); |
||||
var addedHeight = getElementHeight() - lastHeight; |
||||
this.tree.set(cnt, addedHeight); |
||||
this.renderedIndex = cnt; |
||||
cnt++; |
||||
index += o.blockSize; |
||||
} |
||||
}, |
||||
|
||||
_calculateBlocksToRender: function () { |
||||
var o = this.options; |
||||
this._isAutoHeight() && this._renderMoreIf(); |
||||
var height = this.element.height(); |
||||
var minContentHeightFrom = o.scrollTop - o.overscanHeight; |
||||
var minContentHeightTo = o.scrollTop + height + o.overscanHeight; |
||||
var start = this.tree.greatestLowerBound(minContentHeightFrom); |
||||
var end = this.tree.leastUpperBound(minContentHeightTo); |
||||
var items = []; |
||||
var topHeight = this.tree.sumTo(Math.max(-1, start - 1)); |
||||
this.topBlank.setHeight(topHeight); |
||||
if (this._isAutoHeight()) { |
||||
for (var i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) { |
||||
var index = i * o.blockSize; |
||||
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) { |
||||
items.push(o.items[j]); |
||||
} |
||||
} |
||||
this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex))); |
||||
this.container.populate(items); |
||||
} else { |
||||
for (var i = (start < 0 ? 0 : start); i <= end; i++) { |
||||
var index = i * o.blockSize; |
||||
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) { |
||||
items.push(o.items[j]); |
||||
} |
||||
} |
||||
this.container.element.height(o.rowHeight * o.items.length - topHeight); |
||||
this.container.populate(items); |
||||
} |
||||
}, |
||||
|
||||
_populate: function (items) { |
||||
var o = this.options; |
||||
if (items && this.options.items !== items) { |
||||
this.options.items = items; |
||||
} |
||||
this.tree = BI.PrefixIntervalTree.uniform(Math.ceil(o.items.length / o.blockSize), this._isAutoHeight() ? 0 : o.rowHeight * o.blockSize); |
||||
|
||||
this._calculateBlocksToRender(); |
||||
try { |
||||
this.element.scrollTop(o.scrollTop); |
||||
} catch (e) { |
||||
} |
||||
}, |
||||
|
||||
restore: function () { |
||||
this.renderedIndex = -1; |
||||
this.options.scrollTop = 0; |
||||
// 依赖于cache的占位元素也要初始化
|
||||
this.topBlank.setHeight(0); |
||||
this.bottomBlank.setHeight(0); |
||||
}, |
||||
|
||||
populate: function (items) { |
||||
this._populate(items); |
||||
} |
||||
}); |
||||
BI.shortcut("bi.virtual_group_list", BI.VirtualGroupList); |
||||
|
||||
Loading…
Reference in new issue