create stack of popups. fixes: #112

Signed-off-by: Andrey Platov <andrey@hardcoreeng.com>
This commit is contained in:
Andrey Platov 2021-08-31 19:07:28 +02:00
parent ac87b6c82a
commit 9d39529d9f
No known key found for this signature in database
GPG Key ID: C8787EFEB4B64AF0
3 changed files with 100 additions and 65 deletions

View File

@ -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
let modalOHTML: HTMLElement
function close () {
modal.set({ is: undefined, props: {}, element: undefined })
}
// function close () {
// console.log('closeX')
// }
function handleKeydown (ev: KeyboardEvent) {
if (ev.key === 'Escape' && $modal.is) {
close()
}
// if (ev.key === 'Escape' && $modal.is) {
// 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}
<div class="popup" bind:this={modalHTML}>
{#if typeof($modal.is) === 'string'}
<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}
{#each $modal as popup}
<PopupInstance is={popup.is} props={popup.props} element={popup.element} />
{/each}
<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>

View File

@ -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>

View File

@ -88,16 +88,18 @@ export function closeModal (): void {
store.set({ is: undefined, props: {}, element: undefined })
}
export const popupstore = writable<CompAndProps>({
is: undefined,
props: {},
element: undefined
})
export const popupstore = writable<CompAndProps[]>([])
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
})
}