added card tabs navigation (#119)

kevinpapst · Oct 17, 2022 · 701da90 · 701da90
1 parent 30463d0
commit 701da90
Show file tree

Hide file tree

Showing 6 changed files with 247 additions and 4 deletions.
diff --git a/docs/embeds-card-vertical-navigation.md b/docs/embeds-card-vertical-navigation.md
@@ -0,0 +1,155 @@
+# Embeds
+
+This theme ships some embeds that hide the complexity of rendering the same elements over and over again with the correct HTML.
+
+## Card vertical navigation
+
+Card vertical navigation has been implemented to use the [Tabler Card vertical navigation](https://preview.tabler.io/settings.html#) extra card.
+
+### Parameters
+`Card vertical navigation` embed, can be used with 1 parameter:
+
+| Parameter | Description            |   Type   | Default  |
+|:---------:|------------------------|:--------:|:--------:|
+|   items   | Array of [Item](#Item) | `array`  |   `[]`   |
+
+#### Item
+
+Note: If `url` parameter is not specified, Boostrap tab navigation will be used to navigate trough elements.
+If `url` is specified, click on menu item will simply redirect to the URL.
+
+| Parameter | Description                         |   Type    |         Default         |
+|:---------:|-------------------------------------|:---------:|:-----------------------:|
+|    id     | Id of item (used for bootstrap tab) | `string`  |      `uniqueId()`       |
+|   name    | Name of the item                    | `string`  |     _empty string_      |
+|  header   | Is item of type Header              | `boolean` |         `false`         |
+|    raw    | Render item name as RAW HTML        | `boolean` |         `false`         |
+|  content  | Content of the item                 | `string`  |     _empty string_      |
+|  active   | Set the item as currently active    | `boolean` |         `false`         |
+|    url    | Href of the `a` link in the menu    | `string`  | `#tabs-` + `uniqueId()` |
+
+### Content
+`Card vertical navigation` embed, has 1 common block:
+
+|  Block  | Description                                                 |
+|:-------:|-------------------------------------------------------------|
+| content | Will replace the content autocomplete from Items -> content |
+
+See twig file for more blocks, which allow customization of HTML tags, CSS classes and more.
+
+### Usage
+#### Full boostrap tabs navigation
+All content tab must be rendered
+
+```twig
+{% set items = [
+    {
+        name: 'Account',
+        content: '<h1>My Account</h1><h3>Profile Details</h3>'
+    },
+    {
+        name: 'Notifications',
+        content: include('notifications.html.twig')
+    },
+    {
+        name: 'Experience',
+        header: true
+    },
+    {
+        name: 'Feedback',
+        content: '<h1>Give Feedback</h1>'
+    },
+    {
+        name: 'Automates',
+        header: true
+    },
+    {
+        id: 'auto',
+        name: tabler_icon('robot') ~ " " ~ 'label.variable.automated.plural'|trans|capitalize,
+        raw: true,
+        content : _self.automate_content(mentions, automated_values)
+    }
+] %}
+
+{% embed '@Tabler/embeds/card-vertical-navigation.thml.twig' with {items : items} %}{% endembed %}
+```
+
+![card nav](https://user-images.githubusercontent.com/25293190/193552217-791b1294-811d-4cd8-8222-2cef684ef17c.gif)
+
+
+#### Url single content navigation
+
+Only one tab content is completed, rest is only for navigation between urls
+
+```twig
+{% set items = [
+    {
+        name: 'Account',
+        url: '/account'
+    },
+    {
+        name: 'Notifications',
+        url: '/notifications',
+        active: true,
+    },
+    {
+        name: 'Experience',
+        header: true
+    },
+    {
+        name: 'Feedback',
+    },
+] %}
+
+{% embed '@Tabler/embeds/card-vertical-navigation.thml.twig' with {items : items} %}
+    {% block content %}
+        <h1>Notifications</h1>
+
+        <p>Here's my content manually inserted!</p>
+    {% endblock %}
+{% endembed %}
+```
+
+![image](https://user-images.githubusercontent.com/25293190/194838070-b5fca872-713e-446d-a557-82b95c64819c.png)
+
+#### Only nav card part (with empty content)
+
+```twig
+{% set items = [
+    {
+        name: 'Account',
+        url: '/account'
+    },
+    {
+        name: 'Notifications',
+        url: '/notifications',
+        active: true,
+    },
+    {
+        name: 'Experience',
+        header: true
+    },
+    {
+        name: 'Feedback',
+    },
+] %}
+
+
+
+<div class="row">
+    <div class="col-3">
+        {% embed '@Tabler/embeds/card-vertical-navigation.thml.twig' with {items : items} %}
+            {% block nav_size %}col{% endblock %}
+            {% block nav_border %}{% endblock %}
+            {% block content_display %}d-none{% endblock %}
+            {% block content %}{% endblock %}
+        {% endembed %}
+    </div>
+</div>
+```
+![image](https://user-images.githubusercontent.com/25293190/194849665-2c5d99f8-71f8-40ca-b05d-23950db225e4.png)
+
+
+## Next steps
+
+Please go back to the [Tabler bundle documentation](index.md) to find out more about using the theme.
diff --git a/src/Twig/RuntimeExtension.php b/src/Twig/RuntimeExtension.php
@@ -132,4 +132,9 @@ public function icon(string $name, bool $withIconClass = false, string $default
     {
         return ($withIconClass ? 'icon ' : '') . ($this->icons[str_replace('-', '_', $name)] ?? ($default ?? $name));
     }
+
+    public function uniqueId(string $prefix = '', bool $more_entropy = false): string
+    {
+        return uniqid($prefix, $more_entropy);
+    }
 }
diff --git a/src/Twig/TablerExtension.php b/src/Twig/TablerExtension.php
@@ -38,6 +38,7 @@ public function getFunctions(): array
             new TwigFunction('tabler_notifications', [RuntimeExtension::class, 'getNotifications']),
             new TwigFunction('tabler_user', [RuntimeExtension::class, 'getUserDetails']),
             new TwigFunction('tabler_icon', [RuntimeExtension::class, 'createIcon'], ['is_safe' => ['html']]),
+            new TwigFunction('tabler_unique_id', [RuntimeExtension::class, 'uniqueId']),
         ];
     }
 }
diff --git a/templates/embeds/card-vertical-navigation.thml.twig b/templates/embeds/card-vertical-navigation.thml.twig
@@ -0,0 +1,83 @@
+
+{% set _items = [] %}
+{% for key, item in items ?? [] %}
+    {% if item.id is not defined %}
+        {# Generate id of item for "Boostrap tab" #}
+        {% set item = item|merge({id : tabler_unique_id()}) %}
+    {% endif %}
+
+    {% set _items = _items|merge({ (key) : item }) %}
+{% endfor %}
+
+{% block card_before %}{% endblock %}
+<div class="card {% block card_class %}mb-3{% endblock %}">
+    <div class="row g-0">
+
+        {# Nav items #}
+        {% block nav_before %}{% endblock %}
+        <div class="{% block nav_size %}col-3{% endblock %} {% block nav_border %}border-end{% endblock %} {% block nav_display %}d-none d-md-block{% endblock %}">
+            <div class="card-body">
+                <div class="list-group {% block nav_list_class %}list-group-transparent{% endblock %}">
+                    {% for key, item in _items %}
+
+                        {% set _id = item.id %}
+                        {% set _header = item.header ?? false %}
+                        {% set _active = item.active ?? false %}
+                        {% set _name = item.name ?? '' %}
+                        {% set _url = item.url ?? ("#tabs-" ~ item.id) %}
+                        {% set _raw = item.raw ?? false %}
+
+                        {% if _header %}
+                            <h4 class="subheader {% block nav_header_class %}mx-4 mt-3{% endblock %}">{{ _name }}</h4>
+                        {% else %}
+                            <a
+                                    href="{{ _url }}"
+                                    class="list-group-item list-group-item-action d-flex align-items-center {% if _active %}active{% endif %}"
+                                    {% if item.url is not defined and not block('content') is defined %}data-bs-toggle="tab"{% endif %}
+                            >
+                                {% if _raw %}
+                                    {{ _name | raw }}
+                                {% else %}
+                                    {{ _name }}
+                                {% endif %}
+                            </a>
+                        {% endif %}
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% block nav_after %}{% endblock %}
+
+        {# Content #}
+        {% block content_before %}{% endblock %}
+        <div class="{% block content_size %}col{% endblock %} {% block content_display %}d-flex flex-column{% endblock %}">
+            <div class="card-body">
+                {% if block('content') is defined %}
+                    {{ block('content') }}
+                {% else %}
+                    <div class="tab-content">
+                        {% for key, item in _items %}
+
+                            {% set _id = item.id %}
+                            {% set _header = item.header ?? false %}
+                            {% set _active = item.active ?? false %}
+                            {% set _content = item.content ?? '' %}
+
+                            {% if item.content is defined and not _header %}
+                                <div class="tab-pane {% if _active %}active show{% endif %}"
+                                     id="tabs-{{ _id }}"
+                                     {% if item.url is not defined %}role="tabpanel"{% endif %}
+                                >
+                                    {{ _content|raw }}
+                                </div>
+                            {% endif %}
+                        {% endfor %}
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+        {% block content_after %}{% endblock %}
+
+    </div>
+</div>
+{% block card_after %}{% endblock %}
diff --git a/templates/includes/utils.html.twig b/templates/includes/utils.html.twig
@@ -7,4 +7,3 @@
         {% endfor %}
     {% endif %}
 {% endmacro %}
-
diff --git a/tests/Twig/TablerExtensionTest.php b/tests/Twig/TablerExtensionTest.php
@@ -20,7 +20,7 @@ class TablerExtensionTest extends TestCase
     public function testGetFilters()
     {
         $sut = new TablerExtension();
-        $this->assertEquals(4, \count($sut->getFilters()));
+        $this->assertCount(4, $sut->getFilters());
         $result = array_map(function ($filter) {
             return $filter->getName();
         }, $sut->getFilters());
@@ -30,10 +30,10 @@ public function testGetFilters()
     public function testGetFunctions()
     {
         $sut = new TablerExtension();
-        $this->assertEquals(4, \count($sut->getFunctions()));
+        $this->assertCount(5, $sut->getFunctions());
         $result = array_map(function ($function) {
             return $function->getName();
         }, $sut->getFunctions());
-        $this->assertEquals(['tabler_menu', 'tabler_notifications', 'tabler_user', 'tabler_icon'], $result);
+        $this->assertEquals(['tabler_menu', 'tabler_notifications', 'tabler_user', 'tabler_icon', 'tabler_unique_id'], $result);
     }
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,4 +7,3 @@
		{% endfor %}
		{% endif %}
		{% endmacro %}