Menu Item data attributes (#564)

* add DataFilter & update menuitem partials * add DataFilter in default config * update README.md for menu item data * fix CI * add test case * fix cs * Update DataFilter.php * Update DataFilter.php Co-authored-by: Florian Ressel <florian@genxtreme.de>
jeroennoten · Apr 27, 2020 · 75a48e4 · 75a48e4
1 parent 180633b
commit 75a48e4
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -638,6 +638,29 @@ This will ignored if the top navigation layout is enabled, all menu items will a
 
 To get a dynamic item placing you can add the `key` attribute, with this you can add a unique identifier to a add before or after it new items.
 
+To add data-attributes to your menu link your can simply add a associative array called `data`. Here a simple example:
+
+```php
+[
+    [
+        'header' => 'BLOG',
+        'url' => 'admin/blog',
+        'data' => [
+            'test' => 'content',
+        ],
+    ],
+    [
+        'text' => 'Add new post',
+        'url' => 'admin/blog/new',
+        'data' => [
+            'test-one' => 'content-one',
+            'test-two' => 'content-two',
+        ],
+    ],
+]
+```
+
+
 Use the `can` attribute if you want conditionally show the menu item. This integrates with Laravel's `Gate` functionality. If you need to conditionally show headers as well, you need to wrap it in an array like other menu items, using the `header` attribute. You can add more `can` entries as array, see the second example:
 
 ```php

diff --git a/config/adminlte.php b/config/adminlte.php
@@ -309,6 +309,7 @@
         JeroenNoten\LaravelAdminLte\Menu\Filters\ClassesFilter::class,
         JeroenNoten\LaravelAdminLte\Menu\Filters\GateFilter::class,
         JeroenNoten\LaravelAdminLte\Menu\Filters\LangFilter::class,
+        JeroenNoten\LaravelAdminLte\Menu\Filters\DataFilter::class,
     ],
 
     /*

diff --git a/resources/views/partials/menuitems/menu-item-sub-top-nav.blade.php b/resources/views/partials/menuitems/menu-item-sub-top-nav.blade.php
@@ -3,6 +3,7 @@
         <a class="dropdown-item @if (isset($item['submenu']))dropdown-toggle @endif" href="{{ $item['href'] }}"
            @if (isset($item['submenu'])) data-toggle="dropdown" @endif
            @if (isset($item['target'])) target="{{ $item['target'] }}" @endif
+           {!! $item['data-compiled'] ?? '' !!}
         >
             <i class="{{ $item['icon'] ?? 'far fa-fw fa-circle' }} {{ isset($item['icon_color']) ? 'text-' . $item['icon_color'] : '' }}"></i>
             {{ $item['text'] }}

diff --git a/resources/views/partials/menuitems/menu-item-top-nav.blade.php b/resources/views/partials/menuitems/menu-item-top-nav.blade.php
@@ -1,21 +1,22 @@
 @if (isset($item['search']) && $item['search'])
-  <form action="{{ $item['href'] }}" method="{{ $item['method'] }}" class="form-inline ml-2 mr-2">
-    <div class="input-group">
-      <input class="form-control form-control-navbar" type="search" name="{{ $item['input_name'] }}" placeholder="{{ $item['text'] }}" aria-label="{{ $item['aria-label'] ?? $item['text'] }}">
-      <div class="input-group-append">
-        <button class="btn btn-navbar" type="submit">
-          <i class="fas fa-search"></i>
-        </button>
-      </div>
-    </div>
-  </form>
+    <form action="{{ $item['href'] }}" method="{{ $item['method'] }}" class="form-inline ml-2 mr-2">
+        <div class="input-group">
+            <input class="form-control form-control-navbar" type="search" name="{{ $item['input_name'] }}" placeholder="{{ $item['text'] }}" aria-label="{{ $item['aria-label'] ?? $item['text'] }}">
+            <div class="input-group-append">
+                <button class="btn btn-navbar" type="submit">
+                    <i class="fas fa-search"></i>
+                </button>
+            </div>
+        </div>
+    </form>
 @elseif (is_array($item) && !isset($item['header']))
   <li @if (isset($item['id'])) id="{{ $item['id'] }}" @endif class="nav-item {{ $item['top_nav_class'] }}">
-      <a class="nav-link @if (isset($item['submenu']))dropdown-item dropdown-toggle @endif" href="{{ $item['href'] }}"
-         @if (isset($item['submenu'])) data-toggle="dropdown" @endif
-         @if (isset($item['target'])) target="{{ $item['target'] }}" @endif
-      >
-          <i class="{{ $item['icon'] ?? 'far fa-fw fa-circle' }} {{ isset($item['icon_color']) ? 'text-' . $item['icon_color'] : '' }}"></i>
+        <a class="nav-link @if (isset($item['submenu']))dropdown-item dropdown-toggle @endif" href="{{ $item['href'] }}"
+            @if (isset($item['submenu'])) data-toggle="dropdown" @endif
+            @if (isset($item['target'])) target="{{ $item['target'] }}" @endif
+            {!! $item['data-compiled'] ?? '' !!}
+        >
+            <i class="{{ $item['icon'] ?? 'far fa-fw fa-circle' }} {{ isset($item['icon_color']) ? 'text-' . $item['icon_color'] : '' }}"></i>
 			{{ $item['text'] }}
 
           @if (isset($item['label']))

diff --git a/resources/views/partials/menuitems/menu-item.blade.php b/resources/views/partials/menuitems/menu-item.blade.php
@@ -20,6 +20,7 @@
         <li @if (isset($item['id'])) id="{{ $item['id'] }}" @endif class="nav-item @if (isset($item['submenu'])){{ $item['submenu_class'] }}@endif">
             <a class="nav-link {{ $item['class'] }} @if(isset($item['shift'])) {{ $item['shift'] }} @endif" href="{{ $item['href'] }}"
                @if (isset($item['target'])) target="{{ $item['target'] }}" @endif
+               {!! $item['data-compiled'] ?? '' !!}
             >
                 <i class="{{ $item['icon'] ?? 'far fa-fw fa-circle' }} {{ isset($item['icon_color']) ? 'text-' . $item['icon_color'] : '' }}"></i>
                 <p>

diff --git a/src/Menu/Filters/DataFilter.php b/src/Menu/Filters/DataFilter.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace JeroenNoten\LaravelAdminLte\Menu\Filters;
+
+use JeroenNoten\LaravelAdminLte\Menu\Builder;
+
+class DataFilter implements FilterInterface
+{
+    public function transform($item, Builder $builder)
+    {
+        if (isset($item['data']) && is_array($item['data'])) {
+            $item['data-compiled'] = $this->compileData($item['data']);
+        }
+
+        return $item;
+    }
+
+    protected function compileData($dataArray)
+    {
+        $compiled = [];
+
+        foreach ($dataArray as $key => $value) {
+            $compiled[] = 'data-'.$key.'="'.$value.'"';
+        }
+
+        return implode(' ', $compiled);
+    }
+}
diff --git a/tests/Menu/BuilderTest.php b/tests/Menu/BuilderTest.php
@@ -623,4 +623,19 @@ public function testLangTranslate()
         $this->assertEquals('Blog', $builder->menu[2]['text']);
         $this->assertEquals('TEST', $builder->menu[3]['header']);
     }
+
+    public function testDataAttributes()
+    {
+        $builder = $this->makeMenuBuilder();
+
+        $builder->add(['text' => 'About', 'data' => [
+            'test-one' => 'content-one',
+            'test-two' => 'content-two',
+        ]]);
+
+        $this->assertEquals(
+            'data-test-one="content-one" data-test-two="content-two"',
+            $builder->menu[0]['data-compiled']
+        );
+    }
 }
diff --git a/tests/TestCase.php b/tests/TestCase.php
@@ -12,6 +12,7 @@
 use JeroenNoten\LaravelAdminLte\Menu\Builder;
 use JeroenNoten\LaravelAdminLte\Menu\Filters\ActiveFilter;
 use JeroenNoten\LaravelAdminLte\Menu\Filters\ClassesFilter;
+use JeroenNoten\LaravelAdminLte\Menu\Filters\DataFilter;
 use JeroenNoten\LaravelAdminLte\Menu\Filters\GateFilter;
 use JeroenNoten\LaravelAdminLte\Menu\Filters\HrefFilter;
 use JeroenNoten\LaravelAdminLte\Menu\Filters\LangFilter;
@@ -32,6 +33,7 @@ protected function makeMenuBuilder($uri = 'http://example.com', GateContract $ga
             new ActiveFilter($this->makeActiveChecker($uri)),
             new SubmenuFilter($this->makeActiveChecker($uri)),
             new ClassesFilter(),
+            new DataFilter(),
             new GateFilter($gate ?: $this->makeGate()),
             new LangFilter($this->makeTranslator($locale)),
         ]);