diff --git a/src/main/resources/static/js/gw.main.js b/src/main/resources/static/js/gw.main.js index df0834ee..387f757d 100644 --- 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 index 93e45a1c..1b0436d5 100644 --- 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('
'); - - // $('#' + 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('
'); + + 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 index 3fc0b668..8d19372e 100644 --- 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( `

double click to edit Ctrl+Enter to save


`, diff --git a/src/main/resources/static/js/gw.settings.js b/src/main/resources/static/js/gw.settings.js index b7906e12..5ffc66c9 100644 --- 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 });