Add What's new modal (#372)

css/style.css

@@ -764,3 +764,9 @@ table.dataTable.display tbody tr:hover.selected {
 #selectionText {
     display: none;
 }
+
+.version-new::after {
+    font-family: FontAwesome;
+    content: '\f06a'; /* fa-exclamation */
+    margin-left: 3px;
+}

gulpfile.js

@@ -28,6 +28,8 @@ var rename = require('gulp-rename');
 var browserSync = require('browser-sync');
 var merge = require('merge-stream');
 var babel = require('gulp-babel');
+var marked = require('marked');
+var fs = require('fs');
 
 const server = browserSync.create();
 
@@ -63,6 +65,7 @@ var paths = {
         )
         .concat([
             'js/Browser.js',
+            'js/WhatsNew.js',
             'js/Util.js',
             'js/Map.js',
             'js/LayersConfig.js',
@@ -184,6 +187,11 @@ gulp.task('boundaries', function () {
     return gulp.src(paths.boundaries).pipe(gulp.dest(paths.dest + '/boundaries'));
 });
 
+gulp.task('changelog', function (cb) {
+    var content = 'BR.changelog = `' + marked(fs.readFileSync('./CHANGELOG.md', 'utf-8')) + '`';
+    fs.writeFile(paths.dest + '/changelog.js', content, cb);
+});
+
 gulp.task('reload', function (done) {
     server.reload();
     done();
@@ -350,7 +358,8 @@ gulp.task(
         'images',
         'fonts',
         'locales',
-        'boundaries'
+        'boundaries',
+        'changelog'
     )
 );
 

index.html

@@ -341,6 +341,49 @@
                             on the client.
                         </p>
                     </div>
+                    <div class="modal-footer mt-4">
+                        <button
+                            type="button"
+                            class="btn btn-secondary"
+                            data-i18n="whatsnew.title"
+                            data-toggle="modal"
+                            data-target="#whatsnew"
+                        >
+                            What's new?
+                        </button>
+                        <button type="button" class="btn btn-primary" data-i18n="modal.close" data-dismiss="modal">
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- What's new modal window -->
+        <div
+            class="modal fade"
+            id="whatsnew"
+            tabindex="-1"
+            role="dialog"
+            aria-labelledby="What's new window"
+            aria-hidden="true"
+        >
+            <div class="modal-dialog modal-lg" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h4 class="modal-title" data-i18n="whatsnew.title">What's new?</h4>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <!-- will be filled automatically -->
+                    </div>
+                    <div class="modal-footer mt-4">
+                        <button type="button" class="btn btn-primary" data-i18n="modal.close" data-dismiss="modal">
+                            Close
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -695,7 +738,7 @@
                 </div>
             </div>
         </div>
-        <!-- Track to Route window  END -->
+
         <div id="content" class="flexcolumn flexgrow">
             <div id="sidebarTabs" class="leaflet-sidebar-tabs collapsed">
                 <ul role="tablist">
@@ -1111,6 +1154,7 @@
         <!-- <script src="dist/url-search-params.js"></script> -->
         <script src="config.js"></script>
         <script src="keys.js"></script>
+        <script src="dist/changelog.js"></script>
         <script src="dist/layers.js"></script>
         <script src="dist/layersConf.js"></script>
         <script src="dist/turf.min.js"></script>

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',
+            iconClass,
-            alertClass = type === 'warning' ? 'alert-warning' : 'alert-danger';
+            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) {

locales/en.json

@@ -281,5 +281,9 @@
     "temporary-profile": "<strong>Note:</strong> Uploaded custom profiles are only cached temporarily on the server.<br/>Please save your edits to your local PC.",
     "tracks-load-error": "Error loading tracks: {{error}}",
     "upload-error": "Upload error: {{error}}"
+  },
+  "whatsnew": {
+    "title": "What's new?",
+    "new-version": "A new version was released since your last visit. Click <a href='.' data-toggle='modal' data-target='#whatsnew'>here</a> to see what's new!"
   }
 }

package.json

@@ -112,6 +112,7 @@
         "gulp-zip": "^5.0.2",
         "husky": "^4.3.4",
         "i18next-scanner": "^3.0.0",
+        "marked": "^2.0.0",
         "merge-stream": "^2.0.0",
         "node-fetch": "^2.6.1",
         "npmfiles": "^0.1.3",

yarn.lock

@@ -6514,6 +6514,11 @@ mapbbcode@MapBBCode/mapbbcode#v1.2.0:
   version "1.2.0"
   resolved "https://codeload.github.com/MapBBCode/mapbbcode/tar.gz/8407568e560008bb191ed5754ae83449cea574c2"
 
+marked@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.0.tgz#9662bbcb77ebbded0662a7be66ff929a8611cee5"
+  integrity sha512-NqRSh2+LlN2NInpqTQnS614Y/3NkVMFFU6sJlRFEpxJ/LHuK/qJECH7/fXZjk4VZstPW/Pevjil/VtSONsLc7Q==
+
 matchdep@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/matchdep/-/matchdep-2.0.0.tgz#c6f34834a0d8dbc3b37c27ee8bbcb27c7775582e"