Nový systém šablon v LS3.x
From LimeSurvey Manual
Úvod
Pozor: v předchozích verzích LimeSurvey se soubory, které určují, jak průzkum vypadá a jak je prezentován z hlediska barev, písem, rozvržení a (částečně) chování, nazývaly „šablona“. Na základě nových poznatků se nyní nazývají „motiv“, zatímco šablona je vyhrazena pro ukázkové průzkumy.
Na této stránce se dozvíte, jak:
- Používat nový systém motivů LimeSurvey 3.0.
- Využít dědičnost ke správě vlastních motivů.
- Přidat obrázek do motivu.
- Spravovat možnosti motivu pro vaše průzkumy a skupiny průzkumů.
LimeSurvey 3 přináší zcela nový systém motivů založený na Twig 1.29 a Bootstrapu, který umožňuje dědičnost motivů a možnosti motivů. Zcela odstraňuje starý systém náhradních klíčových slov. Nyní lze tedy upravit 100 % HTML kódu frontendu. Například ve starém systému motivů existovalo klíčové slovo {ASSESSMENTS}, které bylo za běhu nahrazeno HTML kódem hodnocení. Tvůrce motivu neměl možnost tento HTML kód upravit (kromě použití JavaScriptu). Nyní existuje soubor assessments.twig, který obsahuje logiku (napsanou v Twigu) pro generování tohoto HTML. Na těchto stránkách vám vysvětlíme, jak tento nový systém motivů používat.
Úpravy pomocí administračního rozhraní
Seznam motivů
Na administračním panelu je nyní box pro přístup k seznamu motivů:

Seznam je rozdělen do 5 sloupců:
- náhled motivu: jde pouze o obrázek s názvem „preview.png“ v kořenovém adresáři motivu
- „název“ motivu, jak je uveden v manifestu (config.xml v kořenovém adresáři motivu)
- popis motivu: řetězec nastavený v jeho manifestu
- typ motivu: Základní motiv (dodávaný s LimeSurvey), Uživatelský motiv (přidaný do adresáře upload), XML motiv (nenačtený v databázi)
- Rozšiřuje: pokud motiv rozšiřuje jiný motiv, bude zde uveden jeho název
- Některá akční tlačítka:
- Instalovat: načte manifest motivu, přidá jej do databáze a zpřístupní jej k výběru na úrovni průzkumu
- Odinstalovat: odstraní konfigurační záznamy motivu v databázi
- Editor motivu: přesměruje Vás do editoru motivu
- Možnosti motivu: zavede Vás do globální konfigurace možností motivu
Editor motivu
Editor motivu zůstal co nejblíže původnímu. Když tedy otevřete základní motiv, nemůžete jej upravovat. Místo tlačítka „kopírovat“ však nyní máte tlačítko „Rozšířit“.

Stručný přehled konceptu dědičnosti motivů
V LS3 může motiv nově dědit z jiného motivu, tedy může jiný motiv „rozšiřovat“. To znamená, že adresář motivu bude prakticky prázdný a bude obsahovat pouze soubory (pohledy, styly, skripty, zdroje atd.), které se liší od původních. Díky tomu bude snadné vytvořit celou sadu motivů pro různé uživatele, aniž byste museli udržovat velké množství různých motivů. Například: můžete mít vlastní motiv a k němu verzi pro jednu firmu (s jejím logem, stylem, případně odkazem na její web v zápatí atd.), další verzi pro jinou firmu atd. Pokud pak aktualizujete CSS nebo celkové rozvržení svého vlastního motivu, všechny motivy, které z něj dědí, se aktualizují automaticky. Všimněte si, že dědičnost je rekurzivní: motiv může rozšiřovat motiv, který rozšiřuje další motiv atd.
Novinky v uživatelském rozhraní
Chcete-li rozšířit motiv Monochrome v LimeSurvey, přejděte do seznamu motivů a klikněte na tlačítko „Editor motivu“ u motivu Monochrome. Poté klikněte na „Rozšířit“ a potvrďte nový název „extends_monochrome“.
Pokud nyní přejdete do adresáře upload (pomocí správce souborů nebo FTP klienta), uvidíte, že byl vytvořen nový adresář: upload/themes/extends_monochrome Obsahuje soubor XML a adresáře, ale většina adresářů je prázdná. Neobsahuje žádné pohledy, CSS ani JS. Přesto můžete tento motiv vybrat v průzkumu jako běžný motiv a bude vypadat přesně jako motiv Monochrome.

Editor motivu pro motiv extends_monochrome vypadá takto:

Oproti starému editoru motivu není velký rozdíl. Uveďme ty hlavní:
- Klíčové slovo zděděno v seznamu souborů. Znamená, že soubor není v adresáři motivu přítomen a bude použit soubor z původního motivu.

- Hlavní editor ( ACE editor ) zobrazuje obsah vybraného souboru. Soubory neobsahují pouze HTML, CSS nebo JS, ale také příkazy Twig. Tyto příkazy Twig nám umožňují přenést určitou logiku do pohledů motivu, které se dříve nacházely hluboko v jádru a nyní je lze upravovat.

