Mercurial Mercurial > renkan / changeset
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | raw | zip | gz | bz2 | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
export the templates of nodeeditor to html files
authorrougeronj
Sat, 18 Apr 2015 17:14:27 +0200
changeset 420 22393cbf4467
parent 419 4f458e6d32bd
child 421 6cf2ef158f9b
export the templates of nodeeditor to html files
client/js/renderer/nodeeditor.js file | annotate | diff | comparison | revisions
client/templates/nodeeditor.html file | annotate | diff | comparison | revisions
client/templates/nodeeditor_readonly.html file | annotate | diff | comparison | revisions 
--- a/client/js/renderer/nodeeditor.js	Sat Apr 18 16:56:37 2015 +0200
+++ b/client/js/renderer/nodeeditor.js	Sat Apr 18 17:14:27 2015 +0200
@@ -9,36 +9,11 @@
     var NodeEditor = Utils.inherit(BaseEditor);
 
     _(NodeEditor.prototype).extend({
-        template: _.template(
-                '<h2><span class="Rk-CloseX">&times;</span><%-renkan.translate("Edit Node")%></span></h2>' +
-                '<p><label><%-renkan.translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-node.title%>"/></p>' +
-                '<% if (options.show_node_editor_uri) { %><p><label><%-renkan.translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%-node.uri%>"/><a class="Rk-Edit-Goto" href="<%-node.uri%>" target="_blank"></a></p><% } %>' +
-                '<% if (options.show_node_editor_description) { %><p><label><%-renkan.translate("Description:")%></label><textarea class="Rk-Edit-Description"><%-node.description%></textarea></p><% } %>' +
-                '<% if (options.show_node_editor_size) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Size:")%></span><a href="#" class="Rk-Edit-Size-Down">-</a><span class="Rk-Edit-Size-Value"><%-node.size%></span><a href="#" class="Rk-Edit-Size-Up">+</a></p><% } %>' +
-                '<% if (options.show_node_editor_color) { %><div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-renkan.translate("Node color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%-node.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_node_editor_image) { %><div class="Rk-Edit-ImgWrap"><div class="Rk-Edit-ImgPreview"><img src="<%-node.image || node.image_placeholder%>" />' +
-                '<% if (node.clip_path) { %><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none"><path style="stroke-width: .02; stroke:red; fill-opacity:.3; fill:red;" d="<%- node.clip_path %>"/></svg><% }%>' +
-                '</div></div><p><label><%-renkan.translate("Image URL:")%></label><div><a class="Rk-Edit-Image-Del" href="#"></a><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></div></p>' +
-                '<% if (options.allow_image_upload) { %><p><label><%-renkan.translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p><% }%><% } %>' +
-                '<% if (options.show_node_editor_creator && node.has_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><% } %>' +
-                '<% if (options.change_shapes) { %><p><label><%-renkan.translate("Shapes available")%>:</label> <select class="Rk-Edit-Shape">' +
-                '<option class="Rk-Edit-Vocabulary-Property" value="circle"<% if (node.shape === "circle") { %> selected<% } %>><%- renkan.translate("Circle") %></option>' +
-                '<option class="Rk-Edit-Vocabulary-Property" value="rectangle"<% if (node.shape === "rectangle") { %> selected<% } %>><%- renkan.translate("Square") %></option>' +
-                '<option class="Rk-Edit-Vocabulary-Property" value="diamond"<% if (node.shape === "diamond") { %> selected<% } %>><%- renkan.translate("Diamond") %></option>' +
-                '<option class="Rk-Edit-Vocabulary-Property" value="polygon"<% if (node.shape === "polygon") { %> selected<% } %>><%- renkan.translate("Hexagone") %></option>' +
-                '<option class="Rk-Edit-Vocabulary-Property" value="ellipse"<% if (node.shape === "ellipse") { %> selected<% } %>><%- renkan.translate("Ellipse") %></option>' +
-                '<option class="Rk-Edit-Vocabulary-Property" value="star"<% if (node.shape === "star") { %> selected<% } %>><%- renkan.translate("Star") %></option>' +
-                '</select></p><% } %>'
-        ),
-        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 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><% } %>'
-        ),
+    	_init: function() {
+    		BaseEditor.prototype._init.apply(this);
+    		this.template = this.options.templates['templates/nodeeditor.html'];
+    		this.readOnlyTemplate = this.options.templates['templates/nodeeditor_readonly.html'];
+    	},
         draw: function() {
             var _model = this.source_representation.model,
             _created_by = _model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan),
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/templates/nodeeditor.html	Sat Apr 18 17:14:27 2015 +0200
@@ -0,0 +1,91 @@
+<h2>
+	<span class="Rk-CloseX">&times;</span><%-renkan.translate("Edit Node")%></span>
+</h2>
+<p>
+	<label><%-renkan.translate("Title:")%></label>
+	<input class="Rk-Edit-Title" type="text" value="<%-node.title%>" />
+</p>
+<% if (options.show_node_editor_uri) { %>
+	<p>
+		<label><%-renkan.translate("URI:")%></label>
+		<input class="Rk-Edit-URI" type="text" value="<%-node.uri%>" />
+		<a class="Rk-Edit-Goto" href="<%-node.uri%>" target="_blank"></a>
+	</p>
+<% } %> <% if (options.show_node_editor_description) { %>
+	<p>
+		<label><%-renkan.translate("Description:")%></label>
+		<textarea class="Rk-Edit-Description"><%-node.description%></textarea>
+	</p>
+<% } %> <% if (options.show_node_editor_size) { %>
+	<p>
+		<span class="Rk-Editor-Label"><%-renkan.translate("Size:")%></span>
+		<a href="#" class="Rk-Edit-Size-Down">-</a>
+		<span class="Rk-Edit-Size-Value"><%-node.size%></span>
+		<a href="#" class="Rk-Edit-Size-Up">+</a>
+	</p>
+<% } %> <% if (options.show_node_editor_color) { %>
+	<div class="Rk-Editor-p">
+		<span class="Rk-Editor-Label">
+		<%-renkan.translate("Node color:")%></span>
+		<div class="Rk-Edit-ColorPicker-Wrapper">
+			<span class="Rk-Edit-Color" style="background: <%-node.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_node_editor_image) { %>
+	<div class="Rk-Edit-ImgWrap">
+		<div class="Rk-Edit-ImgPreview">
+			<img src="<%-node.image || node.image_placeholder%>" />
+			<% if (node.clip_path) { %>
+				<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+					<path style="stroke-width: .02; stroke:red; fill-opacity:.3; fill:red;" d="<%- node.clip_path %>" />
+				</svg>
+			<% }%>
+		</div>
+	</div>
+	<p>
+		<label><%-renkan.translate("Image URL:")%></label>
+		<div>
+			<a class="Rk-Edit-Image-Del" href="#"></a>
+			<input class="Rk-Edit-Image" type="text" value='<%-node.image%>' />
+		</div>
+	</p>
+<% if (options.allow_image_upload) { %>
+	<p>
+		<label><%-renkan.translate("Choose Image File:")%></label>
+		<input class="Rk-Edit-Image-File" type="file" accept="image/*" />
+	</p>
+<% }%><% } %> <% if (options.show_node_editor_creator && node.has_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>
+<% } %> <% if (options.change_shapes) { %>
+	<p>
+		<label><%-renkan.translate("Shapes available")%>:</label>
+		<select class="Rk-Edit-Shape">
+			<option class="Rk-Edit-Vocabulary-Property" value="circle"<% if (node.shape === "circle") { %> selected<% } %>>
+				<%- renkan.translate("Circle") %>
+			</option>
+			<option class="Rk-Edit-Vocabulary-Property" value="rectangle"<% if (node.shape === "rectangle") { %> selected<% } %>>
+				<%- renkan.translate("Square") %>
+			</option>
+			<option class="Rk-Edit-Vocabulary-Property" value="diamond"<% if (node.shape === "diamond") { %> selected<% } %>>
+				<%- renkan.translate("Diamond") %>
+			</option>
+			<option class="Rk-Edit-Vocabulary-Property" value="polygon"<% if (node.shape === "polygon") { %> selected<% } %>>
+				<%- renkan.translate("Hexagone") %>
+			</option>
+			<option class="Rk-Edit-Vocabulary-Property" value="ellipse"<% if (node.shape === "ellipse") { %> selected<% } %>>
+				<%- renkan.translate("Ellipse") %>
+			</option>
+			<option class="Rk-Edit-Vocabulary-Property" value="star"<% if (node.shape === "star") { %> selected<% } %>>
+				<%- renkan.translate("Star") %>
+			</option>
+		</select>
+	</p>
+<% } %>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/templates/nodeeditor_readonly.html	Sat Apr 18 17:14:27 2015 +0200
@@ -0,0 +1,28 @@
+<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 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>
+<% } %>
renkan