diff options
author | Tomas Chmelevskij <chmelevskij@users.noreply.github.com> | 2022-08-20 20:29:07 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-08-20 20:29:07 +0300 |
commit | ccc140acd2c8896ad8bdf58310f796fb0882cce5 (patch) | |
tree | b0bb2874a9381501e2a3b3a5f31684461fd451a4 | |
parent | fdaefa261d1d50ae32c1326cb3c4897e0a769f2b (diff) | |
parent | 71a3fb47894feec1eb19c7f2004894bdf091a6be (diff) |
Merge pull request #2999 from chmelevskij/chore/css-util-modules
Remove css utils from global scope
-rw-r--r-- | src/js/tabs/pid_tuning.js | 3 | ||||
-rw-r--r-- | src/js/utils/css.js | 22 | ||||
-rw-r--r-- | src/main.html | 2 |
3 files changed, 9 insertions, 18 deletions
diff --git a/src/js/tabs/pid_tuning.js b/src/js/tabs/pid_tuning.js index 66221e50..fa475fa5 100644 --- a/src/js/tabs/pid_tuning.js +++ b/src/js/tabs/pid_tuning.js @@ -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) { diff --git a/src/js/utils/css.js b/src/js/utils/css.js index 5540fde1..86fed303 100644 --- a/src/js/utils/css.js +++ b/src/js/utils/css.js @@ -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; diff --git a/src/main.html b/src/main.html index 1d19e1fc..ec43cd6d 100644 --- a/src/main.html +++ b/src/main.html @@ -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> |