Skip to content

Commit 2de4815

Browse files
VitexusVitexus
committed
Add LangSelect and LangLinks widgets for Bootstrap 5
- Added LangSelect: Bootstrap 5 dropdown-based language selector - Added LangLinks: Bootstrap 5 navigation-style language selector - Both widgets integrate with Ease\Locale for internationalization - Updated data attributes for Bootstrap 5 (data-bs-toggle, etc.) - Added LanguageSelect.php example demonstrating both widgets - Includes Bootstrap 5 specific features like nav-underline style - Updated README.md with detailed documentation - Updated debian/changelog for version 1.4.1
1 parent e382f87 commit 2de4815

5 files changed

Lines changed: 397 additions & 4 deletions

File tree

‎Examples/LanguageSelect.php‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<?php
2+
3+
/**
4+
* EasePHP TWBootstrap5 Widgets - Language Selector Examples
5+
*
6+
* @author Vítězslav Dvořák <info@vitexsoftware.cz>
7+
* @copyright 2024 Vitex Software
8+
*/
9+
10+
require_once '../vendor/autoload.php';
11+
12+
// Initialize locale with available languages
13+
$locale = \Ease\Locale::singleton('cs_CZ', '../i18n/', 'ease-twbootstrap5-widgets');
14+
15+
// Create page
16+
$oPage = new \Ease\TWB5\WebPage('Language Selector Widgets - Bootstrap 5');
17+
18+
// Add Bootstrap container
19+
$container = $oPage->addItem(new \Ease\Html\DivTag(null, ['class' => 'container mt-5']));
20+
21+
// Page title
22+
$container->addItem(new \Ease\Html\H1Tag('Language Selector Examples for Bootstrap 5'));
23+
$container->addItem(new \Ease\Html\PTag('This page demonstrates different language selector widgets for Bootstrap 5.'));
24+
25+
// Divider
26+
$container->addItem(new \Ease\Html\HrTag());
27+
28+
// LangLinks Example
29+
$container->addItem(new \Ease\Html\H2Tag('LangLinks Widget'));
30+
$container->addItem(new \Ease\Html\PTag('Navigation pills style language selector:'));
31+
$container->addItem(new \Ease\Html\DivTag(
32+
new \Ease\TWB5\Widgets\LangLinks(),
33+
['class' => 'mb-4']
34+
));
35+
36+
// Divider
37+
$container->addItem(new \Ease\Html\HrTag());
38+
39+
// LangSelect Example
40+
$container->addItem(new \Ease\Html\H2Tag('LangSelect Widget'));
41+
$container->addItem(new \Ease\Html\PTag('Dropdown style language selector:'));
42+
$container->addItem(new \Ease\Html\DivTag(
43+
new \Ease\TWB5\Widgets\LangSelect(),
44+
['class' => 'mb-4']
45+
));
46+
47+
// Divider
48+
$container->addItem(new \Ease\Html\HrTag());
49+
50+
// Custom styles example
51+
$container->addItem(new \Ease\Html\H2Tag('Customization Examples'));
52+
53+
// LangLinks with tabs style
54+
$container->addItem(new \Ease\Html\H3Tag('LangLinks as Tabs'));
55+
$container->addItem(new \Ease\Html\DivTag(
56+
new \Ease\TWB5\Widgets\LangLinks(['class' => 'nav nav-tabs']),
57+
['class' => 'mb-4']
58+
));
59+
60+
// LangLinks as underline style (new in Bootstrap 5)
61+
$container->addItem(new \Ease\Html\H3Tag('LangLinks with Underline Style'));
62+
$container->addItem(new \Ease\Html\DivTag(
63+
new \Ease\TWB5\Widgets\LangLinks(['class' => 'nav nav-underline']),
64+
['class' => 'mb-4']
65+
));
66+
67+
// Multiple instances
68+
$container->addItem(new \Ease\Html\H3Tag('Multiple Instances'));
69+
$row = $container->addItem(new \Ease\Html\DivTag(null, ['class' => 'row mb-4']));
70+
$row->addItem(new \Ease\Html\DivTag(
71+
[
72+
new \Ease\Html\PTag('Primary style:'),
73+
new \Ease\Html\DivTag(
74+
new \Ease\TWB5\Widgets\LangSelect('lang'),
75+
['class' => 'dropdown']
76+
)
77+
],
78+
['class' => 'col-md-4']
79+
));
80+
$row->addItem(new \Ease\Html\DivTag(
81+
[
82+
new \Ease\Html\PTag('Success style:'),
83+
new \Ease\Html\DivTag(
84+
new \Ease\TWB5\Widgets\LangSelect('locale'),
85+
['class' => 'dropdown']
86+
)
87+
],
88+
['class' => 'col-md-4']
89+
));
90+
$row->addItem(new \Ease\Html\DivTag(
91+
[
92+
new \Ease\Html\PTag('Small size:'),
93+
new \Ease\Html\DivTag(
94+
new \Ease\TWB5\Widgets\LangSelect('language'),
95+
['class' => 'dropdown']
96+
)
97+
],
98+
['class' => 'col-md-4']
99+
));
100+
101+
// Information about current locale
102+
$container->addItem(new \Ease\Html\HrTag());
103+
$container->addItem(new \Ease\Html\H2Tag('Current Locale Information'));
104+
$info = $container->addItem(new \Ease\Html\DivTag(null, ['class' => 'alert alert-info']));
105+
$info->addItem(new \Ease\Html\StrongTag('Current locale: '));
106+
$info->addItem(\Ease\Locale::$localeUsed ?? 'Not set');
107+
$info->addItem(new \Ease\Html\BrTag());
108+
$info->addItem(new \Ease\Html\StrongTag('Available languages: '));
109+
$info->addItem(implode(', ', array_keys($locale->availble())));
110+
111+
// Add some JavaScript for button style customization
112+
$oPage->addJavaScript("
113+
// Customize button styles after page load
114+
document.addEventListener('DOMContentLoaded', function() {
115+
// Find dropdown buttons and customize them
116+
var dropdowns = document.querySelectorAll('.dropdown');
117+
if (dropdowns.length >= 3) {
118+
// Primary style
119+
var btn1 = dropdowns[dropdowns.length - 3].querySelector('button');
120+
if (btn1) {
121+
btn1.classList.remove('btn-secondary');
122+
btn1.classList.add('btn-primary');
123+
}
124+
// Success style
125+
var btn2 = dropdowns[dropdowns.length - 2].querySelector('button');
126+
if (btn2) {
127+
btn2.classList.remove('btn-secondary');
128+
btn2.classList.add('btn-success');
129+
}
130+
// Small size
131+
var btn3 = dropdowns[dropdowns.length - 1].querySelector('button');
132+
if (btn3) {
133+
btn3.classList.add('btn-sm');
134+
}
135+
}
136+
});
137+
");
138+
139+
$oPage->draw();

‎README.md‎

Lines changed: 60 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,76 @@ Object oriented PHP Framework for easy&fast writing small/middle sized apps.
2020
Bricks Included
2121
===============
2222

23-
24-
23+
* Toggle - Bootstrap 5 switch/toggle component
24+
* Selectizer - Select with search functionality
25+
* MainPageMenu - Large icon navigation menu
26+
* LangSelect - Language selector dropdown
27+
* LangLinks - Language selector navigation links
2528

2629
Bootstrap5 Toggle
27-
-----------------------
30+
-----------------
2831

2932
Ease support for https://github.com/palcarazm/bootstrap5-toggle
3033

3134
![Toggle](Toggle.png?raw=true)
3235

3336
```php
34-
new Ease\ui\Toggle('swname', true, 1,['onText' => 'YES', 'offText' => 'NO']);
37+
new Ease\TWB5\Widgets\Toggle('swname', true, 1,['onText' => 'YES', 'offText' => 'NO']);
38+
```
39+
40+
Language Selector Dropdown (LangSelect)
41+
---------------------------------------
42+
43+
Bootstrap 5 dropdown-based language selector that integrates with `Ease\Locale` for internationalization.
44+
45+
```php
46+
// Basic usage
47+
$langSelector = new \Ease\TWB5\Widgets\LangSelect();
48+
49+
// With custom URL parameter name (default is 'locale')
50+
$langSelector = new \Ease\TWB5\Widgets\LangSelect('lang');
51+
52+
// With additional properties
53+
$langSelector = new \Ease\TWB5\Widgets\LangSelect('locale', ['class' => 'dropdown my-custom-class']);
54+
```
55+
56+
Features:
57+
- Automatically detects available languages from `Ease\Locale`
58+
- Shows current language with a globe icon (Bootstrap Icons)
59+
- Preserves existing URL parameters when switching languages
60+
- Fully styled with Bootstrap 5 dropdown component
61+
- Active language is highlighted in the dropdown menu
62+
- Uses Bootstrap 5's `data-bs-toggle` attributes
63+
64+
Language Navigation Links (LangLinks)
65+
--------------------------------------
66+
67+
Bootstrap 5 navigation-style language selector that displays languages as pills or tabs.
68+
69+
```php
70+
// Basic usage (nav pills style)
71+
$langLinks = new \Ease\TWB5\Widgets\LangLinks();
72+
73+
// As navigation tabs
74+
$langLinks = new \Ease\TWB5\Widgets\LangLinks(['class' => 'nav nav-tabs']);
75+
76+
// New Bootstrap 5 underline style
77+
$langLinks = new \Ease\TWB5\Widgets\LangLinks(['class' => 'nav nav-underline']);
78+
79+
// Inline style
80+
$langLinks = new \Ease\TWB5\Widgets\LangLinks(['class' => 'nav nav-pills d-inline-flex']);
81+
82+
// Vertical layout
83+
$langLinks = new \Ease\TWB5\Widgets\LangLinks(['class' => 'nav flex-column']);
3584
```
3685

86+
Features:
87+
- Displays all available languages as navigation links
88+
- Supports all Bootstrap 5 nav styles (pills, tabs, underline)
89+
- Current language is marked as active
90+
- Can be used inline or as block element
91+
- Preserves URL parameters when switching languages
92+
3793
Installation
3894
------------
3995

‎debian/changelog‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
php-vitexsoftware-ease-bootstrap5-widgets (1.4.1) UNRELEASED; urgency=medium
22

33
* minimal version is php81
4+
* Added LangSelect widget - Bootstrap 5 dropdown-based language selector
5+
* Added LangLinks widget - Bootstrap 5 navigation-style language selector
6+
* Added examples demonstrating language selector widgets
7+
* Updated documentation for new widgets
48

59
-- vitex <info@vitexsoftware.cz> Tue, 08 Apr 2025 19:41:13 +0200
610

‎src/Ease/TWB5/Widgets/LangLinks.php‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
/**
6+
* This file is part of the TWB5Widgets package
7+
*
8+
* https://github.com/VitexSoftware/php-ease-twbootstrap5-widgets
9+
*
10+
* (c) Vítězslav Dvořák <http://vitexsoftware.com>
11+
*
12+
* For the full copyright and license information, please view the LICENSE
13+
* file that was distributed with this source code.
14+
*/
15+
16+
namespace Ease\TWB5\Widgets;
17+
18+
/**
19+
* Bootstrap 5 Language Selector Links/Pills.
20+
*
21+
* @author Vítězslav Dvořák <info@vitexsoftware.cz>
22+
*/
23+
class LangLinks extends \Ease\Html\UlTag
24+
{
25+
/**
26+
* Language Selector Links.
27+
*
28+
* @param array<string, string> $properties Additional properties
29+
*/
30+
public function __construct(array $properties = [])
31+
{
32+
if (!isset($properties['class'])) {
33+
$properties['class'] = 'nav nav-pills';
34+
} else {
35+
$properties['class'] .= ' nav';
36+
}
37+
38+
parent::__construct(null, $properties);
39+
40+
$locale = \Ease\Locale::singleton();
41+
$availableLanguages = $locale->availble();
42+
$currentLocale = \Ease\Locale::$localeUsed;
43+
44+
// Add language options as nav items
45+
foreach ($availableLanguages as $code => $langInfo) {
46+
$langName = substr($langInfo, 0, strpos($langInfo, ' (') ?: \strlen($langInfo));
47+
48+
// Parse existing query string
49+
$queryParams = $_GET;
50+
$queryParams['locale'] = $code;
51+
$queryString = http_build_query($queryParams);
52+
53+
// Get the base URL without query string
54+
$baseUrl = strtok($_SERVER['REQUEST_URI'], '?');
55+
$url = $baseUrl.($queryString ? '?'.$queryString : '');
56+
57+
// Create nav item
58+
$navItem = new \Ease\Html\LiTag(null, ['class' => 'nav-item']);
59+
60+
$linkClass = 'nav-link';
61+
62+
if ($code === $currentLocale) {
63+
$linkClass .= ' active';
64+
}
65+
66+
$link = new \Ease\Html\ATag(
67+
$url,
68+
$langName,
69+
['class' => $linkClass],
70+
);
71+
72+
$navItem->addItem($link);
73+
$this->addItem($navItem);
74+
}
75+
}
76+
77+
/**
78+
* Include required Bootstrap 5 assets.
79+
*/
80+
public function finalize(): void
81+
{
82+
\Ease\TWB5\Part::twBootstrapize();
83+
}
84+
}

0 commit comments

Comments
 (0)