From 60e0b925bce0aa0664fd03ea5176970efa71da41 Mon Sep 17 00:00:00 2001 From: robcarey Date: Fri, 19 Apr 2024 10:21:44 -0400 Subject: [PATCH 1/3] Update plugin.js Added theme selector, styles, cookie for persistent, selectable theme --- src/plugin.js | 133 +++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 122 insertions(+), 11 deletions(-) diff --git a/src/plugin.js b/src/plugin.js index 028c0b2..d5251e7 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -23,7 +23,7 @@ const MODAL_HTML = `
-
+

Source Code Editor

` @@ -123,11 +167,32 @@ #supercode-footer { padding: 0.5rem 1rem; display: flex; - justify-content: end; + flex-direction: column; + justify-content: space-between; + align-items: center; gap: 1rem; border-top: 1px solid var(--supercode-modal-border); } - #supercode-footer button { + .supercode-theme-container { + display: flex; + align-items: center; + } + .supercode-theme-container label { + margin-right: 1.0rem; /* Adjust as needed */ + color: var(--supercode-modal-secondary); + padding:5px 0px 0px 0px; + } + .supercode-theme-container select { + /* Add styles for select dropdown */ + padding:6px 3px; + min-width:200px !important; + border-radius: 4px; + } + .supercode-button-container { + display: flex; + gap: 1rem; + } + #supercode-footer .supercode-button-container button { padding: 0.5rem 1rem; border-radius: 5px; font-weight: bold; @@ -136,7 +201,7 @@ min-width: 5rem; transition: opacity 0.1s linear; } - #supercode-footer button:hover { + #supercode-footer .supercode-button-container button:hover { opacity: 0.8; } #supercode-cancel-btn { @@ -147,6 +212,21 @@ background: var(--supercode-modal-secondary); color: var(--supercode-modal-primary); } + /* Media query for responsiveness */ + @media (min-width: 768px) { + #supercode-footer { + flex-direction: row; /* Switch to horizontal layout */ + align-items: center; + } + .supercode-theme-container { + width: auto; /* Allow select container to adjust width */ + margin-bottom: 0; /* Remove margin for desktop view */ + } + .supercode-button-container { + display: flex; /* Show button container */ + gap: 1rem; /* Add spacing between buttons */ + } + } `; const CLOSE_ICON_FALLBACK = `` @@ -300,7 +380,30 @@ } aceEditor.setOptions(options); - aceEditor.setTheme(`ace/theme/${Config.theme}`); + + // Check if the theme cookie exists + const themeCookieExists = document.cookie.split(';').some((item) => item.trim().startsWith('supercodeTheme=')); + + let selectedTheme = `${Config.theme}`; + + // If the cookie exists, load the theme from the cookie + if (themeCookieExists) { + selectedTheme = document.cookie + .split('; ') + .find(row => row.startsWith('supercodeTheme=')) + .split('=')[1]; + aceEditor.setTheme(`ace/theme/${selectedTheme}`); + } else { + aceEditor.setTheme(`ace/theme/${Config.theme}`); + } + + const themeSelect = document.getElementById("supercode-theme-dropdown"); + Array.from(themeSelect.options).forEach(option => { + if (option.value === selectedTheme) { + option.selected = true; + } + }); + aceEditor.setFontSize(Config.fontSize); aceEditor.setShowPrintMargin(false); } @@ -419,6 +522,8 @@ modal.element.querySelector('#supercode-editor').addEventListener('keydown', modalKeydownListener); } + modal.element.querySelector('#supercode-theme-dropdown').addEventListener('change', onThemeHandler); + /* Update Modal based on editor's theme */ document.querySelector('body').classList.add('disable-scroll'); @@ -471,6 +576,12 @@ } }; + const onThemeHandler = (e) => { + const selectedTheme = e.target.value; + aceEditor.setTheme(`ace/theme/${selectedTheme}`); + document.cookie = `supercodeTheme=${selectedTheme}; expires=Fri, 31 Dec 9999 23:59:59 GMT`; + }; + const getSourceCode = (value) => { if(Config.parser){ return Config.parser(value); From 3ebed209b09958e4d1c4b2caa4c4b734466e69a8 Mon Sep 17 00:00:00 2001 From: robcarey Date: Fri, 19 Apr 2024 10:26:37 -0400 Subject: [PATCH 2/3] Update plugin.js removed styling specific to my site --- src/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugin.js b/src/plugin.js index d5251e7..fdcb633 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -23,7 +23,7 @@ const MODAL_HTML = `
-
+

Source Code Editor