chore: move css and CommonUtils to modules

* move static class to utils/common.js
* move css to modules

Author: chmelevskij

src/components/EscDshotDirection/EscDshotDirectionComponent.js

@@ -117,7 +117,7 @@ class EscDshotDirectionComponent
             this._onStopWizardButtonClicked();
         });
 
-        const imgSrc = CommonUtils.GetMixerImageSrc(FC.MIXER_CONFIG.mixer, FC.MIXER_CONFIG.reverseMotorDir, FC.CONFIG.apiVersion);
+        const imgSrc = getMixerImageSrc(FC.MIXER_CONFIG.mixer, FC.MIXER_CONFIG.reverseMotorDir, FC.CONFIG.apiVersion);
         this._domMixerImg.attr('src', imgSrc);
 
         this._onLoadedCallback();

src/js/tabs/motors.js

@@ -203,7 +203,7 @@ TABS.motors.initialize = function (callback) {
     }
 
     function update_model(mixer) {
-        const imgSrc = CommonUtils.GetMixerImageSrc(mixer, FC.MIXER_CONFIG.reverseMotorDir, FC.CONFIG.apiVersion);
+        const imgSrc = getMixerImageSrc(mixer, FC.MIXER_CONFIG.reverseMotorDir, FC.CONFIG.apiVersion);
         $('.mixerPreview img').attr('src', imgSrc);
 
         const motorOutputReorderConfig = new MotorOutputReorderConfig(100);

src/js/utils/CommonUtils.js

@@ -74,11 +74,21 @@ export function generateVirtualApiVersions() {
         firmwareVersionDropdown.appendChild(option);
     }
 }
+export function getMixerImageSrc(mixerIndex, reverseMotorDir, apiVersion)
+{
+    let reverse = "";
+
+    if (semver.gte(apiVersion, API_VERSION_1_36)) {
+        reverse = reverseMotorDir ? "_reversed" : "";
+    }
+
+    return `./resources/motor_order/${mixerList[mixerIndex - 1].image}${reverse}.svg`;
+}
 
 // TODO: these are temp binding while transition to module happens
 window.microtime = microtime;
 window.degToRad = degToRad;
 window.bytesToSize = bytesToSize;
 window.checkChromeRuntimeError = checkChromeRuntimeError;
 window.generateVirtualApiVersions = generateVirtualApiVersions;
-window.millitime = millitime;
+window.getMixerImageSrc = getMixerImageSrc;

src/js/utils/common.js

@@ -47,3 +47,5 @@ CSSUtil.prototype.getColorForPercentage = function(percentage, colorTable = null
 };
 
 const cssUtil = new CSSUtil();
+window.cssUtil = cssUtil;
+export default cssUtil;

src/js/utils/css.js

@@ -72,7 +72,8 @@
     <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>
-    <script type="text/javascript" src="./js/utils/css.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/CommonUtils.js"></script>
     <script type="text/javascript" src="./js/utils/VtxDeviceStatus/VtxDeviceStatusFactory.js"></script>