Refactor presets tab to use modules as much as possible (#3190)

Refactor presets to use modules

src/js/tabs/logging.js

@@ -1,5 +1,6 @@
 import { millitime } from '../utils/common.js';
 import GUI from '../gui';
+import { i18n } from '../localization';
 import { get as getConfig, set as setConfig } from '../ConfigStorage';
 
 const logging = {};

src/main.html

@@ -108,18 +108,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>
-    <!-- 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>
-    <script type="text/javascript" src="./tabs/presets/DetailedDialog/PresetsDetailedDialog.js"></script>
-    <script type="text/javascript" src="./tabs/presets/TitlePanel/PresetTitlePanel.js"></script>
-    <script type="text/javascript" src="./tabs/presets/PresetsRepoIndexed/PresetParser.js"></script>
-    <script type="text/javascript" src="./tabs/presets/PresetsRepoIndexed/PresetsRepoIndexed.js"></script>
-    <script type="text/javascript" src="./tabs/presets/PresetsRepoIndexed/PresetsGithubRepo.js"></script>
-    <script type="text/javascript" src="./tabs/presets/PresetsRepoIndexed/PresetsWebsiteRepo.js"></script>
-    <script type="text/javascript" src="./tabs/presets/SourcesDialog/SourcesDialog.js"></script>
-    <script type="text/javascript" src="./tabs/presets/SourcesDialog/SourcePanel.js"></script>
-    <script type="text/javascript" src="./tabs/presets/SourcesDialog/PresetSource.js"></script>
     <script type="text/javascript" src="./js/LogoManager.js"></script>
     <script type="text/javascript" src="./node_modules/jquery-textcomplete/dist/jquery.textcomplete.min.js"></script>
     <script type="text/javascript" src="./js/CliAutoComplete.js"></script>

src/tabs/presets/CliEngine.js

@@ -1,6 +1,7 @@
-'use strict';
+import GUI from "../../js/gui";
+import { i18n } from "../../js/localization";
 
-class CliEngine
+export default class CliEngine
 {
     constructor(currentTab) {
         this._currentTab = currentTab;

src/tabs/presets/DetailedDialog/PresetsDetailedDialog.js

@@ -1,6 +1,9 @@
-'use strict';
+import GUI from "../../../js/gui";
+import { i18n } from "../../../js/localization";
+import PickedPreset from "../PickedPreset";
+import PresetTitlePanel from "../TitlePanel/PresetTitlePanel";
 
-class PresetsDetailedDialog {
+export default class PresetsDetailedDialog {
     constructor(domDialog, pickedPresetList, onPresetPickedCallback, favoritePresets) {
         this._domDialog = domDialog;
         this._pickedPresetList = pickedPresetList;

src/tabs/presets/FavoritePresets.js

@@ -1,3 +1,4 @@
+import { get as getConfig, set as setConfig } from "../../js/ConfigStorage";
 
 const s_maxFavoritePresetsCount = 50;
 const s_favoritePresetsListConfigStorageName = "FavoritePresetsList";
@@ -25,7 +26,7 @@ class FavoritePresetsData {
 
     loadFromStorage() {
         this._favoritePresetsList = [];
-        const obj = ConfigStorage.get(s_favoritePresetsListConfigStorageName);
+        const obj = getConfig(s_favoritePresetsListConfigStorageName);
 
         if (obj[s_favoritePresetsListConfigStorageName]) {
             this._favoritePresetsList = obj[s_favoritePresetsListConfigStorageName];
@@ -35,7 +36,7 @@ class FavoritePresetsData {
     saveToStorage() {
         const obj = {};
         obj[s_favoritePresetsListConfigStorageName] = this._favoritePresetsList;
-        ConfigStorage.set(obj);
+        setConfig(obj);
     }
 
     add(presetPath) {

src/tabs/presets/PickedPreset.js

@@ -1,6 +1,4 @@
-'use strict';
+export default class PickedPreset
-
-class PickedPreset
 {
     constructor(preset, presetCli)
     {

src/tabs/presets/PresetsRepoIndexed/PresetParser.js

@@ -1,6 +1,5 @@
-'use strict';
 
-class PresetParser {
+export default class PresetParser {
     constructor(settings) {
         this._settings = settings;
     }

src/tabs/presets/PresetsRepoIndexed/PresetsGithubRepo.js

@@ -1,6 +1,6 @@
-'use strict';
+import PresetsRepoIndexed from "./PresetsRepoIndexed";
 
-class PresetsGithubRepo extends PresetsRepoIndexed {
+export default class PresetsGithubRepo extends PresetsRepoIndexed {
     constructor(urlRepo, branch) {
         let correctUrlRepo = urlRepo.trim();
 

src/tabs/presets/PresetsRepoIndexed/PresetsRepoIndexed.js

@@ -1,6 +1,6 @@
-'use strict';
+import PresetParser from "./PresetParser";
 
-class PresetsRepoIndexed {
+export default class PresetsRepoIndexed {
     constructor(urlRaw, urlViewOnline) {
         this._urlRaw = urlRaw;
         this._urlViewOnline = urlViewOnline;

src/tabs/presets/PresetsRepoIndexed/PresetsWebsiteRepo.js

@@ -1,6 +1,6 @@
-'use strict';
+import PresetsRepoIndexed from "./PresetsRepoIndexed";
 
-class PresetsWebsiteRepo extends PresetsRepoIndexed {
+export default class PresetsWebsiteRepo extends PresetsRepoIndexed {
     constructor(url) {
         let correctUrl = url.trim();
 

src/tabs/presets/SourcesDialog/PresetSource.js

@@ -1,6 +1,4 @@
-'use strict';
+export default class PresetSource {
-
-class PresetSource {
     constructor(name, url, gitHubBranch = "") {
         this.name = name;
         this.url = url;

src/tabs/presets/SourcesDialog/SourcePanel.js

@@ -1,6 +1,8 @@
-'use strict';
+import { i18n } from "../../../js/localization";
+import GUI from "../../../js/gui";
+import PresetSource from "./PresetSource";
 
-class SourcePanel {
+export default class SourcePanel {
     constructor(parentDiv, presetSource) {
         this._parentDiv = parentDiv;
         this._presetSource = presetSource;
@@ -130,7 +132,7 @@ class SourcePanel {
     }
 
     _checkIfGithub() {
-        const isGithubUrl =  PresetSource.isUrlGithubRepo(this._domEditUrl.val());
+        const isGithubUrl = PresetSource.isUrlGithubRepo(this._domEditUrl.val());
         this._domDivGithubBranch.toggle(isGithubUrl);
     }
 
@@ -197,4 +199,3 @@ class SourcePanel {
 }
 
 SourcePanel.s_panelCounter = 0;
-

src/tabs/presets/SourcesDialog/SourcesDialog.js

@@ -1,6 +1,9 @@
-'use strict';
+import { i18n } from "../../../js/localization";
+import { get as getConfig, set as setConfig } from "../../../js/ConfigStorage";
+import PresetSource from "./PresetSource";
+import SourcePanel from "./SourcePanel";
 
-class PresetsSourcesDialog {
+export default class PresetsSourcesDialog {
     constructor(domDialog) {
         this._domDialog = domDialog;
         this._sourceSelectedPromiseResolve = null;
@@ -47,7 +50,7 @@ class PresetsSourcesDialog {
         const officialSource = this._createOfficialSource();
         const officialSourceSecondary = this._createSecondaryOfficialSource();
 
-        const obj = ConfigStorage.get('PresetSources');
+        const obj = getConfig('PresetSources');
         let sources = obj.PresetSources;
 
         if (sources && sources.length > 0) {
@@ -64,7 +67,7 @@ class PresetsSourcesDialog {
     }
 
     _readActiveSourceIndexFromStorage(sourcesCount) {
-        const obj = ConfigStorage.get('PresetSourcesActiveIndex');
+        const obj = getConfig('PresetSourcesActiveIndex');
         const index = Number(obj.PresetSourcesActiveIndex);
         let result = 0;
 
@@ -147,8 +150,8 @@ class PresetsSourcesDialog {
     }
 
     _saveSources() {
-        ConfigStorage.set({'PresetSources': this._sources});
+        setConfig({'PresetSources': this._sources});
-        ConfigStorage.set({'PresetSourcesActiveIndex': this._activeSourceIndex});
+        setConfig({'PresetSourcesActiveIndex': this._activeSourceIndex});
     }
 
     _updateSourcesFromPanels() {

src/tabs/presets/TitlePanel/PresetTitlePanel.js

@@ -1,6 +1,6 @@
-'use strict';
+import { i18n } from "../../../js/localization";
 
-class PresetTitlePanel
+export default class PresetTitlePanel
 {
     constructor(parentDiv, preset, clickable, onLoadedCallback, favoritePresets)
     {

src/tabs/presets/presets.js

@@ -1,7 +1,16 @@
 import GUI from '../../js/gui';
 import { get as getConfig, set as setConfig } from '../../js/ConfigStorage';
+import { i18n } from '../../js/localization';
 
 import { favoritePresets } from './FavoritePresets';
+import CliEngine from './CliEngine';
+import PickedPreset from './PickedPreset';
+import PresetsDetailedDialog from './DetailedDialog/PresetsDetailedDialog';
+import PresetsGithubRepo from './PresetsRepoIndexed/PresetsGithubRepo';
+import PresetsWebsiteRepo from './PresetsRepoIndexed/PresetsWebsiteRepo';
+import PresetTitlePanel from './TitlePanel/PresetTitlePanel';
+import PresetsSourcesDialog from './SourcesDialog/SourcesDialog';
+import PresetSource from './SourcesDialog/PresetSource';
 
 const presets = {
     presetsRepo: null,