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>
@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.

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.

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!

Upgrade Notes

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.

• config/megaphone.php
• public/vendor/megaphone
• resources/views/vendor/megaphone

Once vendor publish has run, remember to merge back in any changes you have made that are required.

Thanks again to @pjkellar and @hpacleb 🙏

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.

Updating to 1.0.2

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

• Fix: Numerous Readme updates, fixing incorrect instructions. Demo also added! PR #10
• Fix: Spelling mistake in template caused bug with justified items PR #5
• Fix: Added support for PHP7.4 PR #13

Thanks to @pjkellar for the PR fixing the spelling mistake in the template!

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.