Extract record deactivation event handler function
This commit is contained in:
parent
75e0b7758e
commit
93a88e067f
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user