Remove whatsnew icon when modal is displayed or dismissed

index.html

@@ -910,6 +910,7 @@
                 <div id="map" class="leaflet-sidebar-map">
                     <div id="notification_jar">
                         <div id="message"></div>
+                        <div id="whats_new_message"></div>
                         <div id="overpass_loading_indicator"></div>
                     </div>
                     <div id="preview" hidden data-i18n="map.preview">Preview</div>

js/WhatsNew.js

@@ -1,18 +1,24 @@
 BR.WhatsNew = {
     init: function () {
         var self = this;
-        self.prepare(self.hasNewVersions());
+        self.dismissableMessage = new BR.Message('whats_new_message', {
-        $('#whatsnew').on('hidden.bs.modal', function () {
+            onClosed: function () {
+                document.getElementsByClassName('version')[0].classList.remove('version-new');
                 localStorage.setItem('changelogVersion', self.getLatestVersion());
                 // next time popup is open, by default we will see everything
                 self.prepare(false);
+            },
         });
         $('#whatsnew').on('shown.bs.modal', function () {
-            BR.message.hide();
+            self.dismissableMessage.hide();
-            document.getElementsByClassName('version')[0].classList.remove('version-new');
         });
+        if (!self.getCurrentVersion()) {
+            localStorage.setItem('changelogVersion', self.getLatestVersion());
+        }
+        self.prepare(self.hasNewVersions());
+
         if (self.hasNewVersions()) {
-            BR.message.showInfo(i18next.t('whatsnew.new-version'));
+            self.dismissableMessage.showInfo(i18next.t('whatsnew.new-version'));
             document.getElementsByClassName('version')[0].classList.add('version-new');
         }
     },
@@ -21,20 +27,21 @@ BR.WhatsNew = {
         return BR.changelog.match('<h2 id="(.*)">')[1];
     },
 
+    getCurrentVersion: function () {
+        return localStorage.getItem('changelogVersion');
+    },
+
     hasNewVersions: function () {
         if (!BR.Util.localStorageAvailable()) return false;
 
-        var currentVersion = localStorage.getItem('changelogVersion');
+        return this.getCurrentVersion() && this.getCurrentVersion() < this.getLatestVersion();
-
-        return currentVersion && currentVersion < this.getLatestVersion();
     },
 
     prepare: function (newOnly) {
-        var currentVersion = localStorage.getItem('changelogVersion');
         var container = document.querySelector('#whatsnew .modal-body');
         var cl = BR.changelog;
-        if (newOnly && currentVersion) {
+        if (newOnly && this.getCurrentVersion()) {
-            var head = '<h2 id="' + currentVersion + '">';
+            var head = '<h2 id="' + this.getCurrentVersion() + '">';
             cl = cl.substring(0, cl.indexOf(head));
         }
         container.innerHTML = cl;

js/control/Message.js

@@ -3,6 +3,7 @@ BR.Message = L.Class.extend({
         // true to manually attach click event to close button,
         // Bootstrap data-api's auto-initialization doesn't work in Controls because of stopPropagation
         alert: false,
+        onClosed: null,
     },
 
     initialize: function (id, options) {
@@ -45,6 +46,10 @@ BR.Message = L.Class.extend({
             msg +
             '</div>';
 
+        if (this.options.onClosed) {
+            $('#' + this.id + ' .alert').on('closed.bs.alert', this.options.onClosed);
+        }
+
         if (this.options.alert) {
             $('#' + this.id + ' .alert').alert();
         }