Šablon:Calculator

Dokumentacija šablona[prikaži] [uredi] [historija] [osvježi]

Ovaj šablon služi za izradu interaktivnih grafičkih elemenata (engleski: widget). Spravica 'Calculator' koja je odgovorna za funkcionalnost ovog šablona je prema zadanim postavkama omogućena za sve korisnike Wikipedije. Registrirani i prijavljeni korisnici spravicu mogu isključiti u svojim postavkama: Posebno:Postavke#mw-prefsection-gadgets. Šablon zahtjeva preglednik s podrškom za JavaScript.

Odjeljak § Codex sadrži osnovne gradivne elemente u načinu prikaza koji prati smjernice Wikimedijinog stilskog priručnika Codex (wmdoc:codex/latest). Podstranica {{Calculator/zbirka}} donosi odabrane primjere Calculator šablona koji ilustriraju njihove mogućnosti u praksi. Statistika upotrebe šablona je dostupna na Grafani.

Primjeri

U nastavku se nalazi jednostavan primjer množenja dvaju brojeva. Pozivamo dvije instance šablona Calculator (bez formule) koje služe kao polja za unos. Zatim pozivamo treću instancu koja sadrži formulu za množenje prethodne dvije ćelije. Imajte na umu da se formule primjenjuju tek nakon korisničke interakcije, stoga sva polja moraju imati zadanu vrijednost koja se koristi kao početna prije interakcije.

{{calculator|id=a|default=2|size=4}} × {{calculator|id=b|default=2|size=4}} = {{calculator|id=c|formula=a*b|default=4|type=plain}}

daje:

2 × 2 = 4

{{calculator|id= km   |type= number|size= 9|default= 1.609344|formula= miles*1.609344}} km = 
{{calculator|id= miles|type= number|size= 9|default= 1       |formula= km/1.609344   }} milja/milje

daje:

1.609344 km = 1 milja/milje

BMI kalkulator (metrički sustav)

Widgete je moguće postaviti unutar 'wikitable' tabele.

{| class="wikitable" style = "float: left; margin-left:15px;"
|+ Metrički
|-
| {{calculator label|Masa|for=weightkg}} || {{calculator|id=weightkg|size=3|default=80}} kg
|-
| {{calculator label|Visina|for=heightcm}} || {{calculator|id=heightcm|size=3|default=160}} cm
|-
| [[Indeks tjelesne mase|BMI]] || '''{{calculator|id=bmimetric|type=plain|formula=round(weightkg/pow(heightcm/100,2))|default=31|style=min-width:3ch;display:inline-block}} kg/m<sup>2</sup>'''
|}

Metrički

Masa	80 kg
Visina	160 cm
BMI	31 kg/m2

BMI kalkulator (imperijalni sustav)

Widgete je moguće postaviti i unutar HTML tabele.

<table class="wikitable">
<tr><td>Imperijalni</td></tr>
<tr><td>Težina</td><td>{{calculator|id=weight|size=3}} lbs</td></tr>
<tr><td>Visina</td><td>{{calculator|id=heightFeet|size=1}} stopa/stope {{calculator|id=heightInches|size=2}} inč/inča</td></tr>
<tr><td>BMI</td><td>'''{{calculator|id=bmi|type=plain|formula=round(100*weight*703/pow(heightFeet*12+heightInches,2))/100}} kg/m<sup>2</sup>'''</td></tr>
</table>

imperijalni
masa	lbs
visina	stopa/e inč(a)
BMI	kg/m2

Oznake

{{calculator label}}

1. dodaje tekstualnu oznaku (label) widgetu kalkulatora te poboljšava pristupačnost; čitači zaslona koriste oznake kako bi korisniku javili na koje je polje za unos fokusirano
2. pri kliku daje fokus polju za unos (osobito korisno kod manjih widgeta)
3. označava/odznačava povezani checkbox ili radio-dugme

{{calculator|type=checkbox|id=checklabelex}} {{calculator label|label=Kliknite ovu oznaku|for=checklabelex}}

Kliknite ovu oznaku

Formula

Formule koriste uobičajenu matematičku sintaksu, pri čemu se engleske riječi koriste za predstavljanje drugih polja za unos. Primjer: sin(1+foo*2) će pomnožiti vrijednost polja foo s 2, dodati 1 i izračunati sinus cijelog izraza.

