--- a/client/js/renderer/edgeeditor.js Sat Apr 18 16:55:15 2015 +0200
+++ b/client/js/renderer/edgeeditor.js Sat Apr 18 16:56:37 2015 +0200
@@ -10,31 +10,11 @@
var EdgeEditor = Utils.inherit(BaseEditor);
_(EdgeEditor.prototype).extend({
- template: _.template(
- '<h2><span class="Rk-CloseX">×</span><%-renkan.translate("Edit Edge")%></span></h2>' +
- '<p><label><%-renkan.translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-edge.title%>"/></p>' +
- '<% if (options.show_edge_editor_uri) { %><p><label><%-renkan.translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%-edge.uri%>"/><a class="Rk-Edit-Goto" href="<%-edge.uri%>" target="_blank"></a></p>' +
- '<% if (options.properties.length) { %><p><label><%-renkan.translate("Choose from vocabulary:")%></label><select class="Rk-Edit-Vocabulary">' +
- '<% _(options.properties).each(function(ontology) { %><option class="Rk-Edit-Vocabulary-Class" value=""><%- renkan.translate(ontology.label) %></option>' +
- '<% _(ontology.properties).each(function(property) { var uri = ontology["base-uri"] + property.uri; %><option class="Rk-Edit-Vocabulary-Property" value="<%- uri %>' +
- '"<% if (uri === edge.uri) { %> selected<% } %>><%- renkan.translate(property.label) %></option>' +
- '<% }) %><% }) %></select></p><% } } %>' +
- '<% if (options.show_edge_editor_color) { %><div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-renkan.translate("Edge color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%-edge.color%>;"><span class="Rk-Edit-ColorTip"></span></span>' +
- '<%= renkan.colorPicker %><span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span></div></div><% } %>' +
- '<% if (options.show_edge_editor_direction) { %><p><span class="Rk-Edit-Direction"><%- renkan.translate("Change edge direction") %></span></p><% } %>' +
- '<% if (options.show_edge_editor_nodes) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- shortenText(edge.from_title, 25) %></p>' +
- '<p><span class="Rk-Editor-Label"><%-renkan.translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- shortenText(edge.to_title, 25) %></p><% } %>' +
- '<% if (options.show_edge_editor_creator && edge.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- shortenText(edge.created_by_title, 25) %></p><% } %>'
- ),
- readOnlyTemplate: _.template(
- '<h2><span class="Rk-CloseX">×</span><% if (options.show_edge_tooltip_color) { %><span class="Rk-UserColor" style="background:<%-edge.color%>;"></span><% } %>' +
- '<span class="Rk-Display-Title"><% if (edge.uri) { %><a href="<%-edge.uri%>" target="_blank"><% } %><%-edge.title%><% if (edge.uri) { %></a><% } %></span></h2>' +
- '<% if (options.show_edge_tooltip_uri && edge.uri) { %><p class="Rk-Display-URI"><a href="<%-edge.uri%>" target="_blank"><%-edge.short_uri%></a></p><% } %>' +
- '<p><%-edge.description%></p>' +
- '<% if (options.show_edge_tooltip_nodes) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- shortenText(edge.from_title, 25) %></p>' +
- '<p><span class="Rk-Editor-Label"><%-renkan.translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- shortenText(edge.to_title, 25) %></p><% } %>' +
- '<% if (options.show_edge_tooltip_creator && edge.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- shortenText(edge.created_by_title, 25) %></p><% } %>'
- ),
+ _init: function() {
+ BaseEditor.prototype._init.apply(this);
+ this.template = this.options.templates['templates/edgeeditor.html'];
+ this.readOnlyTemplate = this.options.templates['templates/edgeeditor_readonly.html'];
+ },
draw: function() {
var _model = this.source_representation.model,
_from_model = _model.get("from"),
--- a/client/js/renderer/scene.js Sat Apr 18 16:55:15 2015 +0200
+++ b/client/js/renderer/scene.js Sat Apr 18 16:56:37 2015 +0200
@@ -10,7 +10,7 @@
this.renkan = _renkan;
this.$ = $(".Rk-Render");
this.representations = [];
- this.$.html(this.template(_renkan));
+ this.$.html(_renkan.options.templates['templates/scene.html'](_renkan));
this.onStatusChange();
this.canvas_$ = this.$.find(".Rk-Canvas");
this.labels_$ = this.$.find(".Rk-Labels");
@@ -29,7 +29,7 @@
this.buttons_layer = new paper.Layer();
this.delete_list = [];
this.redrawActive = true;
-
+
if (_renkan.options.show_minimap) {
this.minimap = {
background_layer: new paper.Layer(),
@@ -489,37 +489,6 @@
};
_(Scene.prototype).extend({
- template: _.template(
- '<% 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><% } %>' +
- '<% if (options.home_button_url) {%><div class="Rk-TopBar-Separator"></div><a class="Rk-TopBar-Button Rk-Home-Button" href="<%- options.home_button_url %>"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents">' +
- '<%- translate(options.home_button_title) %></div></div></a><% } %>' +
- '<% if (options.show_fullscreen_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-FullScreen-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Full Screen")%></div></div></div><% } %>' +
- '<% if (options.editor_mode) { %>' +
- '<% if (options.show_addnode_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddNode-Button"><div class="Rk-TopBar-Tooltip">' +
- '<div class="Rk-TopBar-Tooltip-Contents"><%-translate("Add Node")%></div></div></div><% } %>' +
- '<% if (options.show_addedge_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddEdge-Button"><div class="Rk-TopBar-Tooltip">' +
- '<div class="Rk-TopBar-Tooltip-Contents"><%-translate("Add Edge")%></div></div></div><% } %>' +
- '<% if (options.show_export_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Export-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Download Project")%></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><% } %>' +
- '<% } else { %>' +
- '<% if (options.show_export_button) { %><div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Export-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Contents"><%-translate("Download Project")%></div></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" <% if (options.resize) { %> resize="" <% } %>></canvas><div class="Rk-Notifications"></div><div class="Rk-Editor">' +
- '<% if (options.show_bins) { %><div class="Rk-Fold-Bins">«</div><% } %>' +
- '<% if (options.show_zoom) { %><div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%-translate("Zoom In")%>"></div><div class="Rk-ZoomFit" title="<%-translate("Zoom Fit")%>"></div><div class="Rk-ZoomOut" title="<%-translate("Zoom Out")%>"></div>' +
- '<% if (options.editor_mode && options.save_view) { %><div class="Rk-ZoomSave" title="<%-translate("Zoom Save")%>"></div><% } %>' +
- '<% if (options.save_view) { %><div class="Rk-ZoomSetSaved" title="<%-translate("View saved zoom")%>"></div><% } %></div><% } %>' +
- '</div></div>'
- ),
fixSize: function() {
if( this.renkan.options.default_view && this.renkan.project.get("views").length > 0) {
var view = this.renkan.project.get("views").last();
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/templates/edgeeditor.html Sat Apr 18 16:56:37 2015 +0200
@@ -0,0 +1,67 @@
+<h2>
+ <span class="Rk-CloseX">×</span><%-renkan.translate("Edit Edge")%></span>
+</h2>
+<p>
+ <label><%-renkan.translate("Title:")%></label>
+ <input class="Rk-Edit-Title" type="text" value="<%-edge.title%>" />
+</p>
+<% if (options.show_edge_editor_uri) { %>
+ <p>
+ <label><%-renkan.translate("URI:")%></label>
+ <input class="Rk-Edit-URI" type="text" value="<%-edge.uri%>" />
+ <a class="Rk-Edit-Goto" href="<%-edge.uri%>" target="_blank"></a>
+ </p>
+ <% if (options.properties.length) { %>
+ <p>
+ <label><%-renkan.translate("Choose from vocabulary:")%></label>
+ <select class="Rk-Edit-Vocabulary">
+ <% _(options.properties).each(function(ontology) { %>
+ <option class="Rk-Edit-Vocabulary-Class" value="">
+ <%- renkan.translate(ontology.label) %>
+ </option>
+ <% _(ontology.properties).each(function(property) { var uri = ontology["base-uri"] + property.uri; %>
+ <option class="Rk-Edit-Vocabulary-Property" value="<%- uri %>"
+ <% if (uri === edge.uri) { %> selected<% } %>>
+ <%- renkan.translate(property.label) %>
+ </option>
+ <% }) %>
+ <% }) %>
+ </select>
+ </p>
+<% } } %>
+<% if (options.show_edge_editor_color) { %>
+ <div class="Rk-Editor-p">
+ <span class="Rk-Editor-Label"><%-renkan.translate("Edge color:")%></span>
+ <div class="Rk-Edit-ColorPicker-Wrapper">
+ <span class="Rk-Edit-Color" style="background: <%-edge.color%>;">
+ <span class="Rk-Edit-ColorTip"></span>
+ </span>
+ <%= renkan.colorPicker %>
+ <span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span>
+ </div>
+ </div>
+<% } %>
+<% if (options.show_edge_editor_direction) { %>
+ <p>
+ <span class="Rk-Edit-Direction"><%- renkan.translate("Change edge direction") %></span>
+ </p>
+<% } %>
+<% if (options.show_edge_editor_nodes) { %>
+ <p>
+ <span class="Rk-Editor-Label"><%-renkan.translate("From:")%></span>
+ <span class="Rk-UserColor" style="background: <%-edge.from_color%>;"></span>
+ <%- shortenText(edge.from_title, 25) %>
+ </p>
+ <p>
+ <span class="Rk-Editor-Label"><%-renkan.translate("To:")%></span>
+ <span class="Rk-UserColor" style="background: >%-edge.to_color%>;"></span>
+ <%- shortenText(edge.to_title, 25) %>
+ </p>
+<% } %>
+<% if (options.show_edge_editor_creator && edge.has_creator) { %>
+ <p>
+ <span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span>
+ <span class="Rk-UserColor" style="background: <%-edge.created_by_color%>;"></span>
+ <%- shortenText(edge.created_by_title, 25) %>
+ </p>
+<% } %>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/templates/edgeeditor_readonly.html Sat Apr 18 16:56:37 2015 +0200
@@ -0,0 +1,38 @@
+<h2>
+ <span class="Rk-CloseX">×</span>
+ <% if (options.show_edge_tooltip_color) { %>
+ <span class="Rk-UserColor" style="background: <%- edge.color %>;"></span>
+ <% } %>
+ <span class="Rk-Display-Title">
+ <% if (edge.uri) { %>
+ <a href="<%-edge.uri%>" target="_blank">
+ <% } %>
+ <%-edge.title%>
+ <% if (edge.uri) { %> </a> <% } %>
+ </span>
+</h2>
+<% if (options.show_edge_tooltip_uri && edge.uri) { %>
+ <p class="Rk-Display-URI">
+ <a href="<%-edge.uri%>" target="_blank"><%- edge.short_uri %></a>
+ </p>
+<% } %>
+<p><%-edge.description%></p>
+<% if (options.show_edge_tooltip_nodes) { %>
+ <p>
+ <span class="Rk-Editor-Label"><%-renkan.translate("From:")%></span>
+ <span class="Rk-UserColor" style="background: <%- edge.from_color %>;"></span>
+ <%- shortenText(edge.from_title, 25) %>
+ </p>
+ <p>
+ <span class="Rk-Editor-Label"><%-renkan.translate("To:")%></span>
+ <span class="Rk-UserColor" style="background: <%- edge.to_color %>;"></span>
+ <%- shortenText(edge.to_title, 25) %>
+ </p>
+<% } %>
+<% if (options.show_edge_tooltip_creator && edge.has_creator) { %>
+ <p>
+ <span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span>
+ <span class="Rk-UserColor" style="background: <%- edge.created_by_color %>;"></span>
+ <%- shortenText(edge.created_by_title, 25) %>
+ </p>
+<% } %>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/templates/scene.html Sat Apr 18 16:56:37 2015 +0200
@@ -0,0 +1,152 @@
+<% 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>
+ <% } %>
+ <% if (options.home_button_url) {%>
+ <div class="Rk-TopBar-Separator"></div>
+ <a class="Rk-TopBar-Button Rk-Home-Button" href="<%- options.home_button_url %>">
+ <div class="Rk-TopBar-Tooltip">
+ <div class="Rk-TopBar-Tooltip-Contents">
+ <%- translate(options.home_button_title) %>
+ </div>
+ </div>
+ </a>
+ <% } %>
+ <% if (options.show_fullscreen_button) { %>
+ <div class="Rk-TopBar-Separator"></div>
+ <div class="Rk-TopBar-Button Rk-FullScreen-Button">
+ <div class="Rk-TopBar-Tooltip">
+ <div class="Rk-TopBar-Tooltip-Contents">
+ <%-translate("Full Screen")%>
+ </div>
+ </div>
+ </div>
+ <% } %>
+ <% if (options.editor_mode) { %>
+ <% if (options.show_addnode_button) { %>
+ <div class="Rk-TopBar-Separator"></div>
+ <div class="Rk-TopBar-Button Rk-AddNode-Button">
+ <div class="Rk-TopBar-Tooltip">
+ <div class="Rk-TopBar-Tooltip-Contents">
+ <%-translate("Add Node")%>
+ </div>
+ </div>
+ </div>
+ <% } %>
+ <% if (options.show_addedge_button) { %>
+ <div class="Rk-TopBar-Separator"></div>
+ <div class="Rk-TopBar-Button Rk-AddEdge-Button">
+ <div class="Rk-TopBar-Tooltip">
+ <div class="Rk-TopBar-Tooltip-Contents">
+ <%-translate("Add Edge")%>
+ </div>
+ </div>
+ </div>
+ <% } %>
+ <% if (options.show_export_button) { %>
+ <div class="Rk-TopBar-Separator"></div>
+ <div class="Rk-TopBar-Button Rk-Export-Button">
+ <div class="Rk-TopBar-Tooltip">
+ <div class="Rk-TopBar-Tooltip-Contents">
+ <%-translate("Download Project")%>
+ </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>
+ <% } %>
+ <% } else { %>
+ <% if (options.show_export_button) { %>
+ <div class="Rk-TopBar-Separator"></div>
+ <div class="Rk-TopBar-Button Rk-Export-Button">
+ <div class="Rk-TopBar-Tooltip">
+ <div class="Rk-TopBar-Tooltip-Contents">
+ <%-translate("Download Project")%>
+ </div>
+ </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" <% if (options.resize) { %> resize="" <% } %>></canvas>
+ <div class="Rk-Notifications"></div>
+ <div class="Rk-Editor">
+ <% if (options.show_bins) { %>
+ <div class="Rk-Fold-Bins">«</div>
+ <% } %>
+ <% if (options.show_zoom) { %>
+ <div class="Rk-ZoomButtons">
+ <div class="Rk-ZoomIn" title="<%-translate('Zoom In')%>"></div>
+ <div class="Rk-ZoomFit" title="<%-translate('Zoom Fit')%>"></div>
+ <div class="Rk-ZoomOut" title="<%-translate('Zoom Out')%>"></div>
+ <% if (options.editor_mode && options.save_view) { %>
+ <div class="Rk-ZoomSave" title="<%-translate('Zoom Save')%>"></div>
+ <% } %>
+ <% if (options.save_view) { %>
+ <div class="Rk-ZoomSetSaved" title="<%-translate('View saved zoom')%>"></div>
+ <% } %>
+ </div>
+ <% } %>
+ </div>
+</div>
\ No newline at end of file