Skip to content

Commit

Permalink
examples: updated bootstrap examples
Browse files Browse the repository at this point in the history
  • Loading branch information
dg committed Nov 6, 2023
1 parent c1794e6 commit f13a4d2
Show file tree
Hide file tree
Showing 8 changed files with 125 additions and 161 deletions.
97 changes: 0 additions & 97 deletions examples/bootstrap2-rendering.php

This file was deleted.

12 changes: 6 additions & 6 deletions examples/bootstrap4-rendering.php
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,20 @@ function makeBootstrap4(Form $form): void
$renderer = $form->getRenderer();
$renderer->wrappers['controls']['container'] = null;
$renderer->wrappers['pair']['container'] = 'div class="form-group row"';
$renderer->wrappers['pair']['.error'] = 'has-danger';
$renderer->wrappers['control']['container'] = 'div class=col-sm-9';
$renderer->wrappers['label']['container'] = 'div class="col-sm-3 col-form-label"';
$renderer->wrappers['control']['container'] = 'div class=col-sm-9';
$renderer->wrappers['control']['description'] = 'span class=form-text';
$renderer->wrappers['control']['errorcontainer'] = 'span class=form-control-feedback';
$renderer->wrappers['control']['errorcontainer'] = 'span class=invalid-feedback';
$renderer->wrappers['control']['.error'] = 'is-invalid';
$renderer->wrappers['error']['container'] = 'div class="alert alert-danger"';

foreach ($form->getControls() as $control) {
$type = $control->getOption('type');
if ($type === 'button') {
$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-secondary');
$usedPrimary = true;

} elseif (in_array($type, ['text', 'textarea', 'select'], true)) {
} elseif (in_array($type, ['text', 'textarea', 'select', 'datetime'], true)) {
$control->getControlPrototype()->addClass('form-control');

} elseif ($type === 'file') {
Expand All @@ -49,7 +49,7 @@ function makeBootstrap4(Form $form): void
$control->getItemLabelPrototype()->addClass('form-check-label');
}
$control->getControlPrototype()->addClass('form-check-input');
$control->getSeparatorPrototype()->setName('div')->addClass('form-check');
$control->getContainerPrototype()->setName('div')->addClass('form-check');
}
}
}
Expand Down Expand Up @@ -98,7 +98,7 @@ function makeBootstrap4(Form $form): void
<meta charset="utf-8">
<title>Nette Forms & Bootstrap v4 rendering example</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
<h1>Nette Forms & Bootstrap v4 rendering example</h1>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<?php

/**
* Nette Forms & Bootstap v3 rendering example.
* Nette Forms & Bootstap v5 rendering example.
*/

declare(strict_types=1);
Expand All @@ -18,40 +18,52 @@
Debugger::enable();


function makeBootstrap3(Form $form): void
function makeBootstrap5(Form $form): void
{
$renderer = $form->getRenderer();
$renderer->wrappers['controls']['container'] = null;
$renderer->wrappers['pair']['container'] = 'div class=form-group';
$renderer->wrappers['pair']['.error'] = 'has-error';
$renderer->wrappers['pair']['container'] = 'div class="mb-3 row"';
$renderer->wrappers['label']['container'] = 'div class="col-sm-3 col-form-label"';
$renderer->wrappers['control']['container'] = 'div class=col-sm-9';
$renderer->wrappers['label']['container'] = 'div class="col-sm-3 control-label"';
$renderer->wrappers['control']['description'] = 'span class=help-block';
$renderer->wrappers['control']['errorcontainer'] = 'span class=help-block';
$form->getElementPrototype()->class('form-horizontal');
$renderer->wrappers['control']['description'] = 'span class=form-text';
$renderer->wrappers['control']['errorcontainer'] = 'span class=invalid-feedback';
$renderer->wrappers['control']['.error'] = 'is-invalid';
$renderer->wrappers['error']['container'] = 'div class="alert alert-danger"';

foreach ($form->getControls() as $control) {
$type = $control->getOption('type');
if ($type === 'button') {
$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-default');
$control->getControlPrototype()->addClass(empty($usedPrimary) ? 'btn btn-primary' : 'btn btn-secondary');
$usedPrimary = true;

} elseif (in_array($type, ['text', 'textarea', 'select'], true)) {
} elseif (in_array($type, ['text', 'textarea', 'select', 'datetime', 'file'], true)) {
$control->getControlPrototype()->addClass('form-control');

} elseif (in_array($type, ['checkbox', 'radio'], true)) {
$control->getSeparatorPrototype()->setName('div')->addClass($type);
if ($control instanceof Nette\Forms\Controls\Checkbox) {
$control->getLabelPrototype()->addClass('form-check-label');
} else {
$control->getItemLabelPrototype()->addClass('form-check-label');
}
$control->getControlPrototype()->addClass('form-check-input');
$control->getContainerPrototype()->setName('div')->addClass('form-check');

} elseif ($type === 'color') {
$control->getControlPrototype()->addClass('form-control form-control-color');
}
}
}


$form = new Form;
$form->onRender[] = 'makeBootstrap3';
$form->onRender[] = 'makeBootstrap5';

$form->addGroup('Personal data');
$form->addText('name', 'Your name')
->setRequired('Enter your name');
->setRequired('Enter your name')
->setOption('description', 'Name and surname');

