Zkrášlujte formulářové prvky, snadno pomocí setOption
Mám rád, když zjistím něco nového. Ten pocit dočasného prozření, že jsem něco nědělal úplně správně.
Objevil jsem Ameriku v podobě "setOption()". Snažím se s pomocí JavaScriptu sem tam zlepšit ovládání nějakých klasických prvků. Tak si vemte třeba klasický input type password. Standardně velmi "nudný" formulářový prvek. Co ho tak okořenit o možnost vygenerovat náhodné heslo, zobrazit sílu zadaného hesla, nebo si místo hvězdiček nechat zobrazit heslo v čitelné podobě.
Do včerejška jsem tyto "zlepšováky" řešil pomocí css tříd nebo data atributů. Dnes je vše jinak. Již po několikáté jsem se spálil s používáním Nette Html Elementu. Nevím proč, asi to je tím, že tuto třídu zas tak aktivně nepoužívám a žiju si ve světe, kde druhý řádek vrátí hodnotu. Ale tak to není https://api.nette.org/2.4/Nette.Utils.Html.html#_data, asi zlozvyk z jQuery světa https://api.jquery.com/data/.
1
$htmlElement->data('generator', TRUE);
2
$htmlElement->data('generator'); // vrací Html Element, nikoliv hodnotu data-generator
Copied!
1
$input = $form->addPassword('password', "Password:")->getControlPrototype();
2
$input->data('generator', 'init');
3
$input->data('strength', 'init');
4
$input->data('switcher', 'init');
Copied!
No když se na to kouknete tak je to takové ... makové ;-) No a teď se podíváme na "ameriku" setOption()
1
$form->addTextarea('content', "Content:")
2
->setOption('generator', TRUE)
3
->setOption('strength', TRUE)
4
->setOption('switcher', TRUE);
Copied!
Prostě lahoda pro oči ;-)
V šabloně se kód také píše lépe. Z původního:
1
{if isset($input->control->attrs['data-generator'])}...{/if}
Copied!
a nová verze
1
{if $input->getOption('generator')}...{/if}
Copied!
K čemu to třeba používám? Tak třeba náhled obrázku u input file, nebo pro nápovědu, co by prvek měl obsahovat. Fantazii se meze nekladou.
No a jako další krok vidím směr vlastních formulářových prvků. Tak se pak rád podělím o zkušenosti.
PS: takhle pak může vypadat šablona
1
<div class="form-field">
2
{label $input class=>"label--main"}
3
4
{input $input}
5
6
{if $input->getOption('generator')}
7
<a class="generator" href="#">generate</a>
8
{/if}
9
{if $input->getOption('strength')}
10
<div class="strength">strength: <span class="indicator">...</span></div>
11
{/if}
12
{if $input->getOption('forgot')}
13
{if $input->getOption('loginCounter') > 2}
14
<a n:href="Recovery:" class=”huge”>Forgot password?</a>
15
{else}
16
<a n:href="Recovery:" class=”small”>Forgot password?</a>
17
{/if}
18
{/if}
19
</div>
Copied!
Last modified 11mo ago
Copy link