Big thanks to @rickmills for the PR to update Megaphone to support Livewire 4 with PR #50.
There's been no fundamental change to Megaphone to use any of the new features that Livewire now provides, only the loading of the component itself.
A full rebuild of Megaphone may come in v4!
Massive thanks again to @akulmehta for starting this work with his PR #45 I ended up going a slightly different direction from their PR to make it a little more customisable but the basis of his work from that formed how I implemented the ability to have notifications marked as read when clicking the read more buttons. This is disabled as default so it maintains backwards compatibility, but it can be enabled easily by updating the config option.
Once enabled, you can also change the behaviour on a per notification basis. Maybe important notifications want to stay as a separate specific click on the "mark as read" button, whereas generic notifications can be set to read simply if the user clicks the "read more" link.
There has been some changes to the blade views so please review the file diff to ensure you have the updates needed to make this feature work. 2.2.0-2.3.0 file diff
There is also a new config option that allows you to change the behaviour of the console command for clearing old notifications. Previously it would only clear old notifications if they were read, this could mean you end up with month old notifications that are left unread if a user has not logged in. Toggle the option in the config to allow it to clear all notifications regardless of read status. The default value is set to "read notifications only" to maintain backwards compatibility.
Massive thanks to @akulmehta for the bulk of the work on this update.
2.2.0 adds the ability to let users delete read notifications before they are auto cleared out by the scheduled task (assuming you have that enabled).
In order to enable this there is a new config option you will need to publish the Megaphone config again (make sure you backup your existing config and reset any values you previously changed). Then amend the megaphone.clearNotifications.userCanDelete to true. The config setting for megaphone.clearAfter has been deprecated and moved to megaphone.clearNotifications.autoClearAfter to group these options together. It will be removed and the console command will stopping referencing megaphone.clearAfter in a later version.
There are also template changes to popout.blade.php along with two new SVG components which will need to be published. Backup any blade templates you may have edited before publishing the views again.
View the file diff from the PR here in order to compare changes made to the blade files.
It's been exactly one year since the last release of Megaphone but I've finally released the next version of Megaphone and included some much awaited features of wire:poll support and a mark all as read action. There's been a big restructuring of the template files, making use of Components so hopefully extending and overriding certain sections will be easier, these shouldn't cause a breaking change. There has also been a big restyle of the default look of the notification list. See the upgrade notes below for information on the template changes.
Big thanks to @titonova for some of the work here. They had initially created a PR with some of these changes and they served as a starting point for some of the features as I tweaked them to fit my vision for Megaphone.
Due to the nature of the updates, there should be no breaking changes and a simple composer update should bring in the latest 2.1.0 version. However to make use of all the new features you may need to manually update some published files.
If you have the Megaphone config published, there are some new options that you can define. If you have made changes to the published config, you can simply append the following polling options to the bottom of the array within config/megaphone.php.
/*
* Enable Livewire Poll feature for auto updating.
* See livewire docs for poll option descriptions
* [@link](https://github.com/link) https://livewire.laravel.com/docs/wire-poll
*/
'poll' => [
'enabled' => false,
'options' => [
'time' => '15s',
'keepAlive' => false,
'viewportVisible' => false,
],
],
To enable wire:poll within your published Megaphone templates, open up resources/views/vendor/megaphone/megaphone.blade.php. Unless you've made changes to this file, it should look similar to this:
<div class="megaphone">
<div class="relative w-12 h-12" x-data="{ open: false }">
[@include](https://github.com/include)('megaphone::icon')
[@include](https://github.com/include)('megaphone::popout')
</div>
</div>
Simply add the new Megaphone polling, blade directive to the first div.
<div class="megaphone" [@megaphonePoll](https://github.com/megaphonePoll)>
<div class="relative w-12 h-12" x-data="{ open: false }">
[@include](https://github.com/include)('megaphone::icon')
[@include](https://github.com/include)('megaphone::popout')
</div>
</div>
Next, ensure you have the config update as above, and set the enable option to true. You can tweak the settings as desired but this will enable wire:poll on your megaphone component.
To simply add the button, open up resources/views/vendor/megaphone/popout.blade.php and add the following block of code, where you want it to appear and style as desired.
[@if](https://github.com/if) ($unread->count() > 1)
<button class="focus:outline-none text-sm leading-normal pt-8 hover:text-indigo-700" wire:click="markAllRead()">Mark all as read</button>
[@endif](https://github.com/endif)
That's all that is needed to add this new feature. For a better UI, as default that code block will only show the "mark all as read" if there are more than 1 unread notifications. Simply change the IF statement to match your desired condition for showing the button.
Aside from the template changes mentioned above for the specific features, there has been sweeping changes across the majority of the templates. If you wish to upgrade to these, the easiest option will be to backup your existing published files, republished the template files and re-add any previous changes you made.
Along with the template changes, Megaphones default templates have been given a facelift. If you are including the Megaphone stylesheet, you will need republish the stylesheet from the package to get the latest copy. (As a side update, you can now use a new blade directive to include your stylesheet rather than copying in the HTML yourself, [@megaphoneStyles](https://github.com/megaphoneStyles))
Alternatively, if you are not using the Megaphone stylesheet but are using TailwindCSS, you may wish to rebuild your application stylesheets to ensure all the correct classes have been built.
Massive thanks to @gregorysouzasilva for the initial work to kick start this but Megaphone 2.0.0 is now available and supports Livewire 3.
This new release drops support for Livewire 2 and PHP 7.4 and 8.0. The PHP versions have been dropped to match the supported PHP versions of Livewire 3.
The upgrade process is relatively painless and most of the upgrade work will be upgrading your installation of Livewire itself. See the new section of the readme for the upgrade process
Massive thank you to @pjkellar for the majority of the changes in this.
This release addresses the issue with Issue #20 where the User model data was visible in the Livewire requests. The way notifications are loaded has been reworked to prevent this. The change also allows Megaphone to be used properly with something other than Users models if required.
A massive thank you to @pjkellar for all the work with this release.
A new bell icon SVG has been added which looks a lot nicer! Also improved is the styling for the unread notification badge. There was a bug with the styling when a large number of unread notifications were present, this PR will fix this issue. Also included is a new config option that toggles the unread notification count on or off (the default value is on). If set to false, a simple red dot is shown. Thank you also to @hpacleb for the readme fix PR!
This has been tagged a minor release due to no breaking changes occurring by performing a simple composer update. However, to make full use of the update a php artisan vendor:publish --force --tag=megaphone will be required.
NOTE Please ensure you backup or make a note of any changes you have made to the following folders/files before performing the vendor publish as they will be overwritten.
Once vendor publish has run, remember to merge back in any changes you have made that are required.
Previously the mark as read feature for announcements was done on "mouseenter", depending on location on the page, when clicking the Bell Icon to open the popout it could sometimes result in the notification becoming instantly read if your mouse just happened to be over the notification. This has been removed in favour of adding a physical "mark as read" button on each unread notification, this puts the onus on the user to physical click to say they've seen / read the notification.
Due to the template changes, this PR also includes extra vendor:publish groups so you can publish just the megaphone views without it overwriting your config or assets.
If you published the templates from a previous version of Megaphone, updating to 1.0.2 won't automatically update your templates to have the new "mark as read" button. You can continue to use the old "mouseenter" event version of the templates and Megaphone will continue to work. If you would prefer to use the newer templates, simply run the following vendor publish command. Before running the command, if you have made any changes to the templates to match the theme of your application, make sure to back up those changes as this command will overwrite all megaphone templates within resources/views/vendor/megaphone.
php artisan vendor:publish --force --tag=megaphone-views
First release of Megaphone, a Livewire-based component that uses the power of Laravels built-in Notifications system to allow you to add "Bell Icon Notification System" to your app.
How can I help you explore Laravel packages today?