$form->addDate('birth', 'Date of birth');

$form->addRadioList('gender', 'Your gender', [
'male', 'female',
Expand All @@ -67,6 +79,8 @@ function makeBootstrap3(Form $form): void

$form->addCheckbox('send', 'Ship to address');

$form->addColor('color', 'Favourite colour');

$form->addGroup('Your account');
$form->addPassword('password', 'Choose password');
$form->addUpload('avatar', 'Picture');
Expand All @@ -87,14 +101,12 @@ function makeBootstrap3(Form $form): void
?>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Nette Forms & Bootstrap v3 rendering example</title>
<title>Nette Forms & Bootstrap v5 rendering example</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
<div class="page-header">
<h1>Nette Forms & Bootstrap v3 rendering example</h1>
</div>
<h1>Nette Forms & Bootstrap v5 rendering example</h1>

<?php $form->render() ?>
</div>
34 changes: 26 additions & 8 deletions examples/latte.php
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,36 @@


$form = new Form;
$form->addText('name', 'Your name:')
->setRequired('Enter your name');
$form->addText('name', 'Your name')
->setRequired('Enter your name')
->setOption('description', 'Name and surname');

$form->addPassword('password', 'Choose password:')
->setRequired('Choose your password')
->addRule($form::MinLength, 'The password is too short: it must be at least %d characters', 3);
$form->addDate('birth', 'Date of birth');

$form->addPassword('password2', 'Reenter password:')
->setRequired('Reenter your password')
->addRule($form::Equal, 'Passwords do not match', $form['password']);
$form->addRadioList('gender', 'Your gender', [
'male', 'female',
]);

$form->addCheckboxList('colors', 'Favorite colors', [
'red', 'green', 'blue',
]);

$form->addSelect('country', 'Country', [
'Buranda', 'Qumran', 'Saint Georges Island',
]);

$form->addCheckbox('send', 'Ship to address');

$form->addColor('color', 'Favourite colour');

$form->addPassword('password', 'Choose password');
$form->addUpload('avatar', 'Picture');
$form->addTextArea('note', 'Comment');

$form->addSubmit('submit', 'Send');
$form->addSubmit('cancel', 'Cancel');



if ($form->isSuccess()) {
echo '<h2>Form was submitted and successfully validated</h2>';
Expand Down
28 changes: 0 additions & 28 deletions examples/latte/form-bootstrap3.latte

This file was deleted.

47 changes: 47 additions & 0 deletions examples/latte/form-bootstrap5.latte
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
{* Generic form template for Bootstrap v5 *}

<form n:name=$form>
{* List for form-level error messages *}
<ul class="alert alert-danger" n:ifcontent>
<li n:foreach="$form->ownErrors as $error">{$error}</li>
</ul>

{* Loop over form controls and render each one *}
<div n:foreach="$form->controls as $name => $input"
n:if="!$input->getOption(rendered) && $input->getOption(type) !== hidden"
n:class="mb-3, row, $input->required ? required, $input->error ? is-invalid">

{* Label for the input *}
<div class="col-sm-3 col-form-label">{label $input /}</div>

<div class="col-sm-9">
{* Conditionally render inputs based on their type with appropriate Bootstrap classes *}
{if $input->getOption(type) in [text, select, textarea, datetime, file]}
{input $input class => form-control}

{elseif $input->getOption(type) === button}
{input $input class => "btn btn-primary"}
{while $iterator->nextValue?->getOption(type) === button}
{input $iterator->nextValue class => "btn btn-secondary"}
{do $iterator->next()}
{/while}

{elseif $input->getOption(type) in [checkbox, radio]}
{var $items = $input instanceof Nette\Forms\Controls\Checkbox ? [''] : $input->getItems()}
<div class="form-check" n:foreach="$items as $k => $v">
{input $input:$k class => form-check-input}{label $input:$k class => form-check-label /}
</div>

{elseif $input->getOption(type) === color}
{input $input class => "form-control form-control-color"}

{else}
{input $input}
{/if}

{* Display input-level errors or descriptions, if present *}
<span class=invalid-feedback n:ifcontent>{$input->error}</span>
<span class=form-text n:ifcontent>{$input->getOption(description)}</span>
</div>
</div>
</form>
12 changes: 11 additions & 1 deletion examples/latte/form.latte
Original file line number Diff line number Diff line change
@@ -1,15 +1,25 @@
{* Generic form template *}

<form n:name=$form>
{* List for form-level error messages *}
<ul class=error n:ifcontent>
<li n:foreach="$form->ownErrors as $error">{$error}</li>
</ul>

<table>
{* Loop over form controls and render each one *}
<tr n:foreach="$form->controls as $input"
n:if="!$input->getOption(rendered) && $input->getOption(type) !== hidden"
n:class="$input->required ? required">

<th>{label $input /}</th>
<td>{input $input} <span class=error n:ifcontent>{$input->error}</span></td>

<td>
{input $input}

<span class=info n:ifcontent>{$input->getOption(description)}</span>
<span class=error n:ifcontent>{$input->error}</span>
</td>
</tr>
</table>
</form>

0 comments on commit f13a4d2

Please sign in to comment.