should remember the theme

ESIPFed · Dec 26, 2024 · 69b0f35 · 69b0f35
1 parent f94460a
commit 69b0f35
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 51 deletions.
diff --git a/src/main/resources/static/js/gw.main.js b/src/main/resources/static/js/gw.main.js
@@ -90,6 +90,8 @@ GW.main = {
 
     GW.general.init();
 
+    GW.settings.init();
+
     GW.menu.init();
 
     GW.result.browser.init();

diff --git a/src/main/resources/static/js/gw.process.js b/src/main/resources/static/js/gw.process.js
@@ -141,13 +141,14 @@ GW.process = {
           });
 
           GW.process.editor = editor;
-          GW.settings.syncMonacoStyles(GW.process.editor)
 
           // Add event listener to update the theme dynamically
           $('#' + themeSelectorId).on('change', function() {
               var selectedTheme = $(this).val();
               monaco.editor.setTheme(selectedTheme);
           });
+
+          GW.settings.syncMonacoStyles(GW.process.editor)
       });
   },
 
@@ -225,50 +226,44 @@ GW.process = {
 
   showPython: function(code, cmid) {
     // Define the path to the Monaco Editor's package
-        require.config({ paths: { 'vs': '../js/Monaco-Editor/dev/vs' }});
-
-        // Load the main module of Monaco Editor to start its setup
-        require(['vs/editor/editor.main'], 
-          function() {
-            // Ensure the target container for the editor exists and is empty
-            var editorContainerId = 'codeeditor-' + cmid;
-            var container = $("#codearea-" + cmid);
-            container.empty(); // Clear previous instances if any
-            container.append('<div id="' + editorContainerId + '" style="height:200px;"></div>');
-
-            // $('#' + editorContainerId).css({
-            // 	height: '200px', // Ensure this matches the height set above or any other desired value
-            // 	width: '100%', // Full width
-
-            // 	// Add other styles as needed
-            // });
-
-
-            // Initialize the Monaco Editor with Python configuration
-            var editor = monaco.editor.create(document.getElementById(editorContainerId), {
-                value: code || '# Write your first Python code in Geoweaver',
-                language: 'python',
-                theme: GW.settings.selected_monaco_theme, // Monaco does not have "yonce" theme, using 'vs-dark' for a dark theme
-                lineNumbers: 'on',
-                roundedSelection: false,
-                scrollBeyondLastLine: false,
-                readOnly: false,
-                fontSize: 10,
-                automaticLayout: true,
-                formatOnSave: true,
-                formatOnPaste: true,
-                folding: true,
-                formatOnType: true,
-                showFoldingControls: 'always',
-                wordWrap: 'on',
-                scrollBeyondLastLine: true,
-            });
-
-            GW.process.editor = editor;
-            GW.settings.syncMonacoStyles(GW.process.editor)
-
-          }
-        );
+    require.config({ paths: { 'vs': '../js/Monaco-Editor/dev/vs' }});
+
+    // Load the main module of Monaco Editor to start its setup
+    require(['vs/editor/editor.main'], 
+      function() {
+        // Ensure the target container for the editor exists and is empty
+        var editorContainerId = 'codeeditor-' + cmid;
+        var container = $("#codearea-" + cmid);
+        container.empty(); // Clear previous instances if any
+        container.append('<div id="' + editorContainerId + '" style="height:200px;"></div>');
+
+        console.log("What is the current theme?" + GW.settings.selected_monaco_theme)
+
+        // Initialize the Monaco Editor with Python configuration
+        var editor = monaco.editor.create(document.getElementById(editorContainerId), {
+            value: code || '# Write your first Python code in Geoweaver',
+            language: 'python',
+            theme: GW.settings.selected_monaco_theme,
+            lineNumbers: 'on',
+            roundedSelection: false,
+            scrollBeyondLastLine: false,
+            readOnly: false,
+            fontSize: 10,
+            automaticLayout: true,
+            formatOnSave: true,
+            formatOnPaste: true,
+            folding: true,
+            formatOnType: true,
+            showFoldingControls: 'always',
+            wordWrap: 'on',
+            scrollBeyondLastLine: true,
+        });
+
+        GW.process.editor = editor;
+        GW.settings.syncMonacoStyles(GW.process.editor)
+
+      }
+    );
   },
 
   uploadAndReplaceJupyterCode: function () {

diff --git a/src/main/resources/static/js/gw.process.util.js b/src/main/resources/static/js/gw.process.util.js
@@ -17,6 +17,8 @@ GW.process.util = {
 
     $(process_window_container_id).css("background-color", "white");
 
+    console.log("What is the current theme?" + GW.settings.selected_monaco_theme)
+
     if (code_type == "jupyter") {
       $(code_editor_container_id).append(
         `<p style="margin:5px;" class="pull-right"><span class="badge badge-secondary">double click</span> to edit <span class="badge badge-secondary">Ctrl+Enter</span> to save <i class="fa fa-upload subalignicon"   data-toggle="tooltip" title="upload a new notebook to replace the current one" onclick="GW.process.uploadAndReplaceJupyterCode();"></i></p><br/>`,

diff --git a/src/main/resources/static/js/gw.settings.js b/src/main/resources/static/js/gw.settings.js
@@ -7,6 +7,12 @@ GW.settings = {
 
   selected_monaco_theme: null,
 
+  init: function(){
+
+    this.selected_monaco_theme = localStorage.getItem('editorTheme') || GW.settings.default_monaco_theme
+
+  },
+
   clearCache: function () {
     if (
       confirm(
@@ -118,17 +124,19 @@ GW.settings = {
 
     var frame = GW.process.createJSFrameDialog(360, 320, content, "Settings");
 
-    GW.settings.selected_monaco_theme = localStorage.getItem('editorTheme') || GW.settings.default_monaco_theme
+    console.log("GW.settings.selected_monaco_theme = " + GW.settings.selected_monaco_theme)
 
     // Set the current theme as selected in the dropdown
     $('#editor-theme-selector').val(GW.settings.selected_monaco_theme);
 
     // Add event listener to save the selected theme
     $('#editor-theme-selector').on('change', function () {
-        var selectedTheme = $(this).val();
-        GW.settings.selected_monaco_theme = selectedTheme
-        localStorage.setItem('editorTheme', GW.settings.selected_monaco_theme); // Save to local storage
-        monaco.editor.setTheme(selectedTheme); // Apply the theme to Monaco Editor
+      var selectedTheme = $(this).val();
+      console.log("Current theme is changed to: " + selectedTheme)
+      GW.settings.selected_monaco_theme = selectedTheme
+      localStorage.setItem('editorTheme', selectedTheme); // Save to local storage
+      monaco.editor.setTheme(selectedTheme); // Apply the theme to Monaco Editor
+      GW.settings.syncMonacoStyles(GW.process.editor)
     });
 
   },
@@ -140,7 +148,7 @@ GW.settings = {
       }
 
       themeColors.forEach((value, key) => {
-        console.log(`${key}: ${value}`);
+        // console.log(`${key}: ${value}`);
         colormap[key] = value
       });