create stack of popups. fixes: #112

Signed-off-by: Andrey Platov <andrey@hardcoreeng.com>

packages/ui/src/components/Popup.svelte

@@ -14,71 +14,23 @@
 -->
 <script lang="ts">
   import { popupstore as modal } from '..'
-  import Component from './Component.svelte'
+  import PopupInstance from './PopupInstance.svelte'
 
-  let modalHTML: HTMLElement
+  // function close () {
-  let modalOHTML: HTMLElement
+  //   console.log('closeX')
-
+  // }
-  function close () {
-    modal.set({ is: undefined, props: {}, element: undefined })
-  }
 
   function handleKeydown (ev: KeyboardEvent) {
-    if (ev.key === 'Escape' && $modal.is) {
+    // if (ev.key === 'Escape' && $modal.is) {
-      close()
+    //   close()
-    }
+    // }
   }
 
-  $: {
-    if (modalHTML) {
-      if ($modal.element) {
-        const rect = $modal.element.getBoundingClientRect()
-        if (rect.top > document.body.clientHeight - rect.bottom) {
-          modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.top}px + .75rem)`
-        } else {
-          modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
-        }
-        if (rect.left > document.body.clientWidth - rect.right) {
-          modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
-        } else {
-          modalHTML.style.left = rect.left + 'px'
-        }
-      } else {
-        modalHTML.style.top = '4rem'
-        modalHTML.style.bottom = '4rem'
-        modalHTML.style.right = '4rem'
-      }
-    }
-  }
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
 
-{#if $modal.is}
+{#each $modal as popup}
-  <div class="popup" bind:this={modalHTML}>
+  <PopupInstance is={popup.is} props={popup.props} element={popup.element} />
-    {#if typeof($modal.is) === 'string'}
+{/each}
-      <Component is={$modal.is} props={$modal.props} on:close={close}/>
-    {:else}
-      <svelte:component this={$modal.is} {...$modal.props} on:close={close} />
-    {/if}
-  </div>
-  <div bind:this={modalOHTML} class="modal-overlay" on:click={close} />
-{/if}
 
-<style lang="scss">
-  .popup {
-    position: fixed;
-    background-color: transparent;
-    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .6));
-    z-index: 501;
-  }
-  .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.25);
-    z-index: 500;
-  }
-</style>

packages/ui/src/components/PopupInstance.svelte

@@ -0,0 +1,81 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 Hardcore Engineering Inc.
+// 
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+
+<script lang="ts">
+import Component from './Component.svelte'
+import type { AnySvelteComponent, AnyComponent } from '../types'
+import { closePopup } from '..'
+
+export let is: AnyComponent | AnySvelteComponent
+export let props: object
+export let element: HTMLElement | undefined
+export let zIndex: number
+
+let modalHTML: HTMLElement
+let modalOHTML: HTMLElement
+
+function close() {
+  closePopup()
+}
+
+$: {
+  if (modalHTML) {
+    if (element) {
+      const rect = element.getBoundingClientRect()
+      if (rect.top > document.body.clientHeight - rect.bottom) {
+        modalHTML.style.bottom = `calc(${document.body.clientHeight - rect.top}px + .75rem)`
+      } else {
+        modalHTML.style.top = `calc(${rect.bottom}px + .75rem)`
+      }
+      if (rect.left > document.body.clientWidth - rect.right) {
+        modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
+      } else {
+        modalHTML.style.left = rect.left + 'px'
+      }
+    } else {
+      modalHTML.style.top = '4rem'
+      modalHTML.style.bottom = '4rem'
+      modalHTML.style.right = '4rem'
+    }
+  }
+}
+</script>
+
+
+<div class="popup" bind:this={modalHTML} style={`z-index: ${zIndex + 1};`}>
+  {#if typeof(is) === 'string'}
+    <Component is={is} props={props} on:close={close}/>
+  {:else}
+    <svelte:component this={is} {...props} on:close={close} />
+  {/if}
+</div>
+<div bind:this={modalOHTML} class="modal-overlay" style={`z-index: ${zIndex};`} on:click={close} />
+
+<style lang="scss">
+  .popup {
+    position: fixed;
+    background-color: transparent;
+    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, .6));
+  }
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.25);
+  }
+</style>

packages/ui/src/index.ts

@@ -88,16 +88,18 @@ export function closeModal (): void {
   store.set({ is: undefined, props: {}, element: undefined })
 }
 
-export const popupstore = writable<CompAndProps>({
+export const popupstore = writable<CompAndProps[]>([])
-  is: undefined,
-  props: {},
-  element: undefined
-})
 
 export function showPopup (component: AnySvelteComponent | AnyComponent, props: any, element?: HTMLElement): void {
-  popupstore.set({ is: component, props, element: element })
+  popupstore.update(popups => {
+    popups.push({ is: component, props, element: element })
+    return popups
+  })
 }
 
 export function closePopup (): void {
-  popupstore.set({ is: undefined, props: {}, element: undefined })
+  popupstore.update(popups => {
+    popups.pop()
+    return popups
+  })
 }