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.
Upgrade Notes
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.
Config
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://livewire.laravel.com/docs/wire-poll
*/
'poll' => [
'enabled' => false,
'options' => [
'time' => '15s',
'keepAlive' => false,
'viewportVisible' => false,
],
],Wire:poll
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('megaphone::icon')
@include('megaphone::popout')
</div>
</div>Simply add the new Megaphone polling, blade directive to the first div.
<div class="megaphone" @megaphonePoll>
<div class="relative w-12 h-12" x-data="{ open: false }">
@include('megaphone::icon')
@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.
Mark all as read.
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 ($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>
@endifThat'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.
Templates
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.
Styles
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)
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.
