renkan: comparison client/js/paper-renderer.js

Mercurial Mercurial > renkan / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

client/js/paper-renderer.js

changeset 196	2a2fcec209d0
parent 195	15e048e00002
child 197	4e13edb46c0d

equal deleted inserted replaced

-:15e048e00002
+:2a2fcec209d0
 this.circle.opacity = this.options.show_node_circles ? opacity : .01;
 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,
 opacity: opacity
 });
 this.minimap_circle.strokeColor = undefined;
 }
 this._super("unselect");
 }
 },
-highlight: function() {
+highlight: function(textToReplace) {
-if (this.highlighted) {
+var hlvalue = textToReplace || true;
+if (this.highlighted === hlvalue) {
 return;
 }
-this.highlighted = true;
+this.highlighted = hlvalue;
 this.redraw();
 this.renderer.throttledPaperDraw();
 },
 unhighlight: function() {
 if (!this.highlighted) {
 ),
 readOnlyTemplate: _.template(
 '<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><% } %>'
 ),
 draw: function() {
 var _model = this.source_representation.model,
 });
 this.editor_$.find(".Rk-Edit-Size-Up").click(function() {
 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();
 });
 },
 }
 }
 );
 }
+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() {
 var _now = new Date().valueOf();
 _this.delete_list.forEach(function(d) {
 + '<div class="Rk-TopBar-Tooltip-Contents"><%-translate("Add Edge")%></div></div></div><% } %>'
 + '<% if (options.show_save_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Save-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents"> </div></div></div><% } %>'
 + '<% 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 class="Rk-TopBar-Separator"></div><% }; if (options.show_search_field) { %>'
-+ '<% } %></div><% } %>'
++ '<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><% } %>'
 + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%-translate("Zoom In")%>"></div><div class="Rk-ZoomOut" title="<%-translate("Zoom Out")%>"></div></div>'
 + '</div></div>'

renkan