feat(Modes): add focus mode

live-codes · Apr 15, 2024 · 3608df4 · 3608df4
1 parent 88839eb
commit 3608df4
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 104 deletions.
diff --git a/src/livecodes/UI/selectors.ts b/src/livecodes/UI/selectors.ts
@@ -28,6 +28,8 @@ export const getCodeRunButton = /* @__PURE__ */ () =>
   document.querySelector('#code-run-button') as HTMLElement;
 export const getEditorToolbar = /* @__PURE__ */ () =>
   document.querySelector('#editor-tools') as HTMLElement;
+export const getFocusButton = /* @__PURE__ */ () =>
+  document.querySelector('#editor-tools #focus-btn') as HTMLElement;
 export const getCopyButton = /* @__PURE__ */ () =>
   document.querySelector('#editor-tools #copy-btn') as HTMLElement;
 export const getCopyAsUrlButton = /* @__PURE__ */ () =>

diff --git a/src/livecodes/assets/images/focus.svg b/src/livecodes/assets/images/focus.svg
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
@@ -24,7 +24,7 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
 
   const includes = (arr: any[], x: any) => x != null && arr.includes(x);
 
-  const modes: Array<Config['mode']> = ['full', 'simple', 'editor', 'codeblock', 'result'];
+  const modes: Array<Config['mode']> = ['full', 'focus', 'simple', 'editor', 'codeblock', 'result'];
   const themes: Array<Config['theme']> = ['light', 'dark'];
   const layout: Array<Config['layout']> = ['responsive', 'horizontal', 'vertical'];
   const editorModes: Array<Config['editorMode']> = ['vim', 'emacs'];

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -518,6 +518,7 @@ const showMode = (mode?: Config['mode']) => {
   // toolbar-editor-result
   const modes = {
     full: '111',
+    focus: '111',
     simple: '111',
     editor: '110',
     codeblock: '010',
@@ -580,6 +581,7 @@ const showMode = (mode?: Config['mode']) => {
     }
   }
   document.body.classList.toggle('simple-mode', mode === 'simple');
+  document.body.classList.toggle('focus-mode', mode === 'focus');
   if ((mode === 'full' || mode === 'simple') && !split) {
     split = createSplitPanes();
   }
@@ -2201,6 +2203,20 @@ const handleShareButton = () => {
 const handleEditorTools = () => {
   if (!configureEditorTools(getActiveEditor().getLanguage())) return;
 
+  eventsManager.addEventListener(UI.getFocusButton(), 'click', () => {
+    const config = getConfig();
+    const currentMode = config.mode;
+    const newMode = currentMode === 'full' ? 'focus' : 'full';
+    setConfig({
+      ...config,
+      mode: newMode,
+    });
+    if (newMode === 'focus') {
+      toolsPane?.setActiveTool('console');
+    }
+    showMode(newMode);
+  });
+
   eventsManager.addEventListener(UI.getCopyButton(), 'click', () => {
     if (copyToClipboard(getActiveEditor().getValue())) {
       notifications.success('Code copied to clipboard');

diff --git a/src/livecodes/html/app.html b/src/livecodes/html/app.html
@@ -135,6 +135,9 @@
           <div id="script" class="editor"></div>
 
           <div id="editor-tools" class="tool-buttons">
+            <span id="focus-btn" class="hint--top-right" data-hint="Toggle Focus mode">
+              <img src="{{baseUrl}}assets/images/focus.svg" alt="focus" />
+            </span>
             <span
               id="copy-btn"
               class="hint--top-right"

diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
@@ -364,108 +364,6 @@ a {
   display: none !important;
 }
 
-.embed {
-  #toolbar {
-    height: 37px;
-    justify-content: space-between;
-
-    > * {
-      transform: scale(0.9) translate(-5%, -2px);
-    }
-  }
-
-  #logo {
-    order: 1;
-  }
-
-  .language-menu-button {
-    display: none !important;
-  }
-
-  #project-title {
-    display: none !important;
-  }
-
-  #buttons {
-    position: relative !important;
-  }
-
-  #fullscreen-button,
-  &:not(.no-result) #result-button {
-    display: flex !important;
-  }
-
-  #share-button,
-  #settings-button,
-  #editor-settings-btn,
-  #project-info-btn,
-  #custom-settings-btn {
-    display: none;
-  }
-
-  @media only screen and (max-width: 1080px) {
-    #buttons {
-      width: 30% !important;
-    }
-  }
-
-  @media only screen and (max-width: 480px) {
-    #buttons {
-      width: 20%;
-    }
-  }
-}
-
-.simple-mode {
-  .editor-title:not(.active),
-  #toolbar #result-button,
-  #toolbar #fullscreen-button,
-  #editors #editor-tools,
-  #console-input,
-  #result-popup-btn,
-  #broadcast-status-btn {
-    display: none !important;
-  }
-
-  #toolbar {
-    margin-bottom: -8px;
-    transform: scale(0.8);
-    transform-origin: left top;
-    width: 125%;
-
-    #select-editor {
-      width: calc(80% - 70px);
-
-      .editor-title.active {
-        background-color: unset;
-        border: 0;
-      }
-    }
-
-    #run-button {
-      display: flex !important;
-      position: absolute;
-      right: 0;
-    }
-  }
-
-  #editor-container {
-    height: calc(100% - 30px) !important;
-  }
-
-  #editors #code-run-button {
-    display: none !important;
-  }
-
-  #tools-pane-bar {
-    font-size: 0.7em;
-  }
-
-  .tools-pane-title.has-mark .mark {
-    display: none !important;
-  }
-}
-
 .result {
   #toolbar {
     background-color: rgb(0, 0, 0, 0.05);
@@ -3183,6 +3081,128 @@ i.arrow {
   }
 }
 
