demarches-normaliennes/app/javascript/controllers/move_procedures_position_controller.ts

63 lines
1.9 KiB
TypeScript
Raw Normal View History

import { ApplicationController } from './application_controller';
export class MoveProceduresPositionController extends ApplicationController {
connect() {
this.updateButtonsStates();
}
async moveUp(event: Event) {
event.preventDefault();
const button = event.currentTarget as HTMLButtonElement;
const upCard = button.closest('.fr-card');
await this.switchCards(upCard!, upCard!.previousElementSibling!);
upCard!.parentNode!.insertBefore(upCard!, upCard!.previousElementSibling);
this.updateButtonsStates();
}
async moveDown(event: Event) {
event.preventDefault();
const button = event.currentTarget as HTMLButtonElement;
const downCard = button.closest('.fr-card');
await this.switchCards(downCard!.nextElementSibling!, downCard!);
downCard!.parentNode!.insertBefore(downCard!.nextElementSibling!, downCard);
this.updateButtonsStates();
}
private async switchCards(upCard: Element, downCard: Element): Promise<void> {
const upCardRect = upCard.getBoundingClientRect();
const downCardRect = downCard.getBoundingClientRect();
const upAnimation = upCard.animate(
[
{ transform: `translateY(0)` },
{ transform: `translateY(${downCardRect.top - upCardRect.top}px)` }
],
{ duration: 300, easing: 'ease-in-out' }
);
const downAnimation = downCard.animate(
[
{ transform: `translateY(0)` },
{ transform: `translateY(${upCardRect.top - downCardRect.top}px)` }
],
{ duration: 300, easing: 'ease-in-out' }
);
await Promise.all([upAnimation.finished, downAnimation.finished]);
}
private updateButtonsStates() {
const buttons = [
...this.element.querySelectorAll('button')
] as HTMLButtonElement[];
buttons.forEach(
(button, index) =>
(button.disabled = index == 0 || index == buttons.length - 1)
);
}
}