Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-27 02:05:21 +03:00
Code Issues Wiki Activity

remove css utils from global scope

Browse source
This commit is contained in:
Tomas Chmelevskij 2022-08-19 21:43:11 +01:00
parent 7bc1db46b6
commit 71a3fb4789
3 changed files with 9 additions and 18 deletions
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 { i18n } from "../localization";
import { colorTables, getColorForPercentage } from '../utils/css.js';
const pid_tuning = { const pid_tuning = {
RATE_PROFILE_MASK: 128, RATE_PROFILE_MASK: 128,
@ -2962,7 +2963,7 @@ pid_tuning.updatePIDColors = function(clear = false) {
} }
const change = (currentValue - mspValue) / 50; 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) { 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. This utility contains CSS helpers.
*/ */
const CSSUtil = function () {}; export const colorTables = {
CSSUtil.prototype.colorTables = {
redWhiteGreen: [ redWhiteGreen: [
{ percentage: -1, color: { r: 0xff, g: 0x00, b: 0x00, a: 1.0 } }, { percentage: -1, color: { r: 0xff, g: 0x00, b: 0x00, a: 1.0 } },
{ percentage: 0, color: { r: 0xff, g: 0xff, b: 0xff, 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 // Stack Overflow: https://stackoverflow.com/a/7128796/4107016
CSSUtil.prototype.getColorForPercentage = function(percentage, colorTable = null) { export function getColorForPercentage(percentage, colorTableOverride = null) {
colorTable = colorTable || cssUtil.colorTables.redWhiteGreen; colorTableOverride = colorTableOverride || colorTables.redWhiteGreen;
percentage = Math.min(1, Math.max(-1, percentage)); percentage = Math.min(1, Math.max(-1, percentage));
let index; let index;
for (index = 1; index < colorTable.length - 1; index++) { for (index = 1; index < colorTableOverride.length - 1; index++) {
if (percentage < colorTable[index].percentage) { if (percentage < colorTableOverride[index].percentage) {
break; break;
} }
} }
const lower = colorTable[index - 1]; const lower = colorTableOverride[index - 1];
const upper = colorTable[index]; const upper = colorTableOverride[index];
const range = upper.percentage - lower.percentage; const range = upper.percentage - lower.percentage;
const rangePercentage = (percentage - lower.percentage) / range; const rangePercentage = (percentage - lower.percentage) / range;
const percentageLower = 1 - rangePercentage; 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(",")})`; 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

@ -79,8 +79,6 @@
<script type="text/javascript" src="./js/libraries/jquery.ba-throttle-debounce.min.js"></script> <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="./node_modules/inflection/inflection.min.js"></script>
<script type="text/javascript" src="./js/libraries/analytics.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/window_watchers.js"></script>
<script type="text/javascript" src="./js/utils/VtxDeviceStatus/VtxDeviceStatusFactory.js"></script> <script type="text/javascript" src="./js/utils/VtxDeviceStatus/VtxDeviceStatusFactory.js"></script>
<script type="text/javascript" src="./js/utils/VtxDeviceStatus/VtxDeviceStatus.js"></script> <script type="text/javascript" src="./js/utils/VtxDeviceStatus/VtxDeviceStatus.js"></script>