+.embed {
+  #toolbar {
+    height: 37px;
+    justify-content: space-between;
+
+    > * {
+      transform: scale(0.9) translate(-5%, -2px);
+    }
+  }
+
+  #logo {
+    order: 1;
+  }
+
+  .language-menu-button {
+    display: none !important;
+  }
+
+  #project-title {
+    display: none !important;
+  }
+
+  #buttons {
+    position: relative !important;
+  }
+
+  #fullscreen-button,
+  &:not(.no-result) #result-button {
+    display: flex !important;
+  }
+
+  #share-button,
+  #focus-btn,
+  #settings-button,
+  #editor-settings-btn,
+  #project-info-btn,
+  #custom-settings-btn {
+    display: none;
+  }
+
+  @media only screen and (max-width: 1080px) {
+    #buttons {
+      width: 30% !important;
+    }
+  }
+
+  @media only screen and (max-width: 480px) {
+    #buttons {
+      width: 20%;
+    }
+  }
+}
+
+.simple-mode {
+  .editor-title:not(.active),
+  #toolbar #result-button,
+  #toolbar #fullscreen-button,
+  #editors #editor-tools,
+  #console-input,
+  #result-popup-btn,
+  #broadcast-status-btn {
+    display: none !important;
+  }
+
+  #toolbar {
+    margin-bottom: -8px;
+    transform: scale(0.8);
+    transform-origin: left top;
+    width: 125%;
+
+    #select-editor {
+      width: calc(80% - 70px);
+
+      .editor-title.active {
+        background-color: unset;
+        border: 0;
+      }
+    }
+
+    #run-button {
+      display: flex !important;
+      position: absolute;
+      right: 0;
+    }
+  }
+
+  #editor-container {
+    height: calc(100% - 30px) !important;
+  }
+
+  #editors #code-run-button {
+    display: none !important;
+  }
+
+  #tools-pane-bar {
+    font-size: 0.7em;
+  }
+
+  .tools-pane-title.has-mark .mark {
+    display: none !important;
+  }
+}
+
+.focus-mode {
+  .language-menu-button,
+  #project-title,
+  #settings-button,
+  .tools-pane-title:not(.console),
+  .tool-buttons {
+    visibility: hidden !important;
+  }
+
+  #focus-btn {
+    visibility: visible !important;
+  }
+
+  #editor-tools {
+    position: absolute;
+    bottom: 0;
+  }
+}
+
 /* Code Mirror */
 
 .cm-wrap {

diff --git a/src/sdk/models.ts b/src/sdk/models.ts
@@ -93,7 +93,7 @@ export interface ContentConfig {
 export interface AppConfig {
   readonly: boolean;
   allowLangChange: boolean;
-  mode: 'full' | 'simple' | 'editor' | 'codeblock' | 'result';
+  mode: 'full' | 'focus' | 'simple' | 'editor' | 'codeblock' | 'result';
   tools: {
     enabled: Array<Tool['name']> | 'all';
     active: Tool['name'] | '';