Svi izračuni izvode se korištenjem IEEE 754 dvostruke preciznosti (double precision) s pomičnim zarezom.

Imajte na umu da se formula ponovno izračunava samo kada korisnik stupi u interakciju s kalkulatorom. Prije bilo kakve korisničke interakcije prikazuje se vrijednost parametra |default=, čak i ako se razlikuje od vrijednosti koju bi formula inicijalno dala. Stoga parametar |default= treba postaviti na vrijednost za koju očekujete da će biti rezultat izračuna formule.

Podržani operatori

Podržani operatori uključuju: +, -, *, ×, /, ÷, % (znak postotka predstavlja operator modulo).

Potenciranje se mora izvesti korištenjem funkcije pow().

Matematičke funkcije

Podržane matematičke funkcije uključuju: abs, acos, acosh, asin, asinh, atan, atan2, atanh, cbrt, ceil, cos, cosh, exp, expm1, floor, hypot, log, log10, log2, log1p, max, min, pow, random, sign, sin, sinh, sqrt, tan, tanh, trunc, clz32.

One imaju isto značenje kao u JavaScriptu. Konkretno, to znači da je log() prirodni logaritam (baza e). Iznimka je round, za koji koristimo vlastitu definiciju.

Dodatne funkcije

Sljedeće dodatne funkcije su podržane, a ne potječu iz JavaScript Math biblioteke:

and

Logički AND nad svim argumentima (može ih biti više od 2). Operator koristi short-circuit evaluaciju kao Lua i vraća prvi false (netočan) argument.

Ako želite rezultat 1 ili 0, omotajte izraz u bool().

Za bitovni AND vidi bitand().

bool

Vraća 0 ako je vrijednost vrlo blizu nuli ili je NaN, inače 1.

coalesce

Vraća prvi argument koji nije NaN.

ifbetween

Vraća četvrti ili peti argument ovisno o tome je li prvi argument između drugog i trećeg. Usporedba nije „fuzzy”.

Zadnja dva argumenta su opcionalna i zadano su 1 i 0.

ifequal

Ako su prvi i drugi argument jednaki (uz toleranciju greške pomičnog zareza).

Zadnja dva argumenta su opcionalna i zadano su 1 i 0.

iffinite

Ako je prvi argument konačan broj, vraća drugi argument, inače treći.

Zadnja dva argumenta su opcionalna i zadano su 1 i 0.

ifgreater

Vraća treći ili četvrti argument ovisno o tome je li prvi argument > drugi.

Usporedba je „fuzzy”. Za preciznu usporedbu koristite ifpositive().

Zadnja dva argumenta su opcionalna i zadano su 1 i 0.

ifgreaterorequal

Kao gore, ali za ≥. Usporedba je „fuzzy”.

Zadnja dva argumenta su opcionalna i zadano su 1 i 0.

ifless

Vraća treći ili četvrti argument ovisno o tome je li prvi argument < drugi.

Usporedba je „fuzzy”.

Zadnja dva argumenta su opcionalna i zadano su 1 i 0.

iflessorequal

Kao gore, ali za ≤. Usporedba je „fuzzy”.

Zadnja dva argumenta su opcionalna i zadano su 1 i 0.

ifnan

Ako je prvi argument NaN, vraća drugi argument, inače treći.

Zadnja dva argumenta su opcionalna i zadano su 1 i 0.

ifpositive

Ako je prvi argument ≥ 0 vraća drugi, inače treći.

Ne koristi toleranciju greške pomičnog zareza.

Zadnja dva argumenta su opcionalna i zadano su 1 i 0.

ifzero

Ako je prvi argument unutar epsilon udaljenosti od nule, vraća drugi argument, inače treći.

Zadnja dva argumenta su opcionalna i zadano su 1 i 0.

index

Omogućuje tretiranje varijabli kao polja s indeksom koji se računa u vrijeme izvođenja. index(foo, 2+3) isto je što i foo5.

Prvi argument mora biti identifikator (ugniježđeni index() nije dopušten).

Drugi argument mora biti cijeli broj ≥ 0.

Ako su prva dva argumenta nevaljana, vraća se NaN.

Treći argument se vraća ako su argumenti valjani, ali referencirana varijabla ne postoji (zadano NaN).

jsround

Koristi JavaScript zaokruživanje (round half prema +∞, preciznost 0). Vidi MDN dokumentaciju.

not

Vraća 1 ako je vrijednost vrlo blizu nuli ili NaN, inače 0.

or

Logički OR nad svim argumentima (može ih biti više od 2).

Short-circuit evaluacija; vraća prvi istinit argument. Za 1 ili 0 koristite bool().

round

Funkcija za zaokruživanje.

Implementira round half away from zero (komercijalno zaokruživanje).

Prima opcionalni drugi argument – broj decimalnih mjesta.

Primjeri:

round(3.125, 2) = 3.13

round(-3.125, 2) = -3.13

xor

Logički isključivo ILI (XOR). Prima točno 2 argumenta. Uvijek vraća 1 ili 0.

switch

Prvi argument uspoređuje se s drugim; ako je ≤, vraća treći.

Inače se uspoređuje sa sljedećim parovima.

Ako nije ≤ nijednom od parnih argumenata:

Ako je broj argumenata paran → vraća zadnji argument

Inače → vraća NaN

Primjer:

Ako je {{{1}}}, tada

switch(foo,2,10,4,20,5,30,7,80,-1) vraća 30.

radiogroup

Vraća vrijednost radio-grupe zadane prvim argumentom (naziv grupe).

Ako nijedan element nije označen → NaN.

Bitovne funkcije

• bitand – bitovni AND (ekvivalent &)
• bitor – bitovni OR (ekvivalent |)
• bitxor – bitovni XOR (ekvivalent ^)
• bitnot – bitovni NOT (ekvivalent ~), prima 1 argument
• bitleftshift – lijevi pomak (<<)
• bitlogicrightshift – logički desni pomak (>>>)
• bitarithrightshift – aritmetički desni pomak (>>)

Ostalo

if

Suprotno od ifzero(). Ako je prvi argument istinit, vraća drugi, inače treći.

getclick

Namijenjena radu s dugmetima (posebno calculator-field-buttonraw i calculator-field-buttondraggable).

Omogućuje implementaciju image map funkcionalnosti.

timer

Provjerava je li ponavljajuće dugme aktivno.

timeriterations

Broj izvršenih iteracija dugmeta.

timertime

Vrijeme proteklo između pritiska dugmeta i posljednje iteracije.

Brojevi

Brojevi mogu biti:

• cijeli brojevi
• decimalni brojevi
• znanstvena notacija

Na primjer: 1, 2.84543, 3.12E6, -5, 3.45×10⁻⁴⁵

Podržane konstante

• Infinity
• -Infinity
• NaN
• pi
• π
• EPSILON
• true (jednako 1)
• false (jednako 0)

Doseg identifikatora (scoping)

Ako se widgeti kalkulatora nalaze unutar elementa s klasom calculator-container, tada su ID-ovi ograničeni (scoped) na taj element. To omogućuje višekratno korištenje istih ID-ova na istoj stranici bez međusobnog ometanja.

Ako element koji definira opseg ima atribut data-calculator-refresh-on-load="true", tada se widgeti kalkulatora osvježavaju pri prvom učitavanju stranice, prije korisničke interakcije.

Napomena: oznake (labels) nisu obuhvaćene opsegom i najvjerojatnije će se povezati s prvim sljedećim elementom u dokumentu koji ima odgovarajući ID.

Primjer:

<div class="calculator-container" data-calculator-refresh-on-load="true">
{{calculator label|for=scopedfield|scopedfield:}} {{calculator|type=text|id=scopedfield|default=3.14}}<br>
Ova formula se ažurira prije korisničke interakcije: {{calculator|type=plain|formula=scopedfield|default=Nema vrijednosti}}
</div>
Ova formula se ne ažurira ni nakon korisničke interakcije jer je u drugom opsegu: {{calculator|type=plain|formula=scopedfield|default=Nema vrijednosti}}

Rezultat:

scopedfield: 3.14
Ova formula se ažurira prije korisničke interakcije: Nema vrijednosti

Ova formula se ne ažurira ni nakon korisničke interakcije jer je u drugom opsegu: Nema vrijednosti

Umjesto izravnog korištenja CSS klasa, možete koristiti i {{Calculator ifenabled}} s parametrom scoped (pogledajte dokumentaciju tog šablona).

Mapiranje

Formule kalkulatora rade isključivo s brojevima. Međutim, možete koristiti mapiranja za pretvaranje brojeva u tekst kada ulaze u sustav ili izlaze iz njega. Ovo omogućuje vrlo ograničen oblik tekstualnog unosa i ispisa.

