commit 47a86a5: [WebUI] Add URL fragments (#) support
moisseev
moiseev at mezonplus.ru
Sun May 12 10:14:03 UTC 2019
Author: moisseev
Date: 2019-05-12 13:00:47 +0300
URL: https://github.com/rspamd/rspamd/commit/47a86a5406b52e3379aac3f21cb9338313bda973 (refs/pull/2897/head)
[WebUI] Add URL fragments (#) support
for tab switching
- Show the correct tab when the page is loaded if there is a hash in the URL.
- Changing the hash in the URL when the tab is changed.
- Change the tab when the hash changes in the URL (back / forward buttons).
---
interface/index.html | 8 ++++----
interface/js/app/rspamd.js | 29 +++++++++++++++++++++++++----
interface/js/lib/jquery.stickytabs.min.js | 9 +++++++++
interface/js/main.js | 4 +++-
4 files changed, 41 insertions(+), 9 deletions(-)
diff --git a/interface/index.html b/interface/index.html
index 88a3c41f8..bb3206aa9 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -24,8 +24,8 @@
<form class="navbar-form navbar-left">
<select id="selSrv" class="form-control"></select>
</form>
- <ul class="nav navbar-nav nav-pills" role="tablist">
- <li role="presentation" class="active"><a id="status_nav" aria-controls="status" role="tab" href="#status" data-toggle="tab">Status</a></li>
+ <ul class="nav navbar-nav nav-pills nav-tabs-sticky" role="tablist">
+ <li role="presentation"><a id="status_nav" aria-controls="status" role="tab" href="#status" data-toggle="tab">Status</a></li>
<li role="presentation"><a id="throughput_nav" aria-controls="throughput" role="tab" href="#throughput" data-toggle="tab">Throughput</a></li>
@@ -35,8 +35,8 @@
<li role="presentation"><a id="history_nav" aria-controls="history" role="tab" href="#history" data-toggle="tab">History</a></li>
</ul>
<ul class="nav navbar-nav nav-pills pull-right" style="display: none;">
- <li><a href="#" data-toggle="tab" id="refresh"><i class="glyphicon glyphicon-refresh glyphicon-spin"></i> Refresh</a></li>
- <li><a href="#" data-toggle="tab" id="disconnect"><i class="glyphicon glyphicon-off"></i> Disconnect</a></li>
+ <li><a href="#" role="button" data-toggle="button" id="refresh"><i class="glyphicon glyphicon-refresh glyphicon-spin"></i> Refresh</a></li>
+ <li><a href="#" role="button" data-toggle="button" id="disconnect"><i class="glyphicon glyphicon-off"></i> Disconnect</a></li>
</ul>
</div>
</nav>
diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index 2188f201f..e37a08cf0 100644
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -25,10 +25,10 @@
/* global jQuery:false, Visibility:false */
-define(["jquery", "d3pie", "visibility", "nprogress", "app/stats", "app/graph", "app/config",
+define(["jquery", "d3pie", "visibility", "nprogress", "stickytabs", "app/stats", "app/graph", "app/config",
"app/symbols", "app/history", "app/upload"],
// eslint-disable-next-line max-params
-function ($, D3pie, visibility, NProgress, tab_stat, tab_graph, tab_config,
+function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
tab_symbols, tab_history, tab_upload) {
"use strict";
// begin
@@ -135,6 +135,23 @@ function ($, D3pie, visibility, NProgress, tab_stat, tab_graph, tab_config,
}
function displayUI() {
+ ui.query("auth", {
+ success: function (neighbours_status) {
+ $("#selSrv").empty();
+ $("#selSrv").append($('<option value="All SERVERS">All SERVERS</option>'));
+ neighbours_status.forEach(function (e) {
+ $("#selSrv").append($('<option value="' + e.name + '">' + e.name + "</option>"));
+ if (checked_server === e.name) {
+ $('#selSrv [value="' + e.name + '"]').prop("selected", true);
+ } else if (!e.status) {
+ $('#selSrv [value="' + e.name + '"]').prop("disabled", true);
+ }
+ });
+ },
+ errorMessage: "Cannot get server status",
+ server: "All SERVERS"
+ });
+
// In many browsers local storage can only store string.
// So when we store the boolean true or false, it actually stores the strings "true" or "false".
ui.read_only = sessionStorage.getItem("read_only") === "true";
@@ -152,7 +169,7 @@ function ($, D3pie, visibility, NProgress, tab_stat, tab_graph, tab_config,
$("#mainUI").show();
$("#progress").show();
$(buttons).show();
- tabClick("#refresh");
+ $(".nav-tabs-sticky").stickyTabs({initialTab:"#status_nav"});
$("#progress").hide();
}
@@ -267,7 +284,11 @@ function ($, D3pie, visibility, NProgress, tab_stat, tab_graph, tab_config,
}, 1000);
});
- $("a[data-toggle=\"tab\"]").on("click", function (e) {
+ $("a[data-toggle=\"tab\"]").on("shown.bs.tab", function (e) {
+ var tab_id = "#" + $(e.target).attr("id");
+ tabClick(tab_id);
+ });
+ $("a[data-toggle=\"button\"]").on("click", function (e) {
var tab_id = "#" + $(e.target).attr("id");
tabClick(tab_id);
});
diff --git a/interface/js/lib/jquery.stickytabs.min.js b/interface/js/lib/jquery.stickytabs.min.js
new file mode 100644
index 000000000..96967ea43
--- /dev/null
+++ b/interface/js/lib/jquery.stickytabs.min.js
@@ -0,0 +1,9 @@
+/*!
+ * jQuery Plugin: Sticky Tabs
+ *
+ * @author Aidan Lister <aidan at php.net>
+ * @version 1.2.1
+ * @see https://github.com/aidanlister/jquery-stickytabs
+ * @license MIT
+ */
+!function(c){c.fn.stickyTabs=function(o){function t(){var o="href"==n.selectorAttribute?window.location.hash:window.location.hash.substring(1),t=o?"a["+n.selectorAttribute+'="'+o+'"]':n.initialTab;c(t,i).tab("show"),setTimeout(l,1)}var i=this,n=c.extend({getHashCallback:function(o,t){return o},selectorAttribute:"href",backToTop:!1,initialTab:c("li.active > a",i)},o),l=function(){!0===n.backToTop&&window.scrollTo(0,0)};return t(),c(window).on("hashchange",t),c("a",i).on("click",function(o){var t=this.href.split("#")[1];!function(o){history&&history.pushState?history.pushState(null,null,window.location.pathname+window.location.search+"#"+o):(scrollV=document.body.scrollTop,scrollH=document.body.scrollLeft,window.location.hash=o,document.body.scrollTop=scrollV,document.body.scrollLeft=scrollH)}(n.getHashCallback(t,this)),setTimeout(l,1)}),this}}(jQuery);
\ No newline at end of file
diff --git a/interface/js/main.js b/interface/js/main.js
index 0c48d95f5..d5ca99a94 100644
--- a/interface/js/main.js
+++ b/interface/js/main.js
@@ -13,12 +13,14 @@ requirejs.config({
d3pie: "d3pie.min",
footable: "footable.min",
nprogress: "nprogress.min",
+ stickytabs: "jquery.stickytabs.min"
},
shim: {
bootstrap: {exports:"bootstrap", deps:["jquery"]},
d3pie: {exports:"d3pie", deps:["d3.global", "jquery"]},
d3evolution: {exports:"D3Evolution", deps:["d3", "jquery"]},
- footable: {deps:["bootstrap", "jquery"]}
+ footable: {deps:["bootstrap", "jquery"]},
+ stickytabs: {deps:["jquery"]}
}
});
More information about the Commits
mailing list