add timeout to buttons
authorymh <ymh.work@gmail.com>
Fri, 13 Mar 2015 10:56:19 +0100
changeset 396 b51c25ef4292
parent 395 2e8c92eb0dfa
child 397 5617e706ba09
add timeout to buttons
client/js/renderer/baserepresentation.js
client/js/renderer/nodebutton.js
client/js/renderer/noderepr.js
client/js/renderer/scene.js
client/test/test-writable-simple-empty.html
--- a/client/js/renderer/baserepresentation.js	Wed Mar 04 09:39:11 2015 +0100
+++ b/client/js/renderer/baserepresentation.js	Fri Mar 13 10:56:19 2015 +0100
@@ -48,7 +48,7 @@
         },
         redraw: function() {},
         moveTo: function() {},
-        show: function() { return "chaud cacao"; },
+        show: function() { return "BaseRepresentation.show"; },
         hide: function() {},
         select: function() {
             if (this.model) {
--- a/client/js/renderer/nodebutton.js	Wed Mar 04 09:39:11 2015 +0100
+++ b/client/js/renderer/nodebutton.js	Fri Mar 13 10:56:19 2015 +0100
@@ -1,7 +1,7 @@
 
 define(['jquery', 'underscore', 'requtils', 'renderer/basebutton'], function ($, _, requtils, BaseButton) {
     'use strict';
-    
+
     var Utils = requtils.getUtils();
 
     /* _NodeButton Begin */
@@ -27,7 +27,20 @@
                 );
                 this.lastSectorInner = sectorInner;
             }
-        }
+        },
+        unselect: function() {
+            BaseButton.prototype.unselect.apply(this, Array.prototype.slice.call(arguments, 1));
+            if(this.source_representation && this.source_representation.buttons_timeout) {
+                clearTimeout(this.source_representation.buttons_timeout);
+                this.source_representation.hideButtons();
+            }
+        },
+        select: function() {
+            if(this.source_representation && this.source_representation.buttons_timeout) {
+                clearTimeout(this.source_representation.buttons_timeout);
+            }
+            this.sector.select();
+        },
     });
 
     /* _NodeButton End */
--- a/client/js/renderer/noderepr.js	Wed Mar 04 09:39:11 2015 +0100
+++ b/client/js/renderer/noderepr.js	Fri Mar 13 10:56:19 2015 +0100
@@ -24,7 +24,7 @@
                 this.h_ratio = 0;
             }
             this.title = $('<div class="Rk-Label">').appendTo(this.renderer.labels_$);
-            
+
             if (this.options.editor_mode) {
                 var Renderer = requtils.getRenderer();
                 this.normal_buttons = [
@@ -38,7 +38,7 @@
                                                new Renderer.NodeRevertButton(this.renderer, null)
                                                ];
                 this.all_buttons = this.normal_buttons.concat(this.pending_delete_buttons);
-                
+
                 for (var i = 0; i < this.all_buttons.length; i++) {
                     this.all_buttons[i].source_representation = this;
                 }
@@ -204,7 +204,7 @@
                 _clip = null,
                 baseRadius = null,
                 centerPoint = null;
-                
+
                 if (hasClipPath) {
                     _clip = new paper.Path();
                     var instructions = clipPath.match(/[a-z][^a-z]+/gi) || [],
@@ -357,12 +357,17 @@
             }
             this._super("select");
         },
