Pesis Live Komponentit
Pesis Live Komponentit ovat pesäpalloaiheisille verkkosivuille tarkoitettuja "web-komponentteja". Komponenteilla voi lisätä mille tahansa web-sivulle esimerkiksi Miesten Superpesiksen sarjataulukon, lyöjätilaston tai etenijätilaston. Komponenttien käyttö ei vaadi ohjelmointia, vain perustiedot html- ja css-tiedostoista riittävät. Komponentteja voi käyttää myös julkaisujärjelmissä (esim. Wordpress tai Joomla) ilman lisäosien asentamista.
Toimintaperiaate
Pesis Live Komponentit on toimivat käyttäjän selaimessa. Web-sivulle lisätään yksi html-tägi per haluttu taulukko sekä yksi javascript tiedosto. Selain hakee pesislive.fi palvelimelta halutun taulukon tiedot ja liitää taulukon html-tägin paikalle.
Taulukot eivät sisällä mitään tyylitietoja ulkoasua varten, joten sivun ylläpitäjän on itse tehtävä tarvitavat tyylitiedot, jotka sopivat sivun ulkoasuun.
Esimerkki
Miesten superpesiksen sarjataulukon lisäämiseksi sivulle tarvitsee vain kaksi riviä html-koodia.
<div class="pesislive-series" data-series="msuper" data-subseries="Runkosarja"></div> <script async src="https://pesislive.fi/api/widgets.js" type="text/javascript"></script>Ensimmäinen rivi vastaa sarjataulukkoa ja seuraava rivi lataa tarvittavan javascript tiedoston. Javascript-tiedosto täytyy ladata vain kerran sivua kohden.
Käyttöehdot
- Komponenttien käyttö on ilmaista.
- Kaikki tiedot ovat epävirallisia ja tarkistamattomia.
- Palvelun saatavuus ei ole taattu.
- Sivut jotka käyttävät Pesis Live Komponentteja toivotaan linkittävän sivulle
https://pesislive.fi
Asennus
Komponentit vaativat javascript-tiedoston lisäämisen sivulle. Javascriptin lisäämiseen on muutamia eri tapoja. Pesis Live Komponentit vaativat jQueryn toimiakseen.
<html> <head> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script async src="https://pesislive.fi/api/widgets.js" type="text/javascript"></script> </head> ... </html>Yksinkertaisin tapa on ladata Komponenttien javascript
<head>
-osassa.
<html> <head> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body> ... <div class="pesislive-series" data-series="msuper" data-subseries="Runkosarja"></div> <script src="https://pesislive.fi/api/widgets.js" type="text/javascript"></script> ... </body> </html>
Javascriptin voi ladata myös missä tahansa kohtaa dokumenttia. Usein on suositeltavaa ladata javascipt-tiedostot mahdollisimman myöhään. Tällöin web-sivun renderöinti käyttäjälle voi alkaa aikaisemmin.
HTML5 API
Sarjatason määrittäminen
Kaikkien taulukoiden sarjataso määritetään samalla tavalla. Sarja määritetään data-series
attribuutilla ja tarkempi sarjavaihe data-subseries
attribuutilla.
data-series
attribuutin arvot on määritelty seuraavassa taulukossa.
data-series | Sarja |
---|---|
msuper | Miesten Superpesis |
nsuper | Naisten Superpesis |
mykkos | Miesten Ykköspesis |
nykkos | Naisten Ykköspesis |
psuper | Poikien Superpesis |
tsuper | Tyttöjen Superpesis |
msuomie | Miesten Suomensarja Etelälohko |
msuomii | Miesten Suomensarja Itälohko |
msuomil | Miesten Suomensarja Länsilohko |
msuomip | Miesten Suomensarja Pohjoislohko |
nsuomie | Naisten Suomensarja Etelälohko |
nsuomii | Naisten Suomensarja Itälohko |
nsuomil | Naisten Suomensarja Länsilohko |
nsuomip | Naisten Suomensarja Pohjoislohko |
Tarkemman sarjavaiheen data-subseries
arvoja seuraavassa taulokossa.
Lisää sarjavaiheita lisätään myöhemmin.
data-subseries | Sarjavaihe |
---|---|
HalliSM | HalliSM |
Runkosarja | Runkosarja |
Seuraava ottelu
Minkä tahansa joukkeen seuraavan ottelun saa näkyviin pesislive-next-game
-komponentilla.
pesislive-next-game
ei määrittele ulkoasua millään tasolla, vaan sen avulla sijoitetaan
seuraavan ottelun tiedot vapaamuotoisesti sivulle itse tehtävään pohjaan.
pesislive-next-game
pohja kirjoitetaan <span> class="pesislive-next-game"</span>
väliin. Tässä span-tagissa valitaan joukkue, jonka seuraava peli halutaan näyttää. Joukkue valitaan
seuraavilla määreillä:
Määre | Selitys |
---|---|
data-team | Joukkueen nimi, kuten bittilähteessä |
data-series | Sarjataso, esim. "msuper". |
data-subseries | Sarjataso, esim. "Runkosarja" |
data-mode | "home", "away" tai "all" |
Saatavilla olevat ottelun tiedot ovat:
Määre | Selitys |
---|---|
pesislive-next-game-home | Kotijoukkueen nimi |
pesislive-next-game-away | Vierasjoukkueen nimi |
pesislive-next-game-date | Ottelun päivämäärä |
pesislive-next-game-time | Ottelun kellonaika |
pesislive-next-game-stadium | Stadionin nimi |
pesislive-next-game-city | Paikkakunta |
pesislive-next-game-result-url | Linkki pelin Pesis Live -sivulle |
<span class="pesislive-next-game" data-team="Sotkamo" data-series="msuper" data-subseries="HalliSM" data-mode="all"> <h2><span class="pesislive-next-game-home"></span></h2> <h2><span class="pesislive-next-game-away"></span></h2> <span class="pesislive-next-game-date"></span> <span class="pesislive-next-game-time"></span> <span class="pesislive-next-game-stadium"></span> <span class="pesislive-next-game-city"></span> </span>
Sarjataulukko
Sarjataulukon tunniste on class="pesislive-series"
luokka. Yksinkertaisin sarjataulukko on
<div class="pesislive-series" data-series="msuper" data-subseries="Runkosarja"></div>
Sarjataulukolla on useita lisämääreitä, joilla voi näyttää järjestysnumeron, juoksumäärän ja pistejakauman.
Määre | Selitys |
---|---|
data-show-order="true" | Näyttää järjestysnumerot. |
data-show-points="true" | Näyttää 3p 2p 1p 0p pistemäärät. Normaalit pisteet näytetään aina. |
data-show-runs="true" | Näyttää tehdyt ja päästetyt juoksut. |
data-highlight="Vuokatti" | Etsii taulukosta halutun sanan ja merkitsee rivin pesislive-table-row-highlight
luokalla ja solun pesislive-table-cell-highlight luokalla.
|
Esimerkiksi Naisten Superpesiksen runkosarjan sarjataulukko tarkemmalla pistejakaumalla ja
järjestysnumeroilla näyttää tältä:
<div class="pesislive-series" data-series="nsuper" data-subseries="Runkosarja"
data-show-order="true" data-show-points="true"></div>
Lyöjätilasto
Lyöjätilaston tunniste on class="pesislive-batter"
luokka. Yksinkertaisin lyöjätilasto on
<div class="pesislive-batter" data-series="msuper" data-subseries="Runkosarja"></div>
Lyöjätilastolla on lisämääreitä, joilla voi näyttää joukkueen ja rajata rivimäärän.
Määre | Selitys |
---|---|
data-limit=5 | Rajaa rivimäärän. Esimerkiksi 5 ensimmäistä riviä. |
data-show-team="true" | Näyttää pelaajan joukkueen omassa sarakkeessa. |
data-hide-games="true" | Piilottaa ottelusarakkeen. |
data-highlight="Vuokatti" | Etsii taulukosta halutun sanan ja merkitsee rivin pesislive-table-row-highlight
luokalla ja solun pesislive-table-cell-highlight luokalla.
|
<div class="pesislive-batter" data-series="msuper" data-subseries="Runkosarja" data-limit=5
data-show-team="true"></div>
Etenijätilasto
Etenijätilaston tunniste on class="pesislive-runner"
luokka. Yksinkertaisin etenijätilasto
on
<div class="pesislive-runner" data-series="msuper" data-subseries="Runkosarja"></div>
Etenijätilastolla on lisämääreitä, joilla voi näyttää joukkueen ja rajata rivimäärän.
Määre | Selitys |
---|---|
data-limit=5 | Rajaa rivimäärän. Esimerkiksi 5 ensimmäistä riviä. |
data-show-team="true" | Näyttää pelaajan joukkueen omassa sarakkeessa. |
data-hide-games="true" | Piilottaa ottelusarakkeen. |
data-highlight="Vuokatti" | Etsii taulukosta halutun sanan ja merkitsee rivin pesislive-table-row-highlight
luokalla ja solun pesislive-table-cell-highlight |
Esimerkiksi Tyttöjen Superpesiksen runkosarjan etenijätilaston viiden kärki näyttää tältä:
<div class="pesislive-runner" data-series="tsuper" data-subseries="Runkosarja" data-limit=5
data-show-team="true"></div>
Joukkuetilasto
Joukkuekohtaisen tilaston tunniste on class="pesislive-team"
luokka. Yksinkertaisin
joukkuetilasto on
<div class="pesislive-team" data-series="msuper" data-subseries="Runkosarja" data-team="Joensuu"></div>. Näytettävä joukkue määritetään
data-team
parametrilla. Joukkueen nimet ovat bittilähteessä
käytössä olevat.
Joukkuetilaston lisämääreet.
Määre | Selitys |
---|---|
data-highlight="Vuokatti" | Etsii taulukosta halutun sanan ja merkitsee rivin pesislive-table-row-highlight
luokalla ja solun pesislive-table-cell-highlight |
data-limit=5 | Rajaa rivimäärän. Esimerkiksi 5 ensimmäistä riviä. |
data-hide-games="true" | Piilottaa ottelusarakkeen. |
data-hide-ly="true" | Piilottaa lyödytsarakkeen |
data-hide-tu="true" | Piilottaa tuodutsarakkeen |
data-hide-kl="true" | Piilottaa kärkilyöntisarakkeen |
data-sort="teho" | Järjestää taulukon valitus sarakkeen mukaan. Arvoksi käy 'ly', 'tu', 'kl' tai 'teho' |
Esimerkiksi Miesten Superpesiksen runkosarjan Joensuun tilastot näyttävät tältä:
<div class="pesislive-team" data-series="msuper" data-subseries="Runkosarja"
data-team="Joensuu"></div>
Edelliset kohtaamiset
Edelliset kohtaamiset listaa nimettyjen joukkueiden edelliset kohtaamiset. Listan tunniste on class="pesislive-games-list-against"
luokka.
Pelejä listataan maksimissaan 5 kappaletta.
Edellisten kohtaamisten määreet.
Määre | Selitys |
---|---|
data-series="msuper" | Sarjataso (pakollinen) |
data-team1="Sotkamo" | Ensimmäisen joukkueen nimi (pakollinen) |
data-team2="Vimpeli" | Toisen joukkueen nimi (pakollinen) |
data-date="2015-02-20" | Päivämäärä jota ennen listattavien otteluiden on oltava. Voi jättää määrittämättä, jolloin käytetään nykyistä päivämäärää |
data-show-date="true" | Näyttää päivämääräsarakkeen (vapaaehtoinen) |
Esimerkkinä Sotkamon ja Vimpelin kohtaamiset.
<div class="pesislive-games-list-against" data-series="msuper" data-show-date="true"
data-team1="Sotkamo" data-team2="Vimpeli" data-date="2015-02-20"></div>
Ottelulista
Ottelulista näyttää valitun joukkuuen kaikki pelit valitusta sarjasta ja sarjavaiheesta. Listan tunniste on class="pesislive-games-list-team"
luokka.
Ottelulistan määreet.
Määre | Selitys |
---|---|
data-series="msuper" | Sarjataso (pakollinen) |
data-subseries="Runkosarja" | Sarjavaihe (pakollinen) |
data-team="Vimpeli" | Joukkueen nimi (pakollinen) |
Esimerkkinä Vimpelin ottelut miesten Superpesiksen runkosarjasta.
<div class="pesislive-games-list-team" data-series="msuper"
data-team="Vimpeli" data-subseries="Runkosarja"></div>
CSS-tyylien määrittäminen
Pesis Live Komponentit eivät sisällä CSS-tyylejä. Taulukoihin on kuitenkin lisätty luokkia joiden avulla CSS-tyylien tekeminen helpottuu.
Taulukoiden rivit on merkitty parillisiksi ja parittomiksi pesislive-table-row-odd
ja
pesislive-table-row-odd
luokilla.
Taulokoiden sarakkeet on numeroitu pesislive-table-column-X
(X on numero) luokilla.
Kaikkiin taulukoihin on merkitty taulukon tyyppi sekä yleinen pesislive-table
tunniste.
Esimerkki: class="pesislive-series-table pesislive-table"
Alla olevassa live-esimerkissä on karkea esimerkki CSS-tiedostosta sekä Pesis Live Komponettien toiminnasta. Voit muuttaa koodia ja näet muutokset heti
Pesis Live api.jsYhteystiedot
mvartiainen@gmail.com
Twitter @mvarti