browser tab notifications

corsego · Dec 26, 2022 · bc5b318 · bc5b318
1 parent 74cf8b8
commit bc5b318
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 1 deletion.
diff --git a/app/assets/images/linkedin-bell.png b/app/assets/images/linkedin-bell.png
diff --git a/app/assets/images/linkedin.png b/app/assets/images/linkedin.png
diff --git a/app/controllers/notifications_controller.rb b/app/controllers/notifications_controller.rb
@@ -25,6 +25,10 @@ def create
 
     respond_to do |format|
       if @notification.save
+        Turbo::StreamsChannel.broadcast_replace_to(:global_notification,
+                                                   target: 'title-notifications',
+                                                   partial: "shared/page_title",
+                                                   locals: { new_notifications_count: Notification.where(seen: [false, nil]).count})
         format.html { redirect_to notification_url(@notification), notice: "Notification was successfully created." }
         format.json { render :show, status: :created, location: @notification }
       else

diff --git a/app/javascript/controllers/title_blink_controller.js b/app/javascript/controllers/title_blink_controller.js
@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="title-blink"
+export default class extends Controller {
+  static values = {
+    newTitle: String
+  }
+  connect() {
+    var newTitle = this.newTitleValue
+    var oldTitle = document.title
+    console.log(this.newTitleValue)
+    console.log(document.title)
+    var blink = function() { document.title = document.title == newTitle ? oldTitle : newTitle }
+    this.blinkInterval = setInterval(blink, 1000)
+  }
+  disconnect() {
+    clearInterval(this.blinkInterval)
+  }
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,7 +1,14 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Notificador</title>
+    <%= new_notifications_count = Notification.where(seen: [false, nil]).count %>
+    <% if new_notifications_count.positive? %>
+      <%= favicon_link_tag asset_path('linkedin-bell.png') %>
+      <title id="title-notifications" data-controller="title-blink" data-title-blink-new-title-value="(<%= new_notifications_count %>) Alerts">Notificador</title>
+    <% else %>
+      <%= favicon_link_tag asset_path('linkedin.png') %>
+      <title id="title-notifications">Notificador</title>
+    <% end %>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
@@ -11,6 +18,7 @@
   </head>
 
   <body>
+    <%= turbo_stream_from :global_notification %>
     <%= yield %>
   </body>
 </html>
diff --git a/app/views/shared/_page_title.html.erb b/app/views/shared/_page_title.html.erb
@@ -0,0 +1 @@
+<title id="title-notifications" data-controller="title-blink" data-title-blink-new-title-value="(<%= new_notifications_count %>) Alerts">Notificador</title>