Add What's new modal (#372)

js/WhatsNew.js

@@ -0,0 +1,43 @@
+BR.WhatsNew = {
+    init: function () {
+        var self = this;
+        self.prepare(self.hasNewVersions());
+        $('#whatsnew').on('hidden.bs.modal', function () {
+            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();
+            document.getElementsByClassName('version')[0].classList.remove('version-new');
+        });
+        if (self.hasNewVersions()) {
+            BR.message.showInfo(i18next.t('whatsnew.new-version'));
+            document.getElementsByClassName('version')[0].classList.add('version-new');
+        }
+    },
+
+    getLatestVersion: function () {
+        return BR.changelog.match('<h2 id="(.*)">')[1];
+    },
+
+    hasNewVersions: function () {
+        return true;
+        if (!BR.Util.localStorageAvailable()) return false;
+
+        var currentVersion = localStorage.getItem('changelogVersion');
+
+        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) {
+            var head = '<h2 id="' + currentVersion + '">';
+            cl = cl.substring(0, cl.indexOf(head));
+        }
+        container.innerHTML = cl;
+    },
+};

js/control/Message.js

@@ -12,8 +12,19 @@ BR.Message = L.Class.extend({
 
     _show: function (msg, type) {
         var ele = L.DomUtil.get(this.id),
-            iconClass = type === 'warning' ? 'fa-exclamation-triangle' : 'fa-times-circle',
-            alertClass = type === 'warning' ? 'alert-warning' : 'alert-danger';
+            iconClass,
+            alertClass;
+        switch (type) {
+            case 'error':
+                iconClass = 'fa-times-circle';
+                alertClass = 'alert-danger';
+            case 'warning':
+                iconClass = 'fa-exclamation-triangle';
+                alertClass = 'alert-warning';
+            case 'info':
+                iconClass = 'fa-info-circle';
+                alertClass = 'alert-info';
+        }
 
         L.DomEvent.disableClickPropagation(ele);
 
@@ -59,6 +70,10 @@ BR.Message = L.Class.extend({
     showWarning: function (msg) {
         this._show(msg, 'warning');
     },
+
+    showInfo: function (msg) {
+        this._show(msg, 'info');
+    },
 });
 
 // static instance as global control

js/index.js

@@ -452,6 +452,8 @@
             },
             urlHash
         );
+
+        BR.WhatsNew.init();
     }
 
     i18next.on('languageChanged', function (detectedLanguage) {