+        hideButtons: function() {
+            this.all_buttons.forEach(function(b) {
+                b.hide();
+            });
+            delete(this.buttonTimeout);
+        },
         unselect: function(_newTarget) {
             if (!_newTarget || _newTarget.source_representation !== this) {
                 this.selected = false;
-                this.all_buttons.forEach(function(b) {
-                    b.hide();
-                });
+                var _this = this;
+                this.buttons_timeout = setTimeout(function() { _this.hideButtons(); }, 200);
                 this.circle.strokeWidth = this.options.node_stroke_width;
                 $('.Rk-Bin-Item').removeClass("selected");
                 if (this.renderer.minimap) {
--- a/client/js/renderer/scene.js	Wed Mar 04 09:39:11 2015 +0100
+++ b/client/js/renderer/scene.js	Fri Mar 13 10:56:19 2015 +0100
@@ -29,7 +29,7 @@
         this.buttons_layer = new paper.Layer();
         this.delete_list = [];
         this.redrawActive = true;
-        
+
         var currentWidth = this.canvas_$.width();
         var currentHeight = this.canvas_$.height();
 
@@ -279,34 +279,34 @@
         bindClick(".Rk-Fold-Bins", "foldBins");
 
         paper.view.onResize = function(_event) {
-        	var _ratio,
-        		newWidth= _this.canvas_$.parent().width(),
-				newHeight = _this.canvas_$.parent().height();
-        	
+            var _ratio,
+                newWidth= _this.canvas_$.parent().width(),
+                newHeight = _this.canvas_$.parent().height();
             // Because of paper bug which does not calculate the good height and width
-            // We have to update manually the canvas's height and width        	
+            // We have to update manually the canvas's height and width
+
             paper.view._viewSize.height =  _event.size.height = _this.canvas_$.parent().height();
             paper.view._viewSize.width =  _event.size.height = _this.canvas_$.parent().width();
-            
+
             if (_this.minimap) {
                 _this.minimap.topleft = paper.view.bounds.bottomRight.subtract(_this.minimap.size);
                 _this.minimap.rectangle.fitBounds(_this.minimap.topleft.subtract([2,2]), _this.minimap.size.add([4,4]));
                 _this.minimap.cliprectangle.fitBounds(_this.minimap.topleft, _this.minimap.size);
             }
-            
+
             if (newHeight < newWidth) {
-            		_ratio = (newHeight/currentHeight);
+                    _ratio = (newHeight/currentHeight);
             } else {
-            	_ratio = (newWidth/currentWidth);
+                _ratio = (newWidth/currentWidth);
             }
-            
-        	_this.resizeZoom((newWidth/currentWidth), (newHeight/currentHeight), _ratio);
-        	
-        	currentWidth = newWidth;
-        	currentHeight = newHeight;
-        	
-        	_this.redraw();
-            
+
+            _this.resizeZoom((newWidth/currentWidth), (newHeight/currentHeight), _ratio);
+
+            currentWidth = newWidth;
+            currentHeight = newHeight;
+
+            _this.redraw();
+
         };
 
         var _thRedraw = _.throttle(function() {
@@ -331,34 +331,34 @@
 
         // register model events
         this.renkan.project.on("change:save_status", function(){
-        	switch (_this.renkan.project.get("save_status")) {
-	            case 0: //clean
-	            	_this.$.find(".Rk-Save-Button").removeClass("to-save");
-	            	_this.$.find(".Rk-Save-Button").removeClass("saving");
-	        		_this.$.find(".Rk-Save-Button").addClass("saved");
-	                break;
-	            case 1: //dirty
-	            	_this.$.find(".Rk-Save-Button").removeClass("saved");
-	            	_this.$.find(".Rk-Save-Button").removeClass("saving");
-	        		_this.$.find(".Rk-Save-Button").addClass("to-save");
-	                break;
-	            case 2: //saving
-	            	_this.$.find(".Rk-Save-Button").removeClass("saved");
-	            	_this.$.find(".Rk-Save-Button").removeClass("to-save");
-	        		_this.$.find(".Rk-Save-Button").addClass("saving");
-	                break;
-        	}
+            switch (_this.renkan.project.get("save_status")) {
+                case 0: //clean
+                    _this.$.find(".Rk-Save-Button").removeClass("to-save");
+                    _this.$.find(".Rk-Save-Button").removeClass("saving");
+                    _this.$.find(".Rk-Save-Button").addClass("saved");
+                    break;
+                case 1: //dirty
+                    _this.$.find(".Rk-Save-Button").removeClass("saved");
+                    _this.$.find(".Rk-Save-Button").removeClass("saving");
+                    _this.$.find(".Rk-Save-Button").addClass("to-save");
+                    break;
+                case 2: //saving
+                    _this.$.find(".Rk-Save-Button").removeClass("saved");
+                    _this.$.find(".Rk-Save-Button").removeClass("to-save");
+                    _this.$.find(".Rk-Save-Button").addClass("saving");
+                    break;
+            }
         });
-        
+
         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); 
-        	}
+            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) {
@@ -373,13 +373,13 @@
         this.renkan.project.on("add:nodes", function(_node) {
             _this.addRepresentation("Node", _node);
             if (!_this.renkan.project.get("loading_status")){
-            	_thRedraw();
+                _thRedraw();
             }
         });
         this.renkan.project.on("add:edges", function(_edge) {
             _this.addRepresentation("Edge", _edge);
             if (!_this.renkan.project.get("loading_status")){
-            	_thRedraw();
+                _thRedraw();
             }
         });
         this.renkan.project.on("change:title", function(_model, _title) {
@@ -1196,21 +1196,21 @@
                 }
                 var widthAft = this.$.width();
                 var heightAft = this.$.height();
-                
+
                 if (this.renkan.options.show_top_bar) {
-                	heightAft -= this.$.find(".Rk-TopBar").height();
+                    heightAft -= this.$.find(".Rk-TopBar").height();
                 }
                 if (this.renkan.options.show_bins && (this.renkan.$.find(".Rk-Bins").position().left > 0)) {
-                	widthAft -= this.renkan.$.find(".Rk-Bins").width();
+                    widthAft -= this.renkan.$.find(".Rk-Bins").width();
                 }
-                
+
                 this.canvas_$.attr({
-                	width: widthAft,
-                	height: heightAft
+                    width: widthAft,
+                    height: heightAft
                 });
-                
+
                 paper.view.viewSize = new paper.Size([this.canvas_$.width(), this.canvas_$.height()]);
-                
+
             } else {
                 for (i = 0; i < _requestMethods.length; i++) {
                     if (typeof _el[_requestMethods[i]] === "function") {
@@ -1237,8 +1237,8 @@
             this.setScale( _newScale, _offset );
         },
         resizeZoom: function(_scaleWidth, _scaleHeight, _ratio) {
-        	var _newScale = this.scale * _ratio,
-            	_offset = new paper.Point([
+            var _newScale = this.scale * _ratio,
+                _offset = new paper.Point([
                                        (this.offset.x * _scaleWidth),
                                        (this.offset.y * _scaleHeight)
                                        ]);
@@ -1306,8 +1306,8 @@
             var foldBinsButton = this.$.find(".Rk-Fold-Bins"),
                 bins = this.renkan.$.find(".Rk-Bins");
             var _this = this,
-            	sizeBef = _this.canvas_$.width(),
-            	sizeAft;
+                sizeBef = _this.canvas_$.width(),
+                sizeAft;
             if (bins.position().left < 0) {
                 bins.animate({left: 0},250);
                 this.$.animate({left: 300},250,function() {
@@ -1315,9 +1315,9 @@
                     paper.view.viewSize = new paper.Size([w, _this.canvas_$.height()]);
                 });
                 if ((sizeBef -  bins.width()) < bins.height()){
-                	sizeAft = sizeBef;
+                    sizeAft = sizeBef;
                 } else {
-                	sizeAft = sizeBef - bins.width();
+                    sizeAft = sizeBef - bins.width();
                 }
                 foldBinsButton.html("&laquo;");
             } else {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/test/test-writable-simple-empty.html	Fri Mar 13 10:56:19 2015 +0100
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <title>Test de Rendu RENKAN</title>
+        <meta name="description" content="" />
+        <meta name="author" content="Institut de Recherche et d'Innovation" />
+        <script src="../lib/jquery/jquery.js"></script>
+        <script src="../lib/jquery-mousewheel/jquery.mousewheel.js"></script>
+        <script src="../lib/underscore/underscore.js"></script>
+        <script src="../lib/backbone/backbone.js"></script>
+        <script src="../lib/backbone-relational/backbone-relational.js"></script>
+        <script src="../lib/paper/paper-full.js"></script>
+        <script src="../js/main.js"></script>
+        <script src="../js/models.js"></script>
+        <script src="../js/defaults.js"></script>
+        <script src="../js/i18n.js"></script>
+        <script src="../js/full-json.js"></script>
+        <script src="../js/ldtjson-bin.js"></script>
+        <script src="../js/list-bin.js"></script>
+        <script src="../js/wikipedia-bin.js"></script>
+        <script data-main="../js/main-renderer" src="../lib/requirejs/require.js"></script>
+        <script type="text/javascript">
+            function startRenkan(){
+            	var _renkan = new Rkns.Renkan({
+                    /*property_files: [ "data/properties.json" ],
+                    user_id: "u-iri",
+                    language: "fr",
+                    node_fill_color: false*/
+                	show_bins: false,
+                    static_url: "../"
+                });
+//                Rkns.jsonIO(_renkan, {
+//                    url: "/simple-persist"
+//                });
+            };
+        </script>
+        <link rel="stylesheet" href="../css/renkan.css" />
+    </head>
+
+    <body>
+        <div id="renkan"></div>
+    </body>
+</html>