Browse Source
Merge in VISUAL/fineui from ~ZHENFEI.LI/fineui:es6 to es6 * commit '8fcb09c1e3c2805906ed44cd4cda7426d3a2a65b': KERNEL-14035 refactor: 挂载Element KERNEL-14035 refactor: constant、element、logic文件夹及整体eslint一下es6
Zhenfei.Li-李振飞
2 years ago
43 changed files with 1384 additions and 1282 deletions
@ -1,2 +1,2 @@
|
||||
export { Action } from "./action"; |
||||
export { ShowAction } from "./action.show"; |
||||
export { ShowAction, ActionFactory } from "./action.show"; |
||||
|
||||
@ -1,3 +1,26 @@
|
||||
|
||||
import { HighlightBehavior } from "./behavior.highlight"; |
||||
import { RedMarkBehavior } from "./behavior.redmark"; |
||||
|
||||
export const BehaviorFactory = { |
||||
createBehavior (key, options) { |
||||
let Behavior; |
||||
switch (key) { |
||||
case "highlight": |
||||
Behavior = HighlightBehavior; |
||||
break; |
||||
case "redmark": |
||||
Behavior = RedMarkBehavior; |
||||
break; |
||||
default: |
||||
} |
||||
|
||||
return new Behavior(options); |
||||
}, |
||||
}; |
||||
|
||||
export { Behavior } from "./0.behavior"; |
||||
export { HighlightBehavior } from "./behavior.highlight"; |
||||
export { RedMarkBehavior } from "./behavior.redmark"; |
||||
export { |
||||
HighlightBehavior, |
||||
RedMarkBehavior |
||||
}; |
||||
|
||||
@ -0,0 +1,2 @@
|
||||
export { Events } from "./events"; |
||||
export * from "./var"; |
||||
@ -1,22 +1,25 @@
|
||||
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); |
||||
import { isObject, each, isNull, isNotNull } from "../../2.base"; |
||||
|
||||
export const registAttrFun = Element => { |
||||
Element.registerFunction("attr", function (key, value) { |
||||
if (isObject(key)) { |
||||
each(key, (k, v) => { |
||||
this.attr(k, v); |
||||
}); |
||||
|
||||
return this; |
||||
} |
||||
if (BI.isNull(value)) { |
||||
if (isNull(value)) { |
||||
return this.attribs[key]; |
||||
} |
||||
this.attribs[key] = value; |
||||
|
||||
return this; |
||||
}); |
||||
Element.registerFunction('hasAttrib', function (key) { |
||||
return this.attribs[key] != null; |
||||
Element.registerFunction("hasAttrib", function (key) { |
||||
return isNotNull(this.attribs[key]); |
||||
}); |
||||
Element.registerFunction('removeAttr', function (key) { |
||||
Element.registerFunction("removeAttr", function (key) { |
||||
delete this.attribs[key]; |
||||
}); |
||||
}; |
||||
|
||||
@ -1,23 +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); |
||||
export const registClassFun = Element => { |
||||
Element.registerFunction("addClass", function (classList) { |
||||
BI.each(classList.split(" "), (i, cls) => { |
||||
if (cls && !this.classMap[cls]) { |
||||
this.classList.push(cls); |
||||
} |
||||
cls && (self.classMap[cls] = true); |
||||
cls && (this.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); |
||||
Element.registerFunction("removeClass", function (classList) { |
||||
BI.each(classList.split(" "), (i, cls) => { |
||||
if (cls && this.classMap[cls]) { |
||||
delete this.classMap[cls]; |
||||
this.classList.splice(this.classList.indexOf(cls), 1); |
||||
} |
||||
}); |
||||
|
||||
return this; |
||||
}); |
||||
}; |
||||
|
||||
@ -1,22 +1,26 @@
|
||||
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); |
||||
import { isNull, isObject, each, trim, camelize } from "../../2.base"; |
||||
|
||||
export const registCssFun = Element => { |
||||
Element.registerFunction("css", function (key, value) { |
||||
if (isObject(key)) { |
||||
each(key, (k, v) => { |
||||
this.css(k, v); |
||||
}); |
||||
|
||||
return this; |
||||
} |
||||
key = BI.trim(BI.camelize(key)); |
||||
key = trim(camelize(key)); |
||||
|
||||
return css(this, key, value); |
||||
}); |
||||
}; |
||||
|
||||
const css = (elem, key, value) => { |
||||
key = BI.trim(BI.camelize(key)); |
||||
if (BI.isNull(value)) { |
||||
key = trim(camelize(key)); |
||||
if (isNull(value)) { |
||||
return elem.styles[key]; |
||||
} |
||||
elem.styles[key] = value; |
||||
|
||||
return elem; |
||||
}; |
||||
|
||||
@ -1,12 +1,15 @@
|
||||
export const registDataFun = (Element) => { |
||||
Element.registerFunction('data', function (key, value) { |
||||
import { isNull } from "../../2.base"; |
||||
|
||||
export const registDataFun = Element => { |
||||
Element.registerFunction("data", function (key, value) { |
||||
if (!this._data) { |
||||
this._data = {}; |
||||
} |
||||
if (BI.isNull(value)) { |
||||
if (isNull(value)) { |
||||
return this._data[key]; |
||||
} |
||||
this._data[key] = value; |
||||
|
||||
return this; |
||||
}); |
||||
}; |
||||
|
||||
@ -1,9 +1,10 @@
|
||||
export const registEmptyFun = (Element) => { |
||||
Element.registerFunction('empty', function (text) { |
||||
export const registEmptyFun = Element => { |
||||
Element.registerFunction("empty", function (text) { |
||||
this.children = []; |
||||
|
||||
return this; |
||||
}); |
||||
Element.registerFunction('destroy', function (text) { |
||||
Element.registerFunction("destroy", function (text) { |
||||
return this; |
||||
}); |
||||
}; |
||||
|
||||
@ -1,32 +1,33 @@
|
||||
var returnThis = function () { |
||||
function returnThis () { |
||||
return this; |
||||
}; |
||||
export const registEventFun = (Element) => { |
||||
} |
||||
|
||||
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) => { |
||||
"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); |
||||
}); |
||||
}; |
||||
|
||||
@ -1,15 +1,19 @@
|
||||
export const registHtmlFun = (Element) => { |
||||
Element.registerFunction('html', function (text) { |
||||
if (text && text.charAt(0) === '<') { |
||||
BI.createWidget({ |
||||
type: 'bi.html', |
||||
import { createWidget } from "../../5.inject"; |
||||
import { htmlDecode } from "../../func"; |
||||
|
||||
export const registHtmlFun = Element => { |
||||
Element.registerFunction("html", function (text) { |
||||
if (text && text.charAt(0) === "<") { |
||||
createWidget({ |
||||
type: "bi.html", |
||||
element: this.widget, |
||||
html: text, |
||||
}); |
||||
this.originalHtml = text; |
||||
} else { |
||||
this.text = BI.htmlDecode(text); |
||||
this.text = htmlDecode(text); |
||||
} |
||||
|
||||
return this; |
||||
}); |
||||
}; |
||||
|
||||
@ -1,6 +1,7 @@
|
||||
export const registKeywordMarkFun = (Element) => { |
||||
Element.registerFunction('__textKeywordMarked__', function (text) { |
||||
export const registKeywordMarkFun = Element => { |
||||
Element.registerFunction("__textKeywordMarked__", function (text) { |
||||
this[0].textContent = text; |
||||
|
||||
return this; |
||||
}); |
||||
}; |
||||
|
||||
@ -1,65 +1,69 @@
|
||||
var skipArray = []; |
||||
var pxStyle = ['font-size', 'width', 'height']; |
||||
var _renderToHtml = function (root) { |
||||
var str = ''; |
||||
if (BI.isNull(root.originalHtml)) { |
||||
if (root.tag !== 'body') { |
||||
import { each, isNull, hyphenate, isNumeric, isKey } from "../../2.base"; |
||||
|
||||
const skipArray = []; |
||||
const pxStyle = ["font-size", "width", "height"]; |
||||
function _renderToHtml(root) { |
||||
let str = ""; |
||||
if (isNull(root.originalHtml)) { |
||||
if (root.tag !== "body") { |
||||
str += `<${root.tag}`; |
||||
if (root.classList.length > 0) { |
||||
str += ' class="'; |
||||
BI.each(root.classList, (i, cls) => { |
||||
str += " class=\""; |
||||
each(root.classList, (i, cls) => { |
||||
str += ` ${cls}`; |
||||
}); |
||||
str += '"'; |
||||
str += "\""; |
||||
} |
||||
str += ' style="'; |
||||
BI.each(root.originalStyles, (key, stl) => { |
||||
str += " style=\""; |
||||
each(root.originalStyles, (key, stl) => { |
||||
if ( |
||||
skipArray.contains(key) || |
||||
(key == 'height' && root.classList.contains('bi-design-components-data-data-table-cell')) |
||||
(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, ''); |
||||
key = hyphenate(key); |
||||
if (key === "font-family") { |
||||
stl = stl.replace(/"/g, ""); |
||||
} |
||||
if (pxStyle.contains(key) && BI.isNumeric(stl)) { |
||||
stl += 'px'; |
||||
if (pxStyle.contains(key) && isNumeric(stl)) { |
||||
stl += "px"; |
||||
} |
||||
if (BI.isKey(stl)) { |
||||
if (isKey(stl)) { |
||||
str += ` ${key}:${stl};`; |
||||
} |
||||
}); |
||||
str += '"'; |
||||
BI.each(root.attribs, (key, attr) => { |
||||
if (BI.isKey(attr)) { |
||||
str += "\""; |
||||
each(root.attribs, (key, attr) => { |
||||
if (isKey(attr)) { |
||||
str += ` ${key}=${attr}`; |
||||
} |
||||
}); |
||||
if (root.textContent) { |
||||
str += ` title=${root.textContent}`; |
||||
} |
||||
str += '>'; |
||||
str += ">"; |
||||
} |
||||
// 特殊处理，spread_table的行列元素是不取配置里的高度的，使用stretch拉伸的（leaves取了高度），但是功能代码里给单元格默认高度了，导致拉伸不了
|
||||
// 而spread_grid_table的行列元素是取配置里的高度的，拉不拉伸都一样
|
||||
BI.each(root.children, (i, child) => { |
||||
each(root.children, (i, child) => { |
||||
str += _renderToHtml(child); |
||||
}); |
||||
} else { |
||||
str += root.originalHtml; |
||||
} |
||||
if (root.tag !== 'body') { |
||||
if (root.tag !== "body") { |
||||
if (root.textContent) { |
||||
str += root.textContent; |
||||
} |
||||
str += `</${root.tag}>`; |
||||
} |
||||
|
||||
return str; |
||||
}; |
||||
export const registRenderToHtmlFun = (Element) => { |
||||
Element.registerFunction('renderToHtml', function () { |
||||
} |
||||
|
||||
export const registRenderToHtmlFun = Element => { |
||||
Element.registerFunction("renderToHtml", function () { |
||||
return _renderToHtml(this); |
||||
}); |
||||
}; |
||||
|
||||
@ -1,50 +1,54 @@
|
||||
var skipArray = ['width', 'height']; |
||||
var _renderToString = function (root) { |
||||
var str = ''; |
||||
if (root.nodeName !== 'body') { |
||||
import { each, hyphenate } from "../../2.base"; |
||||
|
||||
const skipArray = ["width", "height"]; |
||||
function _renderToString(root) { |
||||
let str = ""; |
||||
if (root.nodeName !== "body") { |
||||
str += `<${root.nodeName}`; |
||||
if (root.classList.length > 0) { |
||||
str += ' class="'; |
||||
BI.each(root.classList, (i, cls) => { |
||||
str += " class=\""; |
||||
each(root.classList, (i, cls) => { |
||||
str += ` ${cls}`; |
||||
}); |
||||
str += '"'; |
||||
str += "\""; |
||||
} |
||||
str += ' style="'; |
||||
BI.each(root.styles, (key, stl) => { |
||||
str += " style=\""; |
||||
each(root.styles, (key, stl) => { |
||||
if (skipArray.includes(key)) { |
||||
return; |
||||
} |
||||
key = BI.hyphenate(key); |
||||
key = hyphenate(key); |
||||
str += ` ${key}:${stl};`; |
||||
}); |
||||
str += ` width:${root.width}px;`; |
||||
str += ` height:${root.height}px;`; |
||||
str += ' position: fixed;'; |
||||
str += " position: fixed;"; |
||||
str += ` left: ${root.position.x}px;`; |
||||
str += ` top: ${root.position.y}px;`; |
||||
str += '"'; |
||||
BI.each(root.attribs, (key, attr) => { |
||||
str += "\""; |
||||
each(root.attribs, (key, attr) => { |
||||
str += ` ${key}:${attr}`; |
||||
}); |
||||
str += '>'; |
||||
str += ">"; |
||||
} |
||||
BI.each(root.children, (i, child) => { |
||||
each(root.children, (i, child) => { |
||||
str += _renderToString(child); |
||||
}); |
||||
// if (root.htmlContent) {
|
||||
// str += root.htmlContent;
|
||||
// }
|
||||
if (root.nodeName !== 'body') { |
||||
if (root.nodeName !== "body") { |
||||
if (root.text) { |
||||
str += root.text; |
||||
} |
||||
str += `</${root.nodeName}>`; |
||||
} |
||||
|
||||
return str; |
||||
}; |
||||
export const registRenderToStringFun = (Element) => { |
||||
Element.registerFunction('renderToString', function () { |
||||
} |
||||
|
||||
export const registRenderToStringFun = Element => { |
||||
Element.registerFunction("renderToString", function () { |
||||
return _renderToString(this); |
||||
}); |
||||
}; |
||||
|
||||
@ -1,10 +1,12 @@
|
||||
export const registTextFun = (Element) => { |
||||
Element.registerFunction('setText', function (text) { |
||||
export const registTextFun = Element => { |
||||
Element.registerFunction("setText", function (text) { |
||||
this.text = text; |
||||
|
||||
return this; |
||||
}); |
||||
Element.registerFunction('setValue', function (text) { |
||||
Element.registerFunction("setValue", function (text) { |
||||
this.text = text; |
||||
|
||||
return this; |
||||
}); |
||||
}; |
||||
|
||||
@ -1,9 +1,11 @@
|
||||
export const registValFun = (Element) => { |
||||
Element.registerFunction('val', function (value) { |
||||
export const registValFun = Element => { |
||||
Element.registerFunction("val", function (value) { |
||||
if (BI.isNotNull(value)) { |
||||
this.text = `${value}`; |
||||
|
||||
return this; |
||||
} |
||||
|
||||
return this.text; |
||||
}); |
||||
}; |
||||
|
||||
@ -0,0 +1,83 @@
|
||||
import { Logic } from "./logic"; |
||||
import { VerticalLayoutLogic, HorizontalLayoutLogic, TableLayoutLogic, HorizontalFillLayoutLogic } from "./logic.layout"; |
||||
|
||||
export const LogicFactory = { |
||||
Type: { |
||||
Vertical: "vertical", |
||||
Horizontal: "horizontal", |
||||
Table: "table", |
||||
HorizontalFill: "horizontal_fill", |
||||
}, |
||||
createLogic (key, options) { |
||||
let LogicCls; |
||||
switch (key) { |
||||
case LogicFactory.Type.Vertical: |
||||
LogicCls = VerticalLayoutLogic; |
||||
break; |
||||
case LogicFactory.Type.Horizontal: |
||||
LogicCls = HorizontalLayoutLogic; |
||||
break; |
||||
case LogicFactory.Type.Table: |
||||
LogicCls = TableLayoutLogic; |
||||
break; |
||||
case LogicFactory.Type.HorizontalFill: |
||||
LogicCls = HorizontalFillLayoutLogic; |
||||
break; |
||||
default: |
||||
LogicCls = Logic; |
||||
break; |
||||
} |
||||
|
||||
return new LogicCls(options).createLogic(); |
||||
}, |
||||
|
||||
createLogicTypeByDirection (direction) { |
||||
switch (direction) { |
||||
case BI.Direction.Top: |
||||
case BI.Direction.Bottom: |
||||
case BI.Direction.Custom: |
||||
return BI.LogicFactory.Type.Vertical; |
||||
case BI.Direction.Left: |
||||
case BI.Direction.Right: |
||||
return BI.LogicFactory.Type.Horizontal; |
||||
default: |
||||
} |
||||
}, |
||||
|
||||
createLogicItemsByDirection (direction) { |
||||
let items = Array.prototype.slice.call(arguments, 1); |
||||
items = BI.map(items, (i, item) => { |
||||
if (BI.isWidget(item)) { |
||||
return { |
||||
el: item, |
||||
width: item.options.width, |
||||
height: item.options.height, |
||||
}; |
||||
} |
||||
|
||||
return item; |
||||
}); |
||||
switch (direction) { |
||||
case BI.Direction.Bottom: |
||||
items.reverse(); |
||||
break; |
||||
case BI.Direction.Right: |
||||
items.reverse(); |
||||
break; |
||||
case BI.Direction.Custom: |
||||
items = items.slice(1); |
||||
break; |
||||
default: |
||||
} |
||||
|
||||
return items; |
||||
}, |
||||
}; |
||||
|
||||
export { |
||||
Logic, |
||||
VerticalLayoutLogic, |
||||
HorizontalLayoutLogic, |
||||
TableLayoutLogic, |
||||
HorizontalFillLayoutLogic |
||||
}; |
||||
Loading…
Reference in new issue