Extract record deactivation event handler function

This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:33 -07:00
parent 75e0b7758e
commit 93a88e067f

View File

@ -89,6 +89,45 @@ function createWeaponIcon(type) {
return icon;
}
function makeInactiveDivider(parent) {
const div = document.createElement('div');
div.classList.add('inactive-divider');
div.textContent = 'Inactive';
parent.append(div);
return div;
}
function deactivationHandler(e) {
e.preventDefault();
if (!this.classList.contains('inactive')) {
const inactiveDivider = this.parentElement.querySelector('.inactive-divider') || makeInactiveDivider(this.parentElement);
this.addEventListener('transitionend', e => {
inactiveDivider.after(this);
inactiveDivider.scrollIntoView({ behavior: 'smooth' });
});
this.classList.add('inactive');
this.setAttributeNS(null, 'style', 'transform: scale(0.9);');
} else {
const squadRecords = this.parentElement.querySelectorAll(`.soldier-record:not(.inactive)[data-squad="${this.dataset.squad}"]`);
const sorted = [...squadRecords, this].sort(({ dataset: { number: a }}, { dataset: { number: b }}) => +a > +b);
const index = sorted.findIndex(record => record === this);
if (index === 0)
this.parentElement.prepend(this);
else if (index === sorted.length - 1)
sorted[sorted.length - 2].after(this)
else
sorted[index - 1].after(this)
this.classList.remove('inactive');
this.removeAttributeNS(null, 'style');
this.scrollIntoView({ behavior: 'smooth' });
}
}
function createRecord(unit) {
const { dataset: { allegiance, number, squad }} = unit,
@ -169,44 +208,7 @@ function createRecord(unit) {
moveArmorEl.forEach(el => el.addEventListener('click', moveArmorHandler));
}
function makeInactiveDivider(parent) {
const div = document.createElement('div');
div.classList.add('inactive-divider');
div.textContent = 'Inactive';
parent.append(div);
return div;
}
div.addEventListener('contextmenu', e => {
e.preventDefault();
if (!div.classList.contains('inactive')) {
const inactiveDivider = div.parentElement.querySelector('.inactive-divider') || makeInactiveDivider(div.parentElement);
div.addEventListener('transitionend', e => {
inactiveDivider.after(div);
inactiveDivider.scrollIntoView({ behavior: 'smooth' });
});
div.classList.add('inactive');
div.setAttributeNS(null, 'style', 'transform: scale(0.9);');
} else {
const squadRecords = div.parentElement.querySelectorAll(`.soldier-record:not(.inactive)[data-squad="${div.dataset.squad}"]`);
const sorted = [...squadRecords, div].sort(({dataset: { number: a }}, {dataset: { number: b }}) => +a > +b);
const index = sorted.findIndex(record => record === div);
if (index === 0)
div.parentElement.prepend(div);
else if (index === sorted.length - 1)
sorted[sorted.length - 2].after(div)
else
sorted[index - 1].after(div)
div.classList.remove('inactive');
div.removeAttributeNS(null, 'style');
div.scrollIntoView({ behavior: 'smooth' });
}
});
div.addEventListener('contextmenu', deactivationHandler);
return div;
}
@ -317,9 +319,7 @@ function endMove() {
selected.classList.toggle('movement-ended');
deselect();
if (next) {
Observable.notify('select', next);
}
if (next) Observable.notify('select', next);
}
}