Změna velikosti písma

Drobečková navigace

CSS blog > Widgety v tiny

Widgety v tiny



Navigace

 

Definice widgetu

Základní definice widgetu je div s nastavením v data-atributech:

 

<div class="ipo-widget" data-widget="{typ}" data-*="{detailní nastavení}">
        {šablona}
</div>

Jednotlivé prvky jsou:

{typ} 
udává typ obsahu (article, notice)
{šablona} 
html šablona pro výpis jednoho příspěvku
{detailní nastavení} 
nastavení pomocí data- atributů

<div> s definicí ve výsledném html nebude.

Šablona

Šablona může obsahovat libovolné html. Navíc může obsahovat makra, které budou nahrazeny za dynamický obsah. Makra mají tvar {{xxx}}. Makra jsou těchto typů:

{{xxx}} 
pro vypsání textu
{{#xxx}}...{{/xxx}} 
blokové makro - bude vypsáno jen pokud pro něj existují data, může být použito pro formátování data

 

Speciální makra

{{#content}}...{{/content}} 
Obsah makra se vykreslí jen pokud byly nalezeny nějaké záznamy.
{{^content}}...{{/content}} 
Obsah makra se vykreslí jen pokud nebyly nalezeny nějaké záznamy.
{{#data}}...{{/data}} 
Obsah bude vykreslen jednou pro každý záznam. Musí se nacházet v #content makru.
{{name}} 
Název zdrojové stránky
{{link}} 
Url zdrojové stránky

 

Formátování data

Pokud se vypisuje datum lze použít makro {{date}}, které vypíše datum ve tvaru dd.mm.rrrr. Pokud je potřeba vypsat datum naformátované jinak je možný zápis {{#date}}formát{{/date}}. Formátovací funkce jsou buď date nebo nebo lze použít následující předdefinované zástupné hodnoty, u kterých funguje i překládání:

  • day-short => út
  • day => Úterý
  • week => 41 týden 2016
  • month-short => říj
  • month-simple => Říjen
  • month => Říjen 2016
  • human-date => 12. července 2016
  • datetime => 14. 10. 2016 9:00
  • time-short => 9:00
  • time => 9:00:00
  • date-short => 14. 10.
  • date => 14. 10. 2016

Příklad: {{#date}}human-date{{/date}}.

Formát strftime (s procenty v hodnotách) je nadále nepodporovaný, po odstranění tohoto formátu ze všech widgetů se nadále nebude na datum překládat.

Typy widgetů

Články z aktualit a blogu (data-widget="article")

  • pouze publikované články
  • řadí se sestupně podle data publikace

Nastavení

data-widget-source 
oid zdrojové stránky
data-widget-count 
maximální počet zobrazených záznamů (výchozí 3, maximum 10)
data-widget-subtype
recent (výchozí) - řazeno sestupně podle data publikování
nearest - články s datem konání dnes nebo v budoucnu, řazeno vzestupně podle data konání
data-widget-tag 
pouze články s požadovaným štítkem

Možná nahrazení

{{title}} 
název
{{introduction}} 
úvodní text
{{text}} 
text příspěvku / aktualita
{{link}} 
odkaz na detail
{{date}} 
datum publikace (d.m.Y)
{{due}} 
datum konání (d.m.Y)
{{endDate}} 
datum ukončení (d.m.Y)
{{#image}}
blok pro úvodní obrázek
{{src}} 
url úvodního obrázku (bez nastavených rozměrů)
{{alt}} 
popis úvodního obrázku

Dokumenty z úřední desky (data-widget="notice")

  • pouze vyvěšené dokumenty (nearchivované)
  • řadí se sestupně podle data přidání

Nastavení

data-widget-source 
oid zdrojové stránky
data-widget-count 
maximální počet zobrazených záznamů (výchozí 3, maximum 10)
data-widget-tag 
pouze oznámení s požadovaným štítkem

Možná nahrazení

{{name}} 
název
{{description}} 
popis
{{link}} 
odkaz na detail
{{added}} 
datum přidání (d.m.Y)

Alba z fotogalerie (data-widget="album")

  • řadí se stejně jako alba ve stránce

Nastavení

data-widget-source 
oid zdrojové stránky
data-widget-count 
maximální počet zobrazených záznamů (výchozí 3, maximum 10)
data-widget-tag 
pouze alba s požadovaným štítkem

Možná nahrazení

{{name}} 
název
{{description}} 
popis
{{link}} 
odkaz na detail
{{created}} 
datum vytvoření (d.m.Y)
{{eventDate}} 
datum konání (d.m.Y)
{{#intro}}
blok pro úvodní obrázek
{{src}} 
url úvodního obrázku (bez nastavených rozměrů)
{{alt}} 
popis úvodního obrázku

Fotky z konkrétního alba (data-widget="photo")

  • řadí se stejně jako fotky v albu

Nastavení

data-widget-source 
oid zdrojové stránky
data-widget-count 
maximální počet zobrazených záznamů (výchozí je celé album)
data-widget-album 
id zdrojového alba

Možná nahrazení

{{name}} 
název alba
{{description}} 
popis alba
{{link}} 
odkaz na detail alba
{{created}} 
datum vytvoření alba (d.m.Y)
{{eventDate}} 
datum konání alba (d.m.Y)
{{#content}
blok jednotlivých fotek
{{src}} 
url fotky (bez nastavených rozměrů)
{{alt}} 
popis fotky

Položky katalogu (data-widget="catalogItem")

  • řazení je stejné jako v nastavení stránky

Nastavení

data-widget-source 
oid zdrojové stránky
data-widget-attribute 
id atributu podle kterého se budou položky filtrovat (ID lze zjistit z URL při editaci atributu)
data-widget-count 
maximální počet zobrazených záznamů (výchozí 3, maximum 10)
data-widget-subtype
reacent (výchozí) - řazeno sestupně podle data přidání
alphabetical - řazeno abecedně A - Z
non-alphabetical - řazeno abecedně Z - A

Možná nahrazení

{{name}} 
název položky
{{description}} 
popis položky
{{introduction}} 
úvodní text položky
{{link}} 
odkaz na detail položky
{{price}}
cena položky s DPH
{{priceWithoutVat}}
cena položky bez DPH
{{#image}}
blok pro úvodní obrázek
{{src}} 
url úvodního obrázku (bez nastavených rozměrů)
{{alt}} 
popis úvodního obrázku
{{#attr-<atributeId>}}
blok pro atributy
{{name}} 
název atributu
{{value}} 
hodnota atributu

 

Položky jídelního lístku (data-widget="menu")

data-widget-source 
oid zdrojové stránky
data-widget-count 
maximální počet zobrazených záznamů (výchozí 3, maximum 10)

Možná nahrazení

{{title}} 
název menu
{{rank}} 
pořadí menu
{{#meal-<pořadí jídla>}}
blok pro jídlo
{{title}} 
název jídla
{{description}} 
popis jídla
{{cost}} 
cena jídla

 

Ukázky

Zdrojová šablona:

<div class="ipo-widget" data-widget="article" data-widget-source="2447987" data-widget-count="5">
     <h2>Nejnovější články ze stránky „{{name}}“</h2>
     {{#content}}
{{#data}} <h3><a href="http://{{link}}">{{title}}</a></h3> <p>{{introduction}}</p> <p>Publikováno: <time datetime="{{#date}}c{{/date}}">{{date}}</time></p> {{/data}} {{/content}} {{^content}}
Žádný aktuální záznam není k dispozici. {{/content}} </div>

Tato šablona vždy zobrazí nadpis a buď seznam článků nebo v případě žádných záznamů zástupný text „Žádný aktuální záznam není k dispozici.“.

 

Zdrojová šablona:

<div class="ipo-widget" data-widget="album" data-widget-source="2885222" data-widget-count="5">
     {{#content}}
          <h2>Nejnovější fotoalba</h2>
          {{#data}}
                {{#intro}}
                        <a href="http://{{link}}"><img class="leftFloat" style="float: left;" src="{{src}}&amp;width=120" alt="{{alt}}"></a>
                {{/intro}}
                <h3><a href="http://{{link}}">{{name}}</a></h3>
                <time datetime="{{#eventDate}}c{{/eventDate}}">{{#eventDate}}j.n.Y{{/eventDate}}</time>
                <p>{{description}}</p>
                <hr class="cleaner">
           {{/data}}
     {{/content}}
</div>

Tato šablona v případě že nebyly nalezeny žádné záznamy nezobrazí nic. Obrázek s odkazem se zobrazí pouze, pokud má galerie úvodní obrázek nastaven.

 

Zdrojová šablona:

<div class="ipo-widget" data-widget="photo" data-widget-album="2" data-widget-source="3171841" data-widget-count="3">
        <h2>„{{name}}“</h2>
        <p>{{description}}</p>
        <p>{{created}}</p>
        <a href="http://{{link}}">detail</a>
        {{#content}}
                {{#data}}
                        <img src="{{src}}&amp;width=120&amp;height=90" alt="{{alt}}">
                {{/data}}
        {{/content}}
        {{^content}} Žádné fotografie nejsou k dispozici. {{/content}}
</div>

Tato šablona se trochu liší od jiných widgetů použitím tagu #content pouze pro samostatné fotky. Tento příklad zobrazí 3 fotky z alba, pokud v albu není žádná fotka, vypíše zástupný text „Žádné fotografie nejsou k dispozici.“.


Kalendář akcí

Po Út St Čt So Ne
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 1 2 3 4