Skip to content

Commit

Permalink
PB-985: Restore ModalWithBackdrop to original state.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ismailsunni
ismailsunni committed Oct 19, 2024
1 parent ab83bea commit 3eed162
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 79 deletions.
61 changes: 3 additions & 58 deletions src/utils/components/ModalWithBackdrop.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@
<!-- Must teleport inside main-component in order for dynamic outlines to work and to be
sure that it is always on top of the reset. -->
<div v-show="!hide && !hideForPrint" data-cy="modal-with-backdrop">
<BlackBackdrop v-if="useBlackBackdrop" place-for-modal @click.stop="onClose(false)" />
<BlackBackdrop place-for-modal @click.stop="onClose(false)" />
<div
ref="modalRef"
class="modal-popup position-fixed start-50"
:class="{
'top-50 translate-middle': !top,
Expand All @@ -17,11 +16,9 @@
:class="{
'border-primary': headerPrimary,
'modal-popup-fluid': fluid,
'modal-popup-compact': compact,
}"
>
<div
ref="modalHeader"
class="card-header d-flex align-middle"
:class="{ 'bg-primary text-white border-primary': headerPrimary }"
>
Expand All @@ -32,19 +29,10 @@
>{{ title }}</span
>
<PrintButton
v-if="allowPrint && showContent"
v-if="allowPrint"
:content="$refs.modalContent"
@hide-parent-modal="onHideParentModal"
></PrintButton>
<button
v-if="allowMinimize"
class="btn btn-sm btn-light d-flex align-items-center"
data-cy="modal-minimize-button"
@click="showContent = !showContent"
@mousedown.stop=""
>
<FontAwesomeIcon :icon="`caret-${showContent ? 'up' : 'down'}`" />
</button>
<button
class="btn btn-sm d-flex align-items-center"
:class="{
Expand All @@ -58,7 +46,6 @@
</button>
</div>
<div
v-show="showContent"
ref="modalContent"
class="card-body pt-3 ps-4 pe-4"
data-cy="modal-content"
Expand Down Expand Up @@ -92,9 +79,6 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import BlackBackdrop from '@/utils/components/BlackBackdrop.vue'
import PrintButton from '@/utils/components/PrintButton.vue'
import log from '@/utils/logging'
import { useMovableElement } from '../composables/useMovableElement.composable'
/**
* Utility component that will wrap your modal content and make sure it is above the overlay of the
Expand Down Expand Up @@ -135,47 +119,11 @@ export default {
type: Boolean,
default: false,
},
movable: {
type: Boolean,
default: false,
},
useBlackBackdrop: {
type: Boolean,
default: true,
},
allowMinimize: {
type: Boolean,
default: false,
},
compact: {
type: Boolean,
default: false,
},
},
emits: ['close'],
data() {
return {
hideForPrint: false,
showContent: true,
}
},
mounted() {
if (this.movable) {
const modalElement = this.$refs.modalRef
if (modalElement) {
useMovableElement(modalElement, {
grabElement: this.$refs.modalHeader,
initialPositionClasses: [
'start-50',
'top-50',
'translate-middle',
'translate-middle-x',
'on-top-with-padding',
],
})
} else {
log.error('Modal element not found')
}
}
},
methods: {
Expand Down Expand Up @@ -212,6 +160,7 @@ export default {
&:not(.modal-popup-fluid) {
// only setting a width if the modal content shouldn't be fluid
width: 80vw;
@include respond-below(phone) {
width: 100vw;
border-radius: unset;
Expand All @@ -221,10 +170,6 @@ export default {
// But for desktop we let the size be dynamic with max to 90% of the view
max-width: 80vw;
max-height: 90svh;
&.modal-popup-compact {
width: $overlay-width;
}
}
.card-header {
align-items: center;
Expand Down
26 changes: 5 additions & 21 deletions src/utils/composables/useMovableElement.composable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,16 @@ const defaultPadding = 4 // px
* @param {{ top: Number; bottom: Number; left: Number; right: Number }} [options.offset] Offset in
* pixels with the border of the screen to constrain element movements. A default padding of 4
* pixel will be applied if no offset is given.
* @param {string[]} [options.initialPositionClasses] Initial position classes to remove when the
* element is being moved
*/
export function useMovableElement(element, options = {}) {
const { grabElement = null, offset = null, initialPositionClasses = [] } = options
let firstMovement = true
const { grabElement = null, offset = null } = options

const padding = ref({
top: toValue(offset)?.top ?? defaultPadding,
bottom: toValue(offset)?.bottom ?? defaultPadding,
left: toValue(offset)?.left ?? defaultPadding,
right: toValue(offset)?.right ?? defaultPadding,
})

const viewport = ref({
bottom: window.innerHeight - padding.value.bottom,
left: padding.value.left,
Expand Down Expand Up @@ -103,6 +99,7 @@ export function useMovableElement(element, options = {}) {
top: toValue(element).offsetTop,
}
const elementSize = toValue(element).getBoundingClientRect()

// check to make sure the element will be within our viewport boundary
let newLeft = elementOffset.left - currentMousePosition.left
let newTop = elementOffset.top - currentMousePosition.top
Expand Down Expand Up @@ -135,22 +132,9 @@ export function useMovableElement(element, options = {}) {
}

function placeElementAt(top, left) {
const htmlElement = toValue(element)
const htmlElementStyle = htmlElement.style

// In case the original element has CSS class that affects its position, we remove them first
if (firstMovement && initialPositionClasses.length > 0) {
const rect = element.getBoundingClientRect()
initialPositionClasses.forEach((className) => {
htmlElement.classList.remove(className)
})
htmlElementStyle.top = `${rect.top}px`
htmlElementStyle.left = `${rect.left}px`
} else {
htmlElementStyle.top = `${top}px`
htmlElementStyle.left = `${left}px`
}
firstMovement = false
const htmlElementStyle = toValue(element).style
htmlElementStyle.top = `${top}px`
htmlElementStyle.left = `${left}px`
}

/**
Expand Down

0 comments on commit 3eed162

Please sign in to comment.