Mapiranje je JSON objekt koji tekstualne nizove (string) povezuje s brojevima. Ako korisnik unese određeni string s popisa (razlikuju se velika i mala slova, uklanjaju se razmaci), on se pretvara u specificirani broj. Ako se broj ispisuje, provjerava se nalazi li se taj broj u mapiranju.

Mapiranja rade samo s tipovima text, plain i select. Vrijednosti u objektu mapiranja moraju biti JSON brojevi, osim posebnih vrijednosti "default", "NaN", "Infinity" i "-Infinity", koje moraju biti nizovi (stringovi).

Vrijednosti mapiranja su običan tekst — wikitext formatiranje nije dopušteno.

Primjerice:

<div class="calculator-container">
{{calculator label|
	label = Koji operacijski sustav preferiraš?
	|for = os
}}

{{calculator
	|id = os
	|type = text
	|mapping = {
		"Linux": 1,
		"linux": 1,
		"GNU/Linux": 1,
		"gnu/linux": 1,
		"Windows": 2,
		"windows": 2,
		"macOS": 3,
		"MacOS": 3,
		"macos": 3,
		"BSD": 4,
		"bsd": 4,
		"TempleOS": 42,
		"templeos": 42
	}
}}

{{calculator
	|formula = os
	|type = plain
	|mapping = {
		"Nisam čuo za to.": "default",
		"Sloboda i kontrola.": 1,
		"Kompatibilnost prije svega.": 2,
		"Estetika i integracija.": 3,
		"Za prave entuzijaste.": 4,
		"To je već kultni izbor.": 42
	}
}}
</div>

Daje:

Koji operacijski sustav preferiraš?

Onemogućivanje polja

Većina elemenata obrasca zasnovanih na Calculator šablonu mogu se prikazati na stranici u onemogućenom stanju, a to se radi postavljanjem parametra |disabled=true. Ponekad je u obrascima potrebno neko polje omogućiti samo onda kada je ono stvarno potrebno. Na primjer:

1

Odaberite opciju

1

Razlog 1

Razlog 2

Razlog 3

Razlog 4

Ostalo

CSS

Možete koristiti CSS za prilagodbu prikaza, bilo putem TemplateStyles ili definicije stilova u istom retku (inline).

• Za potvrdne okvire (checkbox) i radio dugmad možete koristiti pseudo-selektor :checked. To može biti vrlo korisno u kombinaciji sa susjednim CSS selektorima (~) ili s :has().
• Možete koristiti klase calculator-value-true i calculator-value-false. To je posebno korisno s tipom polja passthru. Primjer pogledajte u {{Calculator-hideifzero}}.
• Možete ciljati atribut data-calculator-field-value. Npr. #calculator-field-fieldidhere[data-calculator-field-value^="3."] odabrat će polje ako je njegova vrijednost ≥ 3.0 i < 4.0.
• Možete koristiti CSS varijable za složenije izračune (samo u inline stilovima).

Neki primjeri:

<div style="border:dotted thick hsl( var(--calculator-color, 30), 100%, 50%);padding: 1em;">
{{calculator label|for=color|Prilagodi boju ruba}}:&nbsp;&nbsp;
{{calculator|id=color|type=range|min=0|max=300|default=30|style=vertical-align: text-bottom}}
</div>

Prilagodi boju ruba:   30

<div class="calculator-container" style="border: solid thin black; padding: 0.5em; margin-top:1em">
Preklapanje slike s koordinatama:
<div class="floatnone noresize" style="position: relative; width: 500px;">
	<div style="position: absolute; left: calc( var(--calculator-x,385)*1px ); bottom: calc( var(--calculator-y,141.7)*1px ); padding: 0;">
		[[Image:Red pog.svg|10px|link=|alt=]]
	</div>
	[[Image:Body_roundness_index_graph.svg|500px|alt=]]
</div>
{{calculator|id=x|formula=((waist-50)/130)*450+20|type=hidden}}
{{calculator|id=y|formula=((height-140)/60)*208+10|type=hidden}}
{{calculator label|for=height|Visina:}} {{calculator|id=height|type=number|size=5|default=178|min=140|max=200}}&thinsp;cm.&nbsp;
{{calculator label|for=waist|Struk:}} {{calculator|id=waist|type=number|size=5|default=155|min=50|max=180}}&thinsp;cm.
</div>

