forked from fanruan/fineui
Browse Source
Merge in VISUAL/fineui from ~ZHENFEI.LI/fineui:es6 to es6 * commit '3d958f3c9e642af2e94fdb860286c40f2bfdeb55': KERNEL-14035 refactor: core/utilses6
Zhenfei.Li-李振飞
2 years ago
9 changed files with 368 additions and 363 deletions
@ -1,190 +1,201 @@ |
|||||||
BI.DOM = BI.DOM || {}; |
import { parseInt, parseFloat, isNull, isKey } from "../2.base"; |
||||||
BI.extend(BI.DOM, { |
|
||||||
isColor: function (color) { |
export const DOM = { |
||||||
|
isColor(color) { |
||||||
return color && (this.isRGBColor(color) || this.isHexColor(color)); |
return color && (this.isRGBColor(color) || this.isHexColor(color)); |
||||||
}, |
}, |
||||||
|
|
||||||
isRGBColor: function (color) { |
isRGBColor(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(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(hex) { |
||||||
if (!hex || !this.isHexColor(hex)) { |
if (!hex || !this.isHexColor(hex)) { |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
var rgb = this.rgb2json(this.hex2rgb(hex)); |
const rgb = this.rgb2json(this.hex2rgb(hex)); |
||||||
var grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114); |
const grayLevel = Math.round(rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114); |
||||||
if (grayLevel < 192/** 网上给的是140**/) { |
if (grayLevel < 192/** 网上给的是140**/) { |
||||||
return true; |
return true; |
||||||
} |
} |
||||||
|
|
||||||
return false; |
return false; |
||||||
}, |
}, |
||||||
|
|
||||||
// 获取对比颜色
|
// 获取对比颜色
|
||||||
getContrastColor: function (color) { |
getContrastColor(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 "#3D4D66"; |
return "#3D4D66"; |
||||||
}, |
}, |
||||||
|
|
||||||
rgb2hex: function (rgbColour) { |
rgb2hex(rgbColour) { |
||||||
if (!rgbColour || rgbColour.substr(0, 3) != "rgb") { |
if (!rgbColour || rgbColour.substr(0, 3) !== "rgb") { |
||||||
return ""; |
return ""; |
||||||
} |
} |
||||||
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
||||||
var red = BI.parseInt(rgbValues[0]); |
const red = parseInt(rgbValues[0]); |
||||||
var green = BI.parseInt(rgbValues[1]); |
const green = parseInt(rgbValues[1]); |
||||||
var blue = BI.parseInt(rgbValues[2]); |
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; |
return hexColour; |
||||||
}, |
}, |
||||||
|
|
||||||
_hue2rgb: function (m1, m2, h) { |
_hue2rgb(m1, m2, h) { |
||||||
h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); |
h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); |
||||||
if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; |
if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; |
||||||
if (h * 2 < 1) return m2; |
if (h * 2 < 1) return m2; |
||||||
if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; |
if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; |
||||||
|
|
||||||
return m1; |
return m1; |
||||||
}, |
}, |
||||||
|
|
||||||
hsl2rgb: function (hsl) { |
hsl2rgb(hsl) { |
||||||
var m1, m2, r, g, b; |
const h = hsl[0], s = hsl[1], l = hsl[2]; |
||||||
var h = hsl[0], s = hsl[1], l = hsl[2]; |
const m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; |
||||||
m2 = (l <= 0.5) ? l * (s + 1) : l + s - l * s; |
const m1 = l * 2 - m2; |
||||||
m1 = l * 2 - m2; |
|
||||||
return [this._hue2rgb(m1, m2, h + 0.33333), |
return [this._hue2rgb(m1, m2, h + 0.33333), |
||||||
this._hue2rgb(m1, m2, h), |
this._hue2rgb(m1, m2, h), |
||||||
this._hue2rgb(m1, m2, h - 0.33333)]; |
this._hue2rgb(m1, m2, h - 0.33333)]; |
||||||
}, |
}, |
||||||
|
|
||||||
rgb2hsl: function (rgb) { |
rgb2hsl(rgb) { |
||||||
var min, max, delta, h, s, l; |
let h, s; |
||||||
var r = rgb[0], g = rgb[1], b = rgb[2]; |
const r = rgb[0], g = rgb[1], b = rgb[2]; |
||||||
min = Math.min(r, Math.min(g, b)); |
const min = Math.min(r, Math.min(g, b)); |
||||||
max = Math.max(r, Math.max(g, b)); |
const max = Math.max(r, Math.max(g, b)); |
||||||
delta = max - min; |
const delta = max - min; |
||||||
l = (min + max) / 2; |
const l = (min + max) / 2; |
||||||
s = 0; |
s = 0; |
||||||
if (l > 0 && l < 1) { |
if (l > 0 && l < 1) { |
||||||
s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); |
s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); |
||||||
} |
} |
||||||
h = 0; |
h = 0; |
||||||
if (delta > 0) { |
if (delta > 0) { |
||||||
if (max == r && max != g) h += (g - b) / delta; |
if (max === r && max !== g) h += (g - b) / delta; |
||||||
if (max == g && max != b) h += (2 + (b - r) / delta); |
if (max === g && max !== b) h += (2 + (b - r) / delta); |
||||||
if (max == b && max != r) h += (4 + (r - g) / delta); |
if (max === b && max !== r) h += (4 + (r - g) / delta); |
||||||
h /= 6; |
h /= 6; |
||||||
} |
} |
||||||
|
|
||||||
return [h, s, l]; |
return [h, s, l]; |
||||||
}, |
}, |
||||||
|
|
||||||
rgb2json: function (rgbColour) { |
rgb2json(rgbColour) { |
||||||
if (!rgbColour) { |
if (!rgbColour) { |
||||||
return {}; |
return {}; |
||||||
} |
} |
||||||
if (!this.isRGBColor(rgbColour)) { |
if (!this.isRGBColor(rgbColour)) { |
||||||
return {}; |
return {}; |
||||||
} |
} |
||||||
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
||||||
|
|
||||||
return { |
return { |
||||||
r: BI.parseInt(rgbValues[0]), |
r: parseInt(rgbValues[0]), |
||||||
g: BI.parseInt(rgbValues[1]), |
g: parseInt(rgbValues[1]), |
||||||
b: BI.parseInt(rgbValues[2]) |
b: parseInt(rgbValues[2]), |
||||||
}; |
}; |
||||||
}, |
}, |
||||||
|
|
||||||
rgba2json: function (rgbColour) { |
rgba2json(rgbColour) { |
||||||
if (!rgbColour) { |
if (!rgbColour) { |
||||||
return {}; |
return {}; |
||||||
} |
} |
||||||
var rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
const rgbValues = rgbColour.match(/\d+(\.\d+)?/g); |
||||||
|
|
||||||
return { |
return { |
||||||
r: BI.parseInt(rgbValues[0]), |
r: parseInt(rgbValues[0]), |
||||||
g: BI.parseInt(rgbValues[1]), |
g: parseInt(rgbValues[1]), |
||||||
b: BI.parseInt(rgbValues[2]), |
b: parseInt(rgbValues[2]), |
||||||
a: BI.parseFloat(rgbValues[3]) |
a: parseFloat(rgbValues[3]), |
||||||
}; |
}; |
||||||
}, |
}, |
||||||
|
|
||||||
json2rgb: function (rgb) { |
json2rgb(rgb) { |
||||||
if (!BI.isKey(rgb.r) || !BI.isKey(rgb.g) || !BI.isKey(rgb.b)) { |
if (!isKey(rgb.r) || !isKey(rgb.g) || !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(rgba) { |
||||||
if (!BI.isKey(rgba.r) || !BI.isKey(rgba.g) || !BI.isKey(rgba.b)) { |
if (!isKey(rgba.r) || !isKey(rgba.g) || !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(strNum) { |
||||||
var hexdig = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"]; |
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) { |
if (!color) { |
||||||
return ""; |
return ""; |
||||||
} |
} |
||||||
if (!this.isHexColor(color)) { |
if (!this.isHexColor(color)) { |
||||||
return color; |
return color; |
||||||
} |
} |
||||||
var tempValue = "rgb(", colorArray; |
let tempValue = "rgb(", colorArray; |
||||||
|
|
||||||
if (color.length === 7) { |
if (color.length === 7) { |
||||||
colorArray = [BI.parseInt("0x" + color.substring(1, 3)), |
colorArray = [parseInt(`0x${color.substring(1, 3)}`), |
||||||
BI.parseInt("0x" + color.substring(3, 5)), |
parseInt(`0x${color.substring(3, 5)}`), |
||||||
BI.parseInt("0x" + color.substring(5, 7))]; |
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 = [parseInt(`0x${color.substring(1, 2)}`), |
||||||
BI.parseInt("0x" + color.substring(2, 3)), |
parseInt(`0x${color.substring(2, 3)}`), |
||||||
BI.parseInt("0x" + color.substring(3, 4))]; |
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 (rgbColor, bgColor) { |
rgba2rgb(rgbColor, bgColor) { |
||||||
if (BI.isNull(bgColor)) { |
if (isNull(bgColor)) { |
||||||
bgColor = 1; |
bgColor = 1; |
||||||
} |
} |
||||||
if (rgbColor.substr(0, 4) != "rgba") { |
if (rgbColor.substr(0, 4) !== "rgba") { |
||||||
return ""; |
return ""; |
||||||
} |
} |
||||||
var rgbValues = rgbColor.match(/\d+(\.\d+)?/g); |
const rgbValues = rgbColor.match(/\d+(\.\d+)?/g); |
||||||
if (rgbValues.length < 4) { |
if (rgbValues.length < 4) { |
||||||
return ""; |
return ""; |
||||||
} |
} |
||||||
var R = BI.parseFloat(rgbValues[0]); |
const R = parseFloat(rgbValues[0]); |
||||||
var G = BI.parseFloat(rgbValues[1]); |
const G = parseFloat(rgbValues[1]); |
||||||
var B = BI.parseFloat(rgbValues[2]); |
const B = parseFloat(rgbValues[2]); |
||||||
var A = BI.parseFloat(rgbValues[3]); |
const A = 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)})`;
|
||||||
} |
}, |
||||||
}); |
}; |
||||||
|
@ -0,0 +1,3 @@ |
|||||||
|
export { EventListener } from "./eventlistener"; |
||||||
|
export { MouseMoveTracker } from "./mousemovetracker"; |
||||||
|
export { WheelHandler } from "./wheelhandler"; |
@ -1,107 +1,107 @@ |
|||||||
!(function () { |
import { EventListener } from "./eventlistener"; |
||||||
var cancelAnimationFrame = |
import { bind } from "../../2.base"; |
||||||
_global.cancelAnimationFrame || |
|
||||||
_global.webkitCancelAnimationFrame || |
|
||||||
_global.mozCancelAnimationFrame || |
|
||||||
_global.oCancelAnimationFrame || |
|
||||||
_global.msCancelAnimationFrame || |
|
||||||
_global.clearTimeout; |
|
||||||
|
|
||||||
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._isDragging = false; |
||||||
this._animationFrameID = null; |
this._animationFrameID = null; |
||||||
this._domNode = domNode; |
this._domNode = domNode; |
||||||
this._onMove = onMove; |
this._onMove = onMove; |
||||||
this._onMoveEnd = onMoveEnd; |
this._onMoveEnd = onMoveEnd; |
||||||
|
|
||||||
this._onMouseMove = BI.bind(this._onMouseMove, this); |
this._onMouseMove = bind(this._onMouseMove, this); |
||||||
this._onMouseUp = BI.bind(this._onMouseUp, this); |
this._onMouseUp = bind(this._onMouseUp, this); |
||||||
this._didMouseMove = BI.bind(this._didMouseMove, this); |
this._didMouseMove = bind(this._didMouseMove, this); |
||||||
}; |
} |
||||||
BI.MouseMoveTracker.prototype = { |
|
||||||
constructor: BI.MouseMoveTracker, |
captureMouseMoves(event) { |
||||||
captureMouseMoves: function (/* object*/ event) { |
if (!this._eventMoveToken && !this._eventUpToken) { |
||||||
if (!this._eventMoveToken && !this._eventUpToken) { |
this._eventMoveToken = EventListener.listen( |
||||||
this._eventMoveToken = BI.EventListener.listen( |
this._domNode, |
||||||
this._domNode, |
"mousemove", |
||||||
"mousemove", |
this._onMouseMove |
||||||
this._onMouseMove |
); |
||||||
); |
this._eventUpToken = EventListener.listen( |
||||||
this._eventUpToken = BI.EventListener.listen( |
this._domNode, |
||||||
this._domNode, |
"mouseup", |
||||||
"mouseup", |
this._onMouseUp |
||||||
this._onMouseUp |
); |
||||||
); |
} |
||||||
} |
|
||||||
|
if (!this._isDragging) { |
||||||
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; |
|
||||||
} |
|
||||||
|
|
||||||
if (this._animationFrameID !== null) { |
|
||||||
cancelAnimationFrame(this._animationFrameID); |
|
||||||
this._animationFrameID = null; |
|
||||||
} |
|
||||||
|
|
||||||
if (this._isDragging) { |
|
||||||
this._isDragging = false; |
|
||||||
this._x = null; |
|
||||||
this._y = null; |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
isDragging: function () /* boolean*/ { |
|
||||||
return this._isDragging; |
|
||||||
}, |
|
||||||
|
|
||||||
_onMouseMove: function (/* object*/ event) { |
|
||||||
var x = event.clientX; |
|
||||||
var y = event.clientY; |
|
||||||
|
|
||||||
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); |
|
||||||
} |
|
||||||
|
|
||||||
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._deltaX = 0; |
||||||
this._deltaY = 0; |
this._deltaY = 0; |
||||||
}, |
this._isDragging = true; |
||||||
|
this._x = event.clientX; |
||||||
|
this._y = event.clientY; |
||||||
|
} |
||||||
|
// event.preventDefault ? event.preventDefault() : (event.returnValue = false);
|
||||||
|
} |
||||||
|
|
||||||
|
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._isDragging) { |
||||||
|
this._isDragging = false; |
||||||
|
this._x = null; |
||||||
|
this._y = null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
isDragging() /* boolean*/ { |
||||||
|
return this._isDragging; |
||||||
|
} |
||||||
|
|
||||||
|
_onMouseMove(/* object*/ event) { |
||||||
|
const x = event.clientX; |
||||||
|
const y = event.clientY; |
||||||
|
|
||||||
|
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); |
||||||
|
} |
||||||
|
|
||||||
|
this._x = x; |
||||||
|
this._y = y; |
||||||
|
event.preventDefault ? event.preventDefault() : (event.returnValue = false); |
||||||
|
} |
||||||
|
|
||||||
|
_didMouseMove() { |
||||||
|
this._animationFrameID = null; |
||||||
|
this._onMove(this._deltaX, this._deltaY); |
||||||
|
this._deltaX = 0; |
||||||
|
this._deltaY = 0; |
||||||
|
} |
||||||
|
|
||||||
_onMouseUp: function () { |
_onMouseUp() { |
||||||
if (this._animationFrameID) { |
if (this._animationFrameID) { |
||||||
this._didMouseMove(); |
this._didMouseMove(); |
||||||
} |
|
||||||
this._onMoveEnd(); |
|
||||||
} |
} |
||||||
}; |
this._onMoveEnd(); |
||||||
})(); |
} |
||||||
|
} |
||||||
|
@ -1,149 +1,131 @@ |
|||||||
!(function () { |
import { bind } from "../../2.base"; |
||||||
var PIXEL_STEP = 10; |
|
||||||
var LINE_HEIGHT = 40; |
const PIXEL_STEP = 10; |
||||||
var PAGE_HEIGHT = 800; |
const LINE_HEIGHT = 40; |
||||||
var requestAnimationFrame = _global.requestAnimationFrame || _global.webkitRequestAnimationFrame || _global.mozRequestAnimationFrame || _global.oRequestAnimationFrame || _global.msRequestAnimationFrame || _global.setTimeout; |
const PAGE_HEIGHT = 800; |
||||||
|
const requestAnimationFrame = _global.requestAnimationFrame || _global.webkitRequestAnimationFrame || _global.mozRequestAnimationFrame || _global.oRequestAnimationFrame || _global.msRequestAnimationFrame || _global.setTimeout; |
||||||
function normalizeWheel (/* object*/event) /* object*/ { |
|
||||||
var sX = 0, |
function normalizeWheel (/* object*/event) /* object*/ { |
||||||
sY = 0, |
let sX = 0, |
||||||
// spinX, spinY
|
sY = 0, |
||||||
pX = 0, |
// spinX, spinY
|
||||||
pY = 0; // pixelX, pixelY
|
pX = 0, |
||||||
|
pY = 0; // pixelX, pixelY
|
||||||
// Legacy
|
|
||||||
if ("detail" in event) { |
// Legacy
|
||||||
sY = event.detail; |
if ("detail" in event) { |
||||||
} |
sY = event.detail; |
||||||
if ("wheelDelta" in event) { |
} |
||||||
sY = -event.wheelDelta / 120; |
if ("wheelDelta" in event) { |
||||||
} |
sY = -event.wheelDelta / 120; |
||||||
if ("wheelDeltaY" in event) { |
} |
||||||
sY = -event.wheelDeltaY / 120; |
if ("wheelDeltaY" in event) { |
||||||
} |
sY = -event.wheelDeltaY / 120; |
||||||
if ("wheelDeltaX" in event) { |
} |
||||||
sX = -event.wheelDeltaX / 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; |
|
||||||
} |
|
||||||
|
|
||||||
pX = sX * PIXEL_STEP; |
// side scrolling on FF with DOMMouseScroll
|
||||||
pY = sY * PIXEL_STEP; |
if ("axis" in event && event.axis === event.HORIZONTAL_AXIS) { |
||||||
|
sX = sY; |
||||||
|
sY = 0; |
||||||
|
} |
||||||
|
|
||||||
if ("deltaY" in event) { |
pX = sX * PIXEL_STEP; |
||||||
pY = event.deltaY; |
pY = sY * PIXEL_STEP; |
||||||
} |
|
||||||
if ("deltaX" in event) { |
|
||||||
pX = event.deltaX; |
|
||||||
} |
|
||||||
|
|
||||||
if ((pX || pY) && event.deltaMode) { |
if ("deltaY" in event) { |
||||||
if (event.deltaMode === 1) { |
pY = event.deltaY; |
||||||
// delta in LINE units
|
} |
||||||
pX *= LINE_HEIGHT; |
if ("deltaX" in event) { |
||||||
pY *= LINE_HEIGHT; |
pX = event.deltaX; |
||||||
} else { |
} |
||||||
// delta in PAGE units
|
|
||||||
pX *= PAGE_HEIGHT; |
|
||||||
pY *= PAGE_HEIGHT; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Fall-back if spin cannot be determined
|
if ((pX || pY) && event.deltaMode) { |
||||||
if (pX && !sX) { |
if (event.deltaMode === 1) { |
||||||
sX = pX < 1 ? -1 : 1; |
// delta in LINE units
|
||||||
} |
pX *= LINE_HEIGHT; |
||||||
if (pY && !sY) { |
pY *= LINE_HEIGHT; |
||||||
sY = pY < 1 ? -1 : 1; |
} else { |
||||||
|
// delta in PAGE units
|
||||||
|
pX *= PAGE_HEIGHT; |
||||||
|
pY *= PAGE_HEIGHT; |
||||||
} |
} |
||||||
|
} |
||||||
|
|
||||||
return { |
// Fall-back if spin cannot be determined
|
||||||
spinX: sX, |
if (pX && !sX) { |
||||||
spinY: sY, |
sX = pX < 1 ? -1 : 1; |
||||||
pixelX: pX, |
} |
||||||
pixelY: pY |
if (pY && !sY) { |
||||||
}; |
sY = pY < 1 ? -1 : 1; |
||||||
} |
} |
||||||
|
|
||||||
BI.WheelHandler = function (onWheel, handleScrollX, handleScrollY, stopPropagation) { |
return { |
||||||
|
spinX: sX, |
||||||
|
spinY: sY, |
||||||
|
pixelX: pX, |
||||||
|
pixelY: pY, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
export class WheelHandler { |
||||||
|
constructor(onWheel, handleScrollX, handleScrollY, stopPropagation) { |
||||||
this._animationFrameID = null; |
this._animationFrameID = null; |
||||||
this._deltaX = 0; |
this._deltaX = 0; |
||||||
this._deltaY = 0; |
this._deltaY = 0; |
||||||
this._didWheel = BI.bind(this._didWheel, this); |
this._didWheel = bind(this._didWheel, this); |
||||||
if (typeof handleScrollX !== "function") { |
if (typeof handleScrollX !== "function") { |
||||||
handleScrollX = handleScrollX ? |
handleScrollX = handleScrollX ? () => true : () => false; |
||||||
function () { |
|
||||||
return true; |
|
||||||
} : |
|
||||||
function () { |
|
||||||
return false; |
|
||||||
}; |
|
||||||
} |
} |
||||||
|
|
||||||
if (typeof handleScrollY !== "function") { |
if (typeof handleScrollY !== "function") { |
||||||
handleScrollY = handleScrollY ? |
handleScrollY = handleScrollY ? () => true : () => false; |
||||||
function () { |
|
||||||
return true; |
|
||||||
} : |
|
||||||
function () { |
|
||||||
return false; |
|
||||||
}; |
|
||||||
} |
} |
||||||
|
|
||||||
if (typeof stopPropagation !== "function") { |
if (typeof stopPropagation !== "function") { |
||||||
stopPropagation = stopPropagation ? |
stopPropagation = stopPropagation ? () => true : () => false; |
||||||
function () { |
|
||||||
return true; |
|
||||||
} : |
|
||||||
function () { |
|
||||||
return false; |
|
||||||
}; |
|
||||||
} |
} |
||||||
|
|
||||||
this._handleScrollX = handleScrollX; |
this._handleScrollX = handleScrollX; |
||||||
this._handleScrollY = handleScrollY; |
this._handleScrollY = handleScrollY; |
||||||
this._stopPropagation = stopPropagation; |
this._stopPropagation = stopPropagation; |
||||||
this._onWheelCallback = onWheel; |
this._onWheelCallback = onWheel; |
||||||
this.onWheel = BI.bind(this.onWheel, this); |
this.onWheel = 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; |
onWheel(event) { |
||||||
this._deltaY += handleScrollY ? normalizedEvent.pixelY : 0; |
const normalizedEvent = normalizeWheel(event); |
||||||
event.preventDefault ? event.preventDefault() : (event.returnValue = false); |
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; |
this._deltaX += handleScrollX ? normalizedEvent.pixelX : 0; |
||||||
if (this._deltaX !== 0 || this._deltaY !== 0) { |
this._deltaY += handleScrollY ? normalizedEvent.pixelY : 0; |
||||||
if (this._stopPropagation()) { |
event.preventDefault ? event.preventDefault() : (event.returnValue = false); |
||||||
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); |
|
||||||
} |
|
||||||
changed = true; |
|
||||||
} |
|
||||||
|
|
||||||
if (changed === true && this._animationFrameID === null) { |
let changed; |
||||||
this._animationFrameID = requestAnimationFrame(this._didWheel); |
if (this._deltaX !== 0 || this._deltaY !== 0) { |
||||||
|
if (this._stopPropagation()) { |
||||||
|
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); |
||||||
} |
} |
||||||
}, |
changed = true; |
||||||
|
} |
||||||
|
|
||||||
_didWheel: function () { |
if (changed === true && this._animationFrameID === null) { |
||||||
this._animationFrameID = null; |
this._animationFrameID = requestAnimationFrame(this._didWheel); |
||||||
this._onWheelCallback(this._deltaX, this._deltaY); |
|
||||||
this._deltaX = 0; |
|
||||||
this._deltaY = 0; |
|
||||||
} |
} |
||||||
}; |
} |
||||||
})(); |
|
||||||
|
_didWheel() { |
||||||
|
this._animationFrameID = null; |
||||||
|
this._onWheelCallback(this._deltaX, this._deltaY); |
||||||
|
this._deltaX = 0; |
||||||
|
this._deltaY = 0; |
||||||
|
} |
||||||
|
} |
||||||
|
@ -1,51 +1,50 @@ |
|||||||
!(function () { |
import { extend } from "../2.base"; |
||||||
var i18nStore = {}; |
import { replaceAll } from "../func"; |
||||||
|
|
||||||
var i18nFormatters = {}; |
let i18nStore = {}; |
||||||
|
const i18nFormatters = {}; |
||||||
|
|
||||||
BI._.extend(BI, { |
export function changeI18n(i18n) { |
||||||
changeI18n: function (i18n) { |
if (i18n) { |
||||||
if (i18n) { |
i18nStore = i18n; |
||||||
i18nStore = i18n; |
} |
||||||
} |
} |
||||||
}, |
|
||||||
addI18n: function (i18n) { |
export function addI18n(i18n) { |
||||||
BI.extend(i18nStore, i18n); |
extend(i18nStore, i18n); |
||||||
}, |
} |
||||||
|
|
||||||
i18nText: function (key) { |
export function i18nText(key) { |
||||||
var localeText = i18nStore[key] || (BI.i18n && BI.i18n[key]) || ""; |
let localeText = i18nStore[key] || (BI.i18n && BI.i18n[key]) || ""; |
||||||
if (!localeText) { |
if (!localeText) { |
||||||
localeText = key; |
localeText = key; |
||||||
} |
} |
||||||
var len = arguments.length; |
const len = arguments.length; |
||||||
if (len > 1) { |
if (len > 1) { |
||||||
if (localeText.indexOf("{R1") > -1) { |
if (localeText.indexOf("{R1") > -1) { |
||||||
for (var i = 1; i < len; i++) { |
for (let i = 1; i < len; i++) { |
||||||
var reg = new RegExp(`{R${i},(.*?)}`, "g"); |
const reg = new RegExp(`{R${i},(.*?)}`, "g"); |
||||||
|
|
||||||
var result = reg.exec(localeText); |
const result = reg.exec(localeText); |
||||||
|
|
||||||
if (result) { |
if (result) { |
||||||
var formatName = result[1]; |
const formatName = result[1]; |
||||||
localeText = BI.replaceAll(localeText, reg, i18nFormatters[formatName](key, arguments[i])); |
localeText = replaceAll(localeText, reg, i18nFormatters[formatName](key, arguments[i])); |
||||||
} else { |
|
||||||
localeText = BI.replaceAll(localeText, `{R${i}}`, arguments[i] + ""); |
|
||||||
} |
|
||||||
} |
|
||||||
} else { |
} else { |
||||||
var args = Array.prototype.slice.call(arguments); |
localeText = replaceAll(localeText, `{R${i}}`, `${arguments[i]}`); |
||||||
var count = 1; |
|
||||||
return BI.replaceAll(localeText, "\\{\\s*\\}", function () { |
|
||||||
return args[count++] + ""; |
|
||||||
}); |
|
||||||
} |
} |
||||||
} |
} |
||||||
return localeText; |
} else { |
||||||
}, |
const args = Array.prototype.slice.call(arguments); |
||||||
|
let count = 1; |
||||||
|
|
||||||
addI18nFormatter: function (formatName, fn) { |
return replaceAll(localeText, "\\{\\s*\\}", () => `${args[count++]}`); |
||||||
i18nFormatters[formatName] = fn; |
|
||||||
} |
} |
||||||
}); |
} |
||||||
})(); |
|
||||||
|
return localeText; |
||||||
|
} |
||||||
|
|
||||||
|
export function addI18nFormatter(formatName, fn) { |
||||||
|
i18nFormatters[formatName] = fn; |
||||||
|
} |
||||||
|
Loading…
Reference in new issue