sundowndev
/
betaflight-configurator
mirror of https://github.com/sundowndev/betaflight-configurator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2999 from chmelevskij/chore/css-util-modules 

Remove css utils from global scope
10.9-maintenance
Tomas Chmelevskij 2022-08-20 18:29:07 +01:00 committed by GitHub
parent fdaefa261d 71a3fb4789
commit ccc140acd2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/js/tabs/pid_tuning.js
View File

@ -1,4 +1,5 @@
import { i18n } from "../localization";
import { colorTables, getColorForPercentage } from '../utils/css.js';
const pid_tuning = {
RATE_PROFILE_MASK: 128,
@ -2962,7 +2963,7 @@ pid_tuning.updatePIDColors = function(clear = false) {
}
const change = (currentValue - mspValue) / 50;
element.css({ "background-color": cssUtil.getColorForPercentage(change, cssUtil.colorTables.pidSlider) });
element.css({ "background-color": getColorForPercentage(change, colorTables.pidSlider) });
};
FC.PID_NAMES.forEach(function(elementPid, indexPid) {

22
src/js/utils/css.js
View File

@ -1,12 +1,8 @@
'use strict';
/*
This utility contains CSS helpers.
*/
const CSSUtil = function () {};
CSSUtil.prototype.colorTables = {
export const colorTables = {
redWhiteGreen: [
{ percentage: -1, color: { r: 0xff, g: 0x00, b: 0x00, a: 1.0 } },
{ percentage: 0, color: { r: 0xff, g: 0xff, b: 0xff, a: 1.0 } },
@ -20,19 +16,19 @@ CSSUtil.prototype.colorTables = {
};
// Stack Overflow: https://stackoverflow.com/a/7128796/4107016
CSSUtil.prototype.getColorForPercentage = function(percentage, colorTable = null) {
colorTable = colorTable || cssUtil.colorTables.redWhiteGreen;
export function getColorForPercentage(percentage, colorTableOverride = null) {
colorTableOverride = colorTableOverride || colorTables.redWhiteGreen;
percentage = Math.min(1, Math.max(-1, percentage));
let index;
for (index = 1; index < colorTable.length - 1; index++) {
if (percentage < colorTable[index].percentage) {
for (index = 1; index < colorTableOverride.length - 1; index++) {
if (percentage < colorTableOverride[index].percentage) {
break;
}
}
const lower = colorTable[index - 1];
const upper = colorTable[index];
const lower = colorTableOverride[index - 1];
const upper = colorTableOverride[index];
const range = upper.percentage - lower.percentage;
const rangePercentage = (percentage - lower.percentage) / range;
const percentageLower = 1 - rangePercentage;
@ -45,7 +41,3 @@ CSSUtil.prototype.getColorForPercentage = function(percentage, colorTable = null
};
return `rgba(${[color.r, color.g, color.b, color.a].join(",")})`;
};
const cssUtil = new CSSUtil();
window.cssUtil = cssUtil;
export default cssUtil;

2
src/main.html
View File

@ -78,8 +78,6 @@
<script type="text/javascript" src="./js/libraries/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" src="./node_modules/inflection/inflection.min.js"></script>
<script type="text/javascript" src="./js/libraries/analytics.js"></script>
<!-- TODO: remove when using modules fully -->
<script type="module" src="./js/utils/css.js"></script>
<script type="text/javascript" src="./js/utils/window_watchers.js"></script>
<script type="text/javascript" src="./js/utils/VtxDeviceStatus/VtxDeviceStatusFactory.js"></script>
<script type="text/javascript" src="./js/utils/VtxDeviceStatus/VtxDeviceStatus.js"></script>