Slidy

###Delo z izdatki

Vsak poimenovani izdatek dobi svoj drsnik. Drsniku lahko nastaviš razpon, polmer, korak ter barvo.

Vsak izdatek lahko prilagodiš tako, da klikneš na drsnik. Ko klikneš na drsnik se izdatek za drsnik postavi v ospredje (ostali se začasno skrijejo), tako da lahko začneš z nastavljanjem vrednosti.

Z miškinim/prstnim potegom lahko nastavljaš vrednost, s klikom na krožnico drsnika pa vrednost premikaš za korak. Po določenem času po zadnji interakciji s canvasom (glej Parametri - editModeTimeout) se na sredini drsnika začnejo izrisovati manjši krogi. Ko so zapolnjeni se smatra kot da je uporabnik končal z interakcijo/urejanjem. Tako se izdatku shrani trenutna nastavljena vrednost.

Vsi dodani izdatki in vrednosti se shranjujejo tako, da če zapreš okno/sejo so podatki varno shranjeni v localStorage - tako da če kdaj kaj pravilno ne izriše je potreben v localStorage pobrisati ključ slidy - glej Atributi - projectName

Slidy za izrisovanje uporablja prilagodljiv razpored elementov (desktop: fixed 980px width, responsive width 960px do 480px, pod 480px imamo fixed width 480px)

Vrednost vsakega izdatkov lahko dobimo na dva načina (ker se med drugim vrednosti hranijo kot hidden input)

- z document.getElementById("slidy-i-" + ime izdatka)
- z uporabo funkcija Zelim.izdatek("slidy-i-" + ime.izdatka)

Če obstaja dva ali več izdatkov z istim imenom se na koncu doda 1,2...

####Primer:

Imamo izdatek z imenom Hrana - ustvari se element z id-jem "slidy-i-hrana"
Dodamo še en izdatek z imenom Hrana - ustvari se element z id-jem "slidy-i-hrana1"
naslednji "slidy-i-hrana2" itd...

• Za ogled live demo klikni tu demo
• Za izvajanje testov klikni tu tests

Za testiranje se uporablja lasten mini testing framework

####Atributi

Ko ustvarjamo aplikacijo Slidy, ji lahko podamo naslednje vrednosti:

Ime	Razlaga	Privzeta vrednost	Tip
preFix	Kaj pripenjamo id-jem elementov v dokumentu	slidy	string
editModeTimeout	Po kolikšnem času (v ms) po zadnji interakciji s canvasom prekinemo z urejanjem drsnika in sprejmemo novo vrednost	3000	integer
projectName	Pod kakšnim ključem shranjujemo podatke v localStorage	slidy	string
mouseAllowed	Ali dovolimo uporabo miške z interakcijo z drsniki	odvisno od podpore brskalnika	boolean
tapCas	Kolikšen je maksnimalni čas med dvema klikoma, ki se še šteje kot double tap	200	integer
tapZamik	Kakšna je lahko razlika/dolžina med dvema klikoma, da se še šteje kot double tap	30	integer
canvasElement	Wrapper za canvase	div#slidy-canvas-wrapper	DOMElement
width	Širina izrisovalnega polja	integer	canvasElement.width
height	Višina izrisivalnega polja	integer	canvasElement.height
canvasBackground	Canvas element v katerega rišemo ozadje drsnikov	canvas#c-background	DOMElement
canvasSliderji	Canvas element v katerega izrisujemo krožnice drsnikov	canvas#c-sliderji	DOMElement
zacetek	Kot na katerem se začnejo izrisovati drsniki	270	od 0 do 360; kjer: 270 zgoraj, 0 desno, 90 dol, 180 levo
sirina	Sirina kroznica, ki jo izrisujejo drsniki	25	integer
krogBarva	Kaksne barve naj bo krog na drsniku	white	canvas color values
krogBarvaObroba	Kaksne barve naj bo obroba kroga na drsniku	#bbb	canvas color values
krogWidth	Širina obrobe kroga na drsniku	1	integer
ozadjeKot*	Kot, ki se uporablja za izrisovanje ozadja	izračunamo kot krožnega loka glede na polmer in OZADJE_DOLZINA OBARVANEGA_DELA	integer
ozadjeRazmik**	Kot, ki ga uporabljamo za izrisovanje presledkov ozadja	izračunamo kot krožnega loka glede na polmer in OZADJE_RAZMIK	integer
ozadjeBarva	Barva ozadja	rgba(128,128,128, 0.3)	canvas color values
barvaCountdown	Barva za odštevalnik	rgba(128,128,128, 0.3)	canvas color values
barvaCountdownPassed	Barva za odštevalnik - pretekel čas	rgba(128,128,128, 0.7)	canvas color values

• OZADJE_DOLZINA_OBARVANEGA_DELA preračunano glede na r=100, α=5°; default vrednost = 8.726646259971647
• OZADJE_RAZMIK preračunano glede na r=100, α=5°; default vrednost = 10.471975511965978

####Known bugs/todos

• JSLint kode
• večji test coverage
• avtomatsko predlaganje polmera ob dodajanju drsnika/izdatka (glede na prejšne, konsistentneši izgled)
• omogočanje uporabe večih seznamov stroškov

######Ne deluje na IE starejšem od verzije 9 - ta ne podpira canvas elementa

Testiranje

Za potrebe testiranja skript sem spisal malo testno orodje. Nahaja se v test/tester.js. Ponuja pa naslednje funkcije/zmogljivosti

Funkcija, s katero preverimo ali je podani pogoj izpolnjen

assertThat(value, desc)

• value - Vrednost, ki mora biti true da je test pozitiven
• desc - Tekst, ki opisuje pogoj testa

Funkcija, ki nam omogoče združevanje testov skupaj v smiselne skupine

testGroup(desc, fn)

• desc - Tekst, ki označuje skupino tekstov
• fn - Funkcija s testi v isti skupini

Pričakujemo, da bo koda v podani funkcija vrgla exception. Če funkcija vrže exception/error je test pozitiven

assertException(desc, fn)

• desc - Tekst, ki opisuje pogoj testa
• fn - Funkcija s testi, kjer pričakujem exception/error

Preverimo ali je koda podana v fn klicala metodo na podanem objektu. Ustvarjamo mock objekte

######Objekti so mockani (ne izvajajo originalne kode) dokler jih ne resetiramo z resetMock!

assertCalled(desc, obj, met, fn, data)

• desc - Tekst, ki opisuje pogoj testa
• obj - Kateri objekt bomo mockali
• met - Katero metodo na objektu bomo mockali
• fn - Funkcija s kodo
• data - Optional: če podan, mockana metoda vrne data

Preverimo ali je koda podana v fn klicala metodo na podanem objektu in če jo je vrnemo returnValue. Kličemo assertCalled z podanim parametrom data

assertCalledAndReturn(desc, obj, met, returnValue, fn)

• desc - Tekst, ki opisuje pogoj testa
• obj - Kateri objekt bomo mockali
• met - Katero metodo na objektu bomo mockali
• returnValue - Kaj naj mockana metoda vrne, ko je klicana
• fn - Funkcija s kodo

Resetiramo vse mocke. Povrnemo objetke v prvotno stanje

resetMocks

Resetiramo točno določen objetk in metodo

resetMock(ob, fn)

• ob - Objekt
• met - Metoda