Close #33 - Add loading status var to set up a loading bar while the renkan is loading
--- a/client/css/renkan.css Mon Jan 05 17:36:33 2015 +0100
+++ b/client/css/renkan.css Fri Jan 09 11:13:54 2015 +0100
@@ -92,6 +92,21 @@
background: -ms-linear-gradient(top, #505050 5px, #1e1e1e 30px);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#1e1e1e',GradientType=0 );
}
+.Rk-TopBar .loader {
+ display: block;
+ background: none repeat red;
+ width:0;
+ height: 4px;
+ overflow: hidden;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ transition: width 3s linear;
+ z-index: 50;
+}
+.Rk-TopBar .loader.run {
+ width: 100%;
+}
.Rk-PadTitle {
float: left; font-size: 14px; height: 16px; margin: 4px 5px; background: #666666; padding: 4px; border: 1px solid #333333;
--- a/client/js/renderer/scene.js Mon Jan 05 17:36:33 2015 +0100
+++ b/client/js/renderer/scene.js Fri Jan 09 11:13:54 2015 +0100
@@ -329,6 +329,15 @@
}
});
+ this.renkan.project.on("change:loading_status", function(){
+ if (_this.renkan.project.get("loading_status")){
+ var animate = _this.$.find(".loader").addClass("run");
+ var timer = setTimeout(function(){
+ _this.$.find(".loader").hide(250);
+ }, 3000);
+ }
+ });
+
this.renkan.project.on("add:users remove:users", _thRedrawUsers);
this.renkan.project.on("add:views remove:views", function(_node) {
@@ -342,11 +351,15 @@
this.renkan.project.on("add:nodes", function(_node) {
_this.addRepresentation("Node", _node);
- _thRedraw();
+ if (!_this.renkan.project.get("loading_status")){
+ _thRedraw();
+ }
});
this.renkan.project.on("add:edges", function(_edge) {
_this.addRepresentation("Edge", _edge);
- _thRedraw();
+ if (!_this.renkan.project.get("loading_status")){
+ _thRedraw();
+ }
});
this.renkan.project.on("change:title", function(_model, _title) {
var el = _this.$.find(".Rk-PadTitle");
@@ -465,7 +478,7 @@
_(Scene.prototype).extend({
template: _.template(
- '<% if (options.show_top_bar) { %><div class="Rk-TopBar"><% if (!options.editor_mode) { %><h2 class="Rk-PadTitle"><%- project.get("title") || translate("Untitled project")%></h2>' +
+ '<% if (options.show_top_bar) { %><div class="Rk-TopBar"><div class="loader"></div><% if (!options.editor_mode) { %><h2 class="Rk-PadTitle"><%- project.get("title") || translate("Untitled project")%></h2>' +
'<% } else { %><input type="text" class="Rk-PadTitle" value="<%- project.get("title") || "" %>" placeholder="<%-translate("Untitled project")%>" /><% } %>' +
'<% if (options.show_user_list) { %><div class="Rk-Users"><div class="Rk-CurrentUser"><% if (options.show_user_color) { %><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-CurrentUser-Color"><% if (options.user_color_editable) { %><span class="Rk-Edit-ColorTip"></span><% } %></span>' +
'<% if (options.user_color_editable) { print(colorPicker) } %></div><% } %><span class="Rk-CurrentUser-Name"><unknown user></span></div><ul class="Rk-UserList"></ul></div><% } %>' +
--- a/client/js/save-once.js Mon Jan 05 17:36:33 2015 +0100
+++ b/client/js/save-once.js Fri Jan 09 11:13:54 2015 +0100
@@ -19,8 +19,12 @@
Rkns.$.ajax({
url: _opts.url,
data: getdata,
+ beforeSend: function(){
+ _proj.set({loading_status:true});
+ },
success: function(_data) {
_proj.set(_data, {validate: true});
+ _proj.set({loading_status:false});
_proj.set({save_status:0});
_renkan.renderer.autoScale();
}