- Proto je nyní v rozbalovacím seznamu v horním menu dostupných více typů obrazovek. Všimnete si stránek jako ‚Seznam průzkumů‘, ‚Načtení‘, ‚Uložení‘, ‚Chyba‘, ‚Registrace‘, ‚Hodnocení‘, ‚Tisk odpovědí‘, které dříve nebyly dostupné nebo je nebylo možné skutečně přizpůsobit.

- Odkaz ‚tip‘ ve spodní části seznamu souborů Vám ukáže, jak přidat obrázek do HTML pomocí Twigu

- Tlačítko ‚Uložit změny‘ se mění na tlačítko Kopírovat do lokálního motivu a uložit změny

Rychlý příklad: přidání obrázku
Tlačítko Kopírovat do lokálního motivu a uložit změny dělá přesně to, co říká: pokud v souboru cokoli upravíte a poté kliknete na toto tlačítko, soubor se zkopíruje do motivu, který upravujete, a Vaše změny se uloží.
Například: klikněte na soubor layout_global.twig, těsně před blok content ( {% block content %}) přidejte text „TEST“ a klikněte na tlačítko. Uvidíte, že popisek souboru se změnil ze „zděděno“ na „lokální“ a tlačítko je nyní jednoduché tlačítko Uložit změny.

Pokud otevřete správce souborů a přejdete do adresáře upload/themes/extends_monochrome/views/, uvidíte, že obsahuje pouze jeden soubor, soubor layout_global.twig, a že se v něm nachází řetězec „TEST“.

