OpenSource/paimon-moe
OpenSource/paimon-moe
1
0
Fork 0
mirror of https://github.com/MadeBaruna/paimon-moe.git synced 2024-11-23 07:17:43 +01:00
Code Issues Projects Releases Packages Wiki Activity

Change sroll method to findPos

Browse source
This commit is contained in:
fadhlu 2021-03-17 12:04:01 +07:00
parent b5a73c6e48
commit 46f586a803
1 changed files with 35 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/routes/calculator/index.svelte
View file

@ -16,6 +16,7 @@
let weaponCalc;
let characterCalc;
let resinCalc;
function openHowTo() {
openModal(
@ -28,16 +29,22 @@
);
}
export function scroll(type) {
const elementPosition =
type === 'character' ? characterCalc.getBoundingClientRect().top : weaponCalc.getBoundingClientRect().top;
const headerOffset = 80;
const offsetPosition = elementPosition - headerOffset;
export function findPos(id) {
let node = document.getElementById(id);
let curtop = 0;
let curtopscroll = 0;
let headerOffset = 40;
if (node.offsetParent) {
do {
curtop += node.offsetTop;
curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
} while ((node = node.offsetParent));
window.scrollTo({
top: offsetPosition,
behavior: 'smooth',
});
window.scrollTo({
top: curtop - curtopscroll - headerOffset,
behavior: 'smooth',
});
}
}
</script>
@ -60,14 +67,15 @@
</Button>
</div>
<div
id="weapon"
class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mb-2"
bind:this={weaponCalc}
>
<Button on:click={() => scroll('character')}>
<Button on:click={() => findPos('character')}>
<Icon size={0.8} path={mdiArrowDown} />
{$t('calculator.goto')}
{$t('calculator.titleCharacter')}
</Button>
<h1
class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
>
@ -76,14 +84,19 @@
</div>
<WeaponCalculator />
<div
id="character"
class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
bind:this={characterCalc}
>
<Button on:click={() => scroll('weapon')}>
<Button on:click={() => findPos('weapon')}>
<Icon size={0.8} path={mdiArrowUp} />
{$t('calculator.goto')}
{$t('calculator.titleWeapon')}
</Button>
<Button className="md:mb-0 md:ml-4 mb-4" on:click={() => findPos('resin')}>
<Icon size={0.8} path={mdiArrowDown} />
{$t('calculator.goto')}
{$t('calculator.titleResin')}
</Button>
<h1
class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
>
@ -91,7 +104,15 @@
</h1>
</div>
<CharacterCalculator />
<div class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2">
<div
id="resin"
class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
>
<Button on:click={() => findPos('character')}>
<Icon size={0.8} path={mdiArrowUp} />
{$t('calculator.goto')}
{$t('calculator.titleCharacter')}
</Button>
<h1
class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
>