Implement favico.js (#44)

babeuloula · Oct 9, 2019 · 9f4e2da · 9f4e2da
1 parent 1e689d7
commit 9f4e2da
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 7 deletions.
diff --git a/src/Controller/PullRequestController.php b/src/Controller/PullRequestController.php
@@ -59,7 +59,6 @@ public function __invoke(): Response
                 'github/pull-request/list.html.twig',
                 [
                     'openPullRequests' => $service->getOpen(),
-                    'openPullRequestsCount' => $service->getOpenCount(),
                     'unreadNotifications' => $this->notificationService->getNotifications(),
                     'unreadNotificationsCount' => $this->notificationService->getNotificationsCount(),
                     'labels' => Label::toArray(),

diff --git a/src/Controller/ReloadPullRequestController.php b/src/Controller/ReloadPullRequestController.php
@@ -50,7 +50,6 @@ public function __invoke(Request $request): Response
                 'github/pull-request/filtersPullRequests.html.twig',
                 [
                     'openPullRequests' => $this->pullRequestFilterService->getOpen(),
-                    'openPullRequestsCount' => $this->pullRequestFilterService->getOpenCount(),
                 ]
             )
         );

diff --git a/templates/github/pull-request/filters.html.twig b/templates/github/pull-request/filters.html.twig
@@ -25,14 +25,15 @@
 {% block javascripts %}
     {{ parent() }}
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/favico.js/0.3.10/favico.min.js"
+            integrity="sha256-i265HmNQ6FYdanwd4Tvt6Phby2Ht/9KOGQ3cromZq5Y=" crossorigin="anonymous"></script>
+
     <script type="text/javascript">
         jQuery(function ($) {
             const LOCALSTORAGE_KEY = 'collapses';
 
             let reloadOnFocus = {{ reloadOnFocus ? 'true' : 'false' }};
             let reloadEvery = {{ reloadEvery }};
-            let pullRequestsCount = {{ openPullRequestsCount|json_encode|raw }};
-            let unreadNotificationsCount = {{ unreadNotificationsCount|json_encode|raw }};
 
             $(document).ready(function () {
                 let collapses = getCollapses();
@@ -48,6 +49,7 @@
                 });
 
                 saveCollapses(collapses);
+                updateFavicon();
             });
 
             $(document).on('click', '.accordion .card-header', function (event) {
@@ -85,6 +87,7 @@
                     success: function(response, textStatus, jqXHR) {
                         $accordionPullRequests.html(response);
                         hideCollapses();
+                        updateFavicon();
                     },
                     error: function(response, textStatus, errorThrown) {
                         alert("Unable to load pull requests.");
@@ -96,6 +99,7 @@
                     success: function (response, textStatus, jqXHR) {
                         $accordionNotifs.html(response);
                         hideCollapses();
+                        updateFavicon();
                     },
                     error: function (response, textStatus, errorThrown) {
                         alert("Unable to load notifications.");
@@ -128,6 +132,20 @@
                 });
             };
 
+            window.updateFavicon = function () {
+                let count = 0;
+
+                $(document).find('.accordion .collapse').each(function (index, elem) {
+                    count = count + parseInt($(elem).attr('data-count'), 10);
+                });
+
+                if (0 < count) {
+                    new Favico({
+                        animation:'none'
+                    }).badge(count);
+                }
+            };
+
             if (reloadOnFocus) {
                 $(window).on('focus', reloadData);
             } else if(reloadEvery > 0) {
@@ -146,7 +164,8 @@
                     url: $that.attr('data-url'),
                     type: 'POST',
                     success: function(response, textStatus, jqXHR) {
-                        let $strong = $($that.parents('.collapse').get(0)).prev().find('strong');
+                        let $collapse = $($that.parents('.collapse').get(0));
+                        let $strong = $collapse.prev().find('strong');
                         let number = $strong.text()
                             .replace('(', '')
                             .replace(')', '')
@@ -169,8 +188,16 @@
                         $listItem.slideUp(250, function () {
                             --number;
                             $strong.text('('+number+')');
+                            $collapse.attr('data-count', number);
+
+                            if (0 === number) {
+                                $collapse.slideUp(250, function () {
+                                    $(this).removeClass('show');
+                                });
+                            }
 
                             $(this).remove();
+                            updateFavicon();
                         });
                     },
                     error: function(response, textStatus, errorThrown) {

diff --git a/templates/github/pull-request/filtersNotifications.html.twig b/templates/github/pull-request/filtersNotifications.html.twig
@@ -12,7 +12,8 @@
             </button>
         </div>
 
-        <div id="collapse-notifs-{{ repository|slugify }}" class="collapse {{ unreadNotificationsCount[repository] > 0 ? 'show' : '' }}"
+        <div id="collapse-notifs-{{ repository|slugify }}" data-count="{{ unreadNotificationsCount[repository] }}"
+                class="collapse {{ unreadNotificationsCount[repository] > 0 ? 'show' : '' }}"
                 aria-labelledby="heading-notifs-{{ repository|slugify }}" data-parent="#accordion-notifs">
             <div class="card-body">
                 <div class="list-group">

diff --git a/templates/github/pull-request/filtersPullRequests.html.twig b/templates/github/pull-request/filtersPullRequests.html.twig
@@ -7,7 +7,8 @@
             </button>
         </div>
 
-        <div id="collapse-pr-{{ repository|slugify }}" class="collapse {{ sortedPullRequests.count() > 0 ? 'show' : '' }}"
+        <div id="collapse-pr-{{ repository|slugify }}" data-count="{{ sortedPullRequests.count() }}"
+                class="collapse {{ sortedPullRequests.count() > 0 ? 'show' : '' }}"
                 aria-labelledby="heading-pr-{{ repository|slugify }}" data-parent="#accordion-pull-requests">
             <div class="card-body">
                 <div class="list-group">
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,7 +50,6 @@ public function __invoke(Request $request): Response @@
                     'github/pull-request/filtersPullRequests.html.twig',
                     [
                         'openPullRequests' => $this->pullRequestFilterService->getOpen(),
-                        'openPullRequestsCount' => $this->pullRequestFilterService->getOpenCount(),
                     ]
                 )
             );
@@ Expand Down @@