62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
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)
|
|
);
|
|
}
|
|
}
|