Skip to content

Commit ea6b57d

Browse files
pborissowpborissow
committed
Added option to dismiss the communication error popup in the Horizon app
1 parent 49d5a36 commit ea6b57d

File tree

1 file changed

+116
-34
lines changed

1 file changed

+116
-34
lines changed

‎ui/javascript/app/Horizon.js‎

Lines changed: 116 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -33,23 +33,57 @@ javaxt.express.app.Horizon = function(parent, config) {
3333
style: {
3434
javaxt: javaxt.dhtml.style.default,
3535
header: {
36+
37+
/** Style for the header that appears at the top of the app.
38+
*/
3639
div: "app-header",
40+
41+
42+
/** Style for the app icon/logo that appears on the left side of
43+
* the header.
44+
*/
3745
icon: "app-header-icon noselect",
46+
47+
48+
/** Style for the user profile button that appears on the right
49+
* side of the header.
50+
*/
3851
profileButton: "app-header-profile noselect",
52+
53+
54+
/** Style for the menu button that appears on the right side of
55+
* the header. The menu button consists of an icon and label.
56+
* The CSS class should include definitions for "icon" and
57+
* "label".
58+
*/
3959
menuButton: "app-header-menu noselect",
60+
61+
4062
menuPopup: "app-menu",
63+
4164
menuItem: "app-menu-item noselect"
4265
},
66+
4367
navbar: {
4468
div: "app-nav-bar",
4569
tabs: "app-tab-container"
4670
},
71+
4772
body: {
4873
div: "app-body"
4974
},
75+
5076
footer: {
5177
div: "app-footer"
52-
}
78+
},
79+
80+
/** Style for the communication error popup that is rendered when the
81+
* connection to the server is lost. The popup consists of an icon,
82+
* title, message, and a close button. The CSS class should include
83+
* definitions for "icon", "title", "message", and "close".
84+
*/
85+
communicationError: "communication-error center"
86+
5387
},
5488

5589

@@ -389,6 +423,7 @@ javaxt.express.app.Horizon = function(parent, config) {
389423

390424

391425
//Update the profile button
426+
if (user) profileButton.show();
392427
if (config.renderers.profileButton){
393428
config.renderers.profileButton(user, profileButton);
394429
}
@@ -465,6 +500,7 @@ javaxt.express.app.Horizon = function(parent, config) {
465500
if (currUser){
466501
if (op==="connect"){
467502
if (communicationError) communicationError.hide();
503+
menuButton.hideMessage();
468504
}
469505
else{
470506
if (!communicationError) createErrorMessage();
@@ -509,36 +545,19 @@ javaxt.express.app.Horizon = function(parent, config) {
509545
//** createHeader
510546
//**************************************************************************
511547
var createHeader = function(parent){
512-
513548
var tr = createTable(parent).addRow();
514-
var td;
515549

550+
//Render app icon/logo
551+
createElement("div", tr.addColumn(), config.style.header.icon);
516552

517-
td = tr.addColumn();
518-
createElement("div", td, config.style.header.icon);
519553

554+
//Add spacer
555+
tr.addColumn().style.width = "100%";
520556

521-
td = tr.addColumn();
522-
td.style.width = "100%";
523557

524-
525-
//Create profile button
526-
td = tr.addColumn();
527-
profileButton = createElement("div", td, config.style.header.profileButton);
528-
profileButton.onclick = function(e){
529-
if (currUser) showMenu(getProfileMenu(), this);
530-
};
531-
addShowHide(profileButton);
532-
533-
534-
//Create menu button
535-
td = tr.addColumn();
536-
menuButton = createElement("div", td, config.style.header.menuButton);
537-
createElement("i", menuButton, "fas fa-ellipsis-v");
538-
menuButton.onclick = function(e){
539-
if (currUser) showMenu(getMainMenu(), this);
540-
};
541-
addShowHide(menuButton);
558+
//Create buttons
559+
createProfileButton(tr.addColumn());
560+
createMenuButton(tr.addColumn());
542561
};
543562

544563

@@ -691,6 +710,37 @@ javaxt.express.app.Horizon = function(parent, config) {
691710
};
692711

693712

713+
//**************************************************************************
714+
//** createMenuButton
715+
//**************************************************************************
716+
var createMenuButton = function(parent){
717+
menuButton = createElement("div", parent, config.style.header.menuButton);
718+
menuButton.label = createElement("div", menuButton, "label");
719+
menuButton.icon = createElement("div", menuButton, "icon");
720+
menuButton.label.style.opacity = 0;
721+
menuButton.showMessage = function(msg){
722+
if (!msg) msg = "Warning";
723+
menuButton.classList.add("warning");
724+
menuButton.label.innerText = msg;
725+
menuButton.label.style.opacity = 1;
726+
};
727+
menuButton.hideMessage = function(){
728+
menuButton.label.style.opacity = 0;
729+
menuButton.label.style.display = "none";
730+
menuButton.classList.remove("warning");
731+
732+
setTimeout(()=>{
733+
menuButton.label.style.display = "";
734+
menuButton.label.style.opacity = 0;
735+
}, 500);
736+
};
737+
menuButton.onclick = function(e){
738+
if (currUser) showMenu(getMainMenu(), this);
739+
};
740+
addShowHide(menuButton);
741+
};
742+
743+
694744
//**************************************************************************
695745
//** showMenu
696746
//**************************************************************************
@@ -719,6 +769,18 @@ javaxt.express.app.Horizon = function(parent, config) {
719769
};
720770

721771

772+
//**************************************************************************
773+
//** createProfileButton
774+
//**************************************************************************
775+
var createProfileButton = function(parent){
776+
profileButton = createElement("div", parent, config.style.header.profileButton);
777+
profileButton.onclick = function(e){
778+
if (currUser) showMenu(getProfileMenu(), this);
779+
};
780+
addShowHide(profileButton);
781+
};
782+
783+
722784
//**************************************************************************
723785
//** getProfileMenu
724786
//**************************************************************************
@@ -777,34 +839,38 @@ javaxt.express.app.Horizon = function(parent, config) {
777839

778840
//Create show/hide functions
779841
var fx = config.fx;
780-
var transitionEffect = "ease";
842+
var transitionEffect = "easeInBack";
781843
var duration = 1000;
782844
var isVisible = false;
783845

784846
div.show = function(){
785847
if (isVisible) return;
786848
isVisible = true;
787-
fx.fadeIn(div, transitionEffect, duration, function(){
788-
menuButton.className += " warning";
789-
});
849+
fx.fadeIn(div, transitionEffect, duration);
790850
};
791851
div.hide = function(){
792852
if (!isVisible) return;
793853
isVisible = false;
794-
fx.fadeOut(div, transitionEffect, duration/2, function(){
795-
menuButton.className = menuButton.className.replaceAll("warning","").trim();
796-
});
854+
fx.fadeOut(div, transitionEffect, duration/2);
797855
};
798856
div.isVisible = function(){
799857
return isVisible;
800858
};
801859

802860

803861
//Add content
804-
var error = createElement("div", div, "communication-error center");
862+
var error = createElement("div", div, config.style.communicationError);
805863
createElement("div", error, "icon");
806864
createElement("div", error, "title").innerText = "Connection Lost";
807865
createElement("div", error, "message").innerText = config.messages.connectionLost;
866+
var closeButton = createElement("div", error, "close");
867+
closeButton.onclick = function(){
868+
div.style.display = "none";
869+
div.hide();
870+
setTimeout(()=>{
871+
menuButton.showMessage("Offline");
872+
}, 500);
873+
};
808874

809875

810876
//Add main div to windows array so it closes automatically on logoff
@@ -830,10 +896,21 @@ javaxt.express.app.Horizon = function(parent, config) {
830896
waitmask.show();
831897
currUser = null;
832898

899+
900+
//Update URL
901+
var state = window.history.state;
902+
if (!state) state = {};
903+
var url = window.location.href;
904+
var idx = url.indexOf("?");
905+
if (idx>-1) url = url.substring(0, idx);
906+
history.replaceState(state, config.name, url);
907+
908+
833909
//Disable event listeners
834910
disableEventListeners();
835911
disablePopstateListener();
836912

913+
837914
//Stop websocket listener
838915
if (ws){
839916
ws.stop();
@@ -871,12 +948,17 @@ javaxt.express.app.Horizon = function(parent, config) {
871948
panels = {};
872949

873950

874-
//Remove menus
951+
//Update menu
952+
menuButton.hideMessage();
875953
if (mainMenu){
876954
var parent = mainMenu.parentNode;
877955
if (parent) parent.removeChild(mainMenu);
878956
mainMenu = null;
879957
}
958+
959+
960+
//Update profile
961+
profileButton.hide();
880962
if (profileMenu){
881963
var parent = profileMenu.parentNode;
882964
if (parent) parent.removeChild(profileMenu);

0 commit comments

Comments
 (0)