feat: fullscreen support for modals (#420)

src/lib/components/modals/Header.scss

@@ -12,14 +12,6 @@
   }
 
   button {
-    border: none;
-    background: transparent;
-    min-width: 32px;
-    color: inherit;
-    cursor: pointer;
-
-    &:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
+    @include jse-modal-menu-button;
   }
 }

src/lib/components/modals/Header.svelte

@@ -3,10 +3,16 @@
 <script lang="ts">
   import { getContext } from 'svelte'
   import Icon from 'svelte-awesome'
-  import { faTimes } from '@fortawesome/free-solid-svg-icons'
+  import {
+    faDownLeftAndUpRightToCenter,
+    faTimes,
+    faUpRightAndDownLeftFromCenter
+  } from '@fortawesome/free-solid-svg-icons'
   import type { Context } from 'svelte-simple-modal'
 
   export let title = 'Modal'
+  export let fullScreenButton: boolean = false
+  export let fullscreen: boolean = false
   export let onClose: (() => void) | undefined = undefined
 
   const { close } = getContext<Context>('simple-modal')
@@ -16,6 +22,17 @@
   <div class="jse-title">
     {title}
   </div>
+  <slot name="actions" />
+  {#if fullScreenButton}
+    <button
+      type="button"
+      class="jse-fullscreen"
+      title="Toggle fullscreen"
+      on:click={() => (fullscreen = !fullscreen)}
+    >
+      <Icon data={fullscreen ? faDownLeftAndUpRightToCenter : faUpRightAndDownLeftFromCenter} />
+    </button>
+  {/if}
   <button
     type="button"
     class="jse-close"

src/lib/components/modals/JSONEditorModal.svelte

@@ -73,6 +73,7 @@
   }
 
   let refEditor: JSONEditorRoot
+  let fullscreen: boolean
 
   const rootState: ModalState = {
     mode: determineMode(content),
@@ -160,6 +161,14 @@
     }
   }
 
+  function handleEscape() {
+    if (fullscreen) {
+      fullscreen = false
+    } else {
+      handleClose()
+    }
+  }
+
   function handleChange(updatedContent: Content) {
     debug('handleChange', updatedContent)
 
@@ -215,9 +224,11 @@
   }
 </script>
 
-<div class="jse-modal jse-jsoneditor-modal" use:onEscape={handleClose}>
+<div class="jse-modal jse-jsoneditor-modal" class:fullscreen use:onEscape={handleEscape}>
   <Header
     title="Edit nested content {stack.length > 1 ? ` (${stack.length})` : ''}"
+    fullScreenButton={true}
+    bind:fullscreen
     onClose={handleClose}
   />
 

src/lib/components/modals/Modal.scss

@@ -57,6 +57,7 @@
 
 :global(.bg.jse-modal-bg .jse-modal-window-wrap) {
   margin: 0;
+  overflow: auto;
 }
 
 :global(.bg.jse-modal-bg .jse-modal-window) {
@@ -78,15 +79,23 @@
 
 :global(.bg.jse-modal-bg .jse-modal-window.jse-modal-window-jsoneditor) {
   width: 800px;
-  height: auto;
-  min-height: 500px;
-  max-height: calc(100vh - 6rem);
+  max-height: 500px;
   display: flex;
 }
 
+:global(.bg.jse-modal-bg .jse-modal-window:has(div.fullscreen)) {
+  margin: $padding;
+  padding: 0;
+  width: calc(100vw - 2 * $padding);
+  height: calc(100vh - 2 * $padding);
+  max-width: none;
+  max-height: none;
+}
+
 :global(.bg.jse-modal-bg .jse-modal-container) {
   flex: 1;
   display: flex;
   flex-direction: column;
   padding: 0;
+  max-height: none;
 }

src/lib/components/modals/TransformModal.svelte

@@ -65,8 +65,9 @@
 
   const { close } = getContext<Context>('simple-modal')
 
-  const stateId = `${id}:${compileJSONPointer(rootPath)}`
+  let fullscreen = false
 
+  const stateId = `${id}:${compileJSONPointer(rootPath)}`
   const state = transformModalStates[stateId] || {}
 
   // showWizard is not stored inside a stateId
@@ -209,14 +210,23 @@
     query = newSelectedQueryLanguage.createQuery(selectedJson, queryOptions)
     isManual = false
   }
+
+  function handleEscape() {
+    if (fullscreen) {
+      fullscreen = !fullscreen
+    } else {
+      close()
+    }
+  }
 </script>
 
-<div class="jse-modal jse-transform" use:onEscape={close}>
+<div class="jse-modal jse-transform" class:fullscreen use:onEscape={handleEscape}>
   <AbsolutePopup>
     <TransformModalHeader
       {queryLanguages}
       {queryLanguageId}
       onChangeQueryLanguage={handleChangeQueryLanguage}
+      bind:fullscreen
     />
     <div class="jse-modal-contents">
       <div class="jse-main-contents">

src/lib/components/modals/TransformModalHeader.scss

@@ -0,0 +1,9 @@
+@import '../../styles';
+
+.jse-config {
+  @include jse-modal-menu-button;
+
+  &.hide {
+    display: none;
+  }
+}

src/lib/components/modals/TransformModalHeader.svelte

@@ -3,14 +3,16 @@
 <script lang="ts">
   import { getContext } from 'svelte'
   import Icon from 'svelte-awesome'
-  import { faCog, faTimes } from '@fortawesome/free-solid-svg-icons'
+  import { faCog } from '@fortawesome/free-solid-svg-icons'
   import SelectQueryLanguage from '../controls/selectQueryLanguage/SelectQueryLanguage.svelte'
   import type { AbsolutePopupContext, OnChangeQueryLanguage, QueryLanguage } from '$lib/types.js'
   import type { Context } from 'svelte-simple-modal'
+  import Header from './Header.svelte'
 
   export let queryLanguages: QueryLanguage[]
   export let queryLanguageId: string
   export let onChangeQueryLanguage: OnChangeQueryLanguage
+  export let fullscreen: boolean
 
   let refConfigButton: HTMLButtonElement | undefined
   let popupId: number | undefined
@@ -38,22 +40,18 @@
   }
 </script>
 
-<div class="jse-header">
-  <div class="jse-title">Transform</div>
-  {#if queryLanguages.length > 1}
-    <button
-      type="button"
-      bind:this={refConfigButton}
-      class="jse-config"
-      on:click={openConfig}
-      title="Select a query language"
-    >
-      <Icon data={faCog} />
-    </button>
-  {/if}
-  <button type="button" class="jse-close" on:click={() => close()}>
-    <Icon data={faTimes} />
+<Header title="Transform" fullScreenButton={true} bind:fullscreen onClose={close}>
+  <button
+    slot="actions"
+    type="button"
+    bind:this={refConfigButton}
+    class="jse-config"
+    class:hide={queryLanguages.length <= 1}
+    on:click={openConfig}
+    title="Select a query language"
+  >
+    <Icon data={faCog} />
   </button>
-</div>
+</Header>
 
-<style src="./Header.scss"></style>
+<style src="./TransformModalHeader.scss"></style>

src/lib/styles.scss

@@ -110,6 +110,18 @@ $errors-overview-max-height: 25%;
   }
 }
 
+@mixin jse-modal-menu-button {
+  border: none;
+  background: transparent;
+  min-width: 32px;
+  color: inherit;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
 @mixin jse-column-header-mixin {
   background: none;
   border: none;