Kode
Denne side er lavet til udviklere og har til formål at udvikleren har nemmere ved at sætte sig ind i mere kompleks kode. Hvis der opstår fejl, eller noget skal ændres, kan denne side bruges som hjælp for at tilpasse koden.
Side skift
I stedet for at loade en ny html fil, skifter vi html kode inde i “editSchedule__content” – sektion for at skifte siderne.
For hvert side skift er der to funktioner i javascript:
En “fetch”-funktion for den enkelte html side, der skal sættes ind.
Vi henter html som en string og laver den om til html kode. Derefter sletter vi det nuværende indhold og erstatter det med det nye.
Fordi indexsiden ikke skal være tomt, når vi åbner den, henter vi “edit” html’en onLoad og tilføjer en classname til editSchedule__content, der viser, at denne side er aktiv nu. Eksemplet nedenunder viser dog funktionen, der henter html til editMode1.
For at skabe muligheden for at skifte til en ny side herfra, leder vi efter knapperne på denne side og tilføjer eventlisteners, der kalder den næste funktion.
Så snart en af sidens knapper bliver trykket, kører en anden funktion. I det her tilfalde har vi trykket på “tilbage” – knappen. Eftersom der er to sider, der har en “tilbage” – knap, er det vigtigt at vide, hvilken side er aktiv, for at kunne sikre, at vi kommer tilbage til den rigtige side.
Derfor tjekker vi sektionens class-name. Dette navn viser, hvilken side der ligger inde i sektionen lige nu. Afhængig af klassen ændrer vi classList og kalder den første funktion, der henter html filen, vi gerne vil gå tilbage til.
OBS: når vi går fra “edit” (første side med store knapper) til “editMode1” (valg rum), skal vi oprette tilstand tabs og append dem som sibling lige foran content sektionen. På den måde loader den ikke igen og vi kan bibeholde animationen. Dette komponent skal tilpasses, når vi skifter til og fra editMode2, så der kun vises den aktive tab (se nedenunder)
Tabs animation
Microinteraction til at skifte tilstand tabs. Dette komponent bliver skabt i javascript og tilføjet til DOM, når vi skifter fra index/edit til “editMode1”, hvilket kan ses i funktionen openEditModes() på linje 122.
Mens komponentet er bygget op som grid, hvor alle tabs har den samme brede, er den gul kasse (__active) en baggrundskasse, der kan strækkes over hele breden.
Animationen kører på grundlag af classnames på modesTabs__active, der fører til, at en specifikt keyframes animation kører.
Hvert classname beskriver, hvilken tilstand vi skifter fra og til. Der er altså 6 classnames:
homeToSleep, homeToAway, sleepToHome, sleepToAway, awayToHome, awayToSleep.
Animationerne er lavet efter deres virkprincip:
oneToRight, twoToRight, oneToLeft, twoToLeft
JavaScript
For at kunne tildele de rigtige classnames, skal vi vide 2 ting: hvilken tab kommer vi fra og hvilken tab blev der trykket på?
Funktionen changeTab() bliver kaldt, når man trykker på en tab. For at finde ud af, hvilken tab vi har trykket på, altså hvilken skal være den nye aktive tab, leder vi efter vores event target.
For at finde ud af, hvilken tab er aktiv nu, henter vi en information fra css’en om left positionen af modesTabs__active (den gul kasse). Her bruger vi en css variabel (–tab__active–left), fordi den er meget nemmere at tilgå og ændres med javacript, end at få fat i en almindelig property.
Afhængig af, hvad target er, altså hvilken tab blev trykket, kalder vi forskellige funktioner. Vi overgiver activePosition (hvor __active er lige nu) som parameter, fordi vi skal bruge den i den næste funktion.
Funktionen går altid ud fra den nye tab. Eftersom der er to muligheder, hvor vi kan komme fra, skal vi have en if/else statement. Hvor vi kommer fra tjekker vi med den nuværende left position af __active kassen, som vi har gemt i activePosition. Eftersom komponentet er en grid med lige store columns, er vores left-værdier 0 (for den første tab “at home”, 33.33% (for anden tab “asleep” og 66.66% (for tredje tab “away”).
Nu ved vi, hvor vi kommer fra og hvor vi skal hen, og kan derfor tilføj den rette classname. For at kunne overdrage vores nye position til css’en, oprette vi en let activeTab__new i starten af scriptet, som vi nu kan overskrive med left positionen af den nye tab.
Denne værdi kan så overdrages til css variablen –leftNEW og bruges til keyframes animationen, for at flytte kassen.
I sidste ende skal den nye left position blive den aktuelle position, så kassen ikke springer tilbage efter animationen er kørt. Derfor skal vi overskrive css variablen –left med –leftNEW. Denne aktion kræver dog en timout, så den først starter, når animationen allerede er kørt. Hvis den ikke havde en timeout, ville __active kassen flytte sig uden animation, fordi –left og –leftNEW altid ville have den samme værdi.