Místo přidání náhodného textu nyní přidáme obrázek. Pokud kliknete na odkaz tip, zobrazí se:
Použít obrázek v souboru .twig:
{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Pokud jste si přečetli dokumentaci k Twigu (a v tuto chvíli byste ji již měli mít přečtenou), víte, že {{ function( ) }} vypíše na obrazovku výsledek funkce. Zde je touto funkcí image( ).
Pokud kódu nerozumíte, nelamte si s tím hlavu. Nepotřebujete vědět, jak funguje, ale proč a jak ji používat.
Funkci image() byste měli používat ze dvou důvodů:
- Funkce image prochází motiv a hledá obrázek. Pokud je motiv, na kterém pracujete, rozšířením jiného motivu a Vy lokálně zkopírujete soubor, do kterého jste vložili obrázek, ale tento obrázek se do lokálního motivu nezkopíruje, funkce projde strom dědičnosti motivů a najde, kde se obrázek nachází.
- Využívá správce assetů, takže zlepší výkon Vašeho motivu. Více informací naleznete v dokumentaci Yii Asset Manager: http://www.yiiframework.com/wiki/148/understanding-assets/
Chcete-li tedy do motivu přidat obrázek:
- jednoduše jej nahrajte jako obvykle pomocí nahrávání souborů vpravo a poté jej přidejte na požadované místo v libovolném souboru twig:
{{ image('./files/myfile.png') }}
- Pokud chcete k obrázku přidat alternativní text (pro čtečky obrazovky a ověření HTML), přidejte:
{{ image('./files/myfile.png'), ‘můj alternativní text’ }}
- Pokud chcete přidat atribut class a také id:
{{ image('./files/myfile.png'), ‘můj alternativní text’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}
Některé položky na našem seznamu úkolů
- Dát uživatelům možnost nahrát vlastní soubor náhledu přímo z editoru
- Přidat tlačítko pro smazání lokálního souboru a návrat ke zděděné verzi
- Kopírovat pouze obrázky použité v souborech CSS (jejich uvedením v manifestu jako souborů ke kopírování)
- Připomenout, který motiv ten aktuální rozšiřuje (pokud nějaký)
Možnosti motivu
Další novinkou v LS3 je stránka možností motivu. Jak uvidíme později, tvůrci motivů mohou vytvářet vlastní možnosti a dokonce i vlastní administrační stránku možností. Zde se rychle podíváme, jak funguje stránka možností základních motivů. Chcete-li získat přístup k možnostem motivu na globální úrovni, klikněte v seznamu motivů na „Možnosti motivu“.
Rozšířené možnosti
Když otevřete kartu Možnosti motivu, můžete se rozhodnout upravit buď její Jednoduché možnosti, nebo Rozšířené možnosti. „Rozšířené možnosti“ jsou pouze holý formulář, který vám poskytuje přístup k hlavním konfiguračním polím motivu z databáze. Abyste pochopili, jak funguje, měli byste si přečíst také o souboru XML a o vytvoření motivu od nuly. Je tedy poměrně složitý a určený pro pokročilé uživatele.
Pokud však chcete provést úpravu rozšířených nastavení, klikněte na kartu Rozšířené možnosti.

- Soubory CSS: Soubory CSS, které mají být přidány do šablony;
- Soubory Js: Soubory JS, které mají být přidány do šablony;
- Soubory CSS pro tisk: Soubory CSS, které se načtou při tisku šablony;
- Možnosti: Toto pole obsahuje možnosti (a jejich hodnoty), které mají být předány do zobrazení šablony;
- CssFramework Name: Název CSS frameworku, který se má načíst. Prozatím pouze Bootstrap nebo nic;
- Cssframework Css: V tomto poli můžete základní soubor bootstrap.css nahradit jinou vlastní verzí;
- Cssframework Js: Zde můžete základní soubor boostrap.js nahradit jinou vlastní verzí;
- Balíčky k načtení: V tomto nastavení můžete načíst některé základní balíčky prostředků z LimeSurvey.
Nahoře si všimnete pole pro nahrání, které vám umožňuje nahrát soubor do adresáře souborů motivu. Tyto parametry lze použít ke změně celého vzhledu motivu.
Jednoduché možnosti
Stránka jednoduchých možností pochází ze samotného motivu. Je vytvořena pomocí souboru twig a nějakého javascriptu v adresáři /options daného motivu: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (nefunkční odkaz)

Stránka jednoduchých možností pouze vyplňuje pole formuláře rozšířených možností. Můžete to vidět tak, že zapnete nebo vypnete nastavení na jednoduché stránce a uvidíte, jak se odpovídající pole v rozšířeném formuláři odpovídajícím způsobem změní. Například pokud v jednoduchých možnostech výchozí šablony změníte motiv Bootswatch na „Darkly“ a poté kliknete na záložku rozšířených možností (i bez uložení), uvidíte, že se pole „Cssframework Css“ změnilo z
{"replace": [["css/bootstrap.css","css/flatly.css"]]}
na
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
Zde jsou jednotlivé jednoduché možnosti pro základní motivy:
- Režim Ajax: Má se další stránka načítat pomocí ajaxu (rychlejší), nebo opětovným načtením stránky (lepší pro ladění)
- Obrázek na pozadí: pokud je nastaveno na Ano, načte se obrázek pattern.png (v Master bude nahrazeno výběrem souboru)
- Kontejner v rámečku: pokud je nastaveno na Ne, otázky nebudou uzavřeny v rámečku (můžete tak použít velká pole širší než šířka obrazovky)
- Brandlogo: pokud je nastaveno na ne, v horní liště se zobrazí název průzkumu, jinak můžete vybrat jeden z obrázků v adresáři souborů, který se použije jako logo.
- Animovat tělo: pokud je nastaveno na ano, můžete vybrat jednu z animací, která se použije při načtení těla průzkumu
- Animovat otázku: totéž pro otázky
- Animovat výstrahy: totéž pro výstrahy
- Motiv Bootstrap: zde můžete vybrat motiv Bootstrap, který se načte. Pocházejí z Bootswatch https://bootswatch.com/3/
Knihovna používaná pro animace je animate.css: https://daneden.github.io/animate.css/
Poskytovatel motivu samozřejmě může přidat vlastní knihovnu animací nebo žádnou knihovnu animací nepoužít.
Systém dědičnosti
V předchozí části jsme viděli, že motiv může rozšiřovat jiný motiv. Konfigurace motivu může také dědit z konfigurace jiného motivu. To znamená, že pro daný motiv můžete mít konfiguraci na
- globální úrovni (tu, kterou jsme právě viděli a která je dostupná ze seznamu motivů)
- úrovni skupiny průzkumu
- a poslední na úrovni průzkumu.
Každý parametr na určité úrovni může dědit z vyšší úrovně: dědičnost skupiny průzkumu. Nejprve se podívejme na úroveň skupiny průzkumu.
Na úrovni skupiny průzkumu
Jednou z dalších skvělých novinek v LS3 je systém skupin průzkumu. Nyní můžete vytvářet různé skupiny pro uspořádání svých průzkumů. Chcete-li je zobrazit, přejděte na seznam průzkumů a klikněte na záložku skupin průzkumu:

V tomto seznamu máte dvě akční tlačítka. Pokud je skupina prázdná, můžete ji smazat. Jinak ji můžete vždy upravit. Kliknutím na tlačítko úpravy se dostanete na stránku konfigurace skupiny průzkumu:

Třetí záložka této stránky se nazývá „Možnosti šablony pro tuto skupinu průzkumu“. Pokud na ni kliknete, uvidíte stejný seznam motivů jako v seznamu motivů, s tím rozdílem, že zde je viditelné pouze tlačítko možností (editor motivů je dostupný pouze z hlavního seznamu).
Nyní, pokud kliknete na možnosti výchozí šablony, uvidíte toto:

- Zdědit vše znamená, že veškerá konfigurace bude zděděna z globální úrovně konfigurace.
- Pokud přejdete na stránku Rozšířené možnosti, uvidíte, že všechna pole jsou nastavena na zdědění.
- Pokud v Jednoduchých možnostech kliknete u položky "Zdědit vše" na "Ne", opět uvidíte stránku velmi podobnou stránce globálních možností. Jediný rozdíl je v tom, že každé pole můžete nastavit na ano, ne, nebo zdědit; a každý rozbalovací seznam má hodnotu zdědit'.

Na úrovni průzkumu
Při úpravě průzkumu uvidíte v levém menu novou položku „Možnosti motivu“. Povede vás na stránku možností motivu vybraného pro aktuální průzkum. Najdete zde stejný systém dědičnosti jako u skupiny průzkumu, ale tentokrát zdědit znamená, že nastavení bude zděděno ze skupiny průzkumu, do které průzkum patří.

Příklad použití
Předpokládejme, že používáte jeden motiv pro různé společnosti (A a B). Své oblíbené možnosti nastavíte na globální úrovni (např. ajax zapnutý, animace těla se vsunutím, výstrahy s pulzováním). Poté vytvoříte skupinu průzkumu pro každou společnost: skupinu průzkumu pro společnost A, která bude obsahovat všechny průzkumy této společnosti, a skupinu pro společnost B, která bude obsahovat všechny průzkumy společnosti B. Na této úrovni nastavíte pouze logo a pozadí a ostatní možnosti necháte zdědit. Všechny průzkumy ve skupině A tak budou používat logo společnosti A a všechny průzkumy ve skupině B logo společnosti B. Pro jeden z průzkumů společnosti A můžete použít jiné pozadí podle tématu průzkumu: stačí změnit pozadí v možnostech na úrovni průzkumu. Pokud vám někdo ze společnosti B řekne, že pulzující výstraha je příliš agresivní a dával by přednost něčemu jemnějšímu, například postupnému zobrazení, stačí změnit animaci výstrahy na úrovni skupiny průzkumu B a všechny průzkumy této skupiny budou nyní používat tuto animaci. Pokud společnost A změní své logo, můžete je změnit na úrovni skupiny průzkumu A a všechny průzkumy této skupiny budou používat nové logo.
Časté dotazy k přizpůsobení motivu
Najdete zde odpovědi na některé otázky, které padly na fóru a které vám mohou pomoci s přizpůsobením vašeho motivu.
Úprava CSS/JS: práce se správcem assetů („proč se moje změny neprojeví?“)
Pokud se pokoušíte upravit CSS/JS motivu přímou úpravou kódu ve svém oblíbeném editoru, můžete být překvapeni, že se vaše změny neprojeví.
Od verze 2.50 LS používá správce assetů Yii:
Dokumentace Yii o assetech
Soubory CSS/JS motivu přesune do podadresáře tmp/ s náhodným řetězcem (např. „tmp/1ef64ml/“). Pokud tedy změníte soubor css/js a oznámíte to správci assetů, soubory se zkopírují do nového podadresáře s novým názvem, takže se aktualizuje mezipaměť prohlížeče uživatele a uvidí nové css/js. Jinak by museli vyčistit mezipaměť prohlížeče.
Zde jsou odkazy na CSS v záhlaví, když je správce assetů zapnutý:
Jak vidíte, všechny odkazují na podsložky tmp/.
Zde jsou odkazy na CSS v záhlaví, když je správce assetů vypnutý:
Jak vidíte, ukazují na skutečné soubory motivu.
Při úpravě CSS/JS motivu tedy máte několik možností:
- Můžete použít Editor motivu LS: postará se o správce assetů a o nic se nemusíte starat
- Můžete zapnout režim ladění: vypne správce assetů, takže se volají skutečné soubory css/js vašich motivů (ale pak musíte při každém načtení obnovit mezipaměť prohlížeče)
- Můžete obnovit mezipaměť assetů: v Globální nastavení -> Obecné -> Vyčistit mezipaměť assetů
Použití editoru motivu vám pomůže pochopit architekturu nového systému motivů.
Pokud také upravujete motiv fruity, dávejte pozor na specifičnost CSS: většina definic používá selektor ".fruity" (jednu z tříd elementu body).
Přidání vlastních písem do motivu
Snadný způsob: použití Google Font CDN
Motiv průzkumu Bootswatch používá Google Font CDN. Podívejme se, jak to funguje: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");
Poté se písmo Lato používá pomocí pravidel CSS: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72
body {
...
font-family: "Lato";
...
}
Tímto způsobem můžete ve svém vlastním motivu použít libovolné písmo Google. Měli byste samozřejmě odstranit výběr písma z možností motivu. Smažte tyto řádky v options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230
Použití místního písma
Samozřejmě si také můžete stáhnout soubory písem a používat je z místního serveru místo z Google CDN (lepší pro soukromí). Příklad, jak na to, je naše místní verze písma noto: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css
@font-face {
font-family: 'Noto Sans';
font-weight: 300;
font-style: normal;
src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...
Můžete použít velmi podobnou definici v souboru css svého motivu a poté zkopírovat soubor NotoSans-Regular.ttf do složky css/font-src/ svého motivu.
Poté toto písmo použijte pro body (nebo jakýkoli jiný element) jako výše a odstraňte výchozí výběr písma v možnostech.
Vytvoření vlastního výběru písma v možnostech
Zatím nelze snadno použít základní výběr písma k přidání vlastního písma do možností. Nejprve musíme koncovým uživatelům umožnit nahrávat vlastní balíčky (viz další odstavec: Pohled na výběr písma motivu Fruity)
Postup:
- Přidejte do svého motivu dvě písma (my_custom_font a my_custom_other_font) pomocí CDN nebo místního serveru
- Poté přidejte do souboru CSS dvě nové třídy:
.font-my_custom_font {
font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
font-family: 'my_custom_other_font';
}
- Do souboru XML svého motivu přidejte možnost písma (výchozí bude my_custom_font) :
<options>
....
<font>my_custom_font</font>
</options>
- V souboru option.twig přidejte výběr písma pomocí následujících řádků (zatím netestováno, takže pokud to nebude fungovat, napište na fórum):
<div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'>
<hr/>
</div>
<div class='row action_hide_on_inherit'>
<div class='col-sm-12'>
<div class='panel panel-default'>
<div class='panel-heading'>{{ "My custom fonts" | t }}</div>
<div class='panel-body'>
<div class='form-group row'>
<label for='simple_edit_font' class='control-label'>{{ "Select font:" | t }}</label>
<div class='col-sm-12'>
<select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
{% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Shouldn't this be "theme" in stead of "template"?
{% set fontOptions = fontOptions ~ '<option value = "inherit" > Inherit</option>' %}
{% endif %}
<optgroup label="{{ "My Custom fonts" | t }}">
<option class="font-my_custom_font" value="custom_font" data-font-package="" >Custom</option>
<option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package="" >Other</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
Nyní by si vaši uživatelé měli být schopni vybrat mezi těmito dvěma písmy.
Pohled na výběr písma motivu Fruity
V budoucnu umožníme koncovým uživatelům nahrávat vlastní balíčky prostředků, včetně balíčků písem. Tím bude jakákoli úprava písem velmi snadná.
Pro porozumění balíčkům v Yii:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
Balíčky LimeSurvey jsou definovány v různých souborech. Balíčky písem jsou definovány zde:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Například balíček písma Noto je definován zde:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53
'font-noto' => array(
'devBaseUrl' => 'assets/fonts/',
'basePath' => 'fonts',
'css' => array(
'noto.css',
),
),
Soubor noto.css, který balíček obsahuje, najdete zde:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Všimněte si definice třídy CSS ".font-noto" na jeho konci:
@font-face {
font-family: 'Noto Sans';
...
}
...
.font-noto{
font-family: 'Noto Sans';
}
V motivu Vanilla se písmo Noto používá tak, že se přidá balíček noto a možnost písma se nastaví na noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79
<packages>
....
<add>font-noto</add>
</packages>
<options>
....
<font>noto</font>
</options>
Poté je třída písma pro prvek body definována pomocí této hodnoty:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76
<body class=" ... font-{{ aSurveyInfo.options.font }} ... " ... >
Soubor XML samozřejmě obsahuje pouze výchozí hodnoty konfigurace vašeho motivu. Ve skutečnosti jsou však tyto hodnoty definovány a čteny v databázi (tabulka "template_configuration" (Otázka: "template_" nebo "theme_"?) jako řetězce JSON. Soubor option.js pouze využívá hodnotu výběru písma z jednoduchých možností ke změně hodnoty ve formuláři na kartě pokročilých možností: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174
Jakmile bude dostupná funkce „nahrát balíček prostředků“, bude snadné přidat skript, který prohledá všechny existující balíčky písem a přidá je do výběru.
Přidání možností motivu pro řízení umístění a zobrazení prvků průzkumu
Tento návod ukazuje, jak do odvozeného motivu přidat možnosti pro zobrazení prvků průzkumu na různých místech. V tomto případě vytvoříme možnosti motivu, které zobrazí nadpis průzkumu na dvou různých místech.
Vytvoření vlastního motivu
- Rozšiřte motiv "bootswatch", jak je popsáno výše.
- Zkopírujte custom.css do místního motivu, jak je popsáno výše.
Vytvoření nových možností motivu
- Zkopírujte obsah složky /themes/survey/bootswatch/options/ do /upload/themes/survey/yourThemeName/options/.
- Otevřete soubor /upload/themes/survey/yourThemeName/options/options.twig v editoru a najděte "{# Bootstrap Bootswatch theme #}". Přímo před jeho nadřazený prvek <div class='row'> přidejte toto:
{# Custom survey name in navbar #} <div class='row'> <div class='col-sm-12 col-md-6'> <div class='form-group row'> <label for='simple_edit_options_surveyname1' class='control-label'>Survey name in navbar</label> <div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> Yes </label> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> No </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div> {# Custom survey name below progress bar #} <div class='row'> <div class='col-sm-12 col-md-6'> <div class='form-group row'> <label for='simple_edit_options_surveyname2' class='control-label'>Survey name below progress bar</label> <div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> Yes </label> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> No </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div> - Otevřete soubor /upload/themes/survey/yourThemeName/config.xml a přidejte do bloku "options" dvě položky, aby vypadal takto:
<options> <ajaxmode>on</ajaxmode> ... <surveyname1>on</surveyname1> <surveyname2>on</surveyname2> </options>
- Na obrazovce Možnosti motivu by se vám nyní měly zobrazit dvě nové možnosti, například takto:

- Vytvořte nový adresář /upload/themes/survey/yourThemeName/views/subviews/header/.
- Zkopírujte soubor /themes/survey/vanilla/views/subviews/header/nav_bar.twig do tohoto nového adresáře.
- Otevřete soubor /themes/survey/vanilla/views/subviews/header/nav_bar.twig a najděte "{# Logo option #}". Pod tímto řádkem upravte podmínku IF pro logo/jméno průzkumu tak, aby vypadala takto:
{# Logo option #} {% if( aSurveyInfo.options.brandlogo == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container" {{ aSurveyInfo.attr.navbarbrand }} > {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }} </div> {% endif %} {% if( aSurveyInfo.options.surveyname1 == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }}" {{ aSurveyInfo.attr.navbarbrand }} > {{ aSurveyInfo.name }} </div> {% endif %} - Přidejte něco takového do souboru /upload/themes/survey/yourThemeName/css/custom.css:
.navbar-brand { line-height: 60px; font-size: 32px; }
- Přepněte možnost motivu "Survey name in navbar" na "Ano"
- Měli byste vidět toto:

Upravené zobrazení nadpisu průzkumu pod indikátorem průběhu
- Vytvořte nový adresář /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
- Zkopírujte soubor /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig do tohoto nového adresáře.
- Otevřete soubor /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig a přidejte prvek <h1> pro jméno průzkumu. Měl by vypadat takto:
<div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}> {# Custom survey name #} {% if( aSurveyInfo.options.surveyname2 == "on") %} <h1 class="custom-survey-name">{{ aSurveyInfo.name }}</h1> {% endif %} {# Group Name #} {{ include('./subviews/survey/group_subviews/group_name.twig') }} {# Group Description #} {{ include('./subviews/survey/group_subviews/group_desc.twig') }} {# PRESENT THE QUESTIONS This is the main part. It will render each question for this group #} <!-- PRESENT THE QUESTIONS --> {% for aQuestion in aGroup.aQuestions %} {{ include('./subviews/survey/question_container.twig') }} {% endfor %} <!-- Hidden inputs --> {% if aGroup.show_last_group == true %} <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' /> {% endif %} {% if aGroup.show_last_answer == true %} <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' /> {% endif %} </div>
- Přidejte něco takového do souboru /upload/themes/survey/yourThemeName/css/custom.css:
.navbar-brand { line-height: 60ph1.custom-survey-name { margin: 0; text-align: center; }
- Přepněte možnost motivu "Survey name below progress bar" na "Ano"
- Měli byste vidět toto:

Soubory ke stažení
- Ukázkový rozšířený motiv: Media:Test_survey_names.zip
Vytvoření motivu od nuly
Dokumentace bude brzy doplněna.
Prozatím uvádíme jen několik tipů.
Struktura motivu
Soubory a adresáře
Když vytváříte motiv od nuly, nemusíte dodržovat strukturu souborů a adresářů ani css/js z motivu Vanilla. Povinné css/js přidává jádro systému (v případě potřeby je můžete odstranit).
Jediné soubory, které váš motiv musí obsahovat, jsou soubory rozložení (layout):
- layout_global.twig : vykresluje stránky pro vyplňování průzkumu
- layout_survey_list.twig : vykresluje seznam průzkumů (pokud je tento motiv nastaven jako výchozí)
- layout_errors.twig : používá se k vykreslení chyb, které brání zobrazení průzkumu (chybné ID průzkumu, prázdná skupina v náhledu skupiny atd.)
- layout_user_forms.twig: vykresluje formuláře pro uživatele, například token (respondent průzkumu) a registraci.
- layout_print.twig : používá se k tisku průzkumu do PDF
- layout_printanswers.twig: tisk odpovědí
Obsah těchto souborů i to, které další soubory zahrnují, je zcela na vás. Všechny ostatní soubory a adresáře, které najdete v motivu Vanilla, jsou čistě volitelné – kód si můžete uspořádat podle svého.
Obsah
V souboru layout_global.twig motivu Vanilla uvidíte, že k rozhodnutí o tom, co se zobrazí, používáme proměnnou "include_content". https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115
{% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
{% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}
aSurveyInfo.include_content vám říká, jaká akce se právě provádí: zobrazují se otázky? zobrazuje se výsledek odeslání? zobrazuje se Smazat vše? atd. Jak vidíte, ve Vanille vytváříme pro každou akci jeden soubor, který se zahrne. Pokud tedy chcete znát seznam akcí, stačí se podívat do adresáře views/subviews/content motivu Vanilla a odstranit příponu "twig": https://github.com/LimeSurvey/LimeSurvey/tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content
- clearall.twig
- firstpage.twig
- load.twig
- mainrow.twig
- main.twig
- optin.twig
- optout.twig
- outerframe.twig
- printanswers.twig
- quotas.twig
- register.twig
- save.twig
- submit_preview.twig
- submit.twig
- userforms.twig
Pokud jste již vytvořili motiv pro verze LimeSurvey 2.x, všimnete si, že většina z nich odpovídá starým souborům pstpl z LimeSurvey 2.x. Znovu platí, že ve svém motivu nejste povinni tyto soubory s těmito názvy v tomto adresáři vytvářet. Mohli byste například jednoduše přidat do layout_global.twig obří příkaz switch s požadovaným HTML pro každou akci.
Manifest config.xml
Manifest motivu obsahuje hlavní informace o vašem motivu. Když motiv nainstalujete, obsah manifestu se načte do databáze, a to do dvou různých tabulek: template a template_configuration. Pokaždé, když manifest motivu upravíte, musíte motiv odinstalovat a znovu nainstalovat (nebo jej jen resetovat). Protože je tento postup při vývoji motivu otravný, můžete vynutit přímé použití souboru XML místo záznamů v databázi. Za tím účelem v souboru config.php zapněte režim ladění a nastavte 'force_xmlsettings_for_survey_rendering' na true.
Sekce metadata
Nic složitého: jen hlavní informace o vašem motivu. Budou uloženy do tabulky templates_configuration.
<metadata>
<name>the_name_of_your_theme</name>
<title>The Title of your theme</title>
<creationDate>16/10/2017</creationDate>
<author>Your Name</author>
<authorEmail>your@email.org</authorEmail>
<authorUrl>http://www.yourwebsite.org</authorUrl>
<copyright>Your Copyright </copyright>
<license>Licence of your theme</license>
<version>version of your theme</version>
<apiVersion>3</apiVersion>
<description>Description of your theme</description>
<extends>parent_theme</extends>
</metadata>
Několik poznámek:
- name: použije se jako klíč v databázi. Musí tedy být jedinečné a neměl by obsahovat žádné speciální znaky (ani mezery). Velikost písmen se nebere v úvahu.
- Title: použije se k zobrazení názvu vašeho motivu v různých seznamech. Může obsahovat speciální znaky.
- description: použije se v hlavním seznamu motivů průzkumu. Může obsahovat speciální znaky a dokonce i kód HTML pomocí
- extends: volitelné, určuje nadřazené motivy. Pokud některý soubor (twig/js/css/jpg atd.) v tomto motivu chybí, bude se hledat v nadřazeném motivu.
Sekce files
Tato sekce je důležitá. Bude uložena do tabulky template_configuration, do polí files_css, files_js, files_print_css jako pole JSON.
Např.: sekce files motivu Material Premium:
<files>
<css>
<add>css/bootstrap-material-design.css</add>
<add>css/ripples.min.css</add>
<replace>css/ajaxify.css</replace>
<replace>css/theme.css</replace>
<replace>css/custom.css</replace>
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
</css>
<js>
<replace>scripts/theme.js</replace>
<replace>scripts/ajaxify.js</replace>
<add>scripts/material.js</add>
<add>scripts/ripples.min.js</add>
<replace>scripts/custom.js</replace>
</js>
<print_css>
<add>css/print_theme.css</add>
</print_css>
</files>
Všechny soubory CSS/JS uvedené v této sekci se načtou při spuštění průzkumu (v režimu ajax. Pokud je režim ajax vypnutý, všechny soubory se samozřejmě načítají znovu na každé stránce).
Budou přidány do balíčku Yii Asset Packet pojmenovaného podle motivu. Když je tedy zapnutý Asset Manager (a režim ladění je vypnutý), tyto soubory se zkopírují do adresáře tmp spolu se zbytkem motivu (takže v CSS a JS můžete používat relativní cesty k obrázkům).
O Asset Manageru v Yii: https://www.yiiframework.com/wiki/148/understanding-assets
O balíčcích v Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
Budou využívat systém dědičnosti. To znamená, že pokud do motivu přidáte soubor CSS/JS, ale v motivu se nenachází, systém prohledá všechny nadřazené motivy tohoto motivu a použije první nalezený soubor. Pokud tedy uživatel váš motiv rozšíří pomocí editoru motivů, všechny tyto soubory se zdědí do jeho motivu. Klíčová slova se vztahují k tomuto systému dědičnosti.
- add : přidá soubor do motivu a do všech motivů, které jej dědí
- replace: nahradí soubor nadřazeného motivu
- remove: odstraní soubor z jakéhokoli balíčku, i ze základního balíčku (od verze 3.14)
Několik poznámek k těmto klíčovým slovům:
Tipy k dědičnosti
Jak bylo vysvětleno výše, klíčové slovo „add“ může odkazovat na soubor, který se nachází v jednom z nadřazených motivů. Můžete tedy v této sekci soubor „přidat“, i když tento soubor není ve vašem motivu, ale v jednom z jeho nadřazených motivů. Systém prohledá všechny nadřazené motivy a použije první nalezený soubor. Pokud soubor nenajde, je v konfiguraci zapnutý režim ladění a v globálním nastavení je zapnut ladicí režim frontendového JavaScriptu, upozorní vás na to zpráva v konzoli. Např. pokud do motivu my_theme přidáme: <add>css/unexisting.css</add>, v konzoli uvidíme:
(¯`·._.·(¯`·._.· Theme Configuration Error ·._.·´¯)·._.·´¯)
Can't find file 'css/unexisting.css' defined in theme 'my_theme'Pokud je režim ladění vypnutý, nezobrazí se žádná chyba. Systém chybné příkazy add jednoduše ignoruje.
Kdy použít add, kdy replace a kdy to mohu nechat na nadřazeném motivu?
Za prvé: add a replace jsou ve skutečnosti totéž klíčové slovo. Můžete použít kterékoli z nich, systém provede totéž. Liší se pouze pro lidské čtenáře, aby pochopili váš záměr.
Nemůžete přidat soubor se stejným názvem, jaký má nadřazený motiv: vždy jej nahradí. Např. pokud máte soubor „my_mother_theme/foo.css“ a v podřízeném motivu přidáte soubor „foo.cs“, bude do motivu přidán pouze „daughter_theme/foo.css“. Pokud chcete zachovat „my_mother_theme/foo.css“, zvolte pro „daughter_theme/foo.css“ jiný název, například „daughter_theme/bar.css“. Klíčové slovo „add“ tedy lze použít jako klíčové slovo „replace“.
Pokud vás zajímá proč: díky tomu je mnohem snazší automatické vytváření zděděných motivů, protože kopírování sekce souborů funguje hned bez úprav (není třeba přejmenovávat „add“ na „replace“ při rozšiřování souboru).
Pro přehlednost si vezměme příklad motivu Fruity. Zde je jeho sekce souborů CSS:
<css>
<add>css/variations/sea_green.css</add>
<replace>css/animate.css</replace>
<replace>css/theme.css</replace>
<replace>css/custom.css</replace>
</css>
Pokud se podíváte na soubor custom.css v motivu Fruity, je naprosto stejný jako ve Vanille. Soubor custom.css ve Fruity bychom mohli smazat a načetl by se ten z Vanilly. Mohli bychom také odstranit příkaz <replace>custom.css</replace> z manifestu Fruity, použil by se příkaz z Vanilly a načetl by se soubor custom.css z Vanilly.
Proč tedy v manifestu Fruity používáme příkaz <replace>custom.css</replace>? Odpověď je jednoduchá: chceme, aby koncový uživatel mohl motiv Fruity rozšířit, upravit soubor ve svém lokálním motivu a načíst tento upravený soubor ze svého zděděného motivu. Pro pochopení stačí rozšířit Fruity a prohlédnout si rozšířený motiv. Rozšířený motiv soubor custom.css ani nemá, takže se použije ten z Fruity. Pokud však uživatel tento soubor v rozšířeném motivu vytvoří (kliknutím na „Rozšířit“ v editoru motivu), bude se soubor načítat z jeho motivu.
Obecně tedy platí:
Pokud vytváříte motiv od nuly, který nerozšiřuje žádný jiný motiv, použijte k přidání souborů CSS/JS příkaz add. Jednoduché.
Pokud vytváříte motiv rozšiřující jiný motiv a nechcete, aby uživatelé mohli rozšiřovat soubory CSS/JS z nadřazeného motivu: nepoužívejte ve svém manifestu příkaz add. Soubory se budou stále načítat z konfigurace nadřazeného motivu.
Pokud vytváříte motiv rozšiřující jiný motiv a chcete nahradit soubor z nadřazeného motivu: použijte klíčové slovo replace (klíčové slovo add bude mít stejný výsledek).
Pokud vytváříte motiv rozšiřující jiný motiv, daný soubor CSS/JS nenahrazujete, ale chcete, aby jej uživatelé mohli rozšířit: použijte pro tento soubor ve svém manifestu příkaz „replace“. I když soubor nenahrazujete, použitím klíčového slova replace v manifestu umožníte uživateli to udělat, pokud bude chtít.
Pouze poslední případ vyžaduje trochu mentální gymnastiky, všechny ostatní případy jsou triviální.
Soubory CSS a JS můžete registrovat také přímo z kódu Twig. Tyto soubory se načtou pouze tehdy, když je daný soubor Twig požadován. Pokud chcete, aby uživatelé mohli tyto soubory JS/CSS zdědit z editoru motivu, nezapomeňte použít funkce Template:RegisterTemplateCssFile('my style.css') a Template:RegisterTemplateScript('my script.js'). Pokud tyto funkce nepoužijete, váš motiv může fungovat, ale dědičnost bude narušena. Jde o stejnou logiku jako u funkce Template:Image('my picture.jpg')
Klíčové slovo remove
Klíčové slovo remove je dostupné až od verze 3.14. Pomocí něj můžete odstranit libovolný soubor CSS/JS z libovolného balíčku, dokonce i z balíčků jádra. Používá se v motivu Material Premium k odstranění souborů Awesome Bootstrap Checkbox:
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
Měli byste proto použít přesně stejnou syntaxi jako u souboru v balíčku (např. samotný název „awesome-bootstrap-checkbox.css“ bez cesty ke složce by nefungoval). Kompletní seznam balíčků jádra a jejich souborů najdete v /application/config/packages.php a config/third_party.php. Například pro awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56
'css'=> array(
'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
),
Dalším způsobem, jak zjistit přesný název pro značku remove, je zapnout správce prostředků (asset manager) – vypnutím režimu ladění nebo nastavením 'use_asset_manager'=>true v konfiguraci. Použitelná cesta je pak ta, která následuje hned za náhodným adresářem v adresáři tmp. Například pro awesome-bootstrap-checkbox.css:
<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
Soubory, které byste neměli odstraňovat:
jquery-3.1.1.min.js : nezbytný
jquery-migrate-3.0.0.min.js : nezbytný
survey.js : nezbytný
moment-with-locales.min.js : nezbytný pro typ otázky Datum (a podle všeho i pro některé další)
em_javascript.js : nezbytný pro veškerý JavaScript ExpressionScript
Sekce options
Tato sekce se týká možností vašeho motivu. Slouží k naplnění pole „options“ v tabulce template_configuration ve formě pole JSON.
Další informace
Některé poznámky
POZNÁMKA: pokud upravíte soubor XML motivu, musíte motiv odinstalovat a znovu nainstalovat, aby se změny projevily.
POZNÁMKA: Abyste tomu předešli, můžete vynutit použití XML místo databáze. V souboru config.php zapněte režim ladění a odkomentujte:
'force_xmlsettings_for_survey_rendering' => true, // Uncomment if you want to force the use of the XML file rather than DB (for easy theme development)
Pozor: vše se bude načítat z XML (včetně voleb atd.)
POZNÁMKA: Pokud soubory CSS/JS upravujete ručně (bez použití editoru motivu) a režim ladění je vypnutý, můžete nyní vynutit vyprázdnění prostředků (assets). V části „Globální nastavení“ na kartě „Obecné“ klikněte na tlačítko „Vymazat mezipaměť prostředků“.
POZNÁMKA: Pokud odstraníte sekci
