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

  1. Komponenttien käyttö on ilmaista.
  2. Kaikki tiedot ovat epävirallisia ja tarkistamattomia.
  3. Palvelun saatavuus ei ole taattu.
  4. 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.

Huom! Komponentit vaativat, että jQuery on aina ladattu ensin. 
<html>
  <header>
      <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>
  </header>
  ...
</html>
Yksinkertaisin tapa on ladata Komponenttien javascript <header>-osassa. 

<html>
  <header>
      <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  </header>
  <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

Huom! Tämä osio pätee kaikkiin taulukoihin.

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
Esimerkki: 
<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.
Esimerkiksi Miesten Superpesiksen runkosarjan lyöjätilaston viiden kärki näyttää tältä: <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.

luokalla.
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.

luokalla.
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.js

Yhteystiedot

Mikko Vartiainen
mvartiainen@gmail.com
Twitter @mvarti