1
|
|
|
<?php |
2
|
|
|
|
3
|
|
|
declare(strict_types=1); |
4
|
|
|
|
5
|
|
|
namespace Yiisoft\Yii\Bulma; |
6
|
|
|
|
7
|
|
|
use Yiisoft\Html\Html; |
8
|
|
|
use Yiisoft\Html\Tag\A; |
9
|
|
|
use Yiisoft\Html\Tag\Div; |
10
|
|
|
use Yiisoft\Html\Tag\Img; |
11
|
|
|
use Yiisoft\Html\Tag\Span; |
12
|
|
|
use Yiisoft\Widget\Widget; |
13
|
|
|
|
14
|
|
|
/** |
15
|
|
|
* NavBar renders a navbar HTML component. |
16
|
|
|
* |
17
|
|
|
* Any content enclosed between the {@see begin()} and {@see end()} calls of NavBar is treated as the content of the |
18
|
|
|
* navbar. You may use widgets such as {@see Nav} to build up such content. For example, |
19
|
|
|
* |
20
|
|
|
* @link https://bulma.io/documentation/components/navbar/ |
21
|
|
|
*/ |
22
|
|
|
final class NavBar extends Widget |
23
|
|
|
{ |
24
|
|
|
private string $ariaLabel = 'main navigation'; |
25
|
|
|
private array $attributes = []; |
26
|
|
|
private string $autoIdPrefix = 'w'; |
27
|
|
|
private array $brandAttributes = []; |
28
|
|
|
private string $brandImage = ''; |
29
|
|
|
private array $brandImageAttributes = []; |
30
|
|
|
private string $brandText = ''; |
31
|
|
|
private array $brandTextAttributes = []; |
32
|
|
|
private string $brandUrl = '/'; |
33
|
|
|
private string $brandCssClass = 'navbar-brand'; |
34
|
|
|
private array $burgerAttributes = []; |
35
|
|
|
private string $burgerCssClass = 'navbar-burger'; |
36
|
|
|
private string $buttonLinkAriaExpanded = 'false'; |
37
|
|
|
private string $buttonLinkAriaLabelText = 'menu'; |
38
|
|
|
private string $buttonLinkContent = ''; |
39
|
|
|
private string $buttonLinkRole = 'button'; |
40
|
|
|
private string $cssClass = 'navbar'; |
41
|
|
|
private string $itemCssClass = 'navbar-item'; |
42
|
|
|
private string $role = 'navigation'; |
43
|
|
|
|
44
|
|
|
/** |
45
|
|
|
* The ARIA label of the navbar. |
46
|
|
|
* |
47
|
|
|
* @param string $value |
48
|
|
|
* |
49
|
|
|
* @return self |
50
|
|
|
*/ |
51
|
2 |
|
public function ariaLabel(string $value): self |
52
|
|
|
{ |
53
|
2 |
|
$new = clone $this; |
54
|
2 |
|
$new->ariaLabel = $value; |
55
|
2 |
|
return $new; |
56
|
|
|
} |
57
|
|
|
|
58
|
|
|
/** |
59
|
|
|
* The HTML attributes. The following special options are recognized. |
60
|
|
|
* |
61
|
|
|
* @param array $values Attribute values indexed by attribute names. |
62
|
|
|
* |
63
|
|
|
* @return self |
64
|
|
|
* |
65
|
|
|
* {@see Html::renderTagAttributes()} For details on how attributes are being rendered. |
66
|
|
|
*/ |
67
|
1 |
|
public function attributes(array $values): self |
68
|
|
|
{ |
69
|
1 |
|
$new = clone $this; |
70
|
1 |
|
$new->attributes = $values; |
71
|
1 |
|
return $new; |
72
|
|
|
} |
73
|
|
|
|
74
|
|
|
/** |
75
|
|
|
* Returns a new instance with the specified prefix to the automatically generated widget IDs. |
76
|
|
|
* |
77
|
|
|
* @param string $value The prefix to the automatically generated widget IDs. |
78
|
|
|
* |
79
|
|
|
* @return self |
80
|
|
|
*/ |
81
|
1 |
|
public function autoIdPrefix(string $value): self |
82
|
|
|
{ |
83
|
1 |
|
$new = clone $this; |
84
|
1 |
|
$new->autoIdPrefix = $value; |
85
|
1 |
|
return $new; |
86
|
|
|
} |
87
|
|
|
|
88
|
18 |
|
public function begin(): string |
89
|
|
|
{ |
90
|
18 |
|
parent::begin(); |
91
|
18 |
|
return $this->renderNavBar(); |
92
|
|
|
} |
93
|
|
|
|
94
|
|
|
/** |
95
|
|
|
* The HTML attributes of the navbar brand. |
96
|
|
|
* |
97
|
|
|
* @param array $values Attribute values indexed by attribute names. |
98
|
|
|
* |
99
|
|
|
* @return self |
100
|
|
|
* |
101
|
|
|
* {@see Html::renderTagAttributes()} For details on how attributes are being rendered. |
102
|
|
|
*/ |
103
|
2 |
|
public function brandAttributes(array $values): self |
104
|
|
|
{ |
105
|
2 |
|
$new = clone $this; |
106
|
2 |
|
$new->brandAttributes = $values; |
107
|
2 |
|
return $new; |
108
|
|
|
} |
109
|
|
|
|
110
|
|
|
/** |
111
|
|
|
* The CSS class of the brand. |
112
|
|
|
* |
113
|
|
|
* @param string $value The CSS class. |
114
|
|
|
* |
115
|
|
|
* @return self |
116
|
|
|
*/ |
117
|
2 |
|
public function brandCssClass(string $value): self |
118
|
|
|
{ |
119
|
2 |
|
$new = clone $this; |
120
|
2 |
|
$new->brandCssClass = $value; |
121
|
2 |
|
return $new; |
122
|
|
|
} |
123
|
|
|
|
124
|
|
|
/** |
125
|
|
|
* Src of the brand image or empty if it's not used. Note that this param will override `$this->brandText` param. |
126
|
|
|
* |
127
|
|
|
* @param string $value The src of the brand image. |
128
|
|
|
* |
129
|
|
|
* @return self |
130
|
|
|
*/ |
131
|
3 |
|
public function brandImage(string $value): self |
132
|
|
|
{ |
133
|
3 |
|
$new = clone $this; |
134
|
3 |
|
$new->brandImage = $value; |
135
|
3 |
|
return $new; |
136
|
|
|
} |
137
|
|
|
|
138
|
|
|
/** |
139
|
|
|
* The HTML attributes of the brand image. |
140
|
|
|
* |
141
|
|
|
* @param array $values Attribute values indexed by attribute names. |
142
|
|
|
* |
143
|
|
|
* @return self |
144
|
|
|
* |
145
|
|
|
* {@see Html::renderTagAttributes()} For details on how attributes are being rendered. |
146
|
|
|
*/ |
147
|
3 |
|
public function brandImageAttributes(array $values): self |
148
|
|
|
{ |
149
|
3 |
|
$new = clone $this; |
150
|
3 |
|
$new->brandImageAttributes = $values; |
151
|
3 |
|
return $new; |
152
|
|
|
} |
153
|
|
|
|
154
|
|
|
/** |
155
|
|
|
* The text of the brand or empty if it's not used. Note that this is not HTML-encoded. |
156
|
|
|
* |
157
|
|
|
* @param string $value The text of the brand. |
158
|
|
|
* |
159
|
|
|
* @return self |
160
|
|
|
*/ |
161
|
5 |
|
public function brandText(string $value): self |
162
|
|
|
{ |
163
|
5 |
|
$new = clone $this; |
164
|
5 |
|
$new->brandText = $value; |
165
|
5 |
|
return $new; |
166
|
|
|
} |
167
|
|
|
|
168
|
|
|
/** |
169
|
|
|
* The HTML attributes of the brand text. |
170
|
|
|
* |
171
|
|
|
* @param array $values Attribute values indexed by attribute names. |
172
|
|
|
* |
173
|
|
|
* @return self |
174
|
|
|
* |
175
|
|
|
* {@see Html::renderTagAttributes()} For details on how attributes are being rendered. |
176
|
|
|
*/ |
177
|
2 |
|
public function brandTextAttributes(array $values): self |
178
|
|
|
{ |
179
|
2 |
|
$new = clone $this; |
180
|
2 |
|
$new->brandTextAttributes = $values; |
181
|
2 |
|
return $new; |
182
|
|
|
} |
183
|
|
|
|
184
|
|
|
/** |
185
|
|
|
* The URL for the brand's hyperlink tag and will be used for the "href" attribute of the brand link. Default value |
186
|
|
|
* is "/". You may set it to empty string if you want no link at all. |
187
|
|
|
* |
188
|
|
|
* @param string $value |
189
|
|
|
* |
190
|
|
|
* @return self |
191
|
|
|
*/ |
192
|
4 |
|
public function brandUrl(string $value): self |
193
|
|
|
{ |
194
|
4 |
|
$new = clone $this; |
195
|
4 |
|
$new->brandUrl = $value; |
196
|
4 |
|
return $new; |
197
|
|
|
} |
198
|
|
|
|
199
|
|
|
/** |
200
|
|
|
* The HTML attributes of the burger. |
201
|
|
|
* |
202
|
|
|
* @param array $values Attribute values indexed by attribute names. |
203
|
|
|
* |
204
|
|
|
* @return self |
205
|
|
|
* |
206
|
|
|
* {@see Html::renderTagAttributes()} For details on how attributes are being rendered. |
207
|
|
|
*/ |
208
|
2 |
|
public function burgerAttributes(array $values): self |
209
|
|
|
{ |
210
|
2 |
|
$new = clone $this; |
211
|
2 |
|
$new->burgerAttributes = $values; |
212
|
2 |
|
return $new; |
213
|
|
|
} |
214
|
|
|
|
215
|
|
|
/** |
216
|
|
|
* The CSS class of the burger. |
217
|
|
|
* |
218
|
|
|
* @param string $value The CSS class. |
219
|
|
|
* |
220
|
|
|
* @return self |
221
|
|
|
*/ |
222
|
2 |
|
public function burgerCssClass(string $value): self |
223
|
|
|
{ |
224
|
2 |
|
$new = clone $this; |
225
|
2 |
|
$new->burgerCssClass = $value; |
226
|
2 |
|
return $new; |
227
|
|
|
} |
228
|
|
|
|
229
|
|
|
/** |
230
|
|
|
* The ARIA expanded attribute of the button link. |
231
|
|
|
* |
232
|
|
|
* @param string $value |
233
|
|
|
* |
234
|
|
|
* @return self |
235
|
|
|
*/ |
236
|
2 |
|
public function buttonLinkAriaExpanded(string $value): self |
237
|
|
|
{ |
238
|
2 |
|
$new = clone $this; |
239
|
2 |
|
$new->buttonLinkAriaExpanded = $value; |
240
|
2 |
|
return $new; |
241
|
|
|
} |
242
|
|
|
|
243
|
|
|
/** |
244
|
|
|
* The ARIA label text of the button link. |
245
|
|
|
* |
246
|
|
|
* @param string $value |
247
|
|
|
* |
248
|
|
|
* @return self |
249
|
|
|
*/ |
250
|
2 |
|
public function buttonLinkAriaLabelText(string $value): self |
251
|
|
|
{ |
252
|
2 |
|
$new = clone $this; |
253
|
2 |
|
$new->buttonLinkAriaLabelText = $value; |
254
|
2 |
|
return $new; |
255
|
|
|
} |
256
|
|
|
|
257
|
|
|
/** |
258
|
|
|
* The content of the button link. |
259
|
|
|
* |
260
|
|
|
* @param string $value |
261
|
|
|
* |
262
|
|
|
* @return self |
263
|
|
|
*/ |
264
|
2 |
|
public function buttonLinkContent(string $value): self |
265
|
|
|
{ |
266
|
2 |
|
$new = clone $this; |
267
|
2 |
|
$new->buttonLinkContent = $value; |
268
|
2 |
|
return $new; |
269
|
|
|
} |
270
|
|
|
|
271
|
|
|
/** |
272
|
|
|
* The role of the button link. |
273
|
|
|
* |
274
|
|
|
* @param string $value |
275
|
|
|
* |
276
|
|
|
* @return self |
277
|
|
|
*/ |
278
|
2 |
|
public function buttonLinkRole(string $value): self |
279
|
|
|
{ |
280
|
2 |
|
$new = clone $this; |
281
|
2 |
|
$new->buttonLinkRole = $value; |
282
|
2 |
|
return $new; |
283
|
|
|
} |
284
|
|
|
|
285
|
|
|
/** |
286
|
|
|
* The CSS class of the navbar. |
287
|
|
|
* |
288
|
|
|
* @param string $value The CSS class. |
289
|
|
|
* |
290
|
|
|
* @return self |
291
|
|
|
*/ |
292
|
2 |
|
public function cssClass(string $value): self |
293
|
|
|
{ |
294
|
2 |
|
$new = clone $this; |
295
|
2 |
|
$new->cssClass = $value; |
296
|
2 |
|
return $new; |
297
|
|
|
} |
298
|
|
|
|
299
|
|
|
/** |
300
|
|
|
* Returns a new instance with the specified ID of the widget. |
301
|
|
|
* |
302
|
|
|
* @param string $value The ID of the widget. |
303
|
|
|
* |
304
|
|
|
* @return self |
305
|
|
|
*/ |
306
|
2 |
|
public function id(string $value): self |
307
|
|
|
{ |
308
|
2 |
|
$new = clone $this; |
309
|
2 |
|
$new->attributes['id'] = $value; |
310
|
2 |
|
return $new; |
311
|
|
|
} |
312
|
|
|
|
313
|
|
|
/** |
314
|
|
|
* The CSS class of the items navbar. |
315
|
|
|
* |
316
|
|
|
* @param string $value The CSS class. |
317
|
|
|
* |
318
|
|
|
* @return self |
319
|
|
|
*/ |
320
|
2 |
|
public function itemCssClass(string $value): self |
321
|
|
|
{ |
322
|
2 |
|
$new = clone $this; |
323
|
2 |
|
$new->itemCssClass = $value; |
324
|
2 |
|
return $new; |
325
|
|
|
} |
326
|
|
|
|
327
|
|
|
/** |
328
|
|
|
* The role of the navbar. |
329
|
|
|
* |
330
|
|
|
* @param string $value |
331
|
|
|
* |
332
|
|
|
* @return self |
333
|
|
|
*/ |
334
|
2 |
|
public function role(string $value): self |
335
|
|
|
{ |
336
|
2 |
|
$new = clone $this; |
337
|
2 |
|
$new->role = $value; |
338
|
2 |
|
return $new; |
339
|
|
|
} |
340
|
|
|
|
341
|
18 |
|
protected function run(): string |
342
|
|
|
{ |
343
|
18 |
|
return Html::closeTag('nav'); |
344
|
|
|
} |
345
|
|
|
|
346
|
18 |
|
private function renderNavBar(): string |
347
|
|
|
{ |
348
|
18 |
|
$attributes = $this->attributes; |
349
|
18 |
|
Html::addCssClass($attributes, $this->cssClass); |
350
|
|
|
|
351
|
18 |
|
if (!isset($attributes['id'])) { |
352
|
17 |
|
$attributes['id'] = Html::generateId($this->autoIdPrefix) . '-navbar'; |
353
|
|
|
} |
354
|
|
|
|
355
|
18 |
|
$attributes['aria-label'] = $this->ariaLabel; |
356
|
18 |
|
$attributes['role'] = $this->role; |
357
|
|
|
|
358
|
18 |
|
return Html::openTag('nav', $attributes) . PHP_EOL . $this->renderNavBarBrand() . PHP_EOL; |
359
|
|
|
} |
360
|
|
|
|
361
|
18 |
|
private function renderNavBarBrand(): string |
362
|
|
|
{ |
363
|
18 |
|
$brand = ''; |
364
|
18 |
|
$brandImage = ''; |
365
|
|
|
|
366
|
18 |
|
if ($this->brandImage !== '') { |
367
|
2 |
|
$brandImage = Img::tag()->attributes($this->brandImageAttributes)->url($this->brandImage)->render(); |
368
|
2 |
|
$brand = PHP_EOL . A::tag() |
369
|
2 |
|
->class($this->itemCssClass) |
370
|
2 |
|
->content($brandImage) |
371
|
2 |
|
->encode(false) |
372
|
2 |
|
->url($this->brandUrl) |
373
|
2 |
|
->render(); |
374
|
|
|
} |
375
|
|
|
|
376
|
18 |
|
if ($this->brandText !== '') { |
377
|
4 |
|
$brandText = $this->brandText; |
378
|
|
|
|
379
|
4 |
|
if ($brandImage !== '') { |
380
|
1 |
|
$brandText = $brandImage . $this->brandText; |
381
|
|
|
} |
382
|
|
|
|
383
|
4 |
|
if (empty($this->brandUrl)) { |
384
|
1 |
|
$brand = PHP_EOL . Span::tag() |
385
|
1 |
|
->attributes($this->brandTextAttributes) |
386
|
1 |
|
->class($this->itemCssClass) |
387
|
1 |
|
->content($brandText) |
388
|
1 |
|
->render(); |
389
|
|
|
} else { |
390
|
3 |
|
$brand = PHP_EOL . A::tag() |
391
|
3 |
|
->class($this->itemCssClass) |
392
|
3 |
|
->content($brandText) |
393
|
3 |
|
->encode(false) |
394
|
3 |
|
->url($this->brandUrl) |
395
|
3 |
|
->render(); |
396
|
|
|
} |
397
|
|
|
} |
398
|
|
|
|
399
|
18 |
|
$brand .= $this->renderNavBarBurger(); |
400
|
|
|
|
401
|
18 |
|
return Div::tag() |
402
|
18 |
|
->attributes($this->brandAttributes) |
403
|
18 |
|
->class($this->brandCssClass) |
404
|
18 |
|
->content($brand) |
405
|
18 |
|
->encode(false) |
406
|
18 |
|
->render(); |
407
|
|
|
} |
408
|
|
|
|
409
|
|
|
/** |
410
|
|
|
* Renders collapsible toggle button. |
411
|
|
|
* |
412
|
|
|
* @return string the rendering navbar burger link button. |
413
|
|
|
* |
414
|
|
|
* @link https://bulma.io/documentation/components/navbar/#navbar-burger |
415
|
|
|
*/ |
416
|
18 |
|
private function renderNavBarBurger(): string |
417
|
|
|
{ |
418
|
18 |
|
$burgerAttributes = $this->burgerAttributes; |
419
|
18 |
|
if ($this->buttonLinkContent === '') { |
420
|
17 |
|
$this->buttonLinkContent = PHP_EOL . |
421
|
17 |
|
Span::tag()->attributes(['aria-hidden' => 'true'])->render() . PHP_EOL . |
422
|
17 |
|
Span::tag()->attributes(['aria-hidden' => 'true'])->render() . PHP_EOL . |
423
|
17 |
|
Span::tag()->attributes(['aria-hidden' => 'true'])->render() . PHP_EOL; |
424
|
|
|
} |
425
|
|
|
|
426
|
18 |
|
$burgerAttributes['aria-expanded'] = $this->buttonLinkAriaExpanded; |
427
|
18 |
|
$burgerAttributes['aria-label'] = $this->buttonLinkAriaLabelText; |
428
|
18 |
|
$burgerAttributes['role'] = $this->buttonLinkRole; |
429
|
|
|
|
430
|
18 |
|
return PHP_EOL . A::tag() |
431
|
18 |
|
->attributes($burgerAttributes) |
432
|
18 |
|
->class($this->burgerCssClass) |
433
|
18 |
|
->content($this->buttonLinkContent) |
434
|
18 |
|
->encode(false) |
435
|
18 |
|
->render() . PHP_EOL; |
436
|
|
|
} |
437
|
|
|
} |
438
|
|
|
|