fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

update

es6
guy 6 years ago
parent
561b45586b
commit
37339459df
9 changed files with 1173 additions and 960 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. 487
      dist/bundle.js
  2. 70
      dist/bundle.min.js
  3. 485
      dist/core.js
  4. 487
      dist/fineui.js
  5. 70
      dist/fineui.min.js
  6. 27
      dist/fineui_without_jquery_polyfill.js
  7. 2
      dist/utils.min.js
  8. 478
      src/core/platform/dom/dom.js
  9. 27
      src/core/widget.js

487
dist/bundle.js vendored
Unescape View File

@ -12122,7 +12122,32 @@ _.extend(BI.OB.prototype, {
} }
}); });
BI.mount = function (widget, container, predicate) { BI.mount = function (widget, container, predicate, hydrate) {
if(hydrate === true){
// 将widget的element元素都挂载好
var res = widget._mount(true, false, false, function(w){
var ws = w.element.data("__widgets");
if(!ws) {
ws = [];
}
ws.push(w);
w.element.data("__widgets", ws);
});
// 将新的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) { if (container) {
BI.Widget._renderEngine.createElement(container).append(widget.element); BI.Widget._renderEngine.createElement(container).append(widget.element);
} }
@ -18497,256 +18522,278 @@ BI.prepares.push(function () {
* 对DOM操作的通用函数 * 对DOM操作的通用函数
* @type {{}} * @type {{}}
*/ */
BI.DOM = {}; !(function () {
BI.extend(BI.DOM, { BI.DOM = {};
BI.extend(BI.DOM, {
/**
* 把dom数组或元素悬挂起来,使其不对html产生影响 patchProps: function (fromElement, toElement) {
* @param dom var elemData = jQuery._data(fromElement[0]);
*/ var events = elemData.events;
hang: function (doms) { BI.each(events, function (eventKey, event) {
if (BI.isEmpty(doms)) { var handlers = event.handlers;
return; BI.each(handlers, function (i, handler) {
} toElement.on(eventKey, handler);
var frag = BI.Widget._renderEngine.createFragment(); });
BI.each(doms, function (i, dom) { });
dom instanceof BI.Widget && (dom = dom.element); var fromChildren = fromElement.children(), toChildren = toElement.children();
dom instanceof $ && dom[0] && frag.appendChild(dom[0]); if(fromChildren.length !== toChildren.length) {
}); throw new Error("不匹配");
return frag; }
}, BI.each(fromChildren, function (i, child) {
BI.DOM.patchProps(jQuery(child), jQuery(toChildren[i]));
});
BI.each(fromElement.data("__widgets"), function (i, widget) {
widget.element = toElement;
});
},
/**
* 把dom数组或元素悬挂起来,使其不对html产生影响
* @param dom
*/
hang: function (doms) {
if (BI.isEmpty(doms)) {
return;
}
var frag = BI.Widget._renderEngine.createFragment();
BI.each(doms, function (i, dom) {
dom instanceof BI.Widget && (dom = dom.element);
dom instanceof $ && dom[0] && frag.appendChild(dom[0]);
});
return frag;
},
isExist: function (obj) { isExist: function (obj) {
return BI.Widget._renderEngine.createElement("body").find(obj.element).length > 0; return BI.Widget._renderEngine.createElement("body").find(obj.element).length > 0;
}, },
// 预加载图片 // 预加载图片
preloadImages: function (srcArray, onload) { preloadImages: function (srcArray, onload) {
var count = 0, images = []; var count = 0, images = [];
function complete () { function complete () {
count++; count++;
if (count >= srcArray.length) { if (count >= srcArray.length) {
onload(); onload();
}
} }
}
BI.each(srcArray, function (i, src) { BI.each(srcArray, function (i, src) {
images[i] = new Image(); images[i] = new Image();
images[i].src = src; images[i].src = src;
images[i].onload = function () { images[i].onload = function () {
complete(); complete();
}; };
images[i].onerror = function () { images[i].onerror = function () {
complete(); complete();
}; };
}); });
}, },
isColor: function (color) { isColor: function (color) {
return color && (this.isRGBColor(color) || this.isHexColor(color)); return color && (this.isRGBColor(color) || this.isHexColor(color));
}, },
isRGBColor: function (color) { isRGBColor: function (color) {
if (!color) { if (!color) {
return false; return false;
} }
return color.substr(0, 3) === "rgb"; return color.substr(0, 3) === "rgb";
}, },
isHexColor: function (color) { isHexColor: function (color) {
if (!color) { if (!color) {
return false; return false;
} }
return color[0] === "#" && color.length === 7; return color[0] === "#" && color.length === 7;
}, },
isDarkColor: function (hex) { isDarkColor: function (hex) {
if (!hex || !this.isHexColor(hex)) { if (!hex || !this.isHexColor(hex)) {
return false;
}
var rgb = this.rgb2json(this.hex2rgb(hex));
var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114);
if (grayLevel < 192/** 网上给的是140**/) {
return true;
}
return false; return false;
} },
var rgb = this.rgb2json(this.hex2rgb(hex));
var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114);
if (grayLevel < 192/** 网上给的是140**/) {
return true;
}
return false;
},
// 获取对比颜色 // 获取对比颜色
getContrastColor: function (color) { getContrastColor: function (color) {
if (!color || !this.isColor(color)) { if (!color || !this.isColor(color)) {
return ""; return "";
} }
if (this.isDarkColor(color)) { if (this.isDarkColor(color)) {
return "#ffffff"; return "#ffffff";
} }
return "#1a1a1a"; return "#1a1a1a";
}, },
rgb2hex: function (rgbColour) { rgb2hex: function (rgbColour) {
if (!rgbColour || rgbColour.substr(0, 3) != "rgb") { if (!rgbColour || rgbColour.substr(0, 3) != "rgb") {
return ""; return "";
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
var red = BI.parseInt(rgbValues[0]); var red = BI.parseInt(rgbValues[0]);
var green = BI.parseInt(rgbValues[1]); var green = BI.parseInt(rgbValues[1]);
var blue = BI.parseInt(rgbValues[2]); var blue = BI.parseInt(rgbValues[2]);
var hexColour = "#" + this.int2hex(red) + this.int2hex(green) + this.int2hex(blue); var hexColour = "#" + this.int2hex(red) + this.int2hex(green) + this.int2hex(blue);
return hexColour; return hexColour;
}, },
rgb2json: function (rgbColour) { rgb2json: function (rgbColour) {
if (!rgbColour) { if (!rgbColour) {
return {}; return {};
} }
if (!this.isRGBColor(rgbColour)) { if (!this.isRGBColor(rgbColour)) {
return {}; return {};
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
return { return {
r: BI.parseInt(rgbValues[0]), r: BI.parseInt(rgbValues[0]),
g: BI.parseInt(rgbValues[1]), g: BI.parseInt(rgbValues[1]),
b: BI.parseInt(rgbValues[2]) b: BI.parseInt(rgbValues[2])
}; };
}, },
rgba2json: function (rgbColour) { rgba2json: function (rgbColour) {
if (!rgbColour) { if (!rgbColour) {
return {}; return {};
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
return { return {
r: BI.parseInt(rgbValues[0]), r: BI.parseInt(rgbValues[0]),
g: BI.parseInt(rgbValues[1]), g: BI.parseInt(rgbValues[1]),
b: BI.parseInt(rgbValues[2]), b: BI.parseInt(rgbValues[2]),
a: BI.parseFloat(rgbValues[3]) a: BI.parseFloat(rgbValues[3])
}; };
}, },
json2rgb: function (rgb) { json2rgb: function (rgb) {
if (!BI.isKey(rgb.r) || !BI.isKey(rgb.g) || !BI.isKey(rgb.b)) { if (!BI.isKey(rgb.r) || !BI.isKey(rgb.g) || !BI.isKey(rgb.b)) {
return ""; return "";
} }
return "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; return "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
}, },
json2rgba: function (rgba) { json2rgba: function (rgba) {
if (!BI.isKey(rgba.r) || !BI.isKey(rgba.g) || !BI.isKey(rgba.b)) { if (!BI.isKey(rgba.r) || !BI.isKey(rgba.g) || !BI.isKey(rgba.b)) {
return ""; return "";
} }
return "rgba(" + rgba.r + "," + rgba.g + "," + rgba.b + "," + rgba.a + ")"; return "rgba(" + rgba.r + "," + rgba.g + "," + rgba.b + "," + rgba.a + ")";
}, },
int2hex: function (strNum) { int2hex: function (strNum) {
var hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; var hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
return hexdig[strNum >>> 4] + "" + hexdig[strNum & 15]; return hexdig[strNum >>> 4] + "" + hexdig[strNum & 15];
}, },
hex2rgb: function (color) { hex2rgb: function (color) {
if (!color) { if (!color) {
return ""; return "";
} }
if (!this.isHexColor(color)) { if (!this.isHexColor(color)) {
return color; return color;
} }
var tempValue = "rgb(", colorArray; var tempValue = "rgb(", colorArray;
if (color.length === 7) { if (color.length === 7) {
colorArray = [BI.parseInt("0x" + color.substring(1, 3)), colorArray = [BI.parseInt("0x" + color.substring(1, 3)),
BI.parseInt("0x" + color.substring(3, 5)), BI.parseInt("0x" + color.substring(3, 5)),
BI.parseInt("0x" + color.substring(5, 7))]; BI.parseInt("0x" + color.substring(5, 7))];
} else if (color.length === 4) { } else if (color.length === 4) {
colorArray = [BI.parseInt("0x" + color.substring(1, 2)), colorArray = [BI.parseInt("0x" + color.substring(1, 2)),
BI.parseInt("0x" + color.substring(2, 3)), BI.parseInt("0x" + color.substring(2, 3)),
BI.parseInt("0x" + color.substring(3, 4))]; BI.parseInt("0x" + color.substring(3, 4))];
} }
tempValue += colorArray[0] + ","; tempValue += colorArray[0] + ",";
tempValue += colorArray[1] + ","; tempValue += colorArray[1] + ",";
tempValue += colorArray[2] + ")"; tempValue += colorArray[2] + ")";
return tempValue; return tempValue;
}, },
rgba2rgb: function (rgbColour, BGcolor) { rgba2rgb: function (rgbColour, BGcolor) {
if (BI.isNull(BGcolor)) { if (BI.isNull(BGcolor)) {
BGcolor = 1; BGcolor = 1;
} }
if (rgbColour.substr(0, 4) != "rgba") { if (rgbColour.substr(0, 4) != "rgba") {
return ""; return "";
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
if (rgbValues.length < 4) { if (rgbValues.length < 4) {
return ""; return "";
} }
var R = BI.parseFloat(rgbValues[0]); var R = BI.parseFloat(rgbValues[0]);
var G = BI.parseFloat(rgbValues[1]); var G = BI.parseFloat(rgbValues[1]);
var B = BI.parseFloat(rgbValues[2]); var B = BI.parseFloat(rgbValues[2]);
var A = BI.parseFloat(rgbValues[3]); var A = BI.parseFloat(rgbValues[3]);
return "rgb(" + Math.floor(255 * (BGcolor * (1 - A )) + R * A) + "," + return "rgb(" + Math.floor(255 * (BGcolor * (1 - A )) + R * A) + "," +
Math.floor(255 * (BGcolor * (1 - A )) + G * A) + "," + Math.floor(255 * (BGcolor * (1 - A )) + G * A) + "," +
Math.floor(255 * (BGcolor * (1 - A )) + B * A) + ")"; Math.floor(255 * (BGcolor * (1 - A )) + B * A) + ")";
}, },
getTextSizeWidth: function (text, fontSize) { getTextSizeWidth: function (text, fontSize) {
var span = BI.Widget._renderEngine.createElement("<span></span>").addClass("text-width-span").appendTo("body"); var span = BI.Widget._renderEngine.createElement("<span></span>").addClass("text-width-span").appendTo("body");
if (fontSize == null) { if (fontSize == null) {
fontSize = 12; fontSize = 12;
} }
fontSize = fontSize + "px"; fontSize = fontSize + "px";
span.css("font-size", fontSize).text(text); span.css("font-size", fontSize).text(text);
var width = span.width(); var width = span.width();
span.remove(); span.remove();
return width; return width;
}, },
// 获取滚动条的宽度 // 获取滚动条的宽度
getScrollWidth: function () { getScrollWidth: function () {
if (this._scrollWidth == null) { if (this._scrollWidth == null) {
var ul = BI.Widget._renderEngine.createElement("<div>").width(50).height(50).css({ var ul = BI.Widget._renderEngine.createElement("<div>").width(50).height(50).css({
position: "absolute", position: "absolute",
top: "-9999px", top: "-9999px",
overflow: "scroll" overflow: "scroll"
}).appendTo("body"); }).appendTo("body");
this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth; this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
ul.destroy(); ul.destroy();
} }
return this._scrollWidth; return this._scrollWidth;
}, },
getImage: function (param, fillStyle, backgroundColor) { getImage: function (param, fillStyle, backgroundColor) {
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
var ratio = 2; var ratio = 2;
BI.Widget._renderEngine.createElement("body").append(canvas); BI.Widget._renderEngine.createElement("body").append(canvas);
var w = BI.DOM.getTextSizeWidth(param, 14) + 6; var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
canvas.width = w * ratio; canvas.width = w * ratio;
canvas.height = 24 * ratio; canvas.height = 24 * ratio;
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
// ctx.fillStyle = "#EAF2FD"; // ctx.fillStyle = "#EAF2FD";
ctx.font = 12 * ratio + "px Georgia"; ctx.font = 12 * ratio + "px Georgia";
ctx.fillStyle = fillStyle || "#3D4D66"; ctx.fillStyle = fillStyle || "#3D4D66";
ctx.textBaseline = "middle"; ctx.textBaseline = "middle";
ctx.fillText(param, 6 * ratio, 12 * ratio); ctx.fillText(param, 6 * ratio, 12 * ratio);
BI.Widget._renderEngine.createElement(canvas).destroy(); BI.Widget._renderEngine.createElement(canvas).destroy();
var backColor = backgroundColor || "#EAF2FD"; var backColor = backgroundColor || "#EAF2FD";
// IE可以放大缩小所以要固定最大最小宽高 // IE可以放大缩小所以要固定最大最小宽高
return { return {
width: w, width: w,
height: 24, height: 24,
src: canvas.toDataURL("image/png"), src: canvas.toDataURL("image/png"),
style: "background-color: " + backColor + ";vertical-align: middle; margin: 0 3px; width:" + w + "px;height: 24px; max-width:" + w + "px;max-height: 24px; min-width:" + w + "px;min-height: 24px", style: "background-color: " + backColor + ";vertical-align: middle; margin: 0 3px; width:" + w + "px;height: 24px; max-width:" + w + "px;max-height: 24px; min-width:" + w + "px;min-height: 24px",
param: param param: param
}; };
} }
});BI.EventListener = { });
})();BI.EventListener = {
listen: function listen (target, eventType, callback) { listen: function listen (target, eventType, callback) {
if (target.addEventListener) { if (target.addEventListener) {
target.addEventListener(eventType, callback, false); target.addEventListener(eventType, callback, false);

70
dist/bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

485
dist/core.js vendored
Unescape View File

@ -12122,7 +12122,32 @@ _.extend(BI.OB.prototype, {
} }
}); });
BI.mount = function (widget, container, predicate) { BI.mount = function (widget, container, predicate, hydrate) {
if(hydrate === true){
// 将widget的element元素都挂载好
var res = widget._mount(true, false, false, function(w){
var ws = w.element.data("__widgets");
if(!ws) {
ws = [];
}
ws.push(w);
w.element.data("__widgets", ws);
});
// 将新的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) { if (container) {
BI.Widget._renderEngine.createElement(container).append(widget.element); BI.Widget._renderEngine.createElement(container).append(widget.element);
} }
@ -18497,256 +18522,278 @@ BI.prepares.push(function () {
* 对DOM操作的通用函数 * 对DOM操作的通用函数
* @type {{}} * @type {{}}
*/ */
BI.DOM = {}; !(function () {
BI.extend(BI.DOM, { BI.DOM = {};
BI.extend(BI.DOM, {
/**
* 把dom数组或元素悬挂起来,使其不对html产生影响 patchProps: function (fromElement, toElement) {
* @param dom var elemData = jQuery._data(fromElement[0]);
*/ var events = elemData.events;
hang: function (doms) { BI.each(events, function (eventKey, event) {
if (BI.isEmpty(doms)) { var handlers = event.handlers;
return; BI.each(handlers, function (i, handler) {
} toElement.on(eventKey, handler);
var frag = BI.Widget._renderEngine.createFragment(); });
BI.each(doms, function (i, dom) { });
dom instanceof BI.Widget && (dom = dom.element); var fromChildren = fromElement.children(), toChildren = toElement.children();
dom instanceof $ && dom[0] && frag.appendChild(dom[0]); if(fromChildren.length !== toChildren.length) {
}); throw new Error("不匹配");
return frag; }
}, BI.each(fromChildren, function (i, child) {
BI.DOM.patchProps(jQuery(child), jQuery(toChildren[i]));
});
BI.each(fromElement.data("__widgets"), function (i, widget) {
widget.element = toElement;
});
},
/**
* 把dom数组或元素悬挂起来,使其不对html产生影响
* @param dom
*/
hang: function (doms) {
if (BI.isEmpty(doms)) {
return;
}
var frag = BI.Widget._renderEngine.createFragment();
BI.each(doms, function (i, dom) {
dom instanceof BI.Widget && (dom = dom.element);
dom instanceof $ && dom[0] && frag.appendChild(dom[0]);
});
return frag;
},
isExist: function (obj) { isExist: function (obj) {
return BI.Widget._renderEngine.createElement("body").find(obj.element).length > 0; return BI.Widget._renderEngine.createElement("body").find(obj.element).length > 0;
}, },
// 预加载图片 // 预加载图片
preloadImages: function (srcArray, onload) { preloadImages: function (srcArray, onload) {
var count = 0, images = []; var count = 0, images = [];
function complete () { function complete () {
count++; count++;
if (count >= srcArray.length) { if (count >= srcArray.length) {
onload(); onload();
}
} }
}
BI.each(srcArray, function (i, src) { BI.each(srcArray, function (i, src) {
images[i] = new Image(); images[i] = new Image();
images[i].src = src; images[i].src = src;
images[i].onload = function () { images[i].onload = function () {
complete(); complete();
}; };
images[i].onerror = function () { images[i].onerror = function () {
complete(); complete();
}; };
}); });
}, },
isColor: function (color) { isColor: function (color) {
return color && (this.isRGBColor(color) || this.isHexColor(color)); return color && (this.isRGBColor(color) || this.isHexColor(color));
}, },
isRGBColor: function (color) { isRGBColor: function (color) {
if (!color) { if (!color) {
return false; return false;
} }
return color.substr(0, 3) === "rgb"; return color.substr(0, 3) === "rgb";
}, },
isHexColor: function (color) { isHexColor: function (color) {
if (!color) { if (!color) {
return false; return false;
} }
return color[0] === "#" && color.length === 7; return color[0] === "#" && color.length === 7;
}, },
isDarkColor: function (hex) { isDarkColor: function (hex) {
if (!hex || !this.isHexColor(hex)) { if (!hex || !this.isHexColor(hex)) {
return false;
}
var rgb = this.rgb2json(this.hex2rgb(hex));
var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114);
if (grayLevel < 192/** 网上给的是140**/) {
return true;
}
return false; return false;
} },
var rgb = this.rgb2json(this.hex2rgb(hex));
var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114);
if (grayLevel < 192/** 网上给的是140**/) {
return true;
}
return false;
},
// 获取对比颜色 // 获取对比颜色
getContrastColor: function (color) { getContrastColor: function (color) {
if (!color || !this.isColor(color)) { if (!color || !this.isColor(color)) {
return ""; return "";
} }
if (this.isDarkColor(color)) { if (this.isDarkColor(color)) {
return "#ffffff"; return "#ffffff";
} }
return "#1a1a1a"; return "#1a1a1a";
}, },
rgb2hex: function (rgbColour) { rgb2hex: function (rgbColour) {
if (!rgbColour || rgbColour.substr(0, 3) != "rgb") { if (!rgbColour || rgbColour.substr(0, 3) != "rgb") {
return ""; return "";
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
var red = BI.parseInt(rgbValues[0]); var red = BI.parseInt(rgbValues[0]);
var green = BI.parseInt(rgbValues[1]); var green = BI.parseInt(rgbValues[1]);
var blue = BI.parseInt(rgbValues[2]); var blue = BI.parseInt(rgbValues[2]);
var hexColour = "#" + this.int2hex(red) + this.int2hex(green) + this.int2hex(blue); var hexColour = "#" + this.int2hex(red) + this.int2hex(green) + this.int2hex(blue);
return hexColour; return hexColour;
}, },
rgb2json: function (rgbColour) { rgb2json: function (rgbColour) {
if (!rgbColour) { if (!rgbColour) {
return {}; return {};
} }
if (!this.isRGBColor(rgbColour)) { if (!this.isRGBColor(rgbColour)) {
return {}; return {};
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
return { return {
r: BI.parseInt(rgbValues[0]), r: BI.parseInt(rgbValues[0]),
g: BI.parseInt(rgbValues[1]), g: BI.parseInt(rgbValues[1]),
b: BI.parseInt(rgbValues[2]) b: BI.parseInt(rgbValues[2])
}; };
}, },
rgba2json: function (rgbColour) { rgba2json: function (rgbColour) {
if (!rgbColour) { if (!rgbColour) {
return {}; return {};
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
return { return {
r: BI.parseInt(rgbValues[0]), r: BI.parseInt(rgbValues[0]),
g: BI.parseInt(rgbValues[1]), g: BI.parseInt(rgbValues[1]),
b: BI.parseInt(rgbValues[2]), b: BI.parseInt(rgbValues[2]),
a: BI.parseFloat(rgbValues[3]) a: BI.parseFloat(rgbValues[3])
}; };
}, },
json2rgb: function (rgb) { json2rgb: function (rgb) {
if (!BI.isKey(rgb.r) || !BI.isKey(rgb.g) || !BI.isKey(rgb.b)) { if (!BI.isKey(rgb.r) || !BI.isKey(rgb.g) || !BI.isKey(rgb.b)) {
return ""; return "";
} }
return "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; return "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
}, },
json2rgba: function (rgba) { json2rgba: function (rgba) {
if (!BI.isKey(rgba.r) || !BI.isKey(rgba.g) || !BI.isKey(rgba.b)) { if (!BI.isKey(rgba.r) || !BI.isKey(rgba.g) || !BI.isKey(rgba.b)) {
return ""; return "";
} }
return "rgba(" + rgba.r + "," + rgba.g + "," + rgba.b + "," + rgba.a + ")"; return "rgba(" + rgba.r + "," + rgba.g + "," + rgba.b + "," + rgba.a + ")";
}, },
int2hex: function (strNum) { int2hex: function (strNum) {
var hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; var hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
return hexdig[strNum >>> 4] + "" + hexdig[strNum & 15]; return hexdig[strNum >>> 4] + "" + hexdig[strNum & 15];
}, },
hex2rgb: function (color) { hex2rgb: function (color) {
if (!color) { if (!color) {
return ""; return "";
} }
if (!this.isHexColor(color)) { if (!this.isHexColor(color)) {
return color; return color;
} }
var tempValue = "rgb(", colorArray; var tempValue = "rgb(", colorArray;
if (color.length === 7) { if (color.length === 7) {
colorArray = [BI.parseInt("0x" + color.substring(1, 3)), colorArray = [BI.parseInt("0x" + color.substring(1, 3)),
BI.parseInt("0x" + color.substring(3, 5)), BI.parseInt("0x" + color.substring(3, 5)),
BI.parseInt("0x" + color.substring(5, 7))]; BI.parseInt("0x" + color.substring(5, 7))];
} else if (color.length === 4) { } else if (color.length === 4) {
colorArray = [BI.parseInt("0x" + color.substring(1, 2)), colorArray = [BI.parseInt("0x" + color.substring(1, 2)),
BI.parseInt("0x" + color.substring(2, 3)), BI.parseInt("0x" + color.substring(2, 3)),
BI.parseInt("0x" + color.substring(3, 4))]; BI.parseInt("0x" + color.substring(3, 4))];
} }
tempValue += colorArray[0] + ","; tempValue += colorArray[0] + ",";
tempValue += colorArray[1] + ","; tempValue += colorArray[1] + ",";
tempValue += colorArray[2] + ")"; tempValue += colorArray[2] + ")";
return tempValue; return tempValue;
}, },
rgba2rgb: function (rgbColour, BGcolor) { rgba2rgb: function (rgbColour, BGcolor) {
if (BI.isNull(BGcolor)) { if (BI.isNull(BGcolor)) {
BGcolor = 1; BGcolor = 1;
} }
if (rgbColour.substr(0, 4) != "rgba") { if (rgbColour.substr(0, 4) != "rgba") {
return ""; return "";
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
if (rgbValues.length < 4) { if (rgbValues.length < 4) {
return ""; return "";
} }
var R = BI.parseFloat(rgbValues[0]); var R = BI.parseFloat(rgbValues[0]);
var G = BI.parseFloat(rgbValues[1]); var G = BI.parseFloat(rgbValues[1]);
var B = BI.parseFloat(rgbValues[2]); var B = BI.parseFloat(rgbValues[2]);
var A = BI.parseFloat(rgbValues[3]); var A = BI.parseFloat(rgbValues[3]);
return "rgb(" + Math.floor(255 * (BGcolor * (1 - A )) + R * A) + "," + return "rgb(" + Math.floor(255 * (BGcolor * (1 - A )) + R * A) + "," +
Math.floor(255 * (BGcolor * (1 - A )) + G * A) + "," + Math.floor(255 * (BGcolor * (1 - A )) + G * A) + "," +
Math.floor(255 * (BGcolor * (1 - A )) + B * A) + ")"; Math.floor(255 * (BGcolor * (1 - A )) + B * A) + ")";
}, },
getTextSizeWidth: function (text, fontSize) { getTextSizeWidth: function (text, fontSize) {
var span = BI.Widget._renderEngine.createElement("<span></span>").addClass("text-width-span").appendTo("body"); var span = BI.Widget._renderEngine.createElement("<span></span>").addClass("text-width-span").appendTo("body");
if (fontSize == null) { if (fontSize == null) {
fontSize = 12; fontSize = 12;
} }
fontSize = fontSize + "px"; fontSize = fontSize + "px";
span.css("font-size", fontSize).text(text); span.css("font-size", fontSize).text(text);
var width = span.width(); var width = span.width();
span.remove(); span.remove();
return width; return width;
}, },
// 获取滚动条的宽度 // 获取滚动条的宽度
getScrollWidth: function () { getScrollWidth: function () {
if (this._scrollWidth == null) { if (this._scrollWidth == null) {
var ul = BI.Widget._renderEngine.createElement("<div>").width(50).height(50).css({ var ul = BI.Widget._renderEngine.createElement("<div>").width(50).height(50).css({
position: "absolute", position: "absolute",
top: "-9999px", top: "-9999px",
overflow: "scroll" overflow: "scroll"
}).appendTo("body"); }).appendTo("body");
this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth; this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
ul.destroy(); ul.destroy();
}
return this._scrollWidth;
},
getImage: function (param, fillStyle, backgroundColor) {
var canvas = document.createElement("canvas");
var ratio = 2;
BI.Widget._renderEngine.createElement("body").append(canvas);
var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
canvas.width = w * ratio;
canvas.height = 24 * ratio;
var ctx = canvas.getContext("2d");
// ctx.fillStyle = "#EAF2FD";
ctx.font = 12 * ratio + "px Georgia";
ctx.fillStyle = fillStyle || "#3D4D66";
ctx.textBaseline = "middle";
ctx.fillText(param, 6 * ratio, 12 * ratio);
BI.Widget._renderEngine.createElement(canvas).destroy();
var backColor = backgroundColor || "#EAF2FD";
// IE可以放大缩小所以要固定最大最小宽高
return {
width: w,
height: 24,
src: canvas.toDataURL("image/png"),
style: "background-color: " + backColor + ";vertical-align: middle; margin: 0 3px; width:" + w + "px;height: 24px; max-width:" + w + "px;max-height: 24px; min-width:" + w + "px;min-height: 24px",
param: param
};
} }
return this._scrollWidth; });
}, })();BI.EventListener = {
getImage: function (param, fillStyle, backgroundColor) {
var canvas = document.createElement("canvas");
var ratio = 2;
BI.Widget._renderEngine.createElement("body").append(canvas);
var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
canvas.width = w * ratio;
canvas.height = 24 * ratio;
var ctx = canvas.getContext("2d");
// ctx.fillStyle = "#EAF2FD";
ctx.font = 12 * ratio + "px Georgia";
ctx.fillStyle = fillStyle || "#3D4D66";
ctx.textBaseline = "middle";
ctx.fillText(param, 6 * ratio, 12 * ratio);
BI.Widget._renderEngine.createElement(canvas).destroy();
var backColor = backgroundColor || "#EAF2FD";
// IE可以放大缩小所以要固定最大最小宽高
return {
width: w,
height: 24,
src: canvas.toDataURL("image/png"),
style: "background-color: " + backColor + ";vertical-align: middle; margin: 0 3px; width:" + w + "px;height: 24px; max-width:" + w + "px;max-height: 24px; min-width:" + w + "px;min-height: 24px",
param: param
};
}
});BI.EventListener = {
listen: function listen (target, eventType, callback) { listen: function listen (target, eventType, callback) {
if (target.addEventListener) { if (target.addEventListener) {
target.addEventListener(eventType, callback, false); target.addEventListener(eventType, callback, false);

487
dist/fineui.js vendored
Unescape View File

@ -12364,7 +12364,32 @@ _.extend(BI.OB.prototype, {
} }
}); });
BI.mount = function (widget, container, predicate) { BI.mount = function (widget, container, predicate, hydrate) {
if(hydrate === true){
// 将widget的element元素都挂载好
var res = widget._mount(true, false, false, function(w){
var ws = w.element.data("__widgets");
if(!ws) {
ws = [];
}
ws.push(w);
w.element.data("__widgets", ws);
});
// 将新的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) { if (container) {
BI.Widget._renderEngine.createElement(container).append(widget.element); BI.Widget._renderEngine.createElement(container).append(widget.element);
} }
@ -18739,256 +18764,278 @@ BI.prepares.push(function () {
* 对DOM操作的通用函数 * 对DOM操作的通用函数
* @type {{}} * @type {{}}
*/ */
BI.DOM = {}; !(function () {
BI.extend(BI.DOM, { BI.DOM = {};
BI.extend(BI.DOM, {
/**
* 把dom数组或元素悬挂起来,使其不对html产生影响 patchProps: function (fromElement, toElement) {
* @param dom var elemData = jQuery._data(fromElement[0]);
*/ var events = elemData.events;
hang: function (doms) { BI.each(events, function (eventKey, event) {
if (BI.isEmpty(doms)) { var handlers = event.handlers;
return; BI.each(handlers, function (i, handler) {
} toElement.on(eventKey, handler);
var frag = BI.Widget._renderEngine.createFragment(); });
BI.each(doms, function (i, dom) { });
dom instanceof BI.Widget && (dom = dom.element); var fromChildren = fromElement.children(), toChildren = toElement.children();
dom instanceof $ && dom[0] && frag.appendChild(dom[0]); if(fromChildren.length !== toChildren.length) {
}); throw new Error("不匹配");
return frag; }
}, BI.each(fromChildren, function (i, child) {
BI.DOM.patchProps(jQuery(child), jQuery(toChildren[i]));
});
BI.each(fromElement.data("__widgets"), function (i, widget) {
widget.element = toElement;
});
},
/**
* 把dom数组或元素悬挂起来,使其不对html产生影响
* @param dom
*/
hang: function (doms) {
if (BI.isEmpty(doms)) {
return;
}
var frag = BI.Widget._renderEngine.createFragment();
BI.each(doms, function (i, dom) {
dom instanceof BI.Widget && (dom = dom.element);
dom instanceof $ && dom[0] && frag.appendChild(dom[0]);
});
return frag;
},
isExist: function (obj) { isExist: function (obj) {
return BI.Widget._renderEngine.createElement("body").find(obj.element).length > 0; return BI.Widget._renderEngine.createElement("body").find(obj.element).length > 0;
}, },
// 预加载图片 // 预加载图片
preloadImages: function (srcArray, onload) { preloadImages: function (srcArray, onload) {
var count = 0, images = []; var count = 0, images = [];
function complete () { function complete () {
count++; count++;
if (count >= srcArray.length) { if (count >= srcArray.length) {
onload(); onload();
}
} }
}
BI.each(srcArray, function (i, src) { BI.each(srcArray, function (i, src) {
images[i] = new Image(); images[i] = new Image();
images[i].src = src; images[i].src = src;
images[i].onload = function () { images[i].onload = function () {
complete(); complete();
}; };
images[i].onerror = function () { images[i].onerror = function () {
complete(); complete();
}; };
}); });
}, },
isColor: function (color) { isColor: function (color) {
return color && (this.isRGBColor(color) || this.isHexColor(color)); return color && (this.isRGBColor(color) || this.isHexColor(color));
}, },
isRGBColor: function (color) { isRGBColor: function (color) {
if (!color) { if (!color) {
return false; return false;
} }
return color.substr(0, 3) === "rgb"; return color.substr(0, 3) === "rgb";
}, },
isHexColor: function (color) { isHexColor: function (color) {
if (!color) { if (!color) {
return false; return false;
} }
return color[0] === "#" && color.length === 7; return color[0] === "#" && color.length === 7;
}, },
isDarkColor: function (hex) { isDarkColor: function (hex) {
if (!hex || !this.isHexColor(hex)) { if (!hex || !this.isHexColor(hex)) {
return false;
}
var rgb = this.rgb2json(this.hex2rgb(hex));
var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114);
if (grayLevel < 192/** 网上给的是140**/) {
return true;
}
return false; return false;
} },
var rgb = this.rgb2json(this.hex2rgb(hex));
var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114);
if (grayLevel < 192/** 网上给的是140**/) {
return true;
}
return false;
},
// 获取对比颜色 // 获取对比颜色
getContrastColor: function (color) { getContrastColor: function (color) {
if (!color || !this.isColor(color)) { if (!color || !this.isColor(color)) {
return ""; return "";
} }
if (this.isDarkColor(color)) { if (this.isDarkColor(color)) {
return "#ffffff"; return "#ffffff";
} }
return "#1a1a1a"; return "#1a1a1a";
}, },
rgb2hex: function (rgbColour) { rgb2hex: function (rgbColour) {
if (!rgbColour || rgbColour.substr(0, 3) != "rgb") { if (!rgbColour || rgbColour.substr(0, 3) != "rgb") {
return ""; return "";
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
var red = BI.parseInt(rgbValues[0]); var red = BI.parseInt(rgbValues[0]);
var green = BI.parseInt(rgbValues[1]); var green = BI.parseInt(rgbValues[1]);
var blue = BI.parseInt(rgbValues[2]); var blue = BI.parseInt(rgbValues[2]);
var hexColour = "#" + this.int2hex(red) + this.int2hex(green) + this.int2hex(blue); var hexColour = "#" + this.int2hex(red) + this.int2hex(green) + this.int2hex(blue);
return hexColour; return hexColour;
}, },
rgb2json: function (rgbColour) { rgb2json: function (rgbColour) {
if (!rgbColour) { if (!rgbColour) {
return {}; return {};
} }
if (!this.isRGBColor(rgbColour)) { if (!this.isRGBColor(rgbColour)) {
return {}; return {};
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
return { return {
r: BI.parseInt(rgbValues[0]), r: BI.parseInt(rgbValues[0]),
g: BI.parseInt(rgbValues[1]), g: BI.parseInt(rgbValues[1]),
b: BI.parseInt(rgbValues[2]) b: BI.parseInt(rgbValues[2])
}; };
}, },
rgba2json: function (rgbColour) { rgba2json: function (rgbColour) {
if (!rgbColour) { if (!rgbColour) {
return {}; return {};
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
return { return {
r: BI.parseInt(rgbValues[0]), r: BI.parseInt(rgbValues[0]),
g: BI.parseInt(rgbValues[1]), g: BI.parseInt(rgbValues[1]),
b: BI.parseInt(rgbValues[2]), b: BI.parseInt(rgbValues[2]),
a: BI.parseFloat(rgbValues[3]) a: BI.parseFloat(rgbValues[3])
}; };
}, },
json2rgb: function (rgb) { json2rgb: function (rgb) {
if (!BI.isKey(rgb.r) || !BI.isKey(rgb.g) || !BI.isKey(rgb.b)) { if (!BI.isKey(rgb.r) || !BI.isKey(rgb.g) || !BI.isKey(rgb.b)) {
return ""; return "";
} }
return "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; return "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
}, },
json2rgba: function (rgba) { json2rgba: function (rgba) {
if (!BI.isKey(rgba.r) || !BI.isKey(rgba.g) || !BI.isKey(rgba.b)) { if (!BI.isKey(rgba.r) || !BI.isKey(rgba.g) || !BI.isKey(rgba.b)) {
return ""; return "";
} }
return "rgba(" + rgba.r + "," + rgba.g + "," + rgba.b + "," + rgba.a + ")"; return "rgba(" + rgba.r + "," + rgba.g + "," + rgba.b + "," + rgba.a + ")";
}, },
int2hex: function (strNum) { int2hex: function (strNum) {
var hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; var hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
return hexdig[strNum >>> 4] + "" + hexdig[strNum & 15]; return hexdig[strNum >>> 4] + "" + hexdig[strNum & 15];
}, },
hex2rgb: function (color) { hex2rgb: function (color) {
if (!color) { if (!color) {
return ""; return "";
} }
if (!this.isHexColor(color)) { if (!this.isHexColor(color)) {
return color; return color;
} }
var tempValue = "rgb(", colorArray; var tempValue = "rgb(", colorArray;
if (color.length === 7) { if (color.length === 7) {
colorArray = [BI.parseInt("0x" + color.substring(1, 3)), colorArray = [BI.parseInt("0x" + color.substring(1, 3)),
BI.parseInt("0x" + color.substring(3, 5)), BI.parseInt("0x" + color.substring(3, 5)),
BI.parseInt("0x" + color.substring(5, 7))]; BI.parseInt("0x" + color.substring(5, 7))];
} else if (color.length === 4) { } else if (color.length === 4) {
colorArray = [BI.parseInt("0x" + color.substring(1, 2)), colorArray = [BI.parseInt("0x" + color.substring(1, 2)),
BI.parseInt("0x" + color.substring(2, 3)), BI.parseInt("0x" + color.substring(2, 3)),
BI.parseInt("0x" + color.substring(3, 4))]; BI.parseInt("0x" + color.substring(3, 4))];
} }
tempValue += colorArray[0] + ","; tempValue += colorArray[0] + ",";
tempValue += colorArray[1] + ","; tempValue += colorArray[1] + ",";
tempValue += colorArray[2] + ")"; tempValue += colorArray[2] + ")";
return tempValue; return tempValue;
}, },
rgba2rgb: function (rgbColour, BGcolor) { rgba2rgb: function (rgbColour, BGcolor) {
if (BI.isNull(BGcolor)) { if (BI.isNull(BGcolor)) {
BGcolor = 1; BGcolor = 1;
} }
if (rgbColour.substr(0, 4) != "rgba") { if (rgbColour.substr(0, 4) != "rgba") {
return ""; return "";
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
if (rgbValues.length < 4) { if (rgbValues.length < 4) {
return ""; return "";
} }
var R = BI.parseFloat(rgbValues[0]); var R = BI.parseFloat(rgbValues[0]);
var G = BI.parseFloat(rgbValues[1]); var G = BI.parseFloat(rgbValues[1]);
var B = BI.parseFloat(rgbValues[2]); var B = BI.parseFloat(rgbValues[2]);
var A = BI.parseFloat(rgbValues[3]); var A = BI.parseFloat(rgbValues[3]);
return "rgb(" + Math.floor(255 * (BGcolor * (1 - A )) + R * A) + "," + return "rgb(" + Math.floor(255 * (BGcolor * (1 - A )) + R * A) + "," +
Math.floor(255 * (BGcolor * (1 - A )) + G * A) + "," + Math.floor(255 * (BGcolor * (1 - A )) + G * A) + "," +
Math.floor(255 * (BGcolor * (1 - A )) + B * A) + ")"; Math.floor(255 * (BGcolor * (1 - A )) + B * A) + ")";
}, },
getTextSizeWidth: function (text, fontSize) { getTextSizeWidth: function (text, fontSize) {
var span = BI.Widget._renderEngine.createElement("<span></span>").addClass("text-width-span").appendTo("body"); var span = BI.Widget._renderEngine.createElement("<span></span>").addClass("text-width-span").appendTo("body");
if (fontSize == null) { if (fontSize == null) {
fontSize = 12; fontSize = 12;
} }
fontSize = fontSize + "px"; fontSize = fontSize + "px";
span.css("font-size", fontSize).text(text); span.css("font-size", fontSize).text(text);
var width = span.width(); var width = span.width();
span.remove(); span.remove();
return width; return width;
}, },
// 获取滚动条的宽度 // 获取滚动条的宽度
getScrollWidth: function () { getScrollWidth: function () {
if (this._scrollWidth == null) { if (this._scrollWidth == null) {
var ul = BI.Widget._renderEngine.createElement("<div>").width(50).height(50).css({ var ul = BI.Widget._renderEngine.createElement("<div>").width(50).height(50).css({
position: "absolute", position: "absolute",
top: "-9999px", top: "-9999px",
overflow: "scroll" overflow: "scroll"
}).appendTo("body"); }).appendTo("body");
this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth; this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
ul.destroy(); ul.destroy();
} }
return this._scrollWidth; return this._scrollWidth;
}, },
getImage: function (param, fillStyle, backgroundColor) { getImage: function (param, fillStyle, backgroundColor) {
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
var ratio = 2; var ratio = 2;
BI.Widget._renderEngine.createElement("body").append(canvas); BI.Widget._renderEngine.createElement("body").append(canvas);
var w = BI.DOM.getTextSizeWidth(param, 14) + 6; var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
canvas.width = w * ratio; canvas.width = w * ratio;
canvas.height = 24 * ratio; canvas.height = 24 * ratio;
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
// ctx.fillStyle = "#EAF2FD"; // ctx.fillStyle = "#EAF2FD";
ctx.font = 12 * ratio + "px Georgia"; ctx.font = 12 * ratio + "px Georgia";
ctx.fillStyle = fillStyle || "#3D4D66"; ctx.fillStyle = fillStyle || "#3D4D66";
ctx.textBaseline = "middle"; ctx.textBaseline = "middle";
ctx.fillText(param, 6 * ratio, 12 * ratio); ctx.fillText(param, 6 * ratio, 12 * ratio);
BI.Widget._renderEngine.createElement(canvas).destroy(); BI.Widget._renderEngine.createElement(canvas).destroy();
var backColor = backgroundColor || "#EAF2FD"; var backColor = backgroundColor || "#EAF2FD";
// IE可以放大缩小所以要固定最大最小宽高 // IE可以放大缩小所以要固定最大最小宽高
return { return {
width: w, width: w,
height: 24, height: 24,
src: canvas.toDataURL("image/png"), src: canvas.toDataURL("image/png"),
style: "background-color: " + backColor + ";vertical-align: middle; margin: 0 3px; width:" + w + "px;height: 24px; max-width:" + w + "px;max-height: 24px; min-width:" + w + "px;min-height: 24px", style: "background-color: " + backColor + ";vertical-align: middle; margin: 0 3px; width:" + w + "px;height: 24px; max-width:" + w + "px;max-height: 24px; min-width:" + w + "px;min-height: 24px",
param: param param: param
}; };
} }
});BI.EventListener = { });
})();BI.EventListener = {
listen: function listen (target, eventType, callback) { listen: function listen (target, eventType, callback) {
if (target.addEventListener) { if (target.addEventListener) {
target.addEventListener(eventType, callback, false); target.addEventListener(eventType, callback, false);

70
dist/fineui.min.js vendored
View File

File diff suppressed because one or more lines are too long

27
dist/fineui_without_jquery_polyfill.js vendored
Unescape View File

@ -12122,7 +12122,32 @@ _.extend(BI.OB.prototype, {
} }
}); });
BI.mount = function (widget, container, predicate) { BI.mount = function (widget, container, predicate, hydrate) {
if(hydrate === true){
// 将widget的element元素都挂载好
var res = widget._mount(true, false, false, function(w){
var ws = w.element.data("__widgets");
if(!ws) {
ws = [];
}
ws.push(w);
w.element.data("__widgets", ws);
});
// 将新的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) { if (container) {
BI.Widget._renderEngine.createElement(container).append(widget.element); BI.Widget._renderEngine.createElement(container).append(widget.element);
} }

2
dist/utils.min.js vendored
View File

File diff suppressed because one or more lines are too long

478
src/core/platform/dom/dom.js
Unescape View File

@ -2,253 +2,275 @@
* 对DOM操作的通用函数 * 对DOM操作的通用函数
* @type {{}} * @type {{}}
*/ */
BI.DOM = {}; !(function () {
BI.extend(BI.DOM, { BI.DOM = {};
BI.extend(BI.DOM, {
/**
* 把dom数组或元素悬挂起来,使其不对html产生影响 patchProps: function (fromElement, toElement) {
* @param dom var elemData = jQuery._data(fromElement[0]);
*/ var events = elemData.events;
hang: function (doms) { BI.each(events, function (eventKey, event) {
if (BI.isEmpty(doms)) { var handlers = event.handlers;
return; BI.each(handlers, function (i, handler) {
} toElement.on(eventKey, handler);
var frag = BI.Widget._renderEngine.createFragment(); });
BI.each(doms, function (i, dom) { });
dom instanceof BI.Widget && (dom = dom.element); var fromChildren = fromElement.children(), toChildren = toElement.children();
dom instanceof $ && dom[0] && frag.appendChild(dom[0]); if(fromChildren.length !== toChildren.length) {
}); throw new Error("不匹配");
return frag;
},
isExist: function (obj) {
return BI.Widget._renderEngine.createElement("body").find(obj.element).length > 0;
},
// 预加载图片
preloadImages: function (srcArray, onload) {
var count = 0, images = [];
function complete () {
count++;
if (count >= srcArray.length) {
onload();
} }
} BI.each(fromChildren, function (i, child) {
BI.DOM.patchProps(jQuery(child), jQuery(toChildren[i]));
});
BI.each(fromElement.data("__widgets"), function (i, widget) {
widget.element = toElement;
});
},
/**
* 把dom数组或元素悬挂起来,使其不对html产生影响
* @param dom
*/
hang: function (doms) {
if (BI.isEmpty(doms)) {
return;
}
var frag = BI.Widget._renderEngine.createFragment();
BI.each(doms, function (i, dom) {
dom instanceof BI.Widget && (dom = dom.element);
dom instanceof $ && dom[0] && frag.appendChild(dom[0]);
});
return frag;
},
BI.each(srcArray, function (i, src) { isExist: function (obj) {
images[i] = new Image(); return BI.Widget._renderEngine.createElement("body").find(obj.element).length > 0;
images[i].src = src; },
images[i].onload = function () {
complete();
};
images[i].onerror = function () {
complete();
};
});
},
isColor: function (color) { // 预加载图片
return color && (this.isRGBColor(color) || this.isHexColor(color)); preloadImages: function (srcArray, onload) {
}, var count = 0, images = [];
isRGBColor: function (color) { function complete () {
if (!color) { count++;
return false; if (count >= srcArray.length) {
} onload();
return color.substr(0, 3) === "rgb"; }
}, }
isHexColor: function (color) { BI.each(srcArray, function (i, src) {
if (!color) { images[i] = new Image();
return false; images[i].src = src;
} images[i].onload = function () {
return color[0] === "#" && color.length === 7; complete();
}, };
images[i].onerror = function () {
complete();
};
});
},
isColor: function (color) {
return color && (this.isRGBColor(color) || this.isHexColor(color));
},
isRGBColor: function (color) {
if (!color) {
return false;
}
return color.substr(0, 3) === "rgb";
},
isHexColor: function (color) {
if (!color) {
return false;
}
return color[0] === "#" && color.length === 7;
},
isDarkColor: function (hex) { isDarkColor: function (hex) {
if (!hex || !this.isHexColor(hex)) { if (!hex || !this.isHexColor(hex)) {
return false;
}
var rgb = this.rgb2json(this.hex2rgb(hex));
var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114);
if (grayLevel < 192/** 网上给的是140**/) {
return true;
}
return false; return false;
} },
var rgb = this.rgb2json(this.hex2rgb(hex));
var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114);
if (grayLevel < 192/** 网上给的是140**/) {
return true;
}
return false;
},
// 获取对比颜色 // 获取对比颜色
getContrastColor: function (color) { getContrastColor: function (color) {
if (!color || !this.isColor(color)) { if (!color || !this.isColor(color)) {
return ""; return "";
} }
if (this.isDarkColor(color)) { if (this.isDarkColor(color)) {
return "#ffffff"; return "#ffffff";
} }
return "#1a1a1a"; return "#1a1a1a";
}, },
rgb2hex: function (rgbColour) { rgb2hex: function (rgbColour) {
if (!rgbColour || rgbColour.substr(0, 3) != "rgb") { if (!rgbColour || rgbColour.substr(0, 3) != "rgb") {
return ""; return "";
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
var red = BI.parseInt(rgbValues[0]); var red = BI.parseInt(rgbValues[0]);
var green = BI.parseInt(rgbValues[1]); var green = BI.parseInt(rgbValues[1]);
var blue = BI.parseInt(rgbValues[2]); var blue = BI.parseInt(rgbValues[2]);
var hexColour = "#" + this.int2hex(red) + this.int2hex(green) + this.int2hex(blue); var hexColour = "#" + this.int2hex(red) + this.int2hex(green) + this.int2hex(blue);
return hexColour; return hexColour;
}, },
rgb2json: function (rgbColour) { rgb2json: function (rgbColour) {
if (!rgbColour) { if (!rgbColour) {
return {}; return {};
} }
if (!this.isRGBColor(rgbColour)) { if (!this.isRGBColor(rgbColour)) {
return {}; return {};
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
return { return {
r: BI.parseInt(rgbValues[0]), r: BI.parseInt(rgbValues[0]),
g: BI.parseInt(rgbValues[1]), g: BI.parseInt(rgbValues[1]),
b: BI.parseInt(rgbValues[2]) b: BI.parseInt(rgbValues[2])
}; };
}, },
rgba2json: function (rgbColour) {
if (!rgbColour) {
return {};
}
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
return {
r: BI.parseInt(rgbValues[0]),
g: BI.parseInt(rgbValues[1]),
b: BI.parseInt(rgbValues[2]),
a: BI.parseFloat(rgbValues[3])
};
},
json2rgb: function (rgb) {
if (!BI.isKey(rgb.r) || !BI.isKey(rgb.g) || !BI.isKey(rgb.b)) {
return "";
}
return "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
},
json2rgba: function (rgba) { rgba2json: function (rgbColour) {
if (!BI.isKey(rgba.r) || !BI.isKey(rgba.g) || !BI.isKey(rgba.b)) { if (!rgbColour) {
return ""; return {};
} }
return "rgba(" + rgba.r + "," + rgba.g + "," + rgba.b + "," + rgba.a + ")"; var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
}, return {
r: BI.parseInt(rgbValues[0]),
g: BI.parseInt(rgbValues[1]),
b: BI.parseInt(rgbValues[2]),
a: BI.parseFloat(rgbValues[3])
};
},
int2hex: function (strNum) { json2rgb: function (rgb) {
var hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; if (!BI.isKey(rgb.r) || !BI.isKey(rgb.g) || !BI.isKey(rgb.b)) {
return "";
}
return "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
},
return hexdig[strNum >>> 4] + "" + hexdig[strNum & 15]; json2rgba: function (rgba) {
}, if (!BI.isKey(rgba.r) || !BI.isKey(rgba.g) || !BI.isKey(rgba.b)) {
return "";
}
return "rgba(" + rgba.r + "," + rgba.g + "," + rgba.b + "," + rgba.a + ")";
},
hex2rgb: function (color) { int2hex: function (strNum) {
if (!color) { var hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
return "";
}
if (!this.isHexColor(color)) {
return color;
}
var tempValue = "rgb(", colorArray;
if (color.length === 7) {
colorArray = [BI.parseInt("0x" + color.substring(1, 3)),
BI.parseInt("0x" + color.substring(3, 5)),
BI.parseInt("0x" + color.substring(5, 7))];
} else if (color.length === 4) {
colorArray = [BI.parseInt("0x" + color.substring(1, 2)),
BI.parseInt("0x" + color.substring(2, 3)),
BI.parseInt("0x" + color.substring(3, 4))];
}
tempValue += colorArray[0] + ",";
tempValue += colorArray[1] + ",";
tempValue += colorArray[2] + ")";
return tempValue; return hexdig[strNum >>> 4] + "" + hexdig[strNum & 15];
}, },
rgba2rgb: function (rgbColour, BGcolor) { hex2rgb: function (color) {
if (BI.isNull(BGcolor)) { if (!color) {
BGcolor = 1; return "";
} }
if (rgbColour.substr(0, 4) != "rgba") { if (!this.isHexColor(color)) {
return ""; return color;
} }
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); var tempValue = "rgb(", colorArray;
if (rgbValues.length < 4) {
return "";
}
var R = BI.parseFloat(rgbValues[0]);
var G = BI.parseFloat(rgbValues[1]);
var B = BI.parseFloat(rgbValues[2]);
var A = BI.parseFloat(rgbValues[3]);
return "rgb(" + Math.floor(255 * (BGcolor * (1 - A )) + R * A) + "," + if (color.length === 7) {
Math.floor(255 * (BGcolor * (1 - A )) + G * A) + "," + colorArray = [BI.parseInt("0x" + color.substring(1, 3)),
Math.floor(255 * (BGcolor * (1 - A )) + B * A) + ")"; BI.parseInt("0x" + color.substring(3, 5)),
}, BI.parseInt("0x" + color.substring(5, 7))];
} else if (color.length === 4) {
colorArray = [BI.parseInt("0x" + color.substring(1, 2)),
BI.parseInt("0x" + color.substring(2, 3)),
BI.parseInt("0x" + color.substring(3, 4))];
}
tempValue += colorArray[0] + ",";
tempValue += colorArray[1] + ",";
tempValue += colorArray[2] + ")";
getTextSizeWidth: function (text, fontSize) { return tempValue;
var span = BI.Widget._renderEngine.createElement("<span></span>").addClass("text-width-span").appendTo("body"); },
if (fontSize == null) { rgba2rgb: function (rgbColour, BGcolor) {
fontSize = 12; if (BI.isNull(BGcolor)) {
} BGcolor = 1;
fontSize = fontSize + "px"; }
if (rgbColour.substr(0, 4) != "rgba") {
span.css("font-size", fontSize).text(text); return "";
}
var width = span.width(); var rgbValues = rgbColour.match(/\d+(\.\d+)?/g);
span.remove(); if (rgbValues.length < 4) {
return "";
return width; }
}, var R = BI.parseFloat(rgbValues[0]);
var G = BI.parseFloat(rgbValues[1]);
// 获取滚动条的宽度 var B = BI.parseFloat(rgbValues[2]);
getScrollWidth: function () { var A = BI.parseFloat(rgbValues[3]);
if (this._scrollWidth == null) {
var ul = BI.Widget._renderEngine.createElement("<div>").width(50).height(50).css({ return "rgb(" + Math.floor(255 * (BGcolor * (1 - A )) + R * A) + "," +
position: "absolute", Math.floor(255 * (BGcolor * (1 - A )) + G * A) + "," +
top: "-9999px", Math.floor(255 * (BGcolor * (1 - A )) + B * A) + ")";
overflow: "scroll" },
}).appendTo("body");
this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth; getTextSizeWidth: function (text, fontSize) {
ul.destroy(); var span = BI.Widget._renderEngine.createElement("<span></span>").addClass("text-width-span").appendTo("body");
if (fontSize == null) {
fontSize = 12;
}
fontSize = fontSize + "px";
span.css("font-size", fontSize).text(text);
var width = span.width();
span.remove();
return width;
},
// 获取滚动条的宽度
getScrollWidth: function () {
if (this._scrollWidth == null) {
var ul = BI.Widget._renderEngine.createElement("<div>").width(50).height(50).css({
position: "absolute",
top: "-9999px",
overflow: "scroll"
}).appendTo("body");
this._scrollWidth = ul[0].offsetWidth - ul[0].clientWidth;
ul.destroy();
}
return this._scrollWidth;
},
getImage: function (param, fillStyle, backgroundColor) {
var canvas = document.createElement("canvas");
var ratio = 2;
BI.Widget._renderEngine.createElement("body").append(canvas);
var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
canvas.width = w * ratio;
canvas.height = 24 * ratio;
var ctx = canvas.getContext("2d");
// ctx.fillStyle = "#EAF2FD";
ctx.font = 12 * ratio + "px Georgia";
ctx.fillStyle = fillStyle || "#3D4D66";
ctx.textBaseline = "middle";
ctx.fillText(param, 6 * ratio, 12 * ratio);
BI.Widget._renderEngine.createElement(canvas).destroy();
var backColor = backgroundColor || "#EAF2FD";
// IE可以放大缩小所以要固定最大最小宽高
return {
width: w,
height: 24,
src: canvas.toDataURL("image/png"),
style: "background-color: " + backColor + ";vertical-align: middle; margin: 0 3px; width:" + w + "px;height: 24px; max-width:" + w + "px;max-height: 24px; min-width:" + w + "px;min-height: 24px",
param: param
};
} }
return this._scrollWidth; });
}, })();
getImage: function (param, fillStyle, backgroundColor) {
var canvas = document.createElement("canvas");
var ratio = 2;
BI.Widget._renderEngine.createElement("body").append(canvas);
var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
canvas.width = w * ratio;
canvas.height = 24 * ratio;
var ctx = canvas.getContext("2d");
// ctx.fillStyle = "#EAF2FD";
ctx.font = 12 * ratio + "px Georgia";
ctx.fillStyle = fillStyle || "#3D4D66";
ctx.textBaseline = "middle";
ctx.fillText(param, 6 * ratio, 12 * ratio);
BI.Widget._renderEngine.createElement(canvas).destroy();
var backColor = backgroundColor || "#EAF2FD";
// IE可以放大缩小所以要固定最大最小宽高
return {
width: w,
height: 24,
src: canvas.toDataURL("image/png"),
style: "background-color: " + backColor + ";vertical-align: middle; margin: 0 3px; width:" + w + "px;height: 24px; max-width:" + w + "px;max-height: 24px; min-width:" + w + "px;min-height: 24px",
param: param
};
}
});

27
src/core/widget.js
Unescape View File

@ -491,7 +491,32 @@
} }
}); });
BI.mount = function (widget, container, predicate) { BI.mount = function (widget, container, predicate, hydrate) {
if(hydrate === true){
// 将widget的element元素都挂载好
var res = widget._mount(true, false, false, function(w){
var ws = w.element.data("__widgets");
if(!ws) {
ws = [];
}
ws.push(w);
w.element.data("__widgets", ws);
});
// 将新的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) { if (container) {
BI.Widget._renderEngine.createElement(container).append(widget.element); BI.Widget._renderEngine.createElement(container).append(widget.element);
} }

Write Preview
Loading…
Cancel
Save