Preklapanje slike s koordinatama:

Visina: 178 cm.  Struk: 155 cm.

Rezervna vrijednost (fallback)

Korisnici kojima je spravica Calculator u postavkama isključena ili imaju onemogućen JavaScript neće vidjeti ulazna polja. Umjesto toga vidjet će samo zadanu (default) vrijednost svakog polja. Uz dobar odabir zadane vrijednosti, to može biti dovoljno.

Na primjer, ako imate '''sin({{calculator|id=sine|type=text|default=0.5|size=4}}π)={{calculator|type=plain|default=1.00|decimals=2|formula=sin(sine*π)|id=sineres}}''' za prikaz sin(0.5π)=1.00, korisnik bez JavaScripta izgubit će interaktivnost, ali će i dalje vidjeti jednadžbu.

Ako želite naprednije rezervne prikaze, možete koristiti CSS klase calculatorgadget-enabled i calculatorgadget-fallback.

<div class="calculatorgadget-enabled" style="display:none">
Ovaj tekst se prikazuje samo ako je gadget uključen.
{{calculator|type=text|size=20|default=100|id=xyz}}
</div>

<div class="calculatorgadget-fallback">
Ovaj tekst se prikazuje samo ako je gadget isključen.
</div>

Alternativno, za to možete koristiti šablon {{Calculator ifenabled}}.

Prilikom korištenja tog šablona uvijek treba provjeriti da li stranica i dalje izgleda ispravno ako gadget nije dostupan. Testirajte prikaz stranice u pregledu za ispis (štampanje), kao i u sigurnom načinu rada (s dodatkom ?safemode=1 na kraju URL-a).

Za testiranje stranice bez JavaScripta također možete koristiti https://bawolff.net/wiki-nojs.htm (za pretragu stranica dodajte sh: kao prefiks).

Najbolje prakse

Calculator šabloni imaju veliku moć, što znači da autor šablona ima veliku odgovornost za izradu kvalitetnih rješenja.

Imajte na umu da se ovi šabloni ne mogu svima prikazati na isti način. Osobe bez JavaScripta ili osobe koje koriste čitače zaslona vjerojatno će imati iskustvo koje znatno odstupa od predviđenog. Treba težiti ekvivalentnom sadržaju ili, ako to nije moguće, barem postupnoj degradaciji funkcionalnosti (graceful degradation) za takve korisnike. U tome može pomoći {{Calculator ifenabled}}. Načelno, većina polja Calculator šablona prikazat će svoju zadanu vrijednost ako JavaScript nije omogućen.

• Uvijek provjerite prikaz stranice u različitim načinima rada:
  • Izgleda li šablon dobro u tamnom načinu rada (dark mode)?
  • Izgleda li šablon dobro s onemogućenim JavaScriptom? (Testirajte dodavanjem ?safemode=1 na kraj URL-a). Imajte na umu da će korisnici mobilne aplikacije možda vidjeti prikaz vrlo sličan onome bez JavaScripta.
  • Izgleda li stranica dobro u pregledu za ispis (štampanje)?
  • Izgleda li stranica dobro na uskim zaslonima, poput onih na mobilnim telefonima? Za prilagodbu prikaza ovisno o širini zaslona možete koristiti media queries unutar TemplateStyles CSS-a.
  • Čita li se šablon ispravno uz pomoć čitača zaslona? (Mnogi su čitači zaslona besplatni i mogu se upotrebiti za testiranje.)
    • Jedna od korisnih mjera za čitače zaslona je postavljanje odgovarajućih vrijednosti za parametre role i aria-live. Time se čitaču zaslona može naznačiti treba li pročitati sadržaj koji se nedavno promijenio. Većina Calculator šablona posjeduje zadanu vrijednost aria-live="polite" (osim tipa passthru koji zadano nema aria-live), ali to možete promijeniti. Ako korisniku sadržaj prikazujete postupno, koristite role="log" kako biste naznačili da se očekuje novi sadržaj. Obavezno postavite aria-live="off" ako Calculator prikazuje podatke koji nisu važni i koji se ne bi trebali automatski čitati pri svakoj promjeni. Više informacija dostupno je na MDN dokumentaciji za 'ARIA Live Regions'.
    • Svaki ulazni widget (polje) treba imati odgovarajući {{Calculator label}}. To je jedna od najvažnijih stvari za pristupačnost. Ako to iz nekog razloga nije moguće ili oznaka nema smisla kada se čita naglas, koristite parametar aria-label kako biste pružili alternativnu oznaku za čitače zaslona.
