From 7446b7e786a0ffb2703d48ab3259e9015c69135b Mon Sep 17 00:00:00 2001 From: "Zhenfei.Li" Date: Fri, 6 Jan 2023 15:37:14 +0800 Subject: [PATCH] KERNEL-14035 refactor: core/utils --- src/core/index.js | 3 + src/core/utils/chinesePY.js | 50 +++-- src/core/utils/color.js | 163 ++++++++-------- src/core/utils/events/eventlistener.js | 25 ++- src/core/utils/events/index.js | 3 + src/core/utils/events/mousemovetracker.js | 172 ++++++++-------- src/core/utils/events/wheelhandler.js | 228 ++++++++++------------ src/core/utils/i18n.js | 83 ++++---- src/core/utils/index.js | 4 + 9 files changed, 368 insertions(+), 363 deletions(-) create mode 100644 src/core/utils/events/index.js create mode 100644 src/core/utils/index.js diff --git a/src/core/index.js b/src/core/index.js index 49d7b2125..34ab918cd 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -15,6 +15,7 @@ import { useInWorker } from "./worker"; import * as constant from "./constant"; import * as logic from "./logic"; import { Element } from "./element"; +import * as utils from "./utils"; export * from "./decorator"; export * from "./2.base"; @@ -29,6 +30,7 @@ export * from "./structure"; export * from "./h"; export * from "./constant"; export * from "./logic"; +export * from "./utils"; export { StyleLoaderManager, @@ -57,4 +59,5 @@ Object.assign(BI, { ...structure, useInWorker, ...h, + ...utils, }); diff --git a/src/core/utils/chinesePY.js b/src/core/utils/chinesePY.js index 3ef5567db..dfa98ebe0 100644 --- a/src/core/utils/chinesePY.js +++ b/src/core/utils/chinesePY.js @@ -376,41 +376,42 @@ const oMultiDiff = { 40765: "YQ", 40784: "QJ", 40840: "YK", - 40863: "QJG" + 40863: "QJG", }; -const _checkPYCh = function (ch) { - var uni = ch.charCodeAt(0); +function _checkPYCh(ch) { + const uni = ch.charCodeAt(0); // 如果不在汉字处理范围之内,返回原字符,也可以调用自己的处理函数 if (uni > 40869 || uni < 19968) { return ch; } // dealWithOthers(ch); + return (oMultiDiff[uni] ? oMultiDiff[uni] : (_ChineseFirstPY.charAt(uni - 19968))); -}; +} -const _mkPYRslt = function (arr, options) { - var ignoreMulti = options.ignoreMulti; - var splitChar = options.splitChar; - var arrRslt = [""], k, multiLen = 0; - for (var i = 0, len = arr.length; i < len; i++) { - var str = arr[i]; - var strlen = str.length; +function _mkPYRslt(arr, options) { + const ignoreMulti = options.ignoreMulti; + const splitChar = options.splitChar; + let arrRslt = [""], k, multiLen = 0; + for (let i = 0, len = arr.length; i < len; i++) { + const str = arr[i]; + const strlen = str.length; // 多音字过多的情况下，指数增长会造成浏览器卡死，超过20完全卡死，18勉强能用，考虑到不同性能最好是16或者14 // 超过14个多音字之后，后面的都用第一个拼音 - if (strlen == 1 || multiLen > 14 || ignoreMulti) { - var tmpStr = str.substring(0, 1); + if (strlen === 1 || multiLen > 14 || ignoreMulti) { + const tmpStr = str.substring(0, 1); for (k = 0; k < arrRslt.length; k++) { arrRslt[k] += tmpStr; } } else { - var tmpArr = arrRslt.slice(0); + const tmpArr = arrRslt.slice(0); arrRslt = []; multiLen++; for (k = 0; k < strlen; k++) { // 复制一个相同的arrRslt - var tmp = tmpArr.slice(0); + const tmp = tmpArr.slice(0); // 把当前字符str[k]添加到每个元素末尾 - for (var j = 0; j < tmp.length; j++) { + for (let j = 0; j < tmp.length; j++) { tmp[j] += str.charAt(k); } // 把复制并修改后的数组连接到arrRslt上 @@ -418,28 +419,25 @@ const _mkPYRslt = function (arr, options) { } } } + // BI-56386 这边直接将所有多音字组合拼接是有风险的，因为丢失了每一组的起始索引信息, 外部使用indexOf等方法会造成错位 // 一旦错位就可能认为不符合条件， 但实际上还是有可能符合条件的，故此处以一个无法搜索的不可见字符作为连接 return arrRslt.join(splitChar || "").toLowerCase(); -}; - +} export function makeFirstPY(str, options) { options = options || {}; if (typeof (str) !== "string") { - return "" + str; + return `${str}`; } - var arrResult = []; // 保存中间结果的数组 - for (var i = 0, len = str.length; i < len; i++) { + const arrResult = []; // 保存中间结果的数组 + for (let i = 0, len = str.length; i < len; i++) { // 获得unicode码 - var ch = str.charAt(i); + const ch = str.charAt(i); // 检查该unicode码是否在处理范围之内,在则返回该码对映汉字的拼音首字母,不在则调用其它函数处理 arrResult.push(_checkPYCh(ch)); } + // 处理arrResult,返回所有可能的拼音首字母串数组 return _mkPYRslt(arrResult, options); } - -Object.assign(BI, { - makeFirstPY -}); diff --git a/src/core/utils/color.js b/src/core/utils/color.js index 1c14c3739..2eff91b95 100644 --- a/src/core/utils/color.js +++ b/src/core/utils/color.js @@ -1,190 +1,201 @@ -BI.DOM = BI.DOM || {}; -BI.extend(BI.DOM, { - isColor: function (color) { +import { parseInt, parseFloat, isNull, isKey } from "../2.base"; + +export const DOM = { + isColor(color) { return color && (this.isRGBColor(color) || this.isHexColor(color)); }, - isRGBColor: function (color) { + isRGBColor(color) { if (!color) { return false; } + return color.substr(0, 3) === "rgb"; }, - isHexColor: function (color) { + isHexColor(color) { if (!color) { return false; } + return color[0] === "#" && color.length === 7; }, - isDarkColor: function (hex) { + isDarkColor(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); + const rgb = this.rgb2json(this.hex2rgb(hex)); + const 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(color) { if (!color || !this.isColor(color)) { return ""; } if (this.isDarkColor(color)) { return "#FFFFFF"; } + return "#3D4D66"; }, - rgb2hex: function (rgbColour) { - if (!rgbColour || rgbColour.substr(0, 3) != "rgb") { + rgb2hex(rgbColour) { + if (!rgbColour || rgbColour.substr(0, 3) !== "rgb") { return ""; } - var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); - var red = BI.parseInt(rgbValues[0]); - var green = BI.parseInt(rgbValues[1]); - var blue = BI.parseInt(rgbValues[2]); + const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); + const red = parseInt(rgbValues[0]); + const green = parseInt(rgbValues[1]); + const blue = parseInt(rgbValues[2]); - var hexColour = "#" + this.int2hex(red) + this.int2hex(green) + this.int2hex(blue); + const hexColour = `#${this.int2hex(red)}${this.int2hex(green)}${this.int2hex(blue)}`; return hexColour; }, - _hue2rgb: function (m1, m2, h) { + _hue2rgb(m1, m2, h) { h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; if (h * 2 < 1) return m2; if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; + return m1; }, - hsl2rgb: function (hsl) { - var m1, m2, r, g, b; - var h = hsl[0], s = hsl[1], l = hsl[2]; - m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; - m1 = l * 2 - m2; + hsl2rgb(hsl) { + const h = hsl[0], s = hsl[1], l = hsl[2]; + const m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; + const m1 = l * 2 - m2; + return [this._hue2rgb(m1, m2, h + 0.33333), this._hue2rgb(m1, m2, h), this._hue2rgb(m1, m2, h - 0.33333)]; }, - rgb2hsl: function (rgb) { - var min, max, delta, h, s, l; - var r = rgb[0], g = rgb[1], b = rgb[2]; - min = Math.min(r, Math.min(g, b)); - max = Math.max(r, Math.max(g, b)); - delta = max - min; - l = (min + max) / 2; + rgb2hsl(rgb) { + let h, s; + const r = rgb[0], g = rgb[1], b = rgb[2]; + const min = Math.min(r, Math.min(g, b)); + const max = Math.max(r, Math.max(g, b)); + const delta = max - min; + const l = (min + max) / 2; s = 0; if (l > 0 && l < 1) { s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); } h = 0; if (delta > 0) { - if (max == r && max != g) h += (g - b) / delta; - if (max == g && max != b) h += (2 + (b - r) / delta); - if (max == b && max != r) h += (4 + (r - g) / delta); + if (max === r && max !== g) h += (g - b) / delta; + if (max === g && max !== b) h += (2 + (b - r) / delta); + if (max === b && max !== r) h += (4 + (r - g) / delta); h /= 6; } + return [h, s, l]; }, - rgb2json: function (rgbColour) { + rgb2json(rgbColour) { if (!rgbColour) { return {}; } if (!this.isRGBColor(rgbColour)) { return {}; } - var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); + const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); + return { - r: BI.parseInt(rgbValues[0]), - g: BI.parseInt(rgbValues[1]), - b: BI.parseInt(rgbValues[2]) + r: parseInt(rgbValues[0]), + g: parseInt(rgbValues[1]), + b: parseInt(rgbValues[2]), }; }, - rgba2json: function (rgbColour) { + rgba2json(rgbColour) { if (!rgbColour) { return {}; } - var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); + const 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]) + r: parseInt(rgbValues[0]), + g: parseInt(rgbValues[1]), + b: parseInt(rgbValues[2]), + a: parseFloat(rgbValues[3]), }; }, - json2rgb: function (rgb) { - if (!BI.isKey(rgb.r) || !BI.isKey(rgb.g) || !BI.isKey(rgb.b)) { + json2rgb(rgb) { + if (!isKey(rgb.r) || !isKey(rgb.g) || !isKey(rgb.b)) { return ""; } - return "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")"; + + return `rgb(${rgb.r},${rgb.g},${rgb.b})`; }, - json2rgba: function (rgba) { - if (!BI.isKey(rgba.r) || !BI.isKey(rgba.g) || !BI.isKey(rgba.b)) { + json2rgba(rgba) { + if (!isKey(rgba.r) || !isKey(rgba.g) || !isKey(rgba.b)) { return ""; } - return "rgba(" + rgba.r + "," + rgba.g + "," + rgba.b + "," + rgba.a + ")"; + + return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`; }, - int2hex: function (strNum) { - var hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; + int2hex(strNum) { + const 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(color) { if (!color) { return ""; } if (!this.isHexColor(color)) { return color; } - var tempValue = "rgb(", colorArray; + let 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))]; + colorArray = [parseInt(`0x${color.substring(1, 3)}`), + parseInt(`0x${color.substring(3, 5)}`), + 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))]; + colorArray = [parseInt(`0x${color.substring(1, 2)}`), + parseInt(`0x${color.substring(2, 3)}`), + parseInt(`0x${color.substring(3, 4)}`)]; } - tempValue += colorArray[0] + ","; - tempValue += colorArray[1] + ","; - tempValue += colorArray[2] + ")"; + tempValue += `${colorArray[0]},`; + tempValue += `${colorArray[1]},`; + tempValue += `${colorArray[2]})`; return tempValue; }, - rgba2rgb: function (rgbColor, bgColor) { - if (BI.isNull(bgColor)) { + rgba2rgb(rgbColor, bgColor) { + if (isNull(bgColor)) { bgColor = 1; } - if (rgbColor.substr(0, 4) != "rgba") { + if (rgbColor.substr(0, 4) !== "rgba") { return ""; } - var rgbValues = rgbColor.match(/\d+(\.\d+)?/g); + const rgbValues = rgbColor.match(/\d+(\.\d+)?/g); 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]); + const R = parseFloat(rgbValues[0]); + const G = parseFloat(rgbValues[1]); + const B = parseFloat(rgbValues[2]); + const A = parseFloat(rgbValues[3]); - return "rgb(" + Math.floor(255 * (bgColor * (1 - A)) + R * A) + "," + - Math.floor(255 * (bgColor * (1 - A)) + G * A) + "," + - Math.floor(255 * (bgColor * (1 - A)) + B * 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)) + B * A)})`; + }, +}; diff --git a/src/core/utils/events/eventlistener.js b/src/core/utils/events/eventlistener.js index 5b8201dca..b8067c114 100644 --- a/src/core/utils/events/eventlistener.js +++ b/src/core/utils/events/eventlistener.js @@ -1,18 +1,22 @@ -BI.EventListener = { +import { emptyFn } from "../../constant"; + +export const EventListener = { listen: function listen (target, eventType, callback) { if (target.addEventListener) { target.addEventListener(eventType, callback, false); + return { remove: function remove () { target.removeEventListener(eventType, callback, false); - } + }, }; } else if (target.attachEvent) { - target.attachEvent("on" + eventType, callback); + target.attachEvent(`on${eventType}`, callback); + return { remove: function remove () { - target.detachEvent("on" + eventType, callback); - } + target.detachEvent(`on${eventType}`, callback); + }, }; } }, @@ -20,18 +24,19 @@ BI.EventListener = { capture: function capture (target, eventType, callback) { if (target.addEventListener) { target.addEventListener(eventType, callback, true); + return { remove: function remove () { target.removeEventListener(eventType, callback, true); - } + }, }; } + return { - remove: BI.emptyFn + remove: emptyFn, }; - }, registerDefault: function registerDefault () { - } -}; \ No newline at end of file + }, +}; diff --git a/src/core/utils/events/index.js b/src/core/utils/events/index.js new file mode 100644 index 000000000..9639166d4 --- /dev/null +++ b/src/core/utils/events/index.js @@ -0,0 +1,3 @@ +export { EventListener } from "./eventlistener"; +export { MouseMoveTracker } from "./mousemovetracker"; +export { WheelHandler } from "./wheelhandler"; diff --git a/src/core/utils/events/mousemovetracker.js b/src/core/utils/events/mousemovetracker.js index 212072ebc..63c02e13a 100644 --- a/src/core/utils/events/mousemovetracker.js +++ b/src/core/utils/events/mousemovetracker.js @@ -1,107 +1,107 @@ -!(function () { - var cancelAnimationFrame = - _global.cancelAnimationFrame || - _global.webkitCancelAnimationFrame || - _global.mozCancelAnimationFrame || - _global.oCancelAnimationFrame || - _global.msCancelAnimationFrame || - _global.clearTimeout; +import { EventListener } from "./eventlistener"; +import { bind } from "../../2.base"; - var requestAnimationFrame = _global.requestAnimationFrame || _global.webkitRequestAnimationFrame || _global.mozRequestAnimationFrame || _global.oRequestAnimationFrame || _global.msRequestAnimationFrame || _global.setTimeout; +const cancelAnimationFrame = + _global.cancelAnimationFrame || + _global.webkitCancelAnimationFrame || + _global.mozCancelAnimationFrame || + _global.oCancelAnimationFrame || + _global.msCancelAnimationFrame || + _global.clearTimeout; +const requestAnimationFrame = _global.requestAnimationFrame || _global.webkitRequestAnimationFrame || _global.mozRequestAnimationFrame || _global.oRequestAnimationFrame || _global.msRequestAnimationFrame || _global.setTimeout; - BI.MouseMoveTracker = function (onMove, onMoveEnd, domNode) { +export class MouseMoveTracker { + constructor(onMove, onMoveEnd, domNode) { this._isDragging = false; this._animationFrameID = null; this._domNode = domNode; this._onMove = onMove; this._onMoveEnd = onMoveEnd; + + this._onMouseMove = bind(this._onMouseMove, this); + this._onMouseUp = bind(this._onMouseUp, this); + this._didMouseMove = bind(this._didMouseMove, this); + } - this._onMouseMove = BI.bind(this._onMouseMove, this); - this._onMouseUp = BI.bind(this._onMouseUp, this); - this._didMouseMove = BI.bind(this._didMouseMove, this); - }; - BI.MouseMoveTracker.prototype = { - constructor: BI.MouseMoveTracker, - captureMouseMoves: function (/* object*/ event) { - if (!this._eventMoveToken && !this._eventUpToken) { - this._eventMoveToken = BI.EventListener.listen( - this._domNode, - "mousemove", - this._onMouseMove - ); - this._eventUpToken = BI.EventListener.listen( - this._domNode, - "mouseup", - this._onMouseUp - ); - } + captureMouseMoves(event) { + if (!this._eventMoveToken && !this._eventUpToken) { + this._eventMoveToken = EventListener.listen( + this._domNode, + "mousemove", + this._onMouseMove + ); + this._eventUpToken = EventListener.listen( + this._domNode, + "mouseup", + this._onMouseUp + ); + } - if (!this._isDragging) { - this._deltaX = 0; - this._deltaY = 0; - this._isDragging = true; - this._x = event.clientX; - this._y = event.clientY; - } - // event.preventDefault ? event.preventDefault() : (event.returnValue = false); - }, + if (!this._isDragging) { + this._deltaX = 0; + this._deltaY = 0; + this._isDragging = true; + this._x = event.clientX; + this._y = event.clientY; + } + // event.preventDefault ? event.preventDefault() : (event.returnValue = false); + } - releaseMouseMoves: function () { - if (this._eventMoveToken && this._eventUpToken) { - this._eventMoveToken.remove(); - this._eventMoveToken = null; - this._eventUpToken.remove(); - this._eventUpToken = null; - } + releaseMouseMoves() { + if (this._eventMoveToken && this._eventUpToken) { + this._eventMoveToken.remove(); + this._eventMoveToken = null; + this._eventUpToken.remove(); + this._eventUpToken = null; + } - if (this._animationFrameID !== null) { - cancelAnimationFrame(this._animationFrameID); - this._animationFrameID = null; - } + if (this._animationFrameID !== null) { + cancelAnimationFrame(this._animationFrameID); + this._animationFrameID = null; + } - if (this._isDragging) { - this._isDragging = false; - this._x = null; - this._y = null; - } - }, + if (this._isDragging) { + this._isDragging = false; + this._x = null; + this._y = null; + } + } - isDragging: function () /* boolean*/ { - return this._isDragging; - }, + isDragging() /* boolean*/ { + return this._isDragging; + } - _onMouseMove: function (/* object*/ event) { - var x = event.clientX; - var y = event.clientY; + _onMouseMove(/* object*/ event) { + const x = event.clientX; + const y = event.clientY; - this._deltaX += (x - this._x); - this._deltaY += (y - this._y); + this._deltaX += (x - this._x); + this._deltaY += (y - this._y); - if (this._animationFrameID === null) { - // The mouse may move faster then the animation frame does. - // Use `requestAnimationFrame` to avoid over-updating. - this._animationFrameID = - requestAnimationFrame(this._didMouseMove); - } + if (this._animationFrameID === null) { + // The mouse may move faster then the animation frame does. + // Use `requestAnimationFrame` to avoid over-updating. + this._animationFrameID = + requestAnimationFrame(this._didMouseMove); + } - this._x = x; - this._y = y; - event.preventDefault ? event.preventDefault() : (event.returnValue = false); - }, + this._x = x; + this._y = y; + event.preventDefault ? event.preventDefault() : (event.returnValue = false); + } - _didMouseMove: function () { - this._animationFrameID = null; - this._onMove(this._deltaX, this._deltaY); - this._deltaX = 0; - this._deltaY = 0; - }, + _didMouseMove() { + this._animationFrameID = null; + this._onMove(this._deltaX, this._deltaY); + this._deltaX = 0; + this._deltaY = 0; + } - _onMouseUp: function () { - if (this._animationFrameID) { - this._didMouseMove(); - } - this._onMoveEnd(); + _onMouseUp() { + if (this._animationFrameID) { + this._didMouseMove(); } - }; -})(); + this._onMoveEnd(); + } +} diff --git a/src/core/utils/events/wheelhandler.js b/src/core/utils/events/wheelhandler.js index 4d3ea6588..366b5afa6 100644 --- a/src/core/utils/events/wheelhandler.js +++ b/src/core/utils/events/wheelhandler.js @@ -1,149 +1,131 @@ -!(function () { - var PIXEL_STEP = 10; - var LINE_HEIGHT = 40; - var PAGE_HEIGHT = 800; - var requestAnimationFrame = _global.requestAnimationFrame || _global.webkitRequestAnimationFrame || _global.mozRequestAnimationFrame || _global.oRequestAnimationFrame || _global.msRequestAnimationFrame || _global.setTimeout; - - function normalizeWheel (/* object*/event) /* object*/ { - var sX = 0, - sY = 0, - // spinX, spinY - pX = 0, - pY = 0; // pixelX, pixelY - - // Legacy - if ("detail" in event) { - sY = event.detail; - } - if ("wheelDelta" in event) { - sY = -event.wheelDelta / 120; - } - if ("wheelDeltaY" in event) { - sY = -event.wheelDeltaY / 120; - } - if ("wheelDeltaX" in event) { - sX = -event.wheelDeltaX / 120; - } - - // side scrolling on FF with DOMMouseScroll - if ("axis" in event && event.axis === event.HORIZONTAL_AXIS) { - sX = sY; - sY = 0; - } +import { bind } from "../../2.base"; + +const PIXEL_STEP = 10; +const LINE_HEIGHT = 40; +const PAGE_HEIGHT = 800; +const requestAnimationFrame = _global.requestAnimationFrame || _global.webkitRequestAnimationFrame || _global.mozRequestAnimationFrame || _global.oRequestAnimationFrame || _global.msRequestAnimationFrame || _global.setTimeout; + +function normalizeWheel (/* object*/event) /* object*/ { + let sX = 0, + sY = 0, + // spinX, spinY + pX = 0, + pY = 0; // pixelX, pixelY + + // Legacy + if ("detail" in event) { + sY = event.detail; + } + if ("wheelDelta" in event) { + sY = -event.wheelDelta / 120; + } + if ("wheelDeltaY" in event) { + sY = -event.wheelDeltaY / 120; + } + if ("wheelDeltaX" in event) { + sX = -event.wheelDeltaX / 120; + } - pX = sX * PIXEL_STEP; - pY = sY * PIXEL_STEP; + // side scrolling on FF with DOMMouseScroll + if ("axis" in event && event.axis === event.HORIZONTAL_AXIS) { + sX = sY; + sY = 0; + } - if ("deltaY" in event) { - pY = event.deltaY; - } - if ("deltaX" in event) { - pX = event.deltaX; - } + pX = sX * PIXEL_STEP; + pY = sY * PIXEL_STEP; - if ((pX || pY) && event.deltaMode) { - if (event.deltaMode === 1) { - // delta in LINE units - pX *= LINE_HEIGHT; - pY *= LINE_HEIGHT; - } else { - // delta in PAGE units - pX *= PAGE_HEIGHT; - pY *= PAGE_HEIGHT; - } - } + if ("deltaY" in event) { + pY = event.deltaY; + } + if ("deltaX" in event) { + pX = event.deltaX; + } - // Fall-back if spin cannot be determined - if (pX && !sX) { - sX = pX < 1 ? -1 : 1; - } - if (pY && !sY) { - sY = pY < 1 ? -1 : 1; + if ((pX || pY) && event.deltaMode) { + if (event.deltaMode === 1) { + // delta in LINE units + pX *= LINE_HEIGHT; + pY *= LINE_HEIGHT; + } else { + // delta in PAGE units + pX *= PAGE_HEIGHT; + pY *= PAGE_HEIGHT; } + } - return { - spinX: sX, - spinY: sY, - pixelX: pX, - pixelY: pY - }; + // Fall-back if spin cannot be determined + if (pX && !sX) { + sX = pX < 1 ? -1 : 1; } + if (pY && !sY) { + sY = pY < 1 ? -1 : 1; + } + + return { + spinX: sX, + spinY: sY, + pixelX: pX, + pixelY: pY, + }; +} - BI.WheelHandler = function (onWheel, handleScrollX, handleScrollY, stopPropagation) { +export class WheelHandler { + constructor(onWheel, handleScrollX, handleScrollY, stopPropagation) { this._animationFrameID = null; this._deltaX = 0; this._deltaY = 0; - this._didWheel = BI.bind(this._didWheel, this); + this._didWheel = bind(this._didWheel, this); if (typeof handleScrollX !== "function") { - handleScrollX = handleScrollX ? - function () { - return true; - } : - function () { - return false; - }; + handleScrollX = handleScrollX ? () => true : () => false; } - + if (typeof handleScrollY !== "function") { - handleScrollY = handleScrollY ? - function () { - return true; - } : - function () { - return false; - }; + handleScrollY = handleScrollY ? () => true : () => false; } - + if (typeof stopPropagation !== "function") { - stopPropagation = stopPropagation ? - function () { - return true; - } : - function () { - return false; - }; + stopPropagation = stopPropagation ? () => true : () => false; } - + this._handleScrollX = handleScrollX; this._handleScrollY = handleScrollY; this._stopPropagation = stopPropagation; this._onWheelCallback = onWheel; - this.onWheel = BI.bind(this.onWheel, this); - }; - BI.WheelHandler.prototype = { - constructor: BI.WheelHandler, - onWheel: function (/* object*/ event) { - var normalizedEvent = normalizeWheel(event); - var deltaX = this._deltaX + normalizedEvent.pixelX; - var deltaY = this._deltaY + normalizedEvent.pixelY; - var handleScrollX = this._handleScrollX(deltaX, deltaY); - var handleScrollY = this._handleScrollY(deltaY, deltaX); - if (!handleScrollX && !handleScrollY) { - return; - } - - this._deltaX += handleScrollX ? normalizedEvent.pixelX : 0; - this._deltaY += handleScrollY ? normalizedEvent.pixelY : 0; - event.preventDefault ? event.preventDefault() : (event.returnValue = false); + this.onWheel = bind(this.onWheel, this); + } + + onWheel(event) { + const normalizedEvent = normalizeWheel(event); + const deltaX = this._deltaX + normalizedEvent.pixelX; + const deltaY = this._deltaY + normalizedEvent.pixelY; + const handleScrollX = this._handleScrollX(deltaX, deltaY); + const handleScrollY = this._handleScrollY(deltaY, deltaX); + if (!handleScrollX && !handleScrollY) { + return; + } - var changed; - if (this._deltaX !== 0 || this._deltaY !== 0) { - if (this._stopPropagation()) { - event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); - } - changed = true; - } + this._deltaX += handleScrollX ? normalizedEvent.pixelX : 0; + this._deltaY += handleScrollY ? normalizedEvent.pixelY : 0; + event.preventDefault ? event.preventDefault() : (event.returnValue = false); - if (changed === true && this._animationFrameID === null) { - this._animationFrameID = requestAnimationFrame(this._didWheel); + let changed; + if (this._deltaX !== 0 || this._deltaY !== 0) { + if (this._stopPropagation()) { + event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); } - }, + changed = true; + } - _didWheel: function () { - this._animationFrameID = null; - this._onWheelCallback(this._deltaX, this._deltaY); - this._deltaX = 0; - this._deltaY = 0; + if (changed === true && this._animationFrameID === null) { + this._animationFrameID = requestAnimationFrame(this._didWheel); } - }; -})(); \ No newline at end of file + } + + _didWheel() { + this._animationFrameID = null; + this._onWheelCallback(this._deltaX, this._deltaY); + this._deltaX = 0; + this._deltaY = 0; + } +} diff --git a/src/core/utils/i18n.js b/src/core/utils/i18n.js index 8611ec0a9..3fa951695 100644 --- a/src/core/utils/i18n.js +++ b/src/core/utils/i18n.js @@ -1,51 +1,50 @@ -!(function () { - var i18nStore = {}; +import { extend } from "../2.base"; +import { replaceAll } from "../func"; - var i18nFormatters = {}; +let i18nStore = {}; +const i18nFormatters = {}; - BI._.extend(BI, { - changeI18n: function (i18n) { - if (i18n) { - i18nStore = i18n; - } - }, - addI18n: function (i18n) { - BI.extend(i18nStore, i18n); - }, +export function changeI18n(i18n) { + if (i18n) { + i18nStore = i18n; + } +} - i18nText: function (key) { - var localeText = i18nStore[key] || (BI.i18n && BI.i18n[key]) || ""; - if (!localeText) { - localeText = key; - } - var len = arguments.length; - if (len > 1) { - if (localeText.indexOf("{R1") > -1) { - for (var i = 1; i < len; i++) { - var reg = new RegExp(`{R${i},(.*?)}`, "g"); +export function addI18n(i18n) { + extend(i18nStore, i18n); +} + +export function i18nText(key) { + let localeText = i18nStore[key] || (BI.i18n && BI.i18n[key]) || ""; + if (!localeText) { + localeText = key; + } + const len = arguments.length; + if (len > 1) { + if (localeText.indexOf("{R1") > -1) { + for (let i = 1; i < len; i++) { + const reg = new RegExp(`{R${i},(.*?)}`, "g"); - var result = reg.exec(localeText); + const result = reg.exec(localeText); - if (result) { - var formatName = result[1]; - localeText = BI.replaceAll(localeText, reg, i18nFormatters[formatName](key, arguments[i])); - } else { - localeText = BI.replaceAll(localeText, `{R${i}}`, arguments[i] + ""); - } - } + if (result) { + const formatName = result[1]; + localeText = replaceAll(localeText, reg, i18nFormatters[formatName](key, arguments[i])); } else { - var args = Array.prototype.slice.call(arguments); - var count = 1; - return BI.replaceAll(localeText, "\\{\\s*\\}", function () { - return args[count++] + ""; - }); + localeText = replaceAll(localeText, `{R${i}}`, `${arguments[i]}`); } } - return localeText; - }, - - addI18nFormatter: function (formatName, fn) { - i18nFormatters[formatName] = fn; + } else { + const args = Array.prototype.slice.call(arguments); + let count = 1; + + return replaceAll(localeText, "\\{\\s*\\}", () => `${args[count++]}`); } - }); -})(); + } + + return localeText; +} + +export function addI18nFormatter(formatName, fn) { + i18nFormatters[formatName] = fn; +} diff --git a/src/core/utils/index.js b/src/core/utils/index.js new file mode 100644 index 000000000..059be17e4 --- /dev/null +++ b/src/core/utils/index.js @@ -0,0 +1,4 @@ +export * from "./events"; +export * from "./i18n"; +export { makeFirstPY } from "./chinesePY"; +export { DOM } from "./color";