# HG changeset patch
# User rougeronj
# Date 1420798434 -3600
# Node ID 3abc79964948167028dac72615e782adc2650523
# Parent  9a3d5fdbf296e405f8e4e114b82b3d2f0e776327
Close #33 - Add loading status var to set up a loading bar while the renkan is loading

diff -r 9a3d5fdbf296 -r 3abc79964948 client/css/renkan.css
--- 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;
diff -r 9a3d5fdbf296 -r 3abc79964948 client/js/renderer/scene.js
--- 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">&lt;unknown user&gt;</span></div><ul class="Rk-UserList"></ul></div><% } %>' +
diff -r 9a3d5fdbf296 -r 3abc79964948 client/js/save-once.js
--- 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();
             }