• Supstitucija elemenata obrasca može uzrokovati preslagivanje (reflow) stranice, što je vizualno neugodno i loše za performanse. Ako je moguće, pokušajte CSS-om postaviti eksplicitnu širinu/visinu kako biste spriječili preslagivanje. To je posebno važno ako se neki Calculator element nalazi blizu početka stranice.

Codex

Wikimedijin stilski priručnik Codex za mnoštvo je elemenata pružio 'CSS-only' verzije, što omogućuje implementaciju istih na podržanim widgetima na Wikipediji (umjesto zadanog stila web-preglednika i/ili operacijskog sustava). Pogledajte: https://doc.wikimedia.org/codex/latest/components/demos/

Svi widgeti u Codex stilu imaju zasebne šablone, koji služe kao omotači šablona Calculator sa zadanom vrijednošću |codex=true. Primjerice, {{Codex label}} se koristi za upotrebu šablona {{Calculator label}} u stilu Codex.

Šablon	Primjer
{{Codex text}}	Tekst oznakeKratki opis
{{Codex radio}}	Ovo je skup opcija Prva opcijaDodatni tekst koji opisuje prvu opciju Druga opcijaDodatni tekst koji opisuje drugu opciju Treća opcija
{{Codex checkbox}}	Prva opcijaDodatni tekst koji opisuje prvu opciju
{{Codex toggle}}	Moj prekidačDodatni tekst koji opisuje prekidač
{{Codex select}}
{{Codex button}}	default progressive destructive default progressive destructive
Također pogledajte kategoriju Codex šabloni

Za više informacija o pojedinom šablonu pogledajte njegovu dokumentaciju (odnosno dokumentaciju šablona na kojem se zasniva).

Argumenti šablona

Za sve tipove

id

ID za ovo polje (u slovima engleskog alfabeta). Koristi se u formulama drugih polja. Mora biti jedinstven na stranici. Može se izostaviti ako se polje ne koristi kao vrijednost u formulama.

default

Početna ili zadana vrijednost.

formula

Formula za izračun ovog polja. Pogledajte § Formula za podržane mogućnosti.

placeholder

Tekst koji se prikazuje svijetlosivom bojom kada nema unosa.

readonly

Postavlja polje samo za čitanje.

size

Veličina ulaznog polja (broj znakova koji stanu u polje).

style

Prilagođeni CSS za element.

class

Dodatna CSS klasa za element.

class-live

CSS klasa koja se dodaje samo ako je spravica aktivna na stranici. Dodaje se nakon obrade widgeta.

aria-live

Kontrolira kako čitači zaslona čitaju ovo polje ako se promijeni dok nije u fokusu. Zadano je "polite" ili "off" ovisno o tipu polja. Može se postaviti na "off" ako želite da čitač zaslona ne čita polje pri svakoj promjeni.

type

Tip polja. Trenutno podržani tipovi su number, text, plain, radio, checkbox, range, select, hidden i passthru.

checkbox	1 vlažno
	0 veliko
hidden	160 Nije vidljivo i ne zauzima prostor. Korisno za međurezultate u formulama.
number	80
passthru	Vrijednost se vizualno ne mijenja, ali se CSS klasa mijenja prema formuli Sam po sebi ne radi ništa, ali se može kombinirati s TemplateStyles; pogledajte {{calculator-hideifzero}} za primjer.
plain	2
radio	1 metrički
	0 imperijalni Pogledajte također: {{Calculator label}}.
text	160
range	160 160
select

Checkbox, hidden, passthru i radio mogu biti korisni u kombinaciji s TemplateStyles CSS-om za skrivanje i prikazivanje polja. Pogledajte {{Indeks tjelesne mase}} (Indeks zaobljenosti tijela/styles.css) i {{Calculator-hideifzero}} za primjere. Također pogledajte odjeljak § Codex iznad za prikaz ovih tipova polja u Codex načinu.

Samo za tipove 'number' i 'range'

max

Maksimalni dopušteni broj (samo za |type=number).

min

Minimalni dopušteni broj (samo za |type=number).

step

Veličina koraka za |type=number i |type=range. Može biti broj ili vrijednost "any".

Samo za radio

name

