1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <title>Demo Application</title>
8 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9 <link rel="stylesheet" type="text/css" href="/css/bootstrap-notifications.min.css">
10 <!--[if lt IE 9]>
11 <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
12 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
13 <![endif]-->
14 </head>
15 <body>
16 <nav class="navbar navbar-inverse">
17 <div class="container-fluid">
18 <div class="navbar-header">
19 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
20 <span class="sr-only">Toggle navigation</span>
21 <span class="icon-bar"></span>
22 <span class="icon-bar"></span>
23 <span class="icon-bar"></span>
24 </button>
25 <a class="navbar-brand" href="#">Demo App</a>
26 </div>
27
28 <div class="collapse navbar-collapse">
29 <ul class="nav navbar-nav">
30 <li class="dropdown dropdown-notifications">
31 <a href="#notifications-panel" class="dropdown-toggle" data-toggle="dropdown">
32 <i data-count="0" class="glyphicon glyphicon-bell notification-icon"></i>
33 </a>
34
35 <div class="dropdown-container">
36 <div class="dropdown-toolbar">
37 <div class="dropdown-toolbar-actions">
38 <a href="#">Mark all as read</a>
39 </div>
40 <h3 class="dropdown-toolbar-title">Notifications (<span class="notif-count">0</span>)</h3>
41 </div>
42 <ul class="dropdown-menu">
43 </ul>
44 <div class="dropdown-footer text-center">
45 <a href="#">View All</a>
46 </div>
47 </div>
48 </li>
49 <li><a href="#">Timeline</a></li>
50 <li><a href="#">Friends</a></li>
51 </ul>
52 </div>
53 </div>
54 </nav>
55
56 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
57 <script src="//js.pusher.com/3.1/pusher.min.js"></script>
58 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
59
60 <script type="text/javascript">
61 var notificationsWrapper = $('.dropdown-notifications');
62 var notificationsToggle = notificationsWrapper.find('a[data-toggle]');
63 var notificationsCountElem = notificationsToggle.find('i[data-count]');
64 var notificationsCount = parseInt(notificationsCountElem.data('count'));
65 var notifications = notificationsWrapper.find('ul.dropdown-menu');
66
67 if (notificationsCount <= 0) {
68 notificationsWrapper.hide();
69 }
70
71 // Enable pusher logging - don't include this in production
72 // Pusher.logToConsole = true;
73
74 var pusher = new Pusher('API_KEY_HERE', {
75 encrypted: true
76 });
77
78 // Subscribe to the channel we specified in our Laravel Event
79 var channel = pusher.subscribe('status-liked');
80
81 // Bind a function to a Event (the full Laravel class)
82 channel.bind('App\\Events\\StatusLiked', function(data) {
83 var existingNotifications = notifications.html();
84 var avatar = Math.floor(Math.random() * (71 - 20 + 1)) + 20;
85 var newNotificationHtml = `
86 <li class="notification active">
87 <div class="media">
88 <div class="media-left">
89 <div class="media-object">
90 <img src="https://api.adorable.io/avatars/71/`+avatar+`.png" class="img-circle" alt="50x50" style="width: 50px; height: 50px;">
91 </div>
92 </div>
93 <div class="media-body">
94 <strong class="notification-title">`+data.message+`</strong>
95 <!--p class="notification-desc">Extra description can go here</p-->
96 <div class="notification-meta">
97 <small class="timestamp">about a minute ago</small>
98 </div>
99 </div>
100 </div>
101 </li>
102 `;
103 notifications.html(newNotificationHtml + existingNotifications);
104
105 notificationsCount += 1;
106 notificationsCountElem.attr('data-count', notificationsCount);
107 notificationsWrapper.find('.notif-count').text(notificationsCount);
108 notificationsWrapper.show();
109 });
110 </script>
111 </body>
112</html>
113
114