From d1cf408163f91c73ff36d6ea744718d0d13d3bb4 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <sami.mokaddem@circl.lu>
Date: Tue, 8 Feb 2022 17:57:20 +0100
Subject: [PATCH] new: [helpers:bootstrap] Added notification bubble

---
 src/View/Helper/BootstrapHelper.php           | 67 +++++++++++++++++++
 .../layouts/header/header-notifications.php   | 12 ++--
 2 files changed, 73 insertions(+), 6 deletions(-)

diff --git a/src/View/Helper/BootstrapHelper.php b/src/View/Helper/BootstrapHelper.php
index 5353411..bb1607c 100644
--- a/src/View/Helper/BootstrapHelper.php
+++ b/src/View/Helper/BootstrapHelper.php
@@ -147,6 +147,12 @@ class BootstrapHelper extends Helper
         return $bsSwitch->switch();
     }
 
+    public function notificationBubble($options)
+    {
+        $bsNotificationBubble = new BoostrapNotificationBuble($options, $this);
+        return $bsNotificationBubble->notificationBubble();
+    }
+
     public function dropdownMenu($options)
     {
         $bsDropdownMenu = new BoostrapDropdownMenu($options, $this);
@@ -1381,6 +1387,67 @@ class BoostrapSwitch extends BootstrapGeneric
     }
 }
 
+class BoostrapNotificationBuble extends BootstrapGeneric
+{
+    private $defaultOptions = [
+        'label' => '',
+        'variant' => 'warning',
+        'borderVariant' => 'ligth',
+        'title' => 'Notification',
+        'class' => [],
+        'attrs' => [],
+    ];
+
+    function __construct($options)
+    {
+        $this->allowedOptionValues = [
+            'variant' => BootstrapGeneric::$variants,
+        ];
+        $this->defaultOptions['label'] =  __('New notifications');
+        $this->processOptions($options);
+    }
+
+    private function processOptions($options)
+    {
+        $this->options = array_merge($this->defaultOptions, $options);
+        $this->checkOptionValidity();
+        if (!empty($this->options['attrs']['style'])) {
+            $this->options['attrs']['style'] += 'box-shadow: 0 0.125rem 0.25rem #00000050;';
+        } else {
+            $this->options['attrs']['style'] = 'box-shadow: 0 0.125rem 0.25rem #00000050;';
+        }
+    }
+
+    public function notificationBubble()
+    {
+        return $this->genNotificationBubble();
+    }
+
+    private function genNotificationBubble()
+    {
+        $tmpId = 'tmp-' . mt_rand();
+        $html = $this->genNode('span', [
+            'id' => $tmpId,
+            'class' => [
+                'position-absolute',
+                'top-0',
+                'start-100',
+                'translate-middle',
+                'p-1',
+                'border border-2 rounded-circle',
+                "border-{$this->options['borderVariant']}",
+                "bg-{$this->options['variant']}",
+            ],
+            'title' => $this->options['title']
+        ], $this->genNode('span', [
+            'class' => [
+            ],
+            $this->options['label']
+        ]));
+        return $html;
+    }
+}
+
 class BoostrapProgress extends BootstrapGeneric
 {
     private $defaultOptions = [
diff --git a/templates/element/layouts/header/header-notifications.php b/templates/element/layouts/header/header-notifications.php
index 3e99887..d4b0526 100644
--- a/templates/element/layouts/header/header-notifications.php
+++ b/templates/element/layouts/header/header-notifications.php
@@ -20,12 +20,12 @@ $variant = array_flip($severity)[$maxSeverity];
     <a class="nav-link px-2 text-decoration-none profile-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#" data-bs-offset="10,20">
         <span class="position-relative">
             <i class="<?= $this->FontAwesome->getClass('bell') ?> fa-lg"></i>
-            <span
-                class="<?= empty($notifications) ? 'd-none' : '' ?> position-absolute top-0 start-100 translate-middle p-1 bg-<?= $variant ?> border border-light border-2 rounded-circle"
-                style="box-shadow: 0 0.125rem 0.25rem #00000050;"
-            >
-                <span class="visually-hidden"><?= __('New notifications') ?></span>
-            </span>
+            <?=
+            $this->Bootstrap->notificationBubble([
+                'class' => empty($notifications) ? 'd-none' : '',
+                'variant' => $variant,
+            ])
+            ?>
         </span>
     </a>
     <div class="dropdown-menu dropdown-menu-end" style="min-width: 320px; max-width: 25vw">