mirror of
https://github.com/hcengineering/platform.git
synced 2025-06-05 15:24:22 +00:00
Fitting the VideoPopup to the height of the window (#5128)
Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
This commit is contained in:
parent
0803bb4ea2
commit
c8a58d5428
@ -47,6 +47,7 @@
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.button {
|
.button {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
border: none;
|
||||||
border-radius: 0.125rem;
|
border-radius: 0.125rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
@ -146,6 +146,7 @@
|
|||||||
|
|
||||||
let drag: boolean = false
|
let drag: boolean = false
|
||||||
let notFit: number = 0
|
let notFit: number = 0
|
||||||
|
let locked: boolean = false
|
||||||
|
|
||||||
const windowSize: { width: number, height: number } = { width: 0, height: 0 }
|
const windowSize: { width: number, height: number } = { width: 0, height: 0 }
|
||||||
const dragParams: { offsetX: number, offsetY: number } = { offsetX: 0, offsetY: 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 => {
|
const updatedPopupParams = (pp: { x: number, y: number, width: number, height: number }): void => {
|
||||||
if (pp.width === 0 || pp.height === 0 || element !== 'movable') return
|
if (pp.width === 0 || pp.height === 0 || element !== 'movable') return
|
||||||
options.props.left = `${pp.x}px`
|
options.props.left = `${pp.x}px`
|
||||||
|
options.props.right = ''
|
||||||
options.props.top = `${pp.y}px`
|
options.props.top = `${pp.y}px`
|
||||||
options.props.maxHeight = `${pp.height}px`
|
options.props.maxHeight = `${pp.height}px`
|
||||||
}
|
}
|
||||||
@ -184,7 +186,6 @@
|
|||||||
newLeft = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
|
newLeft = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
|
||||||
}
|
}
|
||||||
popupParams = { ...popupParams, x: newLeft, y: newTop }
|
popupParams = { ...popupParams, x: newLeft, y: newTop }
|
||||||
options.props.right = ''
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function mouseUp (): void {
|
function mouseUp (): void {
|
||||||
@ -193,32 +194,45 @@
|
|||||||
window.removeEventListener('mouseup', mouseUp)
|
window.removeEventListener('mouseup', mouseUp)
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkMovable (): void {
|
function checkSize (): void {
|
||||||
if (drag) return
|
const rect = modalHTML.getBoundingClientRect()
|
||||||
const newParams: PopupParams = popupParams
|
const newParams: PopupParams = { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
|
||||||
if (windowSize.width < $deviceInfo.docWidth) {
|
if (popupParams.width === 0 && popupParams.height === 0) popupParams = newParams
|
||||||
// Increase Window Width
|
newParams.x =
|
||||||
if (windowSize.width - popupParams.width - popupParams.x <= WINDOW_PADDING) {
|
popupParams.x < WINDOW_PADDING
|
||||||
newParams.x = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
|
? WINDOW_PADDING
|
||||||
}
|
: popupParams.x + popupParams.width > windowSize.width - WINDOW_PADDING * 2
|
||||||
} else if (windowSize.width > $deviceInfo.docWidth) {
|
? $deviceInfo.docWidth - WINDOW_PADDING - popupParams.width
|
||||||
// Decrease Window Width
|
: popupParams.x
|
||||||
if (popupParams.x + popupParams.width >= windowSize.width - WINDOW_PADDING) {
|
newParams.y =
|
||||||
newParams.x = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
|
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) {
|
if (newParams.height > windowSize.height - WINDOW_PADDING * 2) {
|
||||||
// Increase Window Height
|
newParams.height = windowSize.height - WINDOW_PADDING * 2
|
||||||
if (windowSize.height - popupParams.height - popupParams.y <= WINDOW_PADDING) {
|
newParams.y = WINDOW_PADDING
|
||||||
newParams.y = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
|
}
|
||||||
}
|
const bottomFree: number = $deviceInfo.docHeight - WINDOW_PADDING - popupParams.y - popupParams.height
|
||||||
} else if (windowSize.height > $deviceInfo.docHeight) {
|
const topFree: number = popupParams.y - WINDOW_PADDING
|
||||||
// Decrease Window Height
|
if (notFit && bottomFree > 0) {
|
||||||
if (popupParams.y + popupParams.height >= windowSize.height - WINDOW_PADDING) {
|
const dFit: number = bottomFree - notFit
|
||||||
newParams.y = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
|
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
|
popupParams = newParams
|
||||||
|
locked = false
|
||||||
}
|
}
|
||||||
|
|
||||||
export function fitPopupInstance (): void {
|
export function fitPopupInstance (): void {
|
||||||
@ -239,15 +253,12 @@
|
|||||||
<svelte:window
|
<svelte:window
|
||||||
on:resize={() => {
|
on:resize={() => {
|
||||||
if (modalHTML) fitPopup(modalHTML, element, contentPanel)
|
if (modalHTML) fitPopup(modalHTML, element, contentPanel)
|
||||||
if (element === 'movable') {
|
if (element === 'movable' && !locked) {
|
||||||
if (popupParams.width === 0 && popupParams.height === 0) {
|
locked = true
|
||||||
const rect = modalHTML.getBoundingClientRect()
|
checkSize()
|
||||||
popupParams = { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
|
windowSize.width = $deviceInfo.docWidth
|
||||||
}
|
windowSize.height = $deviceInfo.docHeight
|
||||||
checkMovable()
|
|
||||||
}
|
}
|
||||||
windowSize.width = $deviceInfo.docWidth
|
|
||||||
windowSize.height = $deviceInfo.docHeight
|
|
||||||
}}
|
}}
|
||||||
on:keydown={handleKeydown}
|
on:keydown={handleKeydown}
|
||||||
/>
|
/>
|
||||||
@ -295,6 +306,7 @@
|
|||||||
on:changeContent={(ev) => {
|
on:changeContent={(ev) => {
|
||||||
fitPopup(modalHTML, element, contentPanel)
|
fitPopup(modalHTML, element, contentPanel)
|
||||||
if (ev.detail?.notFit !== undefined) notFit = ev.detail.notFit
|
if (ev.detail?.notFit !== undefined) notFit = ev.detail.notFit
|
||||||
|
if (element === 'movable' && showing !== false) checkSize()
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user