Chore/move gui to modules (#3001)

Move `GUI` to esm

.gitignore

@@ -31,3 +31,4 @@ nbproject/
 # Eclipse
 .project
 .settings/
+test-results-junit/

src/js/Clipboard.js

@@ -1,4 +1,4 @@
-'use strict';
+import GUI from './gui.js';
 
 /**
  * Encapsulates the Clipboard logic, depending on web or nw
@@ -99,3 +99,5 @@ if (GUI.isNWJS()){
 } else {
     Clipboard._configureClipboardAsOther();
 }
+
+export default Clipboard;

src/js/gui.js

@@ -1,6 +1,3 @@
-
-'use strict';
-
 window.TABS = {}; // filled by individual tab js file
 
 const GUI_MODES = {
@@ -9,7 +6,8 @@ const GUI_MODES = {
     Other: "Other",
 };
 
-const GuiControl = function () {
+class GuiControl {
+    constructor() {
         this.auto_connect = false;
         this.connecting_to = false;
         this.connected_to = false;
@@ -71,20 +69,14 @@ const GuiControl = function () {
                 this.Mode = GUI_MODES.Other;
             }
         }
-};
+    }
-
+    // Timer managing methods
-function GUI_checkOperatingSystem() {
+    // name = string
-    return navigator?.userAgentData?.platform || 'Android';
+    // code = function reference (code to be executed)
-}
+    // interval = time interval in miliseconds
-
+    // first = true/false if code should be ran initially before next timer interval hits
-// Timer managing methods
+    interval_add(name, code, interval, first) {
-
+        const data = { 'name': name, 'timer': null, 'code': code, 'interval': interval, 'fired': 0, 'paused': false };
-// name = string
-// code = function reference (code to be executed)
-// interval = time interval in miliseconds
-// first = true/false if code should be ran initially before next timer interval hits
-GuiControl.prototype.interval_add = function (name, code, interval, first) {
-    const data = {'name': name, 'timer': null, 'code': code, 'interval': interval, 'fired': 0, 'paused': false};
 
         if (first === true) {
             code(); // execute code
@@ -92,7 +84,7 @@ GuiControl.prototype.interval_add = function (name, code, interval, first) {
             data.fired++; // increment counter
         }
 
-    data.timer = setInterval(function() {
+        data.timer = setInterval(function () {
             code(); // execute code
 
             data.fired++; // increment counter
@@ -101,14 +93,13 @@ GuiControl.prototype.interval_add = function (name, code, interval, first) {
         this.interval_array.push(data); // push to primary interval array
 
         return data;
-};
+    }
-
+    // name = string
-// name = string
+    // code = function reference (code to be executed)
-// code = function reference (code to be executed)
+    // interval = time interval in miliseconds
-// interval = time interval in miliseconds
+    // first = true/false if code should be ran initially before next timer interval hits
-// first = true/false if code should be ran initially before next timer interval hits
+    // condition = function reference with true/false result, a condition to be checked before every interval code execution
-// condition = function reference with true/false result, a condition to be checked before every interval code execution
+    interval_add_condition(name, code, interval, first, condition) {
-GuiControl.prototype.interval_add_condition = function (name, code, interval, first, condition) {
         this.interval_add(name, () => {
             if (condition()) {
                 code();
@@ -116,10 +107,9 @@ GuiControl.prototype.interval_add_condition = function (name, code, interval, fi
                 this.interval_remove(name);
             }
         }, interval, first);
-};
+    }
-
+    // name = string
-// name = string
+    interval_remove(name) {
-GuiControl.prototype.interval_remove = function (name) {
         for (let i = 0; i < this.interval_array.length; i++) {
             if (this.interval_array[i].name === name) {
                 clearInterval(this.interval_array[i].timer); // stop timer
@@ -131,10 +121,9 @@ GuiControl.prototype.interval_remove = function (name) {
         }
 
         return false;
-};
+    }
-
+    // name = string
-// name = string
+    interval_pause(name) {
-GuiControl.prototype.interval_pause = function (name) {
         for (let i = 0; i < this.interval_array.length; i++) {
             if (this.interval_array[i].name === name) {
                 clearInterval(this.interval_array[i].timer);
@@ -145,10 +134,9 @@ GuiControl.prototype.interval_pause = function (name) {
         }
 
         return false;
-};
+    }
-
+    // name = string
-// name = string
+    interval_resume(name) {
-GuiControl.prototype.interval_resume = function (name) {
 
         function executeCode(obj) {
             obj.code(); // execute code
@@ -168,11 +156,10 @@ GuiControl.prototype.interval_resume = function (name) {
         }
 
         return false;
-};
+    }
-
+    // input = array of timers thats meant to be kept, or nothing
-// input = array of timers thats meant to be kept, or nothing
+    // return = returns timers killed in last call
-// return = returns timers killed in last call
+    interval_kill_all(keepArray) {
-GuiControl.prototype.interval_kill_all = function (keepArray) {
         const self = this;
         let timersKilled = 0;
 
@@ -196,22 +183,23 @@ GuiControl.prototype.interval_kill_all = function (keepArray) {
         }
 
         return timersKilled;
-};
+    }
-
+    // name = string
-// name = string
+    // code = function reference (code to be executed)
-// code = function reference (code to be executed)
+    // timeout = timeout in miliseconds
-// timeout = timeout in miliseconds
+    timeout_add(name, code, timeout) {
-GuiControl.prototype.timeout_add = function (name, code, timeout) {
         const self = this;
-    const data = {'name': name,
+        const data = {
+            'name': name,
             'timer': null,
             'timeout': timeout,
         };
 
         // start timer with "cleaning" callback
-    data.timer = setTimeout(function() {
+        data.timer = setTimeout(function () {
             code(); // execute code
 
+
             // remove object from array
             const index = self.timeout_array.indexOf(data);
             if (index > -1) {
@@ -222,10 +210,9 @@ GuiControl.prototype.timeout_add = function (name, code, timeout) {
         this.timeout_array.push(data); // push to primary timeout array
 
         return data;
-};
+    }
-
+    // name = string
-// name = string
+    timeout_remove(name) {
-GuiControl.prototype.timeout_remove = function (name) {
         for (let i = 0; i < this.timeout_array.length; i++) {
             if (this.timeout_array[i].name === name) {
                 clearTimeout(this.timeout_array[i].timer); // stop timer
@@ -237,11 +224,10 @@ GuiControl.prototype.timeout_remove = function (name) {
         }
 
         return false;
-};
+    }
-
+    // no input parameters
-// no input parameters
+    // return = returns timers killed in last call
-// return = returns timers killed in last call
+    timeout_kill_all() {
-GuiControl.prototype.timeout_kill_all = function () {
         let timersKilled = 0;
 
         for (let i = 0; i < this.timeout_array.length; i++) {
@@ -253,10 +239,9 @@ GuiControl.prototype.timeout_kill_all = function () {
         this.timeout_array = []; // drop objects
 
         return timersKilled;
-};
+    }
-
+    // message = string
-// message = string
+    log(message) {
-GuiControl.prototype.log = function (message) {
         const commandLog = $('div#log');
         const d = new Date();
         const year = d.getFullYear();
@@ -270,12 +255,11 @@ GuiControl.prototype.log = function (message) {
         const formattedDate = `${year}-${month}-${date} @${time}`;
         $('div.wrapper', commandLog).append(`<p>${formattedDate} -- ${message}</p>`);
         commandLog.scrollTop($('div.wrapper', commandLog).height());
-};
+    }
-
+    // Method is called every time a valid tab change event is received
-// Method is called every time a valid tab change event is received
+    // callback = code to run when cleanup is finished
-// callback = code to run when cleanup is finished
+    // default switch doesn't require callback to be set
-// default switch doesn't require callback to be set
+    tab_switch_cleanup(callback) {
-GuiControl.prototype.tab_switch_cleanup = function (callback) {
         MSP.callbacks_cleanup(); // we don't care about any old data that might or might not arrive
         this.interval_kill_all(); // all intervals (mostly data pulling) needs to be removed on tab switch
 
@@ -284,14 +268,13 @@ GuiControl.prototype.tab_switch_cleanup = function (callback) {
         } else {
             callback();
         }
-};
+    }
-
+    switchery() {
-GuiControl.prototype.switchery = function() {
 
         const COLOR_ACCENT = 'var(--accent)';
         const COLOR_SWITCHERY_SECOND = 'var(--switcherysecond)';
 
-    $('.togglesmall').each(function(index, elem) {
+        $('.togglesmall').each(function (index, elem) {
             const switchery = new Switchery(elem, {
                 size: 'small',
                 color: COLOR_ACCENT,
@@ -303,7 +286,7 @@ GuiControl.prototype.switchery = function() {
             $(elem).removeClass('togglesmall');
         });
 
-    $('.toggle').each(function(index, elem) {
+        $('.toggle').each(function (index, elem) {
             const switchery = new Switchery(elem, {
                 color: COLOR_ACCENT,
                 secondaryColor: COLOR_SWITCHERY_SECOND,
@@ -314,7 +297,7 @@ GuiControl.prototype.switchery = function() {
             $(elem).removeClass('toggle');
         });
 
-    $('.togglemedium').each(function(index, elem) {
+        $('.togglemedium').each(function (index, elem) {
             const switchery = new Switchery(elem, {
                 className: 'switcherymid',
                 color: COLOR_ACCENT,
@@ -325,9 +308,8 @@ GuiControl.prototype.switchery = function() {
             });
             $(elem).removeClass('togglemedium');
         });
-};
+    }
-
+    content_ready(callback) {
-GuiControl.prototype.content_ready = function (callback) {
 
         this.switchery();
 
@@ -335,11 +317,11 @@ GuiControl.prototype.content_ready = function (callback) {
             // Build link to in-use CF version documentation
             const documentationButton = $('div#content #button-documentation');
             documentationButton.html("Wiki");
-        documentationButton.attr("href","https://github.com/betaflight/betaflight/wiki");
+            documentationButton.attr("href", "https://github.com/betaflight/betaflight/wiki");
         }
 
         // loading tooltip
-    jQuery(function() {
+        jQuery(function () {
 
             new jBox('Tooltip', {
                 attach: '.cf_tip',
@@ -374,28 +356,23 @@ GuiControl.prototype.content_ready = function (callback) {
         if (callback) {
             callback();
         }
-};
+    }
-
+    selectDefaultTabWhenConnected() {
-GuiControl.prototype.selectDefaultTabWhenConnected = function() {
         const result = ConfigStorage.get(['rememberLastTab', 'lastTab']);
         const tab = result.rememberLastTab && result.lastTab ? result.lastTab : 'tab_setup';
 
         $(`#tabs ul.mode-connected .${tab} a`).trigger('click');
-};
+    }
-
+    isNWJS() {
-GuiControl.prototype.isNWJS = function () {
         return this.Mode === GUI_MODES.NWJS;
-};
+    }
-
+    isCordova() {
-GuiControl.prototype.isCordova = function () {
         return this.Mode === GUI_MODES.Cordova;
-  };
+    }
-GuiControl.prototype.isOther = function () {
+    isOther() {
         return this.Mode === GUI_MODES.Other;
-};
+    }
-
+    showYesNoDialog(yesNoDialogSettings) {
-
-GuiControl.prototype.showYesNoDialog = function(yesNoDialogSettings) {
         // yesNoDialogSettings:
         // title, text, buttonYesText, buttonNoText, buttonYesCallback, buttonNoCallback
         const dialog = $(".dialogYesNo");
@@ -423,9 +400,8 @@ GuiControl.prototype.showYesNoDialog = function(yesNoDialogSettings) {
         });
 
         dialog[0].showModal();
-};
+    }
-
+    showWaitDialog(waitDialogSettings) {
-GuiControl.prototype.showWaitDialog = function(waitDialogSettings) {
         // waitDialogSettings:
         // title, buttonCancelCallback
         const dialog = $(".dialogWait")[0];
@@ -444,9 +420,8 @@ GuiControl.prototype.showWaitDialog = function(waitDialogSettings) {
 
         dialog.showModal();
         return dialog;
-};
+    }
-
+    showInformationDialog(informationDialogSettings) {
-GuiControl.prototype.showInformationDialog = function(informationDialogSettings) {
         // informationDialogSettings:
         // title, text, buttonConfirmText
         return new Promise(resolve => {
@@ -468,9 +443,8 @@ GuiControl.prototype.showInformationDialog = function(informationDialogSettings)
 
             dialog[0].showModal();
         });
-};
+    }
-
+    saveToTextFileDialog(textToSave, suggestedFileName, extension) {
-GuiControl.prototype.saveToTextFileDialog = function(textToSave, suggestedFileName, extension) {
         return new Promise((resolve, reject) => {
             const accepts = [{ description: `${extension.toUpperCase()} files`, extensions: [extension] }];
 
@@ -483,9 +457,8 @@ GuiControl.prototype.saveToTextFileDialog = function(textToSave, suggestedFileNa
                 entry => this._saveToTextFileDialogFileSelected(entry, textToSave, resolve, reject),
             );
         });
-};
+    }
-
+    _saveToTextFileDialogFileSelected(entry, textToSave, resolve, reject) {
-GuiControl.prototype._saveToTextFileDialogFileSelected = function(entry, textToSave, resolve, reject) {
         checkChromeRuntimeError();
 
         if (!entry) {
@@ -502,7 +475,7 @@ GuiControl.prototype._saveToTextFileDialogFileSelected = function(entry, textToS
 
             writer.onwriteend = () => {
                 if (textToSave.length > 0 && writer.length === 0) {
-                writer.write(new Blob([textToSave], {type: 'text/plain'}));
+                    writer.write(new Blob([textToSave], { type: 'text/plain' }));
                 } else {
                     resolve(true);
                     console.log('File write complete');
@@ -515,13 +488,12 @@ GuiControl.prototype._saveToTextFileDialogFileSelected = function(entry, textToS
                 reject();
                 console.error('Failed to get file writer');
             });
-};
+    }
-
+    readTextFileDialog(extension) {
-GuiControl.prototype.readTextFileDialog = function(extension) {
         const accepts = [{ description: `${extension.toUpperCase()} files`, extensions: [extension] }];
 
         return new Promise(resolve => {
-        chrome.fileSystem.chooseEntry({type: 'openFile', accepts: accepts}, function(entry) {
+            chrome.fileSystem.chooseEntry({ type: 'openFile', accepts: accepts }, function (entry) {
                 checkChromeRuntimeError();
 
                 if (!entry) {
@@ -541,22 +513,29 @@ GuiControl.prototype.readTextFileDialog = function(extension) {
                 });
             });
         });
-};
+    }
-
+    escapeHtml(unsafe) {
-GuiControl.prototype.escapeHtml = function(unsafe) {
         return unsafe
             .replace(/&/g, "&amp;")
             .replace(/</g, "&lt;")
             .replace(/>/g, "&gt;")
             .replace(/"/g, "&quot;")
             .replace(/'/g, "&#039;");
-};
+    }
-
+    addLinksTargetBlank(element) {
-GuiControl.prototype.addLinksTargetBlank = function(element) {
+        element.find('a').each(function () {
-    element.find('a').each(function() {
             $(this).attr('target', '_blank');
         });
-};
+    }
+}
+
+function GUI_checkOperatingSystem() {
+    return navigator?.userAgentData?.platform || 'Android';
+}
+
+const GUI = new GuiControl();
 
 // initialize object into GUI variable
-window.GUI = new GuiControl();
+window.GUI = GUI;
+
+export default GUI;

src/js/localization.js

@@ -1,5 +1,6 @@
 import i18next from 'i18next';
 import i18nextXHRBackend from 'i18next-xhr-backend';
+import GUI from './gui.js';
 
 const i18n = {};
 /*

src/js/main.js

@@ -1,5 +1,6 @@
 import '../components/init.js';
 import { i18n } from './localization.js';
+import GUI from './gui.js';
 
 $(document).ready(function () {
 

src/js/tabs/adjustments.js

@@ -1,4 +1,5 @@
 import { i18n } from '../localization';
+import GUI from '../gui';
 
 const adjustments = {};
 

src/js/tabs/auxiliary.js

@@ -1,4 +1,5 @@
 import { i18n } from '../localization';
+import GUI from '../gui';
 
 const auxiliary = {};
 

src/js/tabs/cli.js

@@ -1,4 +1,6 @@
 import { i18n } from "../localization";
+import Clipboard from "../Clipboard";
+import GUI from '../gui';
 
 const cli = {
     lineDelayMs: 15,

src/js/tabs/configuration.js

@@ -1,5 +1,6 @@
 import semver from 'semver';
 import { i18n } from '../localization';
+import GUI from '../gui';
 
 const configuration = {
     // intended

src/js/tabs/failsafe.js

@@ -1,4 +1,5 @@
 import { i18n } from "../localization";
+import GUI from '../gui';
 
 const failsafe = {};
 

src/js/tabs/firmware_flasher.js

@@ -1,4 +1,5 @@
 import { i18n } from '../localization';
+import GUI from '../gui';
 
 const firmware_flasher = {
     targets: null,

src/js/tabs/gps.js

@@ -1,4 +1,5 @@
 import { i18n } from "../localization";
+import GUI from '../gui';
 
 const gps = {};
 gps.initialize = function (callback) {

src/js/tabs/help.js

@@ -1,3 +1,5 @@
+import GUI from '../gui';
+
 const help = {};
 help.initialize = function (callback) {
 

src/js/tabs/landing.js

@@ -1,3 +1,5 @@
+import GUI from '../gui';
+
 const landing = {};
 landing.initialize = function (callback) {
 

src/js/tabs/led_strip.js

@@ -1,4 +1,5 @@
 import { i18n } from "../localization";
+import GUI from '../gui';
 
 const led_strip = {
         wireMode: false,

src/js/tabs/logging.js

@@ -1,4 +1,5 @@
 import { millitime } from '../utils/common.js';
+import GUI from '../gui';
 
 const logging = {};
 logging.initialize = function (callback) {

src/js/tabs/motors.js

@@ -1,4 +1,5 @@
 import { i18n } from "../localization";
+import GUI from '../gui';
 
 const motors = {
     previousDshotBidir: null,

src/js/tabs/onboard_logging.js

@@ -1,4 +1,5 @@
 import { i18n } from "../localization";
+import GUI from '../gui';
 
 let sdcardTimer;
 

src/js/tabs/options.js

@@ -1,4 +1,5 @@
 import { i18n } from '../localization';
+import GUI from '../gui';
 
 const options = {};
 options.initialize = function (callback) {

src/js/tabs/osd.js

@@ -1,4 +1,5 @@
 import { i18n } from "../localization";
+import GUI from '../gui';
 
 const FONT = {};
 const SYM = {};

src/js/tabs/pid_tuning.js

@@ -1,5 +1,6 @@
 import { i18n } from "../localization";
 import { colorTables, getColorForPercentage } from '../utils/css.js';
+import GUI from '../gui';
 
 const pid_tuning = {
     RATE_PROFILE_MASK: 128,

src/js/tabs/ports.js

@@ -1,5 +1,6 @@
 import semver from 'semver';
 import { i18n } from "../localization";
+import GUI from '../gui';
 
 const ports = {
     // intentional

src/js/tabs/power.js

@@ -1,4 +1,5 @@
 import { i18n } from '../localization';
+import GUI from '../gui';
 
 const power = {
     supported: false,

src/js/tabs/receiver.js

@@ -1,4 +1,5 @@
 import { i18n } from "../localization";
+import GUI from '../gui';
 
 const MD5 = require('md5.js');
 

src/js/tabs/sensors.js

@@ -1,4 +1,5 @@
 import { i18n } from "../localization";
+import GUI from '../gui';
 
 const sensors = {};
 sensors.initialize = function (callback) {

src/js/tabs/servos.js

@@ -1,4 +1,5 @@
 import { i18n } from "../localization";
+import GUI from '../gui';
 
 const servos = {};
 servos.initialize = function (callback) {

src/js/tabs/setup.js

@@ -1,4 +1,5 @@
 import { i18n } from '../localization';
+import GUI from '../gui';
 
 const setup = {
     yaw_fix: 0.0,

src/js/tabs/setup_osd.js

@@ -1,4 +1,5 @@
 import { i18n } from "../localization";
+import GUI from '../gui';
 
 const setup_osd = {
 };

src/js/tabs/static_tab.js

@@ -1,4 +1,5 @@
 import { i18n } from '../localization';
+import GUI from '../gui';
 
 const staticTab = {};
 staticTab.initialize = function (staticTabName, callback) {

src/js/tabs/transponder.js

@@ -1,4 +1,5 @@
 import { i18n } from "../localization";
+import GUI from '../gui';
 
 const transponder = {
     available: false,

src/js/tabs/vtx.js

@@ -1,4 +1,6 @@
 import { i18n } from "../localization";
+import Clipboard from "../Clipboard";
+import GUI from '../gui';
 
 const vtx = {
     supported: false,

src/main.html

@@ -90,7 +90,6 @@
     <script type="text/javascript" src="./js/port_handler.js"></script>
     <script type="text/javascript" src="./js/port_usage.js"></script>
     <script type="text/javascript" src="./js/serial.js"></script>
-    <script type="text/javascript" src="./js/gui.js"></script>
     <script type="text/javascript" src="./js/mdns_discovery.js"></script>
     <script type="text/javascript" src="./js/huffman.js"></script>
     <script type="text/javascript" src="./js/default_huffman_tree.js"></script>
@@ -113,7 +112,6 @@
     <script type="text/javascript" src="./js/ConfigInserter.js"></script>
     <script type="text/javascript" src="./js/GitHubApi.js"></script>
     <script type="module" src="./js/main.js"></script>
-    <script type="text/javascript" src="./js/Clipboard.js"></script>
     <!-- TODO: might be removed when everythign is in modules -->
     <script type="text/javascript" src="./tabs/presets/CliEngine.js"></script>
     <script type="text/javascript" src="./tabs/presets/PickedPreset.js"></script>

src/tabs/presets/presets.js

@@ -1,4 +1,4 @@
-'use strict';
+import GUI from '../../js/gui';
 
 import { favoritePresets } from './FavoritePresets';
 

test/karma.conf.js

@@ -17,7 +17,7 @@ module.exports = function(config) {
             './src/js/serial.js',
             './src/js/data_storage.js',
             { pattern: './src/js/localization.js', type: 'module', watched: false },
-            './src/js/gui.js',
+            { pattern: './src/js/gui.js', type: 'module', watched: false },
             './src/js/CliAutoComplete.js',
             { pattern: './src/js/tabs/cli.js', type: 'module', watched: false },
             './src/js/phones_ui.js',
@@ -41,6 +41,7 @@ module.exports = function(config) {
         preprocessors: {
              './src/js/localization.js': ['rollup'],
              './src/js/tabs/cli.js': ['rollup'],
+             './src/js/gui.js': ['rollup'],
         },
         rollupPreprocessor: {
             plugins: [