ctome
/
paimon-moe-fork
mirror of https://github.com/CrimsonTome/paimon-moe-fork.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change sroll method to findPos

pull/1/head
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 weaponCalc;
let characterCalc; let characterCalc;
let resinCalc;
function openHowTo() { function openHowTo() {
openModal( openModal(
@ -28,16 +29,22 @@
); );
} }
export function scroll(type) { export function findPos(id) {
const elementPosition = let node = document.getElementById(id);
type === 'character' ? characterCalc.getBoundingClientRect().top : weaponCalc.getBoundingClientRect().top; let curtop = 0;
const headerOffset = 80; let curtopscroll = 0;
const offsetPosition = elementPosition - headerOffset; let headerOffset = 40;
if (node.offsetParent) {
do {
curtop += node.offsetTop;
curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
} while ((node = node.offsetParent));
window.scrollTo({ window.scrollTo({
top: offsetPosition, top: curtop - curtopscroll - headerOffset,
behavior: 'smooth', behavior: 'smooth',
}); });
}
} }
</script> </script>
@ -60,14 +67,15 @@
</Button> </Button>
</div> </div>
<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" 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} /> <Icon size={0.8} path={mdiArrowDown} />
{$t('calculator.goto')} {$t('calculator.goto')}
{$t('calculator.titleCharacter')} {$t('calculator.titleCharacter')}
</Button> </Button>
<h1 <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" 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> </div>
<WeaponCalculator /> <WeaponCalculator />
<div <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" 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} /> <Icon size={0.8} path={mdiArrowUp} />
{$t('calculator.goto')} {$t('calculator.goto')}
{$t('calculator.titleWeapon')} {$t('calculator.titleWeapon')}
</Button> </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 <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" 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> </h1>
</div> </div>
<CharacterCalculator /> <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 <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" 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"
> >