Browse Source
* commit 'c9631b84f544883d5aaccfb9321119620f354972': (152 commits) BI-110891 fix：同步fineui 无JIRA任务 同步 REPORT-76966 fix: 组件是否异步获取数据,和组件是否支持搜索分离开 REPORT-76747 fix: IE环境下图标显示不正常 auto upgrade version to 2.0.20220720140353 auto upgrade version to 2.0.20220720111514 无JIRA fix: titile问题 feat: config中传下context feat: 准备demo auto upgrade version to 2.0.20220719204542 auto upgrade version to 2.0.20220719203505 KERNEL-12033 feat:复选列表添加itemFormatter属性,支持自定义节点类型 auto upgrade version to 2.0.20220719110449 KERNEL-12033 feat: 复选列表添加itemFormatter属性,支持自定义节点类型 auto upgrade version to 2.0.20220718192331 auto upgrade version to 2.0.20220718191454 BI-109153 feat: tootip做一下兼容 KERNEL-9708 refactor: 提取到system中实现 无JRIA fix: bi.list_pane 回调后tiptext处理 refactor: eslint fix ...research/test
superman
2 years ago
134 changed files with 5095 additions and 2869 deletions
@ -0,0 +1,44 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
const workerCmd = require('./worker/cli.worker'); |
||||
|
||||
function getArgs (startIndex = 1) { |
||||
const args = {}; |
||||
process.argv |
||||
.slice(startIndex, process.argv.length) |
||||
.forEach(arg => { |
||||
// long arg
|
||||
if (arg.slice(0, 2) === '--') { |
||||
const longArg = arg.split('='); |
||||
const longArgFlag = longArg[0].slice(2, longArg[0].length); |
||||
const longArgValue = longArg.length > 1 ? longArg[1] : true; |
||||
args[longArgFlag] = longArgValue; |
||||
// flags
|
||||
} else if (arg[0] === '-') { |
||||
const flags = arg.slice(1, arg.length); |
||||
args[flags] = true; |
||||
} |
||||
}); |
||||
|
||||
return args; |
||||
} |
||||
|
||||
const cmds = new Map([ |
||||
['worker', workerCmd], |
||||
]); |
||||
|
||||
const baseCmd = 'fui-cli'; |
||||
|
||||
const startIndex = process.argv.findIndex(argv => argv.indexOf(baseCmd) !== -1); |
||||
|
||||
if (startIndex === -1) { |
||||
throw new Error(`Command ${baseCmd} not found in args`); |
||||
} |
||||
|
||||
const cmd = process.argv[startIndex + 1]; |
||||
|
||||
if (cmds.has(cmd)) { |
||||
cmds.get(cmd)?.exec(getArgs(startIndex + 2)); |
||||
} else { |
||||
throw new Error(`Command ${cmd} not supported`); |
||||
} |
||||
@ -0,0 +1,62 @@
|
||||
const fs = require('fs'); |
||||
const path = require('path'); |
||||
|
||||
function scanAndCreate(structure, root = process.cwd()) { |
||||
Object.keys(structure) |
||||
.forEach(name => { |
||||
if (typeof structure[name] === 'object') { |
||||
fs.mkdirSync(path.resolve(root, name)); |
||||
|
||||
scanAndCreate(structure[name], path.resolve(root, `./${name}`)); |
||||
} else if (structure[name] === '') { |
||||
fs.appendFileSync(path.resolve(root, name), ''); |
||||
} else if (typeof structure[name] === 'string') { |
||||
const content = fs.readFileSync(structure[name]).toString(); |
||||
|
||||
fs.appendFileSync(path.resolve(root, name), content); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
module.exports = { |
||||
exec: async args => { |
||||
if (!args.init) { |
||||
throw new Error(`Command init not found in args`); |
||||
} |
||||
|
||||
if (!args.name) { |
||||
throw new Error('Command --name=... not found in args'); |
||||
} |
||||
|
||||
const name = args.name; |
||||
|
||||
const structure = { |
||||
[`${name}_worker`]: { |
||||
'main_thread': { |
||||
action: {}, |
||||
[`${name}_main_thread.ts`]: path.resolve(__dirname, './template/main_thread_template.ts'), |
||||
}, |
||||
utils: { |
||||
'action_type.ts': '', |
||||
}, |
||||
'worker_thread': { |
||||
action: {}, |
||||
[`${name}_worker_thread.ts`]: path.resolve(__dirname, './template/worker_thread_template.ts'), |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
scanAndCreate(structure); |
||||
}, |
||||
}; |
||||
|
||||
// 结构
|
||||
// -xxx_worker
|
||||
// -|--main_thread
|
||||
// -|--|--action
|
||||
// -|--|--xxx_main_thread.ts
|
||||
// -|--utils
|
||||
// -|--|--action_type.ts
|
||||
// -|--worker_thread
|
||||
// -|--|--action
|
||||
// -|--|--worker_main_thread.ts
|
||||
@ -0,0 +1,5 @@
|
||||
class CrudMainTreadWorker extends BI.Workers.MainThreadWorker { |
||||
protected initActions(): void { |
||||
// to init some actions
|
||||
} |
||||
} |
||||
@ -0,0 +1,5 @@
|
||||
class CrudWorkerTreadWorker extends BI.Workers.MainThreadWorker { |
||||
protected initActions(): void { |
||||
// to init some actions
|
||||
} |
||||
} |
||||
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Document</title> |
||||
<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> |
||||
<body> |
||||
<div id="wrapper"></div> |
||||
<script src="./worker_new/index.js"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,105 @@
|
||||
document.cookie = "test=demo"; |
||||
|
||||
// worker获取主线程资源
|
||||
var CookieAction = BI.inherit(BI.Workers.WorkerBaseAction, { |
||||
addActionHandler: function() { |
||||
this.controller.addActionHandler("Cookie", this.getCookie.bind(this)); |
||||
}, |
||||
|
||||
getCookie: function() { |
||||
return document.cookie; |
||||
} |
||||
}); |
||||
|
||||
// 调用worker计算
|
||||
var FibonacciAction = BI.inherit(BI.Workers.WorkerBaseAction, { |
||||
addActionHandler: function() {}, |
||||
|
||||
getResult: function(times) { |
||||
return this.controller.requestPromise("Fibonacci", { times: times }) |
||||
.then(function(v) { |
||||
console.log(v); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
// 主线程与worker多次交互
|
||||
const HeartBeatCheckAction = BI.inherit(BI.Workers.WorkerBaseAction, { |
||||
addActionHandler: function() { |
||||
this.controller.addActionHandler("HeartBeatChecked", this.recieveHeartBeatChecked.bind(this)); |
||||
}, |
||||
|
||||
recieveHeartBeatChecked: function (payload) { |
||||
console.log("heartbeat: " + payload.time); |
||||
}, |
||||
|
||||
startHeatBeatCheck: function() { |
||||
return this.controller.request("HeartBeatCheckStart"); |
||||
}, |
||||
|
||||
stopHeatBeatCheck: function() { |
||||
return this.controller.request("HeartBeatCheckStop"); |
||||
} |
||||
}); |
||||
|
||||
var WorkerThreadWorker = BI.inherit(BI.Workers.MainThreadWorker, { |
||||
initActions: function() { |
||||
this.cookieAction = this.createAction(CookieAction); |
||||
|
||||
this.fibonacciAction = this.createAction(FibonacciAction); |
||||
|
||||
this.heartBeatCheckAction = this.createAction(HeartBeatCheckAction); |
||||
}, |
||||
|
||||
calculateFibonacci: function(times) { |
||||
this.fibonacciAction.getResult(times); |
||||
}, |
||||
|
||||
startHeatBeatCheck: function() { |
||||
this.heartBeatCheckAction.startHeatBeatCheck(); |
||||
}, |
||||
|
||||
stopHeatBeatCheck: function() { |
||||
this.heartBeatCheckAction.stopHeatBeatCheck(); |
||||
} |
||||
}); |
||||
|
||||
var mainThreadWorker = new WorkerThreadWorker({ |
||||
workerUrl: "./worker_new/worker.js", |
||||
workerName: "demo" |
||||
}); |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.vertical", |
||||
element: "#wrapper", |
||||
vgap: 10, |
||||
hgap: 10, |
||||
items: [ |
||||
{ |
||||
type: "bi.button", |
||||
text: "点击计算斐波那契数列第40项", |
||||
width: 200, |
||||
handler: function() { |
||||
console.log("click"); |
||||
|
||||
mainThreadWorker.calculateFibonacci(40); |
||||
} |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "开始心跳", |
||||
width: 200, |
||||
handler: function() { |
||||
mainThreadWorker.startHeatBeatCheck(); |
||||
} |
||||
}, |
||||
{ |
||||
type: "bi.button", |
||||
text: "停止心跳", |
||||
width: 200, |
||||
handler: function() { |
||||
mainThreadWorker.stopHeatBeatCheck(); |
||||
} |
||||
} |
||||
] |
||||
}); |
||||
@ -0,0 +1,80 @@
|
||||
self.importScripts("https://fanruan.design/fineui/fineui_without_jquery_polyfill.js"); |
||||
|
||||
var CookieAction = BI.inherit(BI.Workers.WorkerBaseAction, { |
||||
addActionHandler: function() {}, |
||||
|
||||
getCookie: function() { |
||||
return this.controller.requestPromise("Cookie"); |
||||
} |
||||
}); |
||||
|
||||
function fibonacci(n) { |
||||
if (n === 1 || n === 2) { |
||||
return 1; |
||||
} |
||||
|
||||
return fibonacci(n - 2) + fibonacci(n - 1); |
||||
} |
||||
|
||||
var FibonacciAction = BI.inherit(BI.Workers.WorkerBaseAction, { |
||||
addActionHandler: function() { |
||||
this.controller.addActionHandler("Fibonacci", this.getResult.bind(this)); |
||||
}, |
||||
|
||||
getResult: function(payload) { |
||||
return fibonacci(payload.times); |
||||
} |
||||
}); |
||||
|
||||
const HeartBeatCheckAction = BI.inherit(BI.Workers.WorkerBaseAction, { |
||||
addActionHandler: function() { |
||||
this.controller.addActionHandler("HeartBeatCheckStart", this.startHeatBeatCheck.bind(this)); |
||||
this.controller.addActionHandler("HeartBeatCheckStop", this.stopHeatBeatCheck.bind(this)); |
||||
}, |
||||
|
||||
startHeatBeatCheck: function() { |
||||
var self = this; |
||||
|
||||
if (!this.timer) { |
||||
console.log("heart beat check started"); |
||||
|
||||
this.timer = setInterval(function() { |
||||
// 模拟请求
|
||||
setTimeout(function() { |
||||
self.controller.request("HeartBeatChecked", { |
||||
time: new Date() |
||||
}); |
||||
}, 50); |
||||
}, 5 * 1000); |
||||
} else { |
||||
console.log("heart beat has already started!"); |
||||
} |
||||
}, |
||||
|
||||
stopHeatBeatCheck: function() { |
||||
console.log("heart beat check stopped"); |
||||
|
||||
clearInterval(this.timer); |
||||
} |
||||
}); |
||||
|
||||
var WorkerThreadWorker = BI.inherit(BI.Workers.WorkerThreadWorker, { |
||||
initActions: function() { |
||||
this.cookieAction = this.createAction(CookieAction); |
||||
|
||||
this.fibonacciAction = this.createAction(FibonacciAction); |
||||
|
||||
this.heartBeatCheckAction = this.createAction(HeartBeatCheckAction); |
||||
}, |
||||
|
||||
fetchCookie: function() { |
||||
return this.cookieAction.getCookie() |
||||
.then(function (v) { |
||||
console.log(v); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
var workerThreadWorker = new WorkerThreadWorker(); |
||||
|
||||
workerThreadWorker.fetchCookie(); |
||||
@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Document</title> |
||||
<link rel="stylesheet" type="text/css" href="https://fanruan.design/fineui/2.0/fineui_without_normalize.css" /> |
||||
<!-- <script src="/fineui.js"></script> --> |
||||
<script src="https://fanruan.design/fineui/2.0/fineui.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="wrapper"></div> |
||||
<script> |
||||
var LoadingPane = BI.inherit(BI.Pane, {}); |
||||
|
||||
BI.shortcut("demo.loading_pane", LoadingPane); |
||||
|
||||
var loadingPane; |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.vertical", |
||||
element: "#wrapper", |
||||
items: [{ |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "demo.loading_pane", |
||||
width: 800, |
||||
height: 600, |
||||
cls: "bi-border", |
||||
ref: function(ref) { |
||||
loadingPane = ref; |
||||
}, |
||||
}, { |
||||
type: "bi.left", |
||||
rgap: 10, |
||||
items: [{ |
||||
type: "bi.button", |
||||
text: "开始loading", |
||||
handler: function () { |
||||
loadingPane.loading(); |
||||
}, |
||||
}, { |
||||
type: "bi.button", |
||||
text: "停止loading", |
||||
handler: function () { |
||||
loadingPane.loaded(); |
||||
}, |
||||
}, { |
||||
type: "bi.button", |
||||
text: "设置文字loading", |
||||
handler: function () { |
||||
BI.config("bi.provider.system", function (provider) { |
||||
provider.setLoadingCreator(function () { |
||||
return { |
||||
type: "bi.label", |
||||
text: "我是被替换了的loading" |
||||
}; |
||||
}); |
||||
}); |
||||
}, |
||||
}, { |
||||
type: "bi.button", |
||||
text: "恢复波浪线loading", |
||||
handler: function () { |
||||
BI.config("bi.provider.system", function (provider) { |
||||
provider.setLoadingCreator(function () { |
||||
return { |
||||
type: "bi.horizontal", |
||||
cls: "bi-loading-widget", |
||||
height: 30, |
||||
width: 30, |
||||
hgap: 5, |
||||
vgap: 2.5, |
||||
items: [{ |
||||
type: "bi.layout", |
||||
cls: "animate-rect rect1", |
||||
height: 25, |
||||
width: 2.5 |
||||
}, { |
||||
type: "bi.layout", |
||||
cls: "animate-rect rect2", |
||||
height: 25, |
||||
width: 2.5 |
||||
}, { |
||||
type: "bi.layout", |
||||
cls: "animate-rect rect3", |
||||
height: 25, |
||||
width: 2.5 |
||||
}] |
||||
}; |
||||
}); |
||||
}); |
||||
}, |
||||
}] |
||||
}], |
||||
}], |
||||
}); |
||||
</script> |
||||
</body> |
||||
|
||||
</html> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,7 @@
|
||||
|
||||
if (!_global.$ && !_global.jQuery) { |
||||
_global.jQuery = _global.$ = BI.jQuery; |
||||
} |
||||
if (!_global._) { |
||||
_global._ = BI._; |
||||
} |
||||
@ -0,0 +1,74 @@
|
||||
import { registFunction } from './plugins'; |
||||
|
||||
export function Element(widget, attribs) { |
||||
this.l = this.r = this.t = this.b = 0; // 边框
|
||||
this.marginLeft = this.marginRight = this.marginTop = this.marginBottom = 0; //间距
|
||||
this.position = {}; |
||||
this.classMap = {}; |
||||
this.classList = []; |
||||
this.children = []; |
||||
this.attribs = attribs || {}; |
||||
this.styles = {}; |
||||
// 兼容处理
|
||||
this['0'] = this; |
||||
this.style = {}; |
||||
if (!widget) { |
||||
this.nodeName = 'body'; |
||||
this.position.x = 0; |
||||
this.position.y = 0; |
||||
this.attribs.id = 'body'; |
||||
} else if (BI.isWidget(widget)) { |
||||
this.widget = widget; |
||||
this.nodeName = widget.options.tagName; |
||||
this.textBaseLine = widget.options.textBaseLine; |
||||
} else if (BI.isString(widget)) { |
||||
this.nodeName = widget; |
||||
} |
||||
} |
||||
|
||||
initElement(Element); |
||||
registFunction(Element); |
||||
|
||||
function initElement(element) { |
||||
element.prototype = { |
||||
appendChild(child) { |
||||
child.parent = this; |
||||
if (this.children.push(child) !== 1) { |
||||
var sibling = this.children[this.children.length - 2]; |
||||
sibling.next = child; |
||||
child.prev = sibling; |
||||
child.next = null; |
||||
} |
||||
}, |
||||
append(child) { |
||||
child.parent = this; |
||||
if (this.children.push(child) !== 1) { |
||||
var sibling = this.children[this.children.length - 2]; |
||||
sibling.next = child; |
||||
child.prev = sibling; |
||||
child.next = null; |
||||
} |
||||
}, |
||||
getParent() { |
||||
return this.parent; |
||||
}, |
||||
getSiblings() { |
||||
var parent = this.getParent(); |
||||
return parent ? parent.getChildren() : [this]; |
||||
}, |
||||
getChildren() { |
||||
return this.children; |
||||
}, |
||||
|
||||
getBounds() { |
||||
return {}; |
||||
}, |
||||
|
||||
width() { |
||||
|
||||
}, |
||||
height() { |
||||
|
||||
} |
||||
}; |
||||
} |
||||
@ -0,0 +1,31 @@
|
||||
import { Element } from './element'; |
||||
|
||||
BI.Element = Element; |
||||
BI.Element.renderEngine = { |
||||
createElement: (widget) => { |
||||
// eslint-disable-next-line no-undef
|
||||
if (BI.isWidget(widget)) { |
||||
var o = widget.options; |
||||
if (o.element instanceof Element) { |
||||
return o.element; |
||||
} |
||||
if (typeof o.element === 'string' && o.element !== 'body') { |
||||
o.root = false; |
||||
return new Element(widget); |
||||
} |
||||
|
||||
if (o.root === true) { |
||||
return new Element(); |
||||
} |
||||
} |
||||
// eslint-disable-next-line no-undef
|
||||
if (BI.isString(widget)) { |
||||
return new Element(widget); |
||||
} |
||||
return new Element(widget); |
||||
}, |
||||
|
||||
createFragment() { |
||||
return new Element(); |
||||
} |
||||
} |
||||
@ -0,0 +1,22 @@
|
||||
export const registAttrFun = (Element) => { |
||||
Element.registerFunction('attr', function (key, value) { |
||||
var self = this; |
||||
if (BI.isObject(key)) { |
||||
BI.each(key, (k, v) => { |
||||
self.attr(k, v); |
||||
}); |
||||
return this; |
||||
} |
||||
if (BI.isNull(value)) { |
||||
return this.attribs[key]; |
||||
} |
||||
this.attribs[key] = value; |
||||
return this; |
||||
}); |
||||
Element.registerFunction('hasAttrib', function (key) { |
||||
return this.attribs[key] != null; |
||||
}); |
||||
Element.registerFunction('removeAttr', function (key) { |
||||
delete this.attribs[key]; |
||||
}); |
||||
}; |
||||
@ -0,0 +1,23 @@
|
||||
export const registClassFun = (Element) => { |
||||
Element.registerFunction('addClass', function (classList) { |
||||
var self = this; |
||||
BI.each(classList.split(' '), (i, cls) => { |
||||
if (cls && !self.classMap[cls]) { |
||||
self.classList.push(cls); |
||||
} |
||||
cls && (self.classMap[cls] = true); |
||||
}); |
||||
return this; |
||||
}); |
||||
|
||||
Element.registerFunction('removeClass', function (classList) { |
||||
var self = this; |
||||
BI.each(classList.split(' '), (i, cls) => { |
||||
if (cls && self.classMap[cls]) { |
||||
delete self.classMap[cls]; |
||||
self.classList.splice(self.classList.indexOf(cls), 1); |
||||
} |
||||
}); |
||||
return this; |
||||
}); |
||||
}; |
||||
@ -0,0 +1,22 @@
|
||||
export const registCssFun = (Element) => { |
||||
Element.registerFunction('css', function (key, value) { |
||||
var self = this; |
||||
if (BI.isObject(key)) { |
||||
BI.each(key, (k, v) => { |
||||
self.css(k, v); |
||||
}); |
||||
return this; |
||||
} |
||||
key = BI.trim(BI.camelize(key)); |
||||
return css(this, key, value); |
||||
}); |
||||
}; |
||||
|
||||
const css = (elem, key, value) => { |
||||
key = BI.trim(BI.camelize(key)); |
||||
if (BI.isNull(value)) { |
||||
return elem.styles[key]; |
||||
} |
||||
elem.styles[key] = value; |
||||
return elem; |
||||
}; |
||||
@ -0,0 +1,12 @@
|
||||
export const registDataFun = (Element) => { |
||||
Element.registerFunction('data', function (key, value) { |
||||
if (!this._data) { |
||||
this._data = {}; |
||||
} |
||||
if (BI.isNull(value)) { |
||||
return this._data[key]; |
||||
} |
||||
this._data[key] = value; |
||||
return this; |
||||
}); |
||||
}; |
||||
@ -0,0 +1,9 @@
|
||||
export const registEmptyFun = (Element) => { |
||||
Element.registerFunction('empty', function (text) { |
||||
this.children = []; |
||||
return this; |
||||
}); |
||||
Element.registerFunction('destroy', function (text) { |
||||
return this; |
||||
}); |
||||
}; |
||||
@ -0,0 +1,32 @@
|
||||
var returnThis = function () { |
||||
return this; |
||||
}; |
||||
export const registEventFun = (Element) => { |
||||
[ |
||||
'mousedown', |
||||
'mouseup', |
||||
'mousewheel', |
||||
'keydown', |
||||
'keyup', |
||||
'focus', |
||||
'focusin', |
||||
'focusout', |
||||
'click', |
||||
'on', |
||||
'off', |
||||
'bind', |
||||
'unbind', |
||||
'trigger', |
||||
'hover', |
||||
'scroll', |
||||
'scrollLeft', |
||||
'scrollTop', |
||||
'resize', |
||||
'show', |
||||
'hide', |
||||
'dblclick', |
||||
'blur', |
||||
].forEach((event) => { |
||||
Element.registerFunction(event, returnThis); |
||||
}); |
||||
}; |
||||
@ -0,0 +1,15 @@
|
||||
export const registHtmlFun = (Element) => { |
||||
Element.registerFunction('html', function (text) { |
||||
if (text && text.charAt(0) === '<') { |
||||
BI.createWidget({ |
||||
type: 'bi.html', |
||||
element: this.widget, |
||||
html: text, |
||||
}); |
||||
this.originalHtml = text; |
||||
} else { |
||||
this.text = BI.htmlDecode(text); |
||||
} |
||||
return this; |
||||
}); |
||||
}; |
||||
@ -0,0 +1,31 @@
|
||||
import { registAttrFun } from './attr'; |
||||
import { registClassFun } from './class'; |
||||
import { registCssFun } from './css'; |
||||
import { registDataFun } from './data'; |
||||
import { registEmptyFun } from './empty'; |
||||
import { registEventFun } from './event'; |
||||
import { registHtmlFun } from './html'; |
||||
import { registKeywordMarkFun } from './keywordMark'; |
||||
import { registRenderToHtmlFun } from './renderToHtml'; |
||||
import { registRenderToStringFun } from './renderToString'; |
||||
import { registTextFun } from './text'; |
||||
import { registValFun } from './val'; |
||||
|
||||
export const registFunction = (Element) => { |
||||
var functionMap = {}; |
||||
Element.registerFunction = (key, fn) => { |
||||
Element.prototype[key] = functionMap[key] = fn; |
||||
}; |
||||
registAttrFun(Element); |
||||
registClassFun(Element); |
||||
registCssFun(Element); |
||||
registDataFun(Element); |
||||
registEmptyFun(Element); |
||||
registEventFun(Element); |
||||
registHtmlFun(Element); |
||||
registKeywordMarkFun(Element); |
||||
registRenderToStringFun(Element); |
||||
registRenderToHtmlFun(Element); |
||||
registTextFun(Element); |
||||
registValFun(Element); |
||||
}; |
||||
@ -0,0 +1,6 @@
|
||||
export const registKeywordMarkFun = (Element) => { |
||||
Element.registerFunction('__textKeywordMarked__', function (text) { |
||||
this[0].textContent = text; |
||||
return this; |
||||
}); |
||||
}; |
||||
@ -0,0 +1,65 @@
|
||||
var skipArray = []; |
||||
var pxStyle = ['font-size', 'width', 'height']; |
||||
var _renderToHtml = function (root) { |
||||
var str = ''; |
||||
if (BI.isNull(root.originalHtml)) { |
||||
if (root.tag !== 'body') { |
||||
str += `<${root.tag}`; |
||||
if (root.classList.length > 0) { |
||||
str += ' class="'; |
||||
BI.each(root.classList, (i, cls) => { |
||||
str += ` ${cls}`; |
||||
}); |
||||
str += '"'; |
||||
} |
||||
str += ' style="'; |
||||
BI.each(root.originalStyles, (key, stl) => { |
||||
if ( |
||||
skipArray.contains(key) || |
||||
(key == 'height' && root.classList.contains('bi-design-components-data-data-table-cell')) |
||||
) { |
||||
return; |
||||
} |
||||
key = BI.hyphenate(key); |
||||
if (key === 'font-family') { |
||||
stl = stl.replace(/\"/g, ''); |
||||
} |
||||
if (pxStyle.contains(key) && BI.isNumeric(stl)) { |
||||
stl += 'px'; |
||||
} |
||||
if (BI.isKey(stl)) { |
||||
str += ` ${key}:${stl};`; |
||||
} |
||||
}); |
||||
str += '"'; |
||||
BI.each(root.attribs, (key, attr) => { |
||||
if (BI.isKey(attr)) { |
||||
str += ` ${key}=${attr}`; |
||||
} |
||||
}); |
||||
if (root.textContent) { |
||||
str += ` title=${root.textContent}`; |
||||
} |
||||
str += '>'; |
||||
} |
||||
// 特殊处理，spread_table的行列元素是不取配置里的高度的，使用stretch拉伸的（leaves取了高度），但是功能代码里给单元格默认高度了，导致拉伸不了
|
||||
// 而spread_grid_table的行列元素是取配置里的高度的，拉不拉伸都一样
|
||||
BI.each(root.children, (i, child) => { |
||||
str += _renderToHtml(child); |
||||
}); |
||||
} else { |
||||
str += root.originalHtml; |
||||
} |
||||
if (root.tag !== 'body') { |
||||
if (root.textContent) { |
||||
str += root.textContent; |
||||
} |
||||
str += `</${root.tag}>`; |
||||
} |
||||
return str; |
||||
}; |
||||
export const registRenderToHtmlFun = (Element) => { |
||||
Element.registerFunction('renderToHtml', function () { |
||||
return _renderToHtml(this); |
||||
}); |
||||
}; |
||||
@ -0,0 +1,50 @@
|
||||
var skipArray = ['width', 'height']; |
||||
var _renderToString = function (root) { |
||||
var str = ''; |
||||
if (root.nodeName !== 'body') { |
||||
str += `<${root.nodeName}`; |
||||
if (root.classList.length > 0) { |
||||
str += ' class="'; |
||||
BI.each(root.classList, (i, cls) => { |
||||
str += ` ${cls}`; |
||||
}); |
||||
str += '"'; |
||||
} |
||||
str += ' style="'; |
||||
BI.each(root.styles, (key, stl) => { |
||||
if (skipArray.includes(key)) { |
||||
return; |
||||
} |
||||
key = BI.hyphenate(key); |
||||
str += ` ${key}:${stl};`; |
||||
}); |
||||
str += ` width:${root.width}px;`; |
||||
str += ` height:${root.height}px;`; |
||||
str += ' position: fixed;'; |
||||
str += ` left: ${root.position.x}px;`; |
||||
str += ` top: ${root.position.y}px;`; |
||||
str += '"'; |
||||
BI.each(root.attribs, (key, attr) => { |
||||
str += ` ${key}:${attr}`; |
||||
}); |
||||
str += '>'; |
||||
} |
||||
BI.each(root.children, (i, child) => { |
||||
str += _renderToString(child); |
||||
}); |
||||
// if (root.htmlContent) {
|
||||
// str += root.htmlContent;
|
||||
// }
|
||||
if (root.nodeName !== 'body') { |
||||
if (root.text) { |
||||
str += root.text; |
||||
} |
||||
str += `</${root.nodeName}>`; |
||||
} |
||||
return str; |
||||
}; |
||||
export const registRenderToStringFun = (Element) => { |
||||
Element.registerFunction('renderToString', function () { |
||||
return _renderToString(this); |
||||
}); |
||||
}; |
||||
@ -0,0 +1,10 @@
|
||||
export const registTextFun = (Element) => { |
||||
Element.registerFunction('setText', function (text) { |
||||
this.text = text; |
||||
return this; |
||||
}); |
||||
Element.registerFunction('setValue', function (text) { |
||||
this.text = text; |
||||
return this; |
||||
}); |
||||
}; |
||||
@ -0,0 +1,9 @@
|
||||
export const registValFun = (Element) => { |
||||
Element.registerFunction('val', function (value) { |
||||
if (BI.isNotNull(value)) { |
||||
this.text = `${value}`; |
||||
return this; |
||||
} |
||||
return this.text; |
||||
}); |
||||
}; |
||||
@ -0,0 +1,259 @@
|
||||
/** |
||||
* 加载控件 |
||||
* |
||||
* Created by GUY on 2015/8/31. |
||||
* @class BI.Loader |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.MultiSelectInnerLoader = BI.inherit(BI.Widget, { |
||||
_defaultConfig: function () { |
||||
return BI.extend(BI.MultiSelectInnerLoader.superclass._defaultConfig.apply(this, arguments), { |
||||
baseCls: "bi-multi-select-inner-loader", |
||||
|
||||
direction: "top", |
||||
isDefaultInit: true, // 是否默认初始化数据
|
||||
logic: { |
||||
dynamic: true, |
||||
scrolly: true |
||||
}, |
||||
|
||||
// 下面是button_group的属性
|
||||
el: { |
||||
type: "bi.button_group", |
||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
||||
behaviors: { |
||||
redmark: function () { |
||||
return true; |
||||
} |
||||
}, |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}] |
||||
}, |
||||
|
||||
items: [], |
||||
itemsCreator: BI.emptyFn, |
||||
onLoaded: BI.emptyFn, |
||||
|
||||
// 下面是分页信息
|
||||
count: false, |
||||
prev: false, |
||||
next: {}, |
||||
hasPrev: BI.emptyFn, |
||||
hasNext: BI.emptyFn |
||||
}); |
||||
}, |
||||
|
||||
_nextLoad: function () { |
||||
var self = this, o = this.options; |
||||
this.next.setLoading(); |
||||
if (this.cachItems && this.cachItems.length > 0) { |
||||
this.next.setLoaded(); |
||||
this.addItems(this.cachItems.slice(0, 100)); |
||||
this.cachItems = this.cachItems.slice(100); |
||||
return; |
||||
} |
||||
o.itemsCreator.apply(this, [{times: ++this.times}, function () { |
||||
self.next.setLoaded(); |
||||
self.addItems.apply(self, arguments); |
||||
}]); |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this, o = this.options; |
||||
if (o.itemsCreator === false) { |
||||
o.next = false; |
||||
} |
||||
this.button_group = BI.createWidget(o.el, { |
||||
type: "bi.button_group", |
||||
chooseType: 0, |
||||
items: o.items, |
||||
behaviors: {}, |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}], |
||||
value: o.value |
||||
}); |
||||
this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) { |
||||
if (type === BI.Events.CLICK) { |
||||
var node = self.cachGroup.getNodeByValue(value); |
||||
if (node) { |
||||
node.setSelected(obj.isSelected()); |
||||
} |
||||
} |
||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
||||
if (type === BI.Events.CLICK) { |
||||
self.fireEvent(BI.Loader.EVENT_CHANGE, obj); |
||||
} |
||||
}); |
||||
|
||||
var renderEngine = BI.Widget._renderEngine; |
||||
BI.Widget.registerRenderEngine(BI.Element.renderEngine); |
||||
this.cachGroup = BI.createWidget(o.el, { |
||||
type: "bi.button_group", |
||||
root: true, |
||||
chooseType: 0, |
||||
items: o.items, |
||||
behaviors: {}, |
||||
layouts: [{ |
||||
type: "bi.vertical" |
||||
}], |
||||
value: o.value |
||||
}); |
||||
BI.Widget.registerRenderEngine(renderEngine); |
||||
|
||||
if (o.next !== false) { |
||||
this.next = BI.createWidget(BI.extend({ |
||||
type: "bi.loading_bar" |
||||
}, o.next)); |
||||
this.next.on(BI.Controller.EVENT_CHANGE, function (type) { |
||||
if (type === BI.Events.CLICK) { |
||||
self._nextLoad(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
BI.createWidget({ |
||||
type: "bi.vertical", |
||||
element: this, |
||||
items: [this.button_group, this.next] |
||||
}); |
||||
|
||||
o.isDefaultInit && BI.isEmpty(o.items) && BI.nextTick(BI.bind(function () { |
||||
o.isDefaultInit && BI.isEmpty(o.items) && this._populate(); |
||||
}, this)); |
||||
}, |
||||
|
||||
hasNext: function () { |
||||
var o = this.options; |
||||
if (BI.isNumber(o.count)) { |
||||
return this.count < o.count; |
||||
} |
||||
if (this.cachItems && this.cachItems.length > 0) { |
||||
return true; |
||||
} |
||||
return !!o.hasNext.apply(this, [{ |
||||
times: this.times, |
||||
count: this.count |
||||
}]); |
||||
}, |
||||
|
||||
addItems: function (items) { |
||||
this.count += items.length; |
||||
if (BI.isObject(this.next)) { |
||||
if (this.hasNext()) { |
||||
this.options.items = this.options.items.concat(items); |
||||
this.next.setLoaded(); |
||||
} else { |
||||
this.next.setEnd(); |
||||
} |
||||
} |
||||
var renderEngine = BI.Widget._renderEngine; |
||||
BI.Widget.registerRenderEngine(BI.Element.renderEngine); |
||||
this.cachGroup.addItems.apply(this.cachGroup, arguments); |
||||
BI.Widget.registerRenderEngine(renderEngine); |
||||
this.button_group.addItems.apply(this.button_group, arguments); |
||||
}, |
||||
|
||||
_populate: function (items) { |
||||
var self = this, o = this.options; |
||||
if (arguments.length === 0 && (BI.isFunction(o.itemsCreator))) { |
||||
o.itemsCreator.apply(this, [{times: 1}, function (items, keyword) { |
||||
if (arguments.length === 0) { |
||||
throw new Error("参数不能为空"); |
||||
} |
||||
self.populate.apply(self, arguments); |
||||
o.onLoaded(); |
||||
}]); |
||||
return false; |
||||
} |
||||
this.options.items = (items || []).slice(0, 100); |
||||
this.times = 1; |
||||
this.count = 0; |
||||
this.count += items.length; |
||||
if (BI.isObject(this.next)) { |
||||
if (this.hasNext()) { |
||||
this.next.setLoaded(); |
||||
} else { |
||||
this.next.invisible(); |
||||
} |
||||
} |
||||
return true; |
||||
}, |
||||
|
||||
populate: function (items, keyword) { |
||||
if (this._populate.apply(this, arguments)) { |
||||
this.cachItems = []; |
||||
if (items.length > 100) { |
||||
this.cachItems = items.slice(100); |
||||
} |
||||
var renderEngine = BI.Widget._renderEngine; |
||||
BI.Widget.registerRenderEngine(BI.Element.renderEngine); |
||||
this.cachGroup.populate.call(this.cachGroup, items, keyword); |
||||
BI.Widget.registerRenderEngine(renderEngine); |
||||
this.button_group.populate.call(this.button_group, items.slice(0, 100), keyword); |
||||
} |
||||
}, |
||||
|
||||
setNotSelectedValue: function () { |
||||
this.button_group.setNotSelectedValue.apply(this.button_group, arguments); |
||||
this.cachGroup.setNotSelectedValue.apply(this.cachGroup, arguments); |
||||
}, |
||||
|
||||
getNotSelectedValue: function () { |
||||
return this.cachGroup.getNotSelectedValue(); |
||||
}, |
||||
|
||||
setAllSelected: function (v) { |
||||
this.button_group.setAllSelected(v); |
||||
this.cachGroup.setAllSelected(v); |
||||
}, |
||||
|
||||
setValue: function (value) { |
||||
var map = BI.makeObject(BI.isArray(value) ? value : [value]); |
||||
this.cachGroup.setValueMap.call(this.cachGroup, map); |
||||
this.button_group.setValueMap.call(this.button_group, map); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.cachGroup.getValue.apply(this.cachGroup, arguments); |
||||
}, |
||||
|
||||
getAllButtons: function () { |
||||
return this.button_group.getAllButtons(); |
||||
}, |
||||
|
||||
getAllLeaves: function () { |
||||
return this.button_group.getAllLeaves(); |
||||
}, |
||||
|
||||
getSelectedButtons: function () { |
||||
return this.button_group.getSelectedButtons(); |
||||
}, |
||||
|
||||
getNotSelectedButtons: function () { |
||||
return this.button_group.getNotSelectedButtons(); |
||||
}, |
||||
|
||||
getIndexByValue: function (value) { |
||||
return this.button_group.getIndexByValue(value); |
||||
}, |
||||
|
||||
getNodeById: function (id) { |
||||
return this.button_group.getNodeById(id); |
||||
}, |
||||
|
||||
getNodeByValue: function (value) { |
||||
return this.button_group.getNodeByValue(value); |
||||
}, |
||||
|
||||
empty: function () { |
||||
this.button_group.empty(); |
||||
this.cachGroup.empty(); |
||||
BI.each([this.prev, this.next], function (i, ob) { |
||||
ob && ob.setVisible(false); |
||||
}); |
||||
} |
||||
}); |
||||
BI.MultiSelectInnerLoader.EVENT_CHANGE = "EVENT_CHANGE"; |
||||
BI.shortcut("bi.multi_select_inner_loader", BI.MultiSelectInnerLoader); |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue