badblocks/pkmntrade.club
1
1
Fork 0
Code Issues 14 Pull requests Projects 1 Releases Packages Wiki Activity

remove trade offer expanding, fix flipping to work with new layout. all cards in trade offer are not expanded

Browse source
This commit is contained in:
badblocks 2025-04-04 14:23:53 -07:00
parent c68d1fb5ec
commit 7c62c57433
11 changed files with 194 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

56
static/js/base.js
View file

@ -130,17 +130,55 @@ const $$ = selector => Array.from(document.querySelector(selector));
window.tradeOfferCard = function() {
return {
flipped: false,
badgeExpanded: false,
acceptanceExpanded: false,
/**
* Update the badge's expanded state.
show_back: false,
collapsed: false,
/*
* flipWithCollapse() now applies the height transition directly on the visible card face.
* It measures the current face (front or back) and the target face's height,
* then animates the current face's height change before toggling the flip.
*
* @param {boolean} expanded - The new state of the badge.
* Make sure your template markup includes:
* - x-ref="front" on the front card face
* - x-ref="back" on the back card face
*/
setBadge(expanded) {
this.badgeExpanded = expanded;
},
};
flipWithCollapse() {
// Determine the currently visible face and the target face.
const currentFace = this.flipped ? this.$refs.back : this.$refs.front;
const targetFace = this.flipped ? this.$refs.front : this.$refs.back;
const container = this.$refs.container;
// Temporarily force target face to display to measure its height.
const originalHeight = targetFace.style.height;
const originalDisplay = targetFace.style.display;
const originalPosition = targetFace.style.position;
const originalVisibility = targetFace.style.visibility;
targetFace.style.height = 'auto';
targetFace.style.display = 'block';
targetFace.style.position = 'absolute';
targetFace.style.visibility = 'hidden';
const targetHeight = targetFace.offsetHeight + 18;
targetFace.style.height = originalHeight;
targetFace.style.display = originalDisplay;
targetFace.style.position = originalPosition;
targetFace.style.visibility = originalVisibility;
container.setAttribute('x-collapse.duration.500ms.min.' + targetHeight + 'px', '');
this.collapsed = true;
setTimeout(() => {
this.show_back = this.flipped;
this.flipped = !this.flipped;
setTimeout(() => {
this.show_back = !this.show_back;
}, 250)
setTimeout(() => {
this.collapsed = false;
setTimeout(() => {
container.removeAttribute('x-collapse.duration.500ms.min.' + targetHeight + 'px');
}, 550);
}, 550);
}, 550);
}
}
};
}
})();