kopia lustrzana https://github.com/c9/core
Revert "Created new offline indicator loosely based on slack"
Nikolai Onken
rodzic
6b3a15ab06
commit
e985b95943
|
|
@ -86,29 +86,27 @@ var connectClient = module.exports = function(connectEio, options) {
|
|||
});
|
||||
}
|
||||
|
||||
var timer;
|
||||
function reconnect(delay) {
|
||||
if (isReconnecting && typeof delay !== "number")
|
||||
function reconnect() {
|
||||
if (isReconnecting)
|
||||
return;
|
||||
|
||||
reconnectSocket.setSocket(null);
|
||||
connectAttempts += 1;
|
||||
|
||||
if (typeof delay !== "number") {
|
||||
if (connectAttempts < 10) {
|
||||
delay = 250;
|
||||
}
|
||||
else {
|
||||
delay = Math.min(60000, 250 * Math.pow(2, connectAttempts - 10));
|
||||
}
|
||||
var delay = 250;
|
||||
if (connectAttempts > 10) {
|
||||
delay = 10 * 1000;
|
||||
}
|
||||
else if (connectAttempts > 5) {
|
||||
delay = 5 * 1000;
|
||||
}
|
||||
else if (connectAttempts > 3) {
|
||||
delay = 1 * 1000;
|
||||
}
|
||||
|
||||
isReconnecting = true;
|
||||
console.log("Schedule re-connect in: " + delay);
|
||||
socket.emit("reconnectDelay", { delay: delay });
|
||||
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function() {
|
||||
setTimeout(function() {
|
||||
isReconnecting = false;
|
||||
connect();
|
||||
}, delay);
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ define(function(require, module, exports) {
|
|||
}, plugin);
|
||||
|
||||
vfs.on("disconnect", function(reason) {
|
||||
setStatus(state & ~STORAGE & ~PROCESS & ~NETWORK);
|
||||
setStatus(status & ~STORAGE & ~PROCESS & ~NETWORK);
|
||||
emit("disconnect");
|
||||
}, plugin);
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ define(function(require, module, exports) {
|
|||
}, plugin);
|
||||
|
||||
vfs.on("error", function(message) {
|
||||
setStatus(state & ~STORAGE & ~PROCESS);
|
||||
setStatus(status & ~STORAGE & ~PROCESS);
|
||||
// TODO: Don't display all errors?
|
||||
if (emit("showerrormessage", message) !== false) {
|
||||
console.error(
|
||||
|
|
|
|||
|
|
@ -1,23 +1,18 @@
|
|||
.errorlabel, .disconnectlabel{
|
||||
.errorlabel{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 10000000;
|
||||
/*text-align: center;*/
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
.font-smoothing(@error-font-smoothing);
|
||||
}
|
||||
.errorlabel.anim, .disconnectlabel.anim{
|
||||
.errorlabel.anim{
|
||||
transition: top 0.2s;
|
||||
-moz-transition: top 0.2s; /* Gecko */
|
||||
-webkit-transition: top 0.2s; /* Safari */
|
||||
}
|
||||
.errorlabel.fade-in{
|
||||
transition: opacity 0.2s;
|
||||
-moz-transition: opacity 0.2s; /* Gecko */
|
||||
-webkit-transition: opacity 0.2s; /* Safari */
|
||||
}
|
||||
.errorlabel div{
|
||||
background: @error-background;
|
||||
padding: @error-padding;
|
||||
|
|
@ -31,9 +26,6 @@
|
|||
max-width: 100%;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.errorlabel.fade-in div{
|
||||
border-radius: 3px;
|
||||
}
|
||||
.errorlabel u.close{
|
||||
.image-2x("@{image-path}/@{error-close-image}", 42px, 28px);
|
||||
background-position: @error-close-idle-position;
|
||||
|
|
@ -41,7 +33,7 @@
|
|||
height: 14px;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 6px;
|
||||
top: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.errorlabel u.close:hover{
|
||||
|
|
@ -53,25 +45,4 @@
|
|||
.errorlabel div span{
|
||||
border-bottom: 1px dotted rgb(255, 174, 174);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.disconnectlabel{
|
||||
z-index: 10000001;
|
||||
}
|
||||
.disconnectlabel div{
|
||||
background: @disconnect-background;
|
||||
padding: @disconnect-padding;
|
||||
color: @disconnect-color;
|
||||
border-radius: 0 0 3px 3px;
|
||||
box-shadow: @disconnect-box-shadow;
|
||||
line-height: 1.4;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
text-align: center;
|
||||
width: 300px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.disconnectlabel u{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -12,72 +12,22 @@ define(function(require, exports, module) {
|
|||
/***** Initialization *****/
|
||||
|
||||
var plugin = new Plugin("Ajax.org", main.consumes);
|
||||
var emit = plugin.getEmitter();
|
||||
|
||||
var topPx = 0;
|
||||
var error, hideTimeout;
|
||||
var lastCookie = 0;
|
||||
var offset = 0;
|
||||
var error, hideTimeout, disconnect;
|
||||
|
||||
var DISCONNECTDELAY = 1000;
|
||||
|
||||
var loaded = false;
|
||||
function load() {
|
||||
if (loaded) return false;
|
||||
loaded = true;
|
||||
|
||||
ui.insertCss(require("text!./error.css"),
|
||||
options.staticPrefix, plugin);
|
||||
}
|
||||
|
||||
function initDisconnectEvents(vfs){
|
||||
var timer;
|
||||
|
||||
vfs.once("connect", function(){
|
||||
vfs.connection.on("reconnectDelay", function(e){
|
||||
clearInterval(timer);
|
||||
|
||||
var delay = e.delay;
|
||||
if (delay > 999) {
|
||||
timer = setInterval(function(){
|
||||
if (vfs.connected)
|
||||
return clearInterval(timer);
|
||||
|
||||
delay -= 1000;
|
||||
showDisconnect({ delay: delay });
|
||||
|
||||
if (delay <= 0)
|
||||
clearInterval(timer);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
showDisconnect(e);
|
||||
});
|
||||
});
|
||||
vfs.on("connect", function(){
|
||||
hideDisconnect();
|
||||
});
|
||||
vfs.on("disconnect", function(){
|
||||
// setTimeout(function(){
|
||||
// showDisconnect();
|
||||
// }, DISCONNECTDELAY);
|
||||
});
|
||||
vfs.on("connecting", function(){
|
||||
showDisconnect({ connecting: true });
|
||||
});
|
||||
plugin.on("retryConnect", function(){
|
||||
vfs.connection.reconnect(0);
|
||||
});
|
||||
}
|
||||
|
||||
/***** Methods *****/
|
||||
|
||||
function getCenterX(){
|
||||
var bartools = document.querySelector(".bartools");
|
||||
if (!bartools) return 0; // For testing
|
||||
|
||||
var b1 = bartools.getBoundingClientRect();
|
||||
var b2 = bartools.nextSibling.getBoundingClientRect();
|
||||
|
||||
return b1.left + b1.width + ((b2.left - b1.left - b1.width)/2);
|
||||
}
|
||||
|
||||
function show(message, timeout) {
|
||||
// Error message container
|
||||
if (!error) {
|
||||
|
|
@ -113,21 +63,18 @@ define(function(require, exports, module) {
|
|||
error.innerHTML = "<div><u class='close'></u>"
|
||||
+ messageString + "</div>";
|
||||
|
||||
error.style.opacity = 0;
|
||||
error.style.display = "block";
|
||||
error.style.top = (offset - (error.offsetHeight - 10 + topPx)) + "px";
|
||||
error.firstChild.style.marginLeft = Math.max(0, (getCenterX() - (error.firstChild.offsetWidth / 2))) + "px";
|
||||
error.style.top = (-1 * error.offsetHeight - 10 + topPx) + "px";
|
||||
|
||||
// Start anim
|
||||
setTimeout(function() {
|
||||
error.className = "errorlabel anim " + (offset > 0 ? "fade-in" : "");
|
||||
error.style.top = (offset + topPx) + "px";
|
||||
error.style.opacity = 1;
|
||||
error.className = "errorlabel anim";
|
||||
error.style.top = topPx + "px";
|
||||
}, 10);
|
||||
|
||||
clearTimeout(hideTimeout);
|
||||
if (!(timeout < 0))
|
||||
hideTimeout = setTimeout(hide, timeout || 15000);
|
||||
setTimeout(hide, timeout || 15000);
|
||||
});
|
||||
|
||||
return ++lastCookie;
|
||||
|
|
@ -142,96 +89,19 @@ define(function(require, exports, module) {
|
|||
if (!error || error.style.display === "none")
|
||||
return callback && callback();
|
||||
|
||||
error.className = "errorlabel anim " + (offset > 0 ? "fade-in" : "");
|
||||
if (offset > 0)
|
||||
error.style.opacity = 0;
|
||||
else
|
||||
error.style.top = (-1 * error.offsetHeight - 10 + topPx) + "px";
|
||||
|
||||
error.className = "errorlabel anim";
|
||||
error.style.top = (-1 * error.offsetHeight - 10 + topPx) + "px";
|
||||
setTimeout(function() {
|
||||
error.style.display = "none";
|
||||
callback && callback();
|
||||
}, 220);
|
||||
}
|
||||
|
||||
function showDisconnect(options){
|
||||
// Error message container
|
||||
if (!disconnect) {
|
||||
disconnect = document.body.appendChild(document.createElement("div"));
|
||||
disconnect.className = "disconnectlabel";
|
||||
disconnect.addEventListener("mouseup", function(e) {
|
||||
if (e.target.tagName == "U")
|
||||
emit("retryConnect");
|
||||
});
|
||||
}
|
||||
|
||||
var message;
|
||||
if (!options || options.delay < 1000 || options.connecting)
|
||||
message = "Reconnecting...";
|
||||
else if (options.delay)
|
||||
message = "Reconnecting in " + Math.ceil(options.delay/1000)
|
||||
+ " seconds."
|
||||
+ (options.delay < 2001 ? "" : " <u>Retry Now.</u>");
|
||||
else
|
||||
message = "Reconnecting...";
|
||||
|
||||
disconnect.innerHTML = "<div>" + message + "</div>";
|
||||
disconnect.firstChild.style.marginLeft
|
||||
= Math.max(0, (getCenterX() - 150)) + "px";
|
||||
|
||||
if (disconnect.style.display == "block")
|
||||
return;
|
||||
|
||||
disconnect.style.display = "block";
|
||||
disconnect.style.top = (-1 * disconnect.offsetHeight - 10 + topPx) + "px";
|
||||
|
||||
// Start anim
|
||||
setTimeout(function() {
|
||||
disconnect.className = "disconnectlabel anim";
|
||||
disconnect.style.top = (topPx) + "px";
|
||||
}, 10);
|
||||
|
||||
offset = 28;
|
||||
|
||||
// document.querySelector(".c9-offline").addEventListener("click", function(){
|
||||
// alert("Offline Notication", "You are currently offline.",
|
||||
// "This indicator notifies you that Cloud9 is unable to reach "
|
||||
// + "the server. This usually happens because you are offline. "
|
||||
// + "Some features will be disabled until the "
|
||||
// + "network connection becomes available again. "
|
||||
// + "This notication could also show when the server is "
|
||||
// + "unreachable due to other reasons. Sometimes a refresh of "
|
||||
// + "the tab will fix an issue. Please e-mail "
|
||||
// + "support@c9.io for further problem resolution.");
|
||||
// }, false);
|
||||
}
|
||||
|
||||
function hideDisconnect(cookie, callback) {
|
||||
if (!disconnect || disconnect.style.display === "none")
|
||||
return callback && callback();
|
||||
|
||||
disconnect.className = "disconnectlabel anim";
|
||||
disconnect.style.top = (-1 * disconnect.offsetHeight - 10 + topPx) + "px";
|
||||
setTimeout(function() {
|
||||
disconnect.style.display = "none";
|
||||
callback && callback();
|
||||
}, 220);
|
||||
|
||||
offset = 0;
|
||||
}
|
||||
|
||||
/***** Lifecycle *****/
|
||||
|
||||
plugin.on("load", function() {
|
||||
load();
|
||||
});
|
||||
plugin.on("unload", function() {
|
||||
topPx = 0;
|
||||
lastCookie = 0;
|
||||
offset = 0;
|
||||
error = null;
|
||||
hideTimeout = null;
|
||||
});
|
||||
|
||||
/***** Register and define API *****/
|
||||
|
||||
|
|
@ -246,19 +116,6 @@ define(function(require, exports, module) {
|
|||
get top(){ return topPx; },
|
||||
set top(value){ topPx = value; },
|
||||
|
||||
get vfs(){ throw new Error("Permission Denied"); },
|
||||
set vfs(v){ initDisconnectEvents(v); },
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
showDisconnect: showDisconnect,
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
hideDisconnect: hideDisconnect,
|
||||
|
||||
/**
|
||||
* Displays an error message in the main error reporting UI.
|
||||
* @param {String} message The message to display.
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ define(function(require, exports, module) {
|
|||
|
||||
function main(options, imports, register) {
|
||||
var c9 = imports.c9;
|
||||
var alert = imports["dialog.alert"].show;
|
||||
var Plugin = imports.Plugin;
|
||||
var question = imports["dialog.question"];
|
||||
var settings = imports.settings;
|
||||
var commands = imports.commands;
|
||||
var alert = imports["dialog.alert"].show;
|
||||
var question = imports["dialog.question"];
|
||||
var preload = imports["layout.preload"];
|
||||
var anims = imports.anims;
|
||||
var ui = imports.ui;
|
||||
|
|
@ -126,6 +126,33 @@ define(function(require, exports, module) {
|
|||
img.src = options.staticPrefix + "/images/" + p;
|
||||
});
|
||||
|
||||
var hideOffline;
|
||||
c9.on("stateChange", function(e) {
|
||||
// Online
|
||||
if (e.state & c9.NETWORK && e.state & c9.STORAGE) {
|
||||
hideOffline && hideOffline();
|
||||
}
|
||||
// Offline
|
||||
else if (!hideOffline || hideOffline.hasClosed()) {
|
||||
hideOffline = notify("<div class='c9-offline'>No internet "
|
||||
+ "connection detected. Cloud9 will automatically try to "
|
||||
+ "reconnect when it detects an internet connection."
|
||||
+ "</div>", true, 1000);
|
||||
|
||||
document.querySelector(".c9-offline").addEventListener("click", function(){
|
||||
alert("Offline Notication", "You are currently offline.",
|
||||
"This indicator notifies you that Cloud9 is unable to reach "
|
||||
+ "the server. This usually happens because you are offline. "
|
||||
+ "Some features will be disabled until the "
|
||||
+ "network connection becomes available again. "
|
||||
+ "This notication could also show when the server is "
|
||||
+ "unreachable due to other reasons. Sometimes a refresh of "
|
||||
+ "the tab will fix an issue. Please e-mail "
|
||||
+ "support@c9.io for further problem resolution.");
|
||||
}, false);
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("resize", resize, false);
|
||||
window.addEventListener("focus", resize, false);
|
||||
|
||||
|
|
@ -515,21 +542,6 @@ define(function(require, exports, module) {
|
|||
window.removeEventListener("resize", resize);
|
||||
|
||||
if (removeTheme) removeTheme();
|
||||
|
||||
logobar = null;
|
||||
removeTheme = null;
|
||||
theme = null;
|
||||
c9console = null;
|
||||
menus = null;
|
||||
tabManager = null;
|
||||
panels = null;
|
||||
userLayout = null;
|
||||
ignoreTheme = null;
|
||||
notify = null;
|
||||
hideFlagUpdate = null;
|
||||
activeFindArea = null;
|
||||
defaultFindArea = null;
|
||||
activating = null;
|
||||
});
|
||||
|
||||
/***** Register and define API *****/
|
||||
|
|
|
|||
|
|
@ -632,12 +632,6 @@
|
|||
@error-close-hover-position: -14px -14px;
|
||||
@error-close-active-position: -28px -14px;
|
||||
|
||||
// Disconnect Dialog
|
||||
@disconnect-background: #D8B112;
|
||||
@disconnect-color: @error-color;
|
||||
@disconnect-padding: @error-padding;
|
||||
@disconnect-box-shadow: @error-box-shadow;
|
||||
|
||||
// Offline Dialog
|
||||
@offline-gradient: linear-gradient(top, rgb(60, 112, 153) 0%, rgb(61, 97, 126) 100%);
|
||||
@offline-border-bottom: 1px solid rgba(0, 0, 0, 0.61);
|
||||
|
|
|
|||
|
|
@ -632,12 +632,6 @@
|
|||
@error-close-hover-position: -14px -14px;
|
||||
@error-close-active-position: -28px -14px;
|
||||
|
||||
// Disconnect Dialog
|
||||
@disconnect-background: #D8B112;
|
||||
@disconnect-color: @error-color;
|
||||
@disconnect-padding: @error-padding;
|
||||
@disconnect-box-shadow: @error-box-shadow;
|
||||
|
||||
// Offline Dialog
|
||||
@offline-gradient: linear-gradient(top, rgb(60, 112, 153) 0%, rgb(61, 97, 126) 100%);
|
||||
@offline-border-bottom: 1px solid rgba(0, 0, 0, 0.61);
|
||||
|
|
|
|||
|
|
@ -632,12 +632,6 @@
|
|||
@error-close-hover-position: -14px -14px;
|
||||
@error-close-active-position: -28px -14px;
|
||||
|
||||
// Disconnect Dialog
|
||||
@disconnect-background: #D8B112;
|
||||
@disconnect-color: @error-color;
|
||||
@disconnect-padding: @error-padding;
|
||||
@disconnect-box-shadow: @error-box-shadow;
|
||||
|
||||
// Offline Dialog
|
||||
@offline-gradient: linear-gradient(top, #3d9ac4 0%, #3d9ac4 100%);
|
||||
@offline-border-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -632,12 +632,6 @@
|
|||
@error-close-hover-position: -14px -14px;
|
||||
@error-close-active-position: -28px -14px;
|
||||
|
||||
// Disconnect Dialog
|
||||
@disconnect-background: #D8B112;
|
||||
@disconnect-color: @error-color;
|
||||
@disconnect-padding: @error-padding;
|
||||
@disconnect-box-shadow: @error-box-shadow;
|
||||
|
||||
// Offline Dialog
|
||||
@offline-gradient: linear-gradient(top, rgb(60, 112, 153) 0%, rgb(61, 97, 126) 100%);
|
||||
@offline-border-bottom: 1px solid rgba(0, 0, 0, 0.61);
|
||||
|
|
|
|||
|
|
@ -632,12 +632,6 @@
|
|||
@error-close-hover-position: -14px -14px;
|
||||
@error-close-active-position: -28px -14px;
|
||||
|
||||
// Disconnect Dialog
|
||||
@disconnect-background: #D8B112;
|
||||
@disconnect-color: @error-color;
|
||||
@disconnect-padding: @error-padding;
|
||||
@disconnect-box-shadow: @error-box-shadow;
|
||||
|
||||
// Offline Dialog
|
||||
@offline-gradient: linear-gradient(top, rgb(60, 112, 153) 0%, rgb(61, 97, 126) 100%);
|
||||
@offline-border-bottom: 1px solid rgba(0, 0, 0, 0.61);
|
||||
|
|
|
|||
|
|
@ -30,9 +30,8 @@ define(function(require, exports, module) {
|
|||
var Plugin = imports.Plugin;
|
||||
var auth = imports.auth;
|
||||
var vfsEndpoint = imports["vfs.endpoint"];
|
||||
var errorDialog = imports["dialog.error"];
|
||||
var showError = errorDialog.show;
|
||||
var hideError = errorDialog.hide;
|
||||
var showError = imports["dialog.error"].show;
|
||||
var hideError = imports["dialog.error"].hide;
|
||||
var showAlert = imports["dialog.alert"].show;
|
||||
|
||||
var eio = require("engine.io");
|
||||
|
|
@ -50,9 +49,6 @@ define(function(require, exports, module) {
|
|||
var plugin = new Plugin("Ajax.org", main.consumes);
|
||||
var emit = plugin.getEmitter();
|
||||
|
||||
// Give reference to vfs to plugin
|
||||
errorDialog.vfs = plugin;
|
||||
|
||||
var buffer = [];
|
||||
var installChecked = false;
|
||||
var withInstall = options.withInstall;
|
||||
|
|
@ -334,22 +330,6 @@ define(function(require, exports, module) {
|
|||
});
|
||||
plugin.on("unload", function(){
|
||||
loaded = false;
|
||||
|
||||
id = null;
|
||||
buffer = [];
|
||||
installChecked = false;
|
||||
region = null;
|
||||
vfsBaseUrl = null;
|
||||
homeUrl = null;
|
||||
projectUrl = null;
|
||||
pingUrl = null;
|
||||
serviceUrl = null;
|
||||
eioOptions = null;
|
||||
consumer = null;
|
||||
vfs = null;
|
||||
showErrorTimer = null;
|
||||
showErrorTimerMessage = null;
|
||||
lastError = null;
|
||||
});
|
||||
|
||||
/***** Register and define API *****/
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue