Skip to content

Commit d29249b

Browse files
dakujemdakujem
committed
includes script management example and improved docs
1 parent b101752 commit d29249b

File tree

5 files changed

+223
-1
lines changed

5 files changed

+223
-1
lines changed

‎examples/script-management/@layout.latte‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
6+
<title>{ifset title}{include title|stripHtml} | {/ifset}Nette Sandbox</title>
7+
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="stylesheet" href="{$basePath}/css/style.css">
10+
11+
{*} Select2 styles {*}
12+
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
13+
14+
{block head}{/block}
15+
</head>
16+
17+
<body>
18+
<div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>
19+
20+
<!-- Note: if scripts were placed with the elements inside content block, jQuery calls would fail, jQuery is undefined here -->
21+
22+
{include content}
23+
24+
25+
{block scripts}
26+
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
27+
<script src="https://nette.github.io/resources/js/netteForms.min.js"></script>
28+
29+
{*} Select2 JS library {*}
30+
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
31+
32+
<script src="{$basePath}/js/main.js"></script>
33+
34+
{*} UI Script management dump - after jQuery and other libs have been loaded {*}
35+
{control uiScriptManager}
36+
37+
{/block}
38+
</body>
39+
</html>

‎examples/script-management/ScriptManagerComponent.php‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<?php
2+
3+
4+
namespace Dakujem\Selectoo\Examples;
5+
6+
use Nette\Application\UI\Control;
7+
8+
9+
/**
10+
* An example of a component that prints all the script from a collector to a page.
11+
*
12+
*
13+
* @author Andrej Rypák <xrypak@gmail.com> [dakujem](https://github.com/dakujem)
14+
*/
15+
class Djk_ScriptManagerComponent extends Control
16+
{
17+
/**
18+
* @var UiScriptManager
19+
*/
20+
private $manager;
21+
22+
23+
public function setManager(Dkj_UiScriptManager $manager)
24+
{
25+
$this->manager = $manager;
26+
return $this;
27+
}
28+
29+
30+
/**
31+
* Get all the collected scripts and concatenate them.
32+
* @return string
33+
*/
34+
private function getScriptsAsString(): string
35+
{
36+
return array_reduce($this->manager->getScripts(), function($carry, $script) {
37+
return $carry . $script;
38+
}, '');
39+
}
40+
41+
42+
/**
43+
* Print the scripts.
44+
*/
45+
public function render()
46+
{
47+
echo $this->getScriptsAsString();
48+
}
49+
50+
}

‎examples/script-management/Select2SelectooWithCollectorFactory.php‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<?php
2+
3+
4+
namespace Dakujem\Selectoo\Examples;
5+
6+
use Dakujem\Selectoo\ScriptEngineInterface,
7+
Dakujem\Selectoo\Select2Engine,
8+
Dakujem\Selectoo\Selectoo;
9+
10+
11+
/**
12+
* Example Selectoo factory - all the scripts generated by engines are collected for later use.
13+
*
14+
*
15+
* @author Andrej Rypák <xrypak@gmail.com> [dakujem](https://github.com/dakujem)
16+
*/
17+
class Dkj_Select2SelectooWithCollectorFactory
18+
{
19+
/**
20+
* @var Dkj_UiScriptManager
21+
*/
22+
private $collector;
23+
24+
25+
public function __construct(Dkj_UiScriptManager $uiScriptManager)
26+
{
27+
$this->collector = $uiScriptManager;
28+
}
29+
30+
31+
public function create($label = null, $items = null, $multiChoice = false, $engine = true)
32+
{
33+
$i = new Selectoo($label, $items, $multiChoice);
34+
35+
if ($engine === true) {
36+
$engine = new Select2Engine();
37+
}
38+
if ($engine instanceof ScriptEngineInterface) {
39+
$i->setEngine($engine);
40+
41+
$i->setScriptManagement(function($script) {
42+
43+
// collect the script
44+
$this->collector->addScript($script);
45+
46+
// return null to indicate the Selectoo instance that it should not manage the script by itself
47+
return null;
48+
});
49+
}
50+
51+
return $i;
52+
}
53+
54+
}

‎examples/script-management/UiScriptManager.php‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<?php
2+
3+
4+
namespace Dakujem\Selectoo\Examples;
5+
6+
7+
/**
8+
* UiScriptManager - trivial example of script collector service.
9+
*
10+
*
11+
* @author Andrej Rypák <xrypak@gmail.com> [dakujem](https://github.com/dakujem)
12+
*/
13+
class Dkj_UiScriptManager
14+
{
15+
private $scripts = [];
16+
17+
18+
public function addScript($script)
19+
{
20+
$this->scripts [] = $script;
21+
return $this;
22+
}
23+
24+
25+
public function getScripts(): array
26+
{
27+
return $this->scripts;
28+
}
29+
30+
}

‎readme.md‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,48 @@ Custom engines can easily be created implementing the `ScriptEngineInterface` in
6666
- cascading / dependent inputs
6767

6868

69+
## Configuring Selectoo input
70+
71+
Create a (multi)select box with fixed options
72+
```php
73+
$items = ['a', 'b', 'c', 'd',];
74+
$input = new Selectoo($label, $items, $multiselect);
75+
```
76+
77+
or a (multi)select box with options loaded on demand (lazy loading).
78+
```php
79+
$input = new Selectoo($label, [$repository, 'fetchAll'], $multiselect);
80+
```
81+
82+
An engine can optionally be attached
83+
```php
84+
$input->setEngine(new Select2Engine);
85+
```
86+
87+
and configured.
88+
```php
89+
$input->getEngine()
90+
91+
->placeholder('Select a user', true)
92+
->width('width: 100%', true)
93+
->closeOnSelect(false, true)
94+
95+
;
96+
```
97+
98+
The `Select2Engine` is configured using magic options (or `setOption` method).
99+
The names of the magic methods (or option names) represent the ***Select2* configuration options**.
100+
101+
102+
## Script management
103+
104+
The scripts generated by engines can be post-processed and/or collected by a management routine.
105+
This approach can be used to gather and place the scripts at the end of the page and to solve problems
106+
when writing scripts inside the page and loading jQuery at the end of the HTML file.
107+
108+
See [script-management example](examples/script-management/Select2SelectooWithCollectorFactory.php) for more information.
109+
110+
69111
## Factories
70112

71113
For best reusability I strongly encourage using factories for inputs with more logic,
@@ -78,11 +120,18 @@ See simple examples:
78120
- [example AJAX API loaded input](examples/ajax/UserAjaxSelectooFactory.php)
79121

80122

81-
## Lazy loading / AJAX
123+
## Lazy loading & AJAX
82124

83125
See the [example ajax presenter](examples/ajax/ExamplePresenter.php),
84126
complete with input factory and user repository examples.
85127

128+
Ajax configuration can be very simple:
129+
```php
130+
(new Select2Engine())
131+
->ajax('{url: "' . $link . '", dataType: "json" }')
132+
;
133+
```
134+
86135

87136
## Dependent selections / cascading inputs
88137

0 commit comments

Comments
 (0)