soocrate-core

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../"> <title data-ice="title">view/statesheader.js | jquery-crate</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css"> <script src="script/prettify/prettify.js"></script> <script src="script/manual.js"></script> <meta name="description" content="Cratify tool that turns a division into a distributed and decentralized collaborative editor"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="jquery-crate"><meta property="twitter:description" content="Cratify tool that turns a division into a distributed and decentralized collaborative editor"></head> <body class="layout-container" data-ice="rootContainer"> <header> <a href="./">Home</a> <a href="identifiers.html">Reference</a> <a href="source.html">Source</a> <div class="search-box"> <span> <img src="./image/search.png"> <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span> </span> <ul class="search-result"></ul> </div> <a style="position:relative; top:3px;" href="https://github.com/haouarin/jquery-crate.git"><img width="20px" src="./image/github.png"></a></header> <nav class="navigation" data-ice="nav"><div> <ul> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/view/marker.js~Marker.html">Marker</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Editor">Editor</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-LinkView">LinkView</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-StatesHeader">StatesHeader</a></span></span></li> </ul> </div> </nav> <div class="content" data-ice="content"><h1 data-ice="title">view/statesheader.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content"> function StatesHeader(model, container){ this.model = model; this.red = "#cd2626"; this.yellow = "#eead0e"; this.green = "#228b22"; this.blue = "#00BFFF"; this.signalingState = jQuery('<i>').appendTo("#connectionState") .addClass('fa fa-circle-o-notch fa-2x') .attr('data-trigger', 'hover').attr('data-toggle', 'popover') .attr('title', 'Signaling server status') .attr('data-html', 'true').attr('data-content', '') .attr('data-placement', 'bottom') .popover() .hide(); this.networkState = jQuery('#state'); }; StatesHeader.prototype.setNetworkState = function(state){ switch (state){ case "connected": var connectedString = "<span class='alert-success'>Congratulations!</span> "+ "You are connected to people, and people are "+ "connected to you. <span class='alert-info'>You can start editing "+ "together</span>."; this.networkState.css("color", this.green); this.networkState.attr("data-content", connectedString); break; case "partiallyConnected": var partiallyConnectedString = "<span class='alert-warning'>Partially "+ "connected</span>: either you are connected to people, or people "+ "are connected to you. "+ "This is not great, but you <span class='alert-info'> still can "+ "edit.</span>"; this.networkState.css("color", this.green); this.networkState.attr("data-content", partiallyConnectedString); break; case "disconnected": var disconnectedString = "<span class='alert-danger'>Disconnected</span>:"+ " you are currently editing <span class='alert-info'>on"+ " your own</span>."; this.networkState.css("color", this.red); this.networkState.attr("data-content", disconnectedString); break; }; }; StatesHeader.prototype.setSignalingState = function(state){ var self = this; function blink(){ self.signalingState.show(); setTimeout( function(){ if (self.model.signaling.startedSocket){ blink(); } else { self.setSignalingState("done"); }; }, 1000); }; switch (state){ case "waitSignaling": this.signalingState.show(); this.signalingState.removeClass("fa-spin"); this.signalingState.css("color", this.yellow); var waitSignalingString = "<span class='alert-warning'>Connecting"+ "</span>: establishing a connection with the signaling server. "+ "The latter allows people to join the editing session by using "+ "the provided link. "+ "<i>If this state persists, consider reloading the page.</i>"; this.signalingState.attr("data-content", waitSignalingString); blink(); break; case "waitSharer": this.signalingState.show(); this.signalingState.addClass("fa-spin"); this.signalingState.css("color", this.blue); var waitSharerString = "The connection to the signaling server has "+ "been successfully established! <span class='alert-info'>Waiting "+ "for the sharer now</span>."; this.signalingState.attr("data-content", waitSharerString); blink(); break; case "waitJoiners": this.signalingState.css("color", this.blue); this.signalingState.addClass("fa-spin"); var waitJoinersString = "The connection to the signaling server has "+ "been <span class='alert-success'>successfully</span> "+ "established! "+ "The server allows people to join the editing session by using "+ "the provided link. "+ "<span class='alert-info'>Waiting for the collaborators</span>." this.signalingState.attr("data-content", waitJoinersString); blink(); break; case "done": this.signalingState.show(); this.signalingState.removeClass("fa-spin"); var doneString = "The connection to the signaling server has been "+ "<span class='alert-info'>terminated</span>."; this.signalingState.attr("data-content", doneString); this.signalingState.css("color", this.green); this.signalingState.fadeOut(6000, "linear"); break; }; }; module.exports = StatesHeader; </code></pre> </div> <footer class="footer"> Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.0.4)</span><img src="./image/esdoc-logo-mini-black.png"></a> </footer> <script src="script/search_index.js"></script> <script src="script/search.js"></script> <script src="script/pretty-print.js"></script> <script src="script/inherited-summary.js"></script> <script src="script/test-summary.js"></script> <script src="script/inner-link.js"></script> <script src="script/patch-for-local.js"></script> </body> </html>