add type selector in the node editor
add node_editor_template options to add custom templates for the node editor
--- a/client/js/defaults.js Mon Jun 15 12:08:14 2015 +0200
+++ b/client/js/defaults.js Tue Jun 16 11:36:09 2015 +0200
@@ -116,6 +116,15 @@
/* Label to display on untitled nodes */
change_shapes: true,
/* Change shapes enabled */
+ change_types: true,
+ /* Change type enabled */
+
+ /* NODE EDITOR TEMPLATE*/
+
+ node_editor_templates: {
+ "default": "templates/nodeeditor_readonly.html",
+ "video": "templates/nodeeditor_video.html"
+ },
/* EDGE DISPLAY OPTIONS */
@@ -198,5 +207,4 @@
show_edge_tooltip_nodes: true,
show_edge_tooltip_creator: true,
-
};
--- a/client/js/main.js Mon Jun 15 12:08:14 2015 +0200
+++ b/client/js/main.js Tue Jun 16 11:36:09 2015 +0200
@@ -96,12 +96,20 @@
var _this = this;
Rkns.__renkans.push(this);
-
+
this.options = _.defaults(_opts, Rkns.defaults, {
- templates: renkanJST
+ templates: _.defaults(_opts.templates, renkanJST) || renkanJST,
+ node_editor_templates: _.defaults(_opts.node_editor_templates, Rkns.defaults.node_editor_templates)
});
this.template = renkanJST['templates/main.html'];
+ var types_templates = {};
+ _.each(this.options.node_editor_templates, function(value, key) {
+ types_templates[key] = _this.options.templates[value];
+ delete _this.options.templates[value];
+ });
+ this.options.node_editor_templates = types_templates;
+
_.each(this.options.property_files, function(f) {
Rkns.$.getJSON(f, function(data) {
_this.options.properties = _this.options.properties.concat(data);
--- a/client/js/renderer/nodeeditor.js Mon Jun 15 12:08:14 2015 +0200
+++ b/client/js/renderer/nodeeditor.js Tue Jun 16 11:36:09 2015 +0200
@@ -14,12 +14,12 @@
this.template = this.options.templates['templates/nodeeditor.html'];
//this.templates['default']= this.options.templates['templates/nodeeditor.html'];
//fusionner avec this.options.node_editor_templates
- this.readOnlyTemplate = this.options.templates['templates/nodeeditor_readonly.html'];
+ this.readOnlyTemplate = this.options.node_editor_templates;
},
draw: function() {
var _model = this.source_representation.model,
_created_by = _model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan),
- _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate ),
+ _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate[_model.get("type")] || this.readOnlyTemplate["default"]),
_image_placeholder = this.options.static_url + "img/image-placeholder.png",
_size = (_model.get("size") || 0);
this.editor_$
@@ -29,6 +29,7 @@
has_creator: !!_model.get("created_by"),
title: _model.get("title"),
uri: _model.get("uri"),
+ type: _model.get("type") || "default",
short_uri: Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
description: _model.get("description"),
image: _model.get("image") || "",
@@ -46,6 +47,7 @@
options: this.options,
shortenText: Utils.shortenText,
shapes : _(ShapeBuilder.builders).omit('svg').keys().value(),
+ types : _(this.options.node_editor_templates).keys().value(),
}));
this.redraw();
var _this = this,
@@ -126,6 +128,11 @@
_data.shape = _this.editor_$.find(".Rk-Edit-Shape").val();
}
}
+ if (_this.options.change_types) {
+ if(_model.get("type")!==_this.editor_$.find(".Rk-Edit-Type").val()){
+ _data.type = _this.editor_$.find(".Rk-Edit-Type").val();
+ }
+ }
_model.set(_data);
_this.redraw();
} else {
--- a/client/templates/nodeeditor.html Mon Jun 15 12:08:14 2015 +0200
+++ b/client/templates/nodeeditor.html Tue Jun 16 11:36:09 2015 +0200
@@ -12,6 +12,17 @@
<input class="Rk-Edit-URI" type="text" value="<%-node.uri%>" />
<a class="Rk-Edit-Goto" href="<%-node.uri%>" target="_blank"></a>
</p>
+<% } %> <% if (options.change_types) { %>
+ <p>
+ <label><%-renkan.translate("Types available")%>:</label>
+ <select class="Rk-Edit-Type">
+ <% _.each(types, function(type) { %>
+ <option class="Rk-Edit-Vocabulary-Property" value="<%- type %>"<% if (node.type === type) { %> selected<% } %>>
+ <%- renkan.translate(type.charAt(0).toUpperCase() + type.substring(1)) %>
+ </option>
+ <% }); %>
+ </select>
+ </p>
<% } %> <% if (options.show_node_editor_description) { %>
<p>
<label><%-renkan.translate("Description:")%></label>