Tillbaka | Hämta källkod (.zip)

Källkod

Projektet består av tre olika moduler vilket sedan är samansatta med inehåll och mer kod för att skapa det som visas på runningonsunshine.se

Moduler

• lib/graphPaper/Slide.coffeescript
  Möjliggör tillsammans med graphPaper.coffeescript funktionaliteten att byta mellan olika delar av hemsidan med en animation. En sektion av hemsidan representeras i källkoden som ett objekt av klassen Slide. En viktig metod som definieras i denna Slide class är makeCurrent() vilket används när man trycker på sektionslänkarna på hemsidan.
• dataFetcher.coffeescript
  Definierar objekt som hämtar data ifrån en extern webbplats. Det är med hjälp av denna klassen som sidan hämtar sin data. Vi använder oss av proxy.php för att möjliggöra "cros-site requests" (hämtande av data som kommer ifrån en annan domän via javascript).
• lib/histogram/Histogram.coffeescript
  Definierar objekt som generar stapeldiagram utifrån inmatad data.

Viktiga filer

• index.html
  Här blir alla klasser och funktioner inkallade och själva programmet startas. Detta sker i olika steg
  • Objekt för varje Slide/sektion på hemsida skapas med ett namn och en filväg till dess innehåll. ( T.ex. currentPower = new Slide (name: "currentPower", file: "slides/currentPower.html") )
  • Beräkna storlek och försjutning för de olika sektionerna. calculateSpacing();
  • Skapa dataFetcher objekt med url till datan som ska hämtas. Hämta datan.
  • När datan är hämtad sätts första sektionen i fokus och "hämtar data" medelandet göms. currentPower.makeCurrent()
• slides/*
  Alla filer i mappen slides är html-inehållet som visas för varje sektion på sidan. Dessa filer saknar någon riktig data men har istället placeholder-värden vilket sedan blir ersatta med hjälp av funktioerna i js/slides.js.
• css/slides.css
  Bestämmer färg, text och visuella egenskaper för varje sektion på sidan.
• js/slides.js
  Bestämmer kod som ska köras när en sektion sätts i fokus. Det är dessa funktioner som ersätter placeholder-värden med aktuell data.