client/js/paper-renderer.js
changeset 196 2a2fcec209d0
parent 195 15e048e00002
child 197 4e13edb46c0d
--- a/client/js/paper-renderer.js	Wed Jul 03 13:42:59 2013 +0200
+++ b/client/js/paper-renderer.js	Thu Jul 04 12:43:30 2013 +0200
@@ -282,7 +282,13 @@
     
     var _text = this.model.get("title") || this.renkan.translate(this.options.label_untitled_nodes) || "";
     _text = shortenText(_text, this.options.node_label_max_length);
-    this.title.text(_text);
+    
+    if (typeof this.highlighted === "object") {
+        this.title.html(this.highlighted.replace(_(_text).escape(),'<span class="Rk-Highlighted">$1</span>'));
+    } else {
+        this.title.text(_text);
+    }
+    
     this.title.css({
         left: this.paper_coords.x,
         top: this.paper_coords.y + this.circle_radius * this.h_ratio + this.options.node_label_distance,
@@ -512,11 +518,12 @@
         this._super("unselect");
     }
 },
-highlight: function() {
-    if (this.highlighted) {
+highlight: function(textToReplace) {
+    var hlvalue = textToReplace || true;
+    if (this.highlighted === hlvalue) {
         return;
     }
-    this.highlighted = true;
+    this.highlighted = hlvalue;
     this.redraw();
     this.renderer.throttledPaperDraw();
 },
@@ -935,7 +942,7 @@
     '<h2><span class="Rk-CloseX">&times;</span><% if (options.show_node_tooltip_color) { %><span class="Rk-UserColor" style="background:<%-node.color%>;"></span><% } %>'
     + '<span class="Rk-Display-Title"><% if (node.uri) { %><a href="<%-node.uri%>" target="_blank"><% } %><%-node.title%><% if (node.uri) { %></a><% } %></span></h2>'
     + '<% if (node.uri && options.show_node_tooltip_uri) { %><p class="Rk-Display-URI"><a href="<%-node.uri%>" target="_blank"><%-node.short_uri%></a></p><% } %>'
-    + '<% if (options.show_node_tooltip_description) { %><p><%-node.description%></p><% } %>'
+    + '<% if (options.show_node_tooltip_description) { %><p class="Rk-Display-Description"><%-node.description%></p><% } %>'
     + '<% if (node.image && options.show_node_tooltip_image) { %><img class="Rk-Display-ImgPreview" src="<%-node.image%>" /><% } %>'
     + '<% if (node.has_creator && options.show_node_tooltip_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- shortenText(node.created_by_title, 25) %></p><% } %>'
 ),
@@ -1089,6 +1096,14 @@
             shiftSize(1);
             return false;
         });
+    } else {
+        if (typeof this.source_representation.highlighted === "object") {
+            var titlehtml = this.source_representation.highlighted.replace(_(_model.get("title")).escape(),'<span class="Rk-Highlighted">$1</span>');
+            this.editor_$.find(".Rk-Display-Title" + (_model.get("uri") ? " a" : "")).html(titlehtml);
+            if (this.options.show_node_tooltip_description) {
+                this.editor_$.find(".Rk-Display-Description").html(this.source_representation.highlighted.replace(_(_model.get("description")).escape(),'<span class="Rk-Highlighted">$1</span>'))
+            }
+        }
     }
     this.editor_$.find("img").load(function() {
         _this.redraw();
@@ -1863,6 +1878,33 @@
         );
     }
     
+    if (_renkan.options.show_search_field) {
+        
+        var lastval = '';
+        
+        this.$.find(".Rk-GraphSearch-Field").on("keyup change paste input", function() {
+            var $this = $(this),
+                val = $this.val();
+            if (val === lastval) {
+                return;
+            }
+            if (val.length < 2) {
+                _renkan.project.get("nodes").each(function(n) {
+                    _this.getRepresentationByModel(n).unhighlight();
+                });
+            } else {
+                var rxs = Rkns.Utils.regexpFromTextOrArray(val);
+                _renkan.project.get("nodes").each(function(n) {
+                    if (rxs.test(n.get("title")) || rxs.test(n.get("description"))) {
+                        _this.getRepresentationByModel(n).highlight(rxs);
+                    } else {
+                        _this.getRepresentationByModel(n).unhighlight(); 
+                    }
+                });
+            }
+        });
+    }
+    
     this.redraw();
     
     window.setInterval(function() {
@@ -1910,8 +1952,8 @@
     + '<% if (options.show_open_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Open-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Open Project")%></div></div></div><% } %>'
     + '<% if (options.show_bookmarklet) { %><div class="Rk-TopBar-Separator"></div><a class="Rk-TopBar-Button Rk-Bookmarklet-Button" href="#"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents">'
     + '<%-translate("Renkan \'Drag-to-Add\' bookmarklet")%></div></div></a><% } %>'
-    + '<div class="Rk-TopBar-Separator"></div>'
-    + '<% } %></div><% } %>'
+    + '<div class="Rk-TopBar-Separator"></div><% }; if (options.show_search_field) { %>'
+    + '<form action="#" class="Rk-GraphSearch-Form"><input type="search" class="Rk-GraphSearch-Field" placeholder="<%- translate("Search in graph") %>" /></form><div class="Rk-TopBar-Separator"></div><% } %></div><% } %>'
     + '<div class="Rk-Editing-Space<% if (!options.show_top_bar) { %> Rk-Editing-Space-Full<% } %>">'
     + '<div class="Rk-Labels"></div><canvas class="Rk-Canvas" resize></canvas><div class="Rk-Notifications"></div><div class="Rk-Editor">'
     + '<% if (options.show_bins) { %><div class="Rk-Fold-Bins">&laquo;</div><% } %>'