add type selector in the node editor
authorrougeronj
Tue, 16 Jun 2015 11:36:09 +0200
changeset 482 a55c33989404
parent 481 66c3b474a331
child 483 9bb08a2c2449
add type selector in the node editor add node_editor_template options to add custom templates for the node editor
client/js/defaults.js
client/js/main.js
client/js/renderer/nodeeditor.js
client/templates/nodeeditor.html
--- 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>