<?php
use Sprout\Helpers\Form;
use Sprout\Helpers\Treenode;
?>
<p>
Lorem ipsum dolor sit amet, <a href="">consectetur adipiscing elit</a>. Nullam at tellus a
turpis congue finibus. Nunc varius ut nulla eget rhoncus. Aliquam ut vulputate
lorem. Donec eget tortor lacinia, imperdiet lorem et, lacinia ipsum. Nullam
volutpat tempus magna, a convallis massa tincidunt eu.
</p>
<p>
Aliquam erat strikethrough ad minim veniam quis nostrud. Notare quam littera
gothica quam nunc putamus parum claram anteposuerit litterarum formas humanitatis
per seacula. Delenit augue duis dolore te feugait nulla facilisi nam liber.
Velit esse <sub>Subscript</sub> consequat <sup>Superscript</sup>, dolore eu feugiat.
</p>
<p>
<small>Small text. Usus legentis in iis qui facit, eorum claritatem Investigationes demonstraverunt. Facilisi nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id. Quod ii legunt saepius claritas est etiam processus dynamicus qui sequitur mutationem. Lobortis nisl ut aliquip ex ea commodo consequat duis autem vel eum iriure dolor in hendrerit.</small>
</p>
<p><img src="http://placehold.it/1200x400" alt=""></p>
<p>
Fusce condimentum massa risus, nec interdum ipsum dictum ut. Sed a venenatis
leo. Cras ut mattis ex, sed gravida velit. Vestibulum vehicula eu ex sed
sollicitudin. Aenean pharetra dignissim convallis. Mauris ac blandit urna, non
congue tortor.
</p>
<h2>Heading 2. Donec ultrices sit amet ligula ut pharetra. Aliquam placerat, metus tristique viverra dignissim.</h2>
<p>
Donec tempus ultrices nibh, sed fringilla dui interdum ac. In vitae leo a magna
facilisis pulvinar id vitae diam. Pellentesque facilisis nisl quis volutpat
convallis.
</p>
<ul>
<li>Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi enim ad minim.</li>
<li>Laoreet dolore magna aliquam erat volutpat ut wisi enim ad.</li>
<li>Iriure dolor in hendrerit, in vulputate velit esse molestie consequat.</li>
<li>Illum dolore eu feugiat nulla facilisis at vero eros et accumsan et! Sed diam nonummy nibh euismod tincidunt ut laoreet.</li>
</ul>
<ol>
<li>Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut wisi enim ad minim.</li>
<li>Laoreet dolore magna aliquam erat volutpat ut wisi enim ad.</li>
<li>Iriure dolor in hendrerit, in vulputate velit esse molestie consequat.</li>
<li>Illum dolore eu feugiat nulla facilisis at vero eros et accumsan et! Sed diam nonummy nibh euismod tincidunt ut laoreet.</ol>
</ol>
<p>
Vivamus ut facilisis diam. Vivamus ultricies risus felis, a ultricies
sapien eleifend vehicula. Cras fringilla eget erat ac egestas. Curabitur elementum
ante in nibh efficitur elementum.
</p>
<table class="table--content-standard">
<thead>
<tr>
<td>heading</td>
<td>heading</td>
<td>heading</td>
<td>a really long heading</td>
<td>heading</td>
<td>heading</td>
</tr>
</thead>
<tbody>
<tr>
<td>Duis sed tincidunt orci.</td>
<td>dignissim magna finibus sit amet</td>
<td>dignissim magna finibus sit amet</td>
<td>
<p>dignissim magna finibus sit amet</p>
<p>2 lines of content here</p>
</td>
<td>dignissim magna finibus sit amet</td>
<td>Metus tristique viverra dignissim</td>
</tr>
<tr>
<td>dignissim magna finibus sit amet</td>
<td>dignissim magna finibus sit amet</td>
<td>dignissim magna finibus sit amet</td>
<td>Aliquam placerat, metus tristique viverra dignissim</td>
<td>dignissim magna finibus sit amet</td>
<td>dignissim magna finibus sit amet</td>
</tr>
<tr>
<td>dignissim magna finibus sit amet</td>
<td>dignissim magna finibus sit amet</td>
<td>efficitur accumsan nibh massa a urna. Ut at quam et erat cursus consequat.</td>
<td>dignissim magna finibus sit amet</td>
<td>dignissim magna finibus sit amet</td>
<td>dignissim magna finibus sit amet</td>
</tr>
</tbody>
</table>
<table class="table--content-standard">
<thead>
<tr>
<td>heading</td>
<td>heading</td>
<td>long heading</td>
</tr>
</thead>
<tbody>
<tr>
<td>Duis sed.</td>
<td>sit amet</td>
<td>magna</td>
</tr>
<tr>
<td>Blarg</td>
<td>
<p>dignissim magna</p>
<p>two lines</p>
</td>
<td>tristique</td>
</tr>
<tr>
<td>dignissim</td>
<td>efficitur</td>
<td>sit amet</td>
</tr>
</tbody>
</table>
<h3>Heading 3. Morbi nisl nibh metus tristique viverra dignissim, nisl massa vestibulum mauris,
efficitur accumsan nibh massa a urna.
</h3>
<p>
Phasellus condimentum pulvinar nulla et venenatis. Pellentesque aliquam nulla neque,
sed dignissim magna finibus sit amet.
</p>
<h4>Heading 4. Metus tristique viverra dignissim, nisl massa vestibulum mauris,
efficitur accumsan nibh massa a urna. Ut at quam et erat cursus consequat.
</h4>
<p>
Duis sed tincidunt orci. Phasellus id dui tempus, congue ex id, gravida ligula.
Donec ultrices sit amet ligula ut pharetra.
Aliquam placerat, metus tristique viverra dignissim, nisl massa vestibulum mauris,
efficitur accumsan nibh massa a urna. Ut at quam et erat cursus consequat.
</p>
<p><strong>An expando without a heading...</strong></p>
<div class="expando">
<p>Tempor cum soluta nobis eleifend option congue nihil: imperdiet doming id quod mazim. Eodem modo typi qui nunc, nobis videntur parum clari fiant sollemnes in.</p>
</div>
<p>
Duis sed tincidunt orci. Phasellus id dui tempus, congue ex id, gravida ligula.
Donec ultrices sit amet ligula ut pharetra.
Aliquam placerat, metus tristique viverra dignissim, nisl massa vestibulum mauris,
efficitur accumsan nibh massa a urna. Ut at quam et erat cursus consequat.
</p>
<h2>A h2 large expando heading, etiam consequat leo a mollis pretium. Aenean pharetra gravida mi.</h2>
<div class="expando">
<p>Duis et ipsum at sapien convallis imperdiet.<br>Sed fermentum condimentum purus, nec viverra nulla vestibulum dictum. Morbi pulvinar mi lectus, non venenatis ligula egestas in. Phasellus a dignissim lacus, eget pharetra odio. Quisque lacinia porttitor volutpat. Suspendisse sodales neque sem, at rutrum tellus dignissim at.</p>
</div>
<h3>A h3 small expando heading. Duis et ipsum at sapien convallis imperdiet nec viverra nulla vestibulum dictum. Morbi pulvinar mi lectus, non venenatis.</h3>
<div class="expando">
<p>Sed fermentum condimentum purus, nec viverra nulla vestibulum dictum. Morbi pulvinar mi lectus, non venenatis ligula egestas in. Phasellus a dignissim lacus, eget pharetra odio. Quisque lacinia porttitor volutpat. Suspendisse sodales neque sem, at rutrum tellus dignissim at.</p>
</div>
<p>Sed fermentum condimentum purus, nec viverra nulla vestibulum dictum. Morbi pulvinar mi lectus, non venenatis ligula egestas in. Phasellus a dignissim lacus, eget pharetra odio. Quisque lacinia porttitor volutpat. Suspendisse sodales neque sem, at rutrum tellus dignissim at.</p>
<div class="highlight">
<h2>A highlight box - this is a h2</h2>
<p>Aliquam erat volutpat. Vestibulum <a href="">nec lobortis</a> mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec dui vitae magna varius sodales.</p>
<p><a class="button" href="">A call to action button</a></p>
<h3>A highlight box - this is a h3</h3>
<p>Aliquam erat volutpat. Vestibulum nec lobortis mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec dui vitae magna varius sodales.</p>
<p><a class="button" href="">A call to action button</a></p>
</div>
<p>Sed fermentum condimentum purus, nec viverra nulla vestibulum dictum. Morbi pulvinar mi lectus, non venenatis ligula egestas in. Phasellus a dignissim lacus, eget pharetra odio. Quisque lacinia porttitor volutpat. Suspendisse sodales neque sem, at rutrum tellus dignissim at.</p>
<div class="highlight--right">
<h4>highlight--right</h4>
<p>Quisque congue pharetra maximus. Aliquam hendrerit tortor metus, nec auctor lacus mollis a. Integer justo quam, vehicula a euismod molestie, imperdiet vitae sapien.</p>
</div>
<p>Vivamus eu lacinia risus. Etiam consequat leo a mollis pretium. Aenean pharetra gravida mi, non fringilla urna bibendum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed tristique consectetur risus, sit amet dictum turpis egestas sed. Pellentesque sed mauris mollis risus sodales hendrerit. Sed ornare velit vitae ante pellentesque bibendum. Fusce molestie consectetur fermentum. Proin a ultricies est.</p>
<div class="highlight--left">
<h4>highlight--left</h4>
<p>Phasellus pharetra dapibus vulputate. Maecenas faucibus urna nec leo consequat sagittis.</p>
</div>
<p>Maecenas mauris nulla, luctus dapibus ante sit amet, iaculis imperdiet dolor. In ac eros et sapien venenatis tincidunt blandit suscipit nulla. Aenean lobortis augue nisl, bibendum volutpat nulla imperdiet eu. Proin sed tempor diam. Aenean malesuada velit nec tincidunt tempus.</p>
<p>Morbi libero dui, euismod ac mattis id, volutpat a urna. Vivamus aliquam ex id arcu efficitur, et tristique est commodo. Suspendisse euismod bibendum lacus, vitae ultricies est vestibulum in. Curabitur et purus nisl. Phasellus a quam egestas, congue sem quis, fringilla leo. Donec eu massa urna.</p>
<p>Pellentesque ipsum diam, condimentum sit amet ipsum non, porta ultrices metus. Vivamus mollis odio sed libero tincidunt, ac efficitur dui accumsan. Curabitur euismod cursus convallis. Maecenas mollis pharetra iaculis. Sed gravida felis sit amet aliquet hendrerit.</p>
<blockquote>
<p>An example of blockquote</p>
<p>Fusce tempor libero quam, et semper sapien scelerisque efficitur. Quisque imperdiet nisl at urna facilisis consectetur. Sed at ullamcorper eros. Nulla luctus, risus id lobortis pellentesque, dui turpis pellentesque dui, in posuere leo leo in nibh. Aliquam ex tortor, fringilla in erat a, pretium malesuada justo.</p>
</blockquote>
<p>Sed ultricies ex eget scelerisque varius. Sed vel eros cursus felis suscipit viverra. Vestibulum sed aliquam enim. Etiam urna risus, interdum ut mattis ac, feugiat vel lacus. Morbi tempus vitae lectus nec pellentesque. Sed pulvinar rutrum erat. Etiam augue dui, tincidunt ac posuere vitae, consectetur in orci.</p>
<blockquote class="blockquote--right">
<p>blockquote--right</p>
<p>Proin et posuere justo. Proin malesuada mollis augue, et dictum dui auctor quis.</p>
</blockquote>
<p>Sed ultricies ex eget scelerisque varius. Sed vel eros cursus felis suscipit viverra. Vestibulum sed aliquam enim. Etiam urna risus, interdum ut mattis ac, feugiat vel lacus. Morbi tempus vitae lectus nec pellentesque. Sed pulvinar rutrum erat. Etiam augue dui, tincidunt ac posuere vitae, consectetur in orci.</p>
<p>In augue ipsum, malesuada quis ipsum at, dictum sollicitudin felis. Maecenas consequat in nisi vel pretium. Sed pulvinar ipsum nunc, at suscipit felis feugiat id. Quisque sit amet dui at dolor tincidunt lacinia eleifend quis magna. Quisque condimentum leo lorem, non aliquet est sollicitudin sed.</p>
<blockquote class="blockquote--left">
<p>blockquote--left</p>
<p>Cras facilisis mi sed tortor dapibus, ac tempor dui sollicitudin. Pellentesque ac turpis sed sapien cursus scelerisque.</p>
</blockquote>
<p>Quisque aliquet fermentum velit, vitae laoreet ex. Duis consequat ultricies posuere. Maecenas fringilla sodales erat nec sagittis.</p>
<p>In augue ipsum, malesuada quis ipsum at, dictum sollicitudin felis. Maecenas consequat in nisi vel pretium. Sed pulvinar ipsum nunc, at suscipit felis feugiat id. Quisque sit amet dui at dolor tincidunt lacinia eleifend quis magna. Quisque condimentum leo lorem, non aliquet est sollicitudin sed.</p>
<p><img class="right" src="http://placehold.it/500x400" alt=""></p>
<p>Sed suscipit justo ut iaculis ullamcorper. Curabitur iaculis, ex vitae aliquam finibus, lacus augue congue magna, quis aliquet lorem tortor quis eros. Mauris ante metus, condimentum et ex in, aliquam finibus nunc. Duis pretium accumsan mi, eu aliquam mi. Duis blandit ante non pulvinar consectetur.</p>
<p>Laoreet dolore magna aliquam erat volutpat ut wisi enim ad. Luptatum zzril delenit augue duis dolore te feugait nulla facilisi nam liber tempor cum soluta nobis. Qui blandit praesent eleifend option congue nihil imperdiet doming id quod mazim placerat facer! Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel eum iriure dolor.</p>
<p>Et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore. Laoreet dolore magna aliquam erat volutpat ut wisi enim ad. Luptatum zzril delenit augue duis dolore te feugait nulla facilisi nam liber tempor cum soluta nobis. Qui blandit praesent eleifend option congue nihil imperdiet doming id quod mazim placerat facer!</p>
<p>Eodem modo typi qui nunc nobis: videntur parum clari fiant sollemnes. Laoreet dolore magna aliquam erat volutpat ut wisi enim ad minim veniam.</p>
<p><a class="button" href="">A lovely call to action button</a></p>
<p><img class="left" src="http://placehold.it/500x400" alt=""></p>
<p>Quisque aliquet fermentum velit, vitae laoreet ex. Duis consequat ultricies posuere. Maecenas fringilla sodales erat nec sagittis.</p>
<p>In augue ipsum, malesuada quis ipsum at, dictum sollicitudin felis. Maecenas consequat in nisi vel pretium. Sed pulvinar ipsum nunc, at suscipit felis feugiat id. Quisque sit amet dui at dolor tincidunt lacinia eleifend quis magna. Quisque condimentum leo lorem, non aliquet est sollicitudin sed.</p>
<p>Sed suscipit justo ut iaculis ullamcorper. Curabitur iaculis, ex vitae aliquam finibus, lacus augue congue magna, quis aliquet lorem tortor quis eros. Mauris ante metus, condimentum et ex in, aliquam finibus nunc. Duis pretium accumsan mi, eu aliquam mi. Duis blandit ante non pulvinar consectetur.</p>
<div class="tinymce-media-iframe">
<iframe src="//www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="314" allowfullscreen="allowfullscreen"></iframe>
</div>
<p>Laoreet dolore magna aliquam erat volutpat ut wisi enim ad. Luptatum zzril delenit augue duis dolore te feugait nulla facilisi nam liber tempor cum soluta nobis. Qui blandit praesent eleifend option congue nihil imperdiet doming id quod mazim placerat facer! Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat duis autem vel eum iriure dolor.</p>
<p>Et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore. Laoreet dolore magna aliquam erat volutpat ut wisi enim ad. Luptatum zzril delenit augue duis dolore te feugait nulla facilisi nam liber tempor cum soluta nobis. Qui blandit praesent eleifend option congue nihil imperdiet doming id quod mazim placerat facer!</p>
<p>Eodem modo typi qui nunc nobis: videntur parum clari fiant sollemnes. Laoreet dolore magna aliquam erat volutpat ut wisi enim ad minim veniam.</p>
<h2>Basic form Elements</h2>
<div class="widget widget-Form widget-hasinfobox orientation-wide">
<form class="forms-form" method="post" action="form/submit/1">
<?php
$form_attributes = [
'Grey + regular (default) elements' => [],
'Grey + small elements' => ['-wrapper-class' => 'small'],
'Grey + large elements' => ['-wrapper-class' => 'large'],
'White + regular' => ['-wrapper-class' => 'white'],
'White + small elements' => ['-wrapper-class' => 'white small'],
'White + large elements' => ['-wrapper-class' => 'white large'],
'Disabled' => ['disabled' => 'disabled'],
];
$dropdown_tree = new Treenode();
$child = new Treenode(['id' => 10, 'name' => 'A']);
$dropdown_tree->children[] = $child;
$child->parent = $dropdown_tree;
foreach ($form_attributes as $label => $attributes) {
echo '<h2>', $label, '</h2>';
Form::nextFieldDetails('Text', false);
echo Form::text('textz', $attributes);
Form::nextFieldDetails('Select', false);
echo Form::dropdown('dropdown', $attributes, [0 => "Lol", 1 => "Rofl", 2 => "Lmao"]);
Form::nextFieldDetails('Select tree', false);
echo Form::dropdownTree('dropdown_tree', $attributes, [
'root' => $dropdown_tree,
'exclude' => [1, 2, 3],
]);
Form::nextFieldDetails('Number', false);
echo Form::number('number', $attributes);
Form::nextFieldDetails('Dollars', false);
echo Form::money('dollars', $attributes);
Form::nextFieldDetails('Range', false);
echo Form
::range('range', $attributes);
Form::nextFieldDetails('Password', false);
echo Form::password('password', $attributes);
Form::nextFieldDetails('Upload', false);
echo Form::upload('upload', $attributes);
Form::nextFieldDetails('Email', false);
echo Form::email('email', $attributes);
Form::nextFieldDetails('Phone', false);
echo Form::phone('phone', $attributes);
Form::nextFieldDetails('Multiline', false);
echo Form::multiline('multiline', $attributes + ['rows' => '5']);
Form::nextFieldDetails('Multiradio', false);
echo Form::multiradio('multiradio', $attributes, ['box1' => "I'm a checkbox", 'box2' => "Don't judge me"]);
Form::nextFieldDetails('Checkbox list', false);
echo Form::checkboxBoolList('checkboxList', $attributes, ['box1' => "I'm a checkbox", 'box2' => "Don't judge me"]);
Form::nextFieldDetails('Richtext', false);
echo Form::richtext('richtext', $attributes);
Form::nextFieldDetails('More text', false);
echo Form::text('textz', $attributes);
Form::nextFieldDetails('Date picker', false);
echo Form::datepicker('datepicker', $attributes);
Form::nextFieldDetails('Date picker with dropdowns', false);
echo Form::datepicker('datepicker_two', $attributes, ['dropdowns' => true]);
Form::nextFieldDetails('Time picker', false);
echo Form::timepicker('timepicker', $attributes);
Form::nextFieldDetails('Date range picker', false);
echo Form::daterangepicker('Depart, Arrive', $attributes);
Form::nextFieldDetails('Date/time range picker', false);
echo Form::datetimerangepicker('Depart,Arrive', $attributes);
Form::nextFieldDetails('Date/time picker', false);
echo Form::datetimepicker('datetimepicker', $attributes);
Form::nextFieldDetails('Colour picker', false);
echo Form::colorpicker('colorpicker', $attributes);
Form::setFieldValue('adults', 3);
Form::nextFieldDetails('Total selector', false);
echo Form::totalselector('totalselector', $attributes, [
'singular' => 'guest',
'plural' => 'guests',
'fields' => [
[
'name' => 'adults',
'label' => 'Adults',
'min' => 1,
'max' => 10
],
[
'name' => 'kids',
'label' => 'Kids & Infants',
'helptext' => '(2-12 yrs <b>only</b>)',
]
]
]);
}
?>
<div class="submit-bar"><input class="button" value="Submit" type="submit"></div>
</form>
</div>