Označava naziv radio grupe pri upotrebi |type=radio. U jednoj grupi s istim nazivom može biti označeno samo jedno radio polje. U formulama se može koristiti funkcija radiogroup().

Za radio i checkbox

value

Vrijednost ove kontrole (elementa obrasca). Polje dobiva ovu vrijednost kada je označi korisnik (ali ne kada je označena formulom).

checked

Postavlja polje kao označeno po zadanim postavkama. Nadjačava parametar |default=.

Za select

mapping

Stavke u select polju. JSON objekt koji mapira nazive stavki na brojeve. Može imati do dvije razine dubine, npr. { "item1": 1, "item3": 3, "invalid": "NaN", "Group of options": { "suboption": 1.1 } }.

value

Koja stavka je inicijalno odabrana. Slično kao default, ali se ne prikazuje kao fallback za korisnike bez JavaScripta.

Za plain, text i number

decimals

Formatira vrijednost na ovaj broj decimalnih mjesta.

exponential-precision

Formatira vrijednost na zadani broj značajnih znamenki u znanstvenoj notaciji.

precision

Formatira vrijednost na ovaj broj značajnih znamenki.

Za plain i text

NaN-text

Tekst koji se prikazuje umjesto NaN kada rezultat nije broj (radi samo za |type=plain i |type=text).

mapping

Pretvara ulaz i izlaz između stringova i brojeva. Definira se kao JSON objekt, npr. { "item1": 1, "item3": 3, "invalid": "NaN", "fallback string": "default" }.

TemplateData

Ispod je pružena dokumentacija u formatu TemplateData koju koriste Čarobnjak za šablone, Vizualni uređivač i drugi alati.

TemplateData za šablon Calculator

Dodaje Calculator widget na stranicu. Kao u proračunskoj tablici, možete referencirati druge widgete na istoj stranici.

Parametri šablona[Uredi podatke o šablonu]

Parametar		Opis	Vrsta	Status
id	id	ID ovog ulaznog polja. Koristi se za referenciranje u formulama drugih Calculator šablona.	kratak tekst	predloženo
type	type	Tip ulaznog polja. Predložene vrijednosti plain number text radio checkbox passthru hidden range select	kratak tekst	predloženo
formula	formula	Formula za izračun ovog polja. Primjer 3*log(a)	kratak tekst	predloženo
class	class	CSS klase koje se dodaju elementu.	kratak tekst	neobavezno
class-live	class-live	CSS klasa koja se dodaje samo ako je gadget aktivan na stranici.	kratak tekst	neobavezno
decimals	decimals	Formatira vrijednost na zadani broj decimalnih mjesta (samo za type=number ili type=plain). Primjer 2	broj	neobavezno
default	default	Zadana vrijednost ovog polja.	tekst	predloženo
exponential-precision	exponential-precision	Formatira vrijednost na zadani broj značajnih znamenki u znanstvenoj notaciji (samo za type=number ili type=plain). Primjer 2	broj	neobavezno
max	max	Najveća dopuštena vrijednost (samo za type=number).	broj	neobavezno
min	min	Najmanja dopuštena vrijednost (samo za type=number).	broj	neobavezno
name	name	Naziv radio grupe kojoj pripada ovo dugme (samo za type=radio).	kratak tekst	neobavezno
NaN-text	NaN-text	Tekst koji se prikazuje umjesto NaN kada rezultat nije broj (samo za type=plain ili type=text). Samo običan tekst; wikitext nije podržan. Primjer Nevažeći izračun	tekst	neobavezno
placeholder	placeholder	Tekst koji se prikazuje u praznom ulaznom polju.	kratak tekst	neobavezno
precision	precision	Formatira vrijednost na ovaj broj značajnih znamenki u decimalnom zapisu (osim za vrlo velike brojeve) (samo za type=number ili type=plain). Primjer 2	broj	neobavezno
readonly	readonly	Onemogućuje korisnički unos u ulaznom polju. Predložene vrijednosti true false	uvjetni izraz	neobavezno
disabled	disabled	Onemogućuje korisnički unos u polje. Za radio, checkbox i select sprječava interakciju; za ostala polja označava kontrolu kao onemogućenu kada je spravica aktivna.	uvjetni izraz	neobavezno
size	size	Veličina ulaznog polja (koliko znakova stane u polje).	broj	neobavezno
step	step	Veličina inkrementa kojim se povećava vrijednost u type=number polju. Primjer 2.5	broj	neobavezno
style	style	CSS stil koji se primjenjuje na ulazni element.	kratak tekst	neobavezno
aria-describedby	aria-describedby	ID elementa koji opisuje ovaj widget (ali nije njegova oznaka). Koristi se za pristupačnost.	kratak tekst	neobavezno
aria-labelledby	aria-labelledby	ID elementa koji služi kao oznaka za ovaj element. Obično je bolje koristiti šablon {{calculator label}}.	kratak tekst	neobavezno
aria-label	aria-label	Oznaka ovog Calculator widgeta za čitače zaslona i druge softvere za pristupačnost. Obično se umjesto toga koristi {{calculator label}}.	kratak tekst	neobavezno
enterkeyhint	enterkeyhint	Oznaka tipke Enter na virtualnoj tipkovnici mobilnih uređaja. Predložene vrijednosti enter go done next	kratak tekst	neobavezno
inputmode	inputmode	Vrsta virtualne tipkovnice na mobilnim uređajima. Preporučene vrijednosti su text (standardna tipkovnica), decimal (pozitivni broj) i numeric (brojevi). Podržane su i vrijednosti none, tel, search, email i url. Predložene vrijednosti text numeric decimal	kratak tekst	predloženo
mapping	mapping	JSON objekt koji mapira tekstualne nizove na brojeve radi promjene prikaza. Radi samo s type=plain, type=select ili type=text. Vrijednosti moraju biti brojevi, osim stringova "Infinity", "-Infinity", "default" i "NaN". Za type=select može imati dvije razine. Primjer { "jedan": 1, "dva": 2, "ostalo": "default" }	tekst	neobavezno
role	role	ARIA uloga. Pomaže čitaču zaslona da razumije sadržaj. Na primjer: role=alert označava hitnu poruku koju treba odmah pročitati; role=marquee označava sadržaj koji se često mijenja (i ne treba se čitati pri svakoj promjeni); role=log označava sadržaj kojem se dodaju nove stavke (pri čemu se treba obavijestiti korisnika); role=status označava promjenu statusa (pri čemu se treba obavijestiti korisnika). Primjenjuje se samo ako je spravica uključena. Ako koristite ulogu koja ima implicitni aria-live (alert, marquee, log, status), postavite aria-live=inherit kako zadana vrijednost ne bi bila nadjačana.	kratak tekst	neobavezno
aria-atomic	aria-atomic	Ako se sadržaj promijeni, čitač zaslona treba pročitati cijeli sadržaj, a ne samo promijenjeni dio. Predložene vrijednosti true false	kratak tekst	neobavezno
aria-relevant	aria-relevant	Kakve sve promjene sadržaja čitač zaslona treba pročitati.	kratak tekst	neobavezno
aria-live	aria-live	Vrijednost aria-live atributa. Određuje treba li čitač zaslona čitati promjene čak i kada je korisnik fokusiran na nešto drugo. Zadana vrijednost za većinu Calculator widgeta je "polite". Postavite na "inherit" ako ne želite postaviti aria-live atribut. Predložene vrijednosti polite inherit off assertive	kratak tekst	neobavezno
value	value	Za tipove polja radio, checkbox i select. Omogućuje postavljanje zadane vrijednosti obrasca, čak i kada polje nije označeno (checked) po zadanim postavkama. Za razliku od default, ovo se neće prikazati kao fallback za korisnike bez JavaScripta. Napomena: za radio dugmad i checkbox polja vrijednost kontrole bit će rezultat formule ako je postavljena formulom, a ova vrijednost ako je polje označio čovjek.	kratak tekst	neobavezno
checked	checked	Određuje treba li radio dugme ili checkbox biti označen pri učitavanju. Nadjačava parametar default. Za razliku od default, ne utječe na fallback prikaz za korisnike bez JavaScripta.	kratak tekst	neobavezno

Povezano

• {{Calculator/zbirka}} – galerija istaknutih primjera
• „Technology report: New Calculator template brings interactivity at last”, The Signpost (enwiki), januar 2025.

Napomene

Gornja dokumentacija uključena je sa stranice Šablon:Calculator/dok. (uredi | historija)
Možete eksperimentirati na podstranicama /igralište (izradi | dupliraj) i /test (izradi).
Kategorije postavljajte na podstranicu /dok. Pogledajte sve podstranice ovog šablona.