wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-05-28 19:08:01 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fitting the VideoPopup to the height of the window (#5128)

Browse Source 
Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
This commit is contained in:
Alexander Platov 2024-04-02 10:05:43 +03:00 committed by GitHub
parent 0803bb4ea2
commit c8a58d5428
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 45 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/ui/src/components/ActionIcon.svelte
View File

@ -47,6 +47,7 @@
<style lang="scss">
.button {
color: inherit;
border: none;
border-radius: 0.125rem;
cursor: pointer;

76
packages/ui/src/components/PopupInstance.svelte
View File

@ -146,6 +146,7 @@
let drag: boolean = false
let notFit: number = 0
let locked: boolean = false
const windowSize: { width: number, height: number } = { width: 0, height: 0 }
const dragParams: { offsetX: number, offsetY: number } = { offsetX: 0, offsetY: 0 }
@ -154,6 +155,7 @@
const updatedPopupParams = (pp: { x: number, y: number, width: number, height: number }): void => {
if (pp.width === 0 || pp.height === 0 || element !== 'movable') return
options.props.left = `${pp.x}px`
options.props.right = ''
options.props.top = `${pp.y}px`
options.props.maxHeight = `${pp.height}px`
}
@ -184,7 +186,6 @@
newLeft = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
}
popupParams = { ...popupParams, x: newLeft, y: newTop }
options.props.right = ''
}
function mouseUp (): void {
@ -193,32 +194,45 @@
window.removeEventListener('mouseup', mouseUp)
}
function checkMovable (): void {
if (drag) return
const newParams: PopupParams = popupParams
if (windowSize.width < $deviceInfo.docWidth) {
// Increase Window Width
if (windowSize.width - popupParams.width - popupParams.x <= WINDOW_PADDING) {
newParams.x = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
}
} else if (windowSize.width > $deviceInfo.docWidth) {
// Decrease Window Width
if (popupParams.x + popupParams.width >= windowSize.width - WINDOW_PADDING) {
newParams.x = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
}
function checkSize (): void {
const rect = modalHTML.getBoundingClientRect()
const newParams: PopupParams = { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
if (popupParams.width === 0 && popupParams.height === 0) popupParams = newParams
newParams.x =
popupParams.x < WINDOW_PADDING
? WINDOW_PADDING
: popupParams.x + popupParams.width > windowSize.width - WINDOW_PADDING * 2
? $deviceInfo.docWidth - WINDOW_PADDING - popupParams.width
: popupParams.x
newParams.y =
popupParams.y < WINDOW_PADDING
? WINDOW_PADDING
: popupParams.y + popupParams.height > $deviceInfo.docHeight - WINDOW_PADDING
? $deviceInfo.docHeight - WINDOW_PADDING - popupParams.height
: popupParams.y
if (newParams.y < WINDOW_PADDING) {
newParams.height -= WINDOW_PADDING - newParams.y
newParams.y = WINDOW_PADDING
}
if (windowSize.height < $deviceInfo.docHeight) {
// Increase Window Height
if (windowSize.height - popupParams.height - popupParams.y <= WINDOW_PADDING) {
newParams.y = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
}
} else if (windowSize.height > $deviceInfo.docHeight) {
// Decrease Window Height
if (popupParams.y + popupParams.height >= windowSize.height - WINDOW_PADDING) {
newParams.y = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
}
if (newParams.height > windowSize.height - WINDOW_PADDING * 2) {
newParams.height = windowSize.height - WINDOW_PADDING * 2
newParams.y = WINDOW_PADDING
}
const bottomFree: number = $deviceInfo.docHeight - WINDOW_PADDING - popupParams.y - popupParams.height
const topFree: number = popupParams.y - WINDOW_PADDING
if (notFit && bottomFree > 0) {
const dFit: number = bottomFree - notFit
newParams.height += dFit >= 0 ? notFit : bottomFree
notFit -= dFit >= 0 ? notFit : bottomFree
}
if (notFit && topFree > 0) {
const dFit: number = topFree - notFit
newParams.y -= dFit < 0 ? topFree : notFit
newParams.height += dFit < 0 ? topFree : notFit
notFit -= dFit < 0 ? topFree : notFit
}
popupParams = newParams
locked = false
}
export function fitPopupInstance (): void {
@ -239,15 +253,12 @@
<svelte:window
on:resize={() => {
if (modalHTML) fitPopup(modalHTML, element, contentPanel)
if (element === 'movable') {
if (popupParams.width === 0 && popupParams.height === 0) {
const rect = modalHTML.getBoundingClientRect()
popupParams = { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
}
checkMovable()
if (element === 'movable' && !locked) {
locked = true
checkSize()
windowSize.width = $deviceInfo.docWidth
windowSize.height = $deviceInfo.docHeight
}
windowSize.width = $deviceInfo.docWidth
windowSize.height = $deviceInfo.docHeight
}}
on:keydown={handleKeydown}
/>
@ -295,6 +306,7 @@
on:changeContent={(ev) => {
fitPopup(modalHTML, element, contentPanel)
if (ev.detail?.notFit !== undefined) notFit = ev.detail.notFit
if (element === 'movable' && showing !== false) checkSize()
}}
/>
</div>