Râu Cao
51c9555273
* Fixed a race condition in `photo-carousel` where programmatic scrolling
(e.g., keyboard navigation) would conflict with `IntersectionObserver`
callbacks, causing the current photo to revert mid-scroll. Added an
`isProgrammaticScroll` flag to temporarily suppress observer updates
during these scrolls.
* Added explicit timeouts in `photo-gallery-test.gjs` to allow the carousel
animations to settle between keyboard events.
* Refactored `Modal` and `PhotoGallery` components to use `{{in-element}}`
to render their contents into a top-level `#modal-portal` div. This prevents
z-index and overflow clipping issues.
* Updated `index.html` to include the `#modal-portal` div.
72 lines
1.6 KiB
Plaintext
72 lines
1.6 KiB
Plaintext
import Component from '@glimmer/component';
|
|
import { action } from '@ember/object';
|
|
import { on } from '@ember/modifier';
|
|
import config from 'marco/config/environment';
|
|
import Icon from './icon';
|
|
|
|
const ModalContent = <template>
|
|
<div class="modal-overlay" role="dialog" tabindex="-1" {{on "click" @close}}>
|
|
<div
|
|
class="modal-content"
|
|
role="document"
|
|
tabindex="0"
|
|
{{on "click" @stopProp}}
|
|
>
|
|
<button
|
|
type="button"
|
|
class="close-modal-btn btn-text {{if @disableClose 'disabled'}}"
|
|
disabled={{@disableClose}}
|
|
{{on "click" @close}}
|
|
>
|
|
<Icon @name="x" @size={{24}} @color="currentColor" />
|
|
</button>
|
|
{{yield}}
|
|
</div>
|
|
</div>
|
|
</template>;
|
|
|
|
export default class Modal extends Component {
|
|
get isTesting() {
|
|
return config.environment === 'test';
|
|
}
|
|
|
|
get destinationElement() {
|
|
return document.getElementById('modal-portal') || document.body;
|
|
}
|
|
|
|
@action
|
|
stopProp(e) {
|
|
e.stopPropagation();
|
|
}
|
|
|
|
@action
|
|
close() {
|
|
if (this.args.disableClose) return;
|
|
if (this.args.onClose) {
|
|
this.args.onClose();
|
|
}
|
|
}
|
|
|
|
<template>
|
|
{{#if this.isTesting}}
|
|
<ModalContent
|
|
@close={{this.close}}
|
|
@stopProp={{this.stopProp}}
|
|
@disableClose={{@disableClose}}
|
|
>
|
|
{{yield}}
|
|
</ModalContent>
|
|
{{else}}
|
|
{{#in-element this.destinationElement}}
|
|
<ModalContent
|
|
@close={{this.close}}
|
|
@stopProp={{this.stopProp}}
|
|
@disableClose={{@disableClose}}
|
|
>
|
|
{{yield}}
|
|
</ModalContent>
|
|
{{/in-element}}
|
|
{{/if}}
|
|
</template>
|
|
}
|