Add What's new modal (#372)
This commit is contained in:
Gautier P
GitHub
parent
0ee37f557a
commit
1a695db333
9 changed files with 133 additions and 4 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
11
gulpfile.js
11
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'
|
||||
)
|
||||
);
|
||||
|
||||
|
|
|
|||
46
index.html
46
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">×</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>
|
||||
|
|
|
|||
43
js/WhatsNew.js
Normal file
43
js/WhatsNew.js
Normal file
|
|
@ -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;
|
||||
},
|
||||
};
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -452,6 +452,8 @@
|
|||
},
|
||||
urlHash
|
||||
);
|
||||
|
||||
BR.WhatsNew.init();
|
||||
}
|
||||
|
||||
i18next.on('languageChanged', function (detectedLanguage) {
|
||||
|
|
|
|||
|
|
@ -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!"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue