feat(UI): add buttons for project info and custom settings in editor …

…toolbar
live-codes · Dec 13, 2023 · e92a4f6 · e92a4f6
1 parent 1d09120
commit e92a4f6
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 4 deletions.
diff --git a/src/livecodes/UI/selectors.ts b/src/livecodes/UI/selectors.ts
@@ -46,6 +46,10 @@ export const getExternalResourcesBtn = /* @__PURE__ */ () =>
   document.querySelector('#editor-tools #external-resources-btn') as HTMLElement;
 export const getExternalResourcesMark = /* @__PURE__ */ () =>
   document.querySelector('#editor-tools #external-resources-mark') as HTMLElement;
+export const getProjectInfoBtn = /* @__PURE__ */ () =>
+  document.querySelector('#editor-tools #project-info-btn') as HTMLElement;
+export const getCustomSettingsBtn = /* @__PURE__ */ () =>
+  document.querySelector('#editor-tools #custom-settings-btn') as HTMLElement;
 export const getEditorSettingsBtn = /* @__PURE__ */ () =>
   document.querySelector('#editor-tools #editor-settings-btn') as HTMLElement;
 export const getResultButton = /* @__PURE__ */ () =>

diff --git a/src/livecodes/assets/images/curly-braces.svg b/src/livecodes/assets/images/curly-braces.svg
diff --git a/src/livecodes/assets/images/info.svg b/src/livecodes/assets/images/info.svg
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -1040,6 +1040,21 @@ const setExternalResourcesMark = () => {
   }
 };
 
+const setCustomSettingsMark = () => {
+  const btn = UI.getCustomSettingsBtn();
+  if (isEmbed) {
+    btn.hidden = true;
+    return;
+  }
+  const config = getConfig();
+  const customSettings = JSON.stringify(config.customSettings);
+  if (!customSettings || customSettings === '{}' || customSettings === '{"imports":{}}') {
+    btn.classList.remove('active');
+  } else {
+    btn.classList.add('active');
+  }
+};
+
 const run = async (editorId?: EditorId, runTests?: boolean) => {
   setLoading(true);
   toolsPane?.console?.clear(/* silent= */ true);
@@ -2165,6 +2180,14 @@ const handleEditorTools = () => {
     showScreen('resources');
   });
 
+  eventsManager.addEventListener(UI.getProjectInfoBtn(), 'click', () => {
+    showScreen('info');
+  });
+
+  eventsManager.addEventListener(UI.getCustomSettingsBtn(), 'click', () => {
+    showScreen('custom-settings');
+  });
+
   eventsManager.addEventListener(UI.getEditorSettingsBtn(), 'click', () => {
     showScreen('editor-settings');
   });
@@ -2817,7 +2840,7 @@ const handleAutosync = async () => {
   triggerSync();
 };
 
-const handlePersistantStorage = async () => {
+const handlePersistentStorage = async () => {
   if (isEmbed) return;
 
   let alreadyRequested = false;
@@ -3432,6 +3455,7 @@ const handleCustomSettings = () => {
           ...getConfig(),
           customSettings,
         });
+        setCustomSettingsMark();
         await setSavedStatus();
         if (customSettings.types) {
           loadModuleTypes(editors, getConfig(), /* force */ true);
@@ -3451,7 +3475,7 @@ const handleCustomSettings = () => {
     createCustomSettingsUI,
     false,
   );
-  registerScreen('custom-settings', createCustomSettingsUI);
+  registerScreen('custom-settings', async () => setTimeout(createCustomSettingsUI));
 };
 
 const handleConsole = () => {
@@ -3882,7 +3906,7 @@ const extraHandlers = async () => {
   handleEditorSettings();
   handleSync();
   handleAutosync();
-  handlePersistantStorage();
+  handlePersistentStorage();
   handleExternalResources();
   handleBackup();
   handleBroadcast();
@@ -4118,6 +4142,7 @@ const bootstrap = async (reload = false) => {
     setTimeout(() => getActiveEditor().focus());
   }
   setExternalResourcesMark();
+  setCustomSettingsMark();
   updateCompiledCode();
   loadModuleTypes(editors, getConfig());
   compiler.load(Object.values(editorLanguages || {}), getConfig()).then(() => {

diff --git a/src/livecodes/html/app.html b/src/livecodes/html/app.html
@@ -149,6 +149,13 @@
               <img src="{{baseUrl}}assets/images/script-sheet.svg" alt="external resources" />
               <span id="external-resources-mark" class="mark"></span>
             </span>
+            <span id="project-info-btn" class="hint--top-left" data-hint="Project Info">
+              <img src="{{baseUrl}}assets/images/info.svg" alt="project info" />
+            </span>
+            <span id="custom-settings-btn" class="hint--top-left" data-hint="Custom Settings">
+              <img src="{{baseUrl}}assets/images/curly-braces.svg" alt="custom settings" />
+              <span id="custom-settings-mark" class="mark"></span>
+            </span>
             <span id="editor-settings-btn" class="hint--top-left" data-hint="Editor Settings">
               <img src="{{baseUrl}}assets/images/gear.svg" alt="editor settings" />
             </span>

diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
@@ -297,6 +297,12 @@ a {
   #editors #code-run-button {
     display: flex !important;
   }
+
+  #project-info-btn,
+  #broadcast-status-btn,
+  #custom-settings-btn {
+    display: none;
+  }
 }
 
 @media only screen and (max-width: 480px) {
@@ -389,7 +395,9 @@ a {
     display: none;
   }
 
-  #editor-settings-btn {
+  #editor-settings-btn,
+  #project-info-btn,
+  #custom-settings-btn {
     display: none;
   }