ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

use Bootstrap alerts for error/warning messages; profile messages in place

Browse source
This commit is contained in:
Norbert Renner 2015-03-26 20:55:35 +01:00
parent d79de3966a
commit 8e9746781c
5 changed files with 54 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

18
css/style.css
View file

@ -26,7 +26,6 @@ div.elevation {
top: 0px;
margin-top: 10px;
z-index: 1000;
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
#header {
@ -52,12 +51,6 @@ div.elevation {
margin-top: 0.5em;
line-height: 1.4em;
}
.warning {
color: darkorange;
}
.error {
color: red;
}
.heading {
font-weight: bold;
@ -232,6 +225,17 @@ textarea:focus {
padding: 2px 15px;
}
.alert {
margin-top: 3px;
margin-bottom: 0px;
padding-left: 35px;
}
.alert span.glyphicon {
position: relative;
left: -23px;
margin-right: -1em;
}
/*
* DataTables
*/

4
index.html
View file

@ -22,8 +22,7 @@
<body>
<div id="map"></div>
<div id="message" class="info hidden">
</div>
<div id="message"></div>
<div id="header" class="hidden">
<div class="title"><span class="title-name">BRouter web</span>&nbsp;&nbsp;<sup class="version">0.4.0</sup></div>
<div class="header-text">
@ -62,6 +61,7 @@
<div class="tab-pane active" id="tab_profile">
<form id="profile_upload" name="profile_upload">
<textarea type="text" name="profile" spellcheck="false" wrap="off" maxlength="100000" placeholder="... paste your custom routing profile here ..."></textarea>
<div id="profile_message"></div>
<div id="profile_buttons">
<button id="upload" type="button" class="btn btn-default btn-xs" data-uploading-text="Uploading..."><span class="glyphicon glyphicon-upload"></span> Upload</button>
<button id="clear" type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-ban-circle"></span> Clear</button>

56
js/control/Message.js
View file

@ -1,27 +1,36 @@
BR.Message = function () {
this.messageTimeout = null;
};
BR.Message = L.Class.extend({
options: {
// 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
},
initialize: function (id, options) {
L.setOptions(this, options);
this.id = id;
},
BR.Message.prototype = {
_show: function (msg, type) {
window.clearTimeout(this.messageTimeout);
var ele = L.DomUtil.get('message');
ele.innerHTML = msg;
L.DomUtil.removeClass(ele, 'hidden');
L.DomUtil.addClass(ele, type);
return ele;
var ele = L.DomUtil.get(this.id),
iconClass = (type === 'warning') ? 'glyphicon-warning-sign' : 'glyphicon-remove',
alertClass = (type === 'warning') ? 'alert-warning' : 'alert-danger';
ele.innerHTML =
'<div class="alert ' + alertClass + ' alert-dismissible fade in" role="alert">'
+ ' <button type="button" class="close" data-dismiss="alert" aria-label="Close">'
+ ' <span aria-hidden="true">&times;</span>'
+ ' </button>'
+ ' <span class="glyphicon ' + iconClass + '" aria-hidden="true"/></span>'
+ msg
+ '</div>';
if (this.options.alert) {
$('#' + this.id + ' .alert').alert();
}
},
_hide: function (type) {
window.clearTimeout(this.messageTimeout);
var ele = L.DomUtil.get('message');
if (!L.DomUtil.hasClass(ele, 'hidden')) {
L.DomUtil.addClass(ele, 'hidden');
ele.innerHTML = '';
}
if (L.DomUtil.hasClass(ele, type)) {
L.DomUtil.removeClass(ele, type);
}
$('#' + this.id + ' .alert').alert('close');
},
showError: function (err) {
@ -34,11 +43,8 @@ BR.Message.prototype = {
showWarning: function (msg) {
this._show(msg, 'warning');
this.messageTimeout = window.setTimeout(L.bind(function () {
this._hide('warning');
}, this), 10000);
}
};
});
// singleton
BR.message = new BR.Message();
// static instance as global control
BR.message = new BR.Message('message');

3
js/control/Profile.js
View file

@ -6,6 +6,9 @@ BR.Profile = L.Class.extend({
L.DomUtil.get('clear').onclick = L.bind(this.clear, this);
this.ele = document.profile_upload.profile;
this.message = new BR.Message('profile_message', {
alert: true
});
},
clear: function(evt) {

14
js/index.js
View file

@ -147,21 +147,21 @@
profile.on('update', function(evt) {
BR.message.hideError();
var profileId = routingOptions.getCustomProfile();
router.uploadProfile(profileId, evt.profileText, function(err, profile) {
router.uploadProfile(profileId, evt.profileText, function(err, profileId) {
if (!err) {
routingOptions.setCustomProfile(profile, true);
routingOptions.setCustomProfile(profileId, true);
updateRoute({
options: routingOptions.getOptions()
});
if (!saveWarningShown) {
BR.message.showWarning('Note: Uploaded custom profiles are only cached temporarily on the server.'
profile.message.showWarning('<strong>Note:</strong> Uploaded custom profiles are only cached temporarily on the server.'
+ '<br/>Please save your edits to your local PC.');
saveWarningShown = true;
}
} else {
BR.message.showError(err);
if (profile) {
routingOptions.setCustomProfile(profile, true);
profile.message.showError(err);
if (profileId) {
routingOptions.setCustomProfile(profileId, true);
router.setOptions(routingOptions.getOptions());
}
}
@ -172,7 +172,7 @@
});
});
profile.on('clear', function(evt) {
BR.message.hideError();
profile.message.hideError();
routingOptions.setCustomProfile(null);
});
trackMessages = new BR.TrackMessages({