client/js/renderer/nodeeditor.js
changeset 385 29dcaa4c1748
parent 384 6a7930a0d4d1
child 420 22393cbf4467
equal deleted inserted replaced
384:6a7930a0d4d1 385:29dcaa4c1748
    18                 '<% 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>' +
    18                 '<% 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>' +
    19                 '<%= renkan.colorPicker %><span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span></div></div><% } %>' +
    19                 '<%= renkan.colorPicker %><span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span></div></div><% } %>' +
    20                 '<% if (options.show_node_editor_image) { %><div class="Rk-Edit-ImgWrap"><div class="Rk-Edit-ImgPreview"><img src="<%-node.image || node.image_placeholder%>" />' +
    20                 '<% if (options.show_node_editor_image) { %><div class="Rk-Edit-ImgWrap"><div class="Rk-Edit-ImgPreview"><img src="<%-node.image || node.image_placeholder%>" />' +
    21                 '<% 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><% }%>' +
    21                 '<% 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><% }%>' +
    22                 '</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>' +
    22                 '</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>' +
    23                 '<p><label><%-renkan.translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p><% } %>' +
    23                 '<% if (options.allow_image_upload) { %><p><label><%-renkan.translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p><% }%><% } %>' +
    24                 '<% 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><% } %>' +
    24                 '<% 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><% } %>' +
    25                 '<% if (options.change_shapes) { %><p><label><%-renkan.translate("Shapes available")%>:</label> <select class="Rk-Edit-Shape">' +
    25                 '<% if (options.change_shapes) { %><p><label><%-renkan.translate("Shapes available")%>:</label> <select class="Rk-Edit-Shape">' +
    26                 '<option class="Rk-Edit-Vocabulary-Property" value="circle"<% if (node.shape === "circle") { %> selected<% } %>><%- renkan.translate("Circle") %></option>' +
    26                 '<option class="Rk-Edit-Vocabulary-Property" value="circle"<% if (node.shape === "circle") { %> selected<% } %>><%- renkan.translate("Circle") %></option>' +
    27                 '<option class="Rk-Edit-Vocabulary-Property" value="rectangle"<% if (node.shape === "rectangle") { %> selected<% } %>><%- renkan.translate("Square") %></option>' +
    27                 '<option class="Rk-Edit-Vocabulary-Property" value="rectangle"<% if (node.shape === "rectangle") { %> selected<% } %>><%- renkan.translate("Square") %></option>' +
    28                 '<option class="Rk-Edit-Vocabulary-Property" value="diamond"<% if (node.shape === "diamond") { %> selected<% } %>><%- renkan.translate("Diamond") %></option>' +
    28                 '<option class="Rk-Edit-Vocabulary-Property" value="diamond"<% if (node.shape === "diamond") { %> selected<% } %>><%- renkan.translate("Diamond") %></option>' +
   124                     }
   124                     }
   125                 });
   125                 });
   126 
   126 
   127                 this.editor_$.find("input, textarea, select").on("change keyup paste", onFieldChange);
   127                 this.editor_$.find("input, textarea, select").on("change keyup paste", onFieldChange);
   128 
   128 
   129                 this.editor_$.find(".Rk-Edit-Image-File").change(function() {
   129                 if(_this.options.allow_image_upload) {
   130                     if (this.files.length) {
   130                     this.editor_$.find(".Rk-Edit-Image-File").change(function() {
   131                         var f = this.files[0],
   131                         if (this.files.length) {
   132                         fr = new FileReader();
   132                             var f = this.files[0],
   133                         if (f.type.substr(0,5) !== "image") {
   133                             fr = new FileReader();
   134                             alert(_this.renkan.translate("This file is not an image"));
   134                             if (f.type.substr(0,5) !== "image") {
   135                             return;
   135                                 alert(_this.renkan.translate("This file is not an image"));
   136                         }
   136                                 return;
   137                         if (f.size > (_this.options.uploaded_image_max_kb * 1024)) {
   137                             }
   138                             alert(_this.renkan.translate("Image size must be under ") + _this.options.uploaded_image_max_kb + _this.renkan.translate("KB"));
   138                             if (f.size > (_this.options.uploaded_image_max_kb * 1024)) {
   139                             return;
   139                                 alert(_this.renkan.translate("Image size must be under ") + _this.options.uploaded_image_max_kb + _this.renkan.translate("KB"));
   140                         }
   140                                 return;
   141                         fr.onload = function(e) {
   141                             }
   142                             _this.editor_$.find(".Rk-Edit-Image").val(e.target.result);
   142                             fr.onload = function(e) {
   143                             onFieldChange();
   143                                 _this.editor_$.find(".Rk-Edit-Image").val(e.target.result);
   144                         };
   144                                 onFieldChange();
   145                         fr.readAsDataURL(f);
   145                             };
   146                     }
   146                             fr.readAsDataURL(f);
   147                 });
   147                         }
       
   148                     });
       
   149                 }
   148                 this.editor_$.find(".Rk-Edit-Title")[0].focus();
   150                 this.editor_$.find(".Rk-Edit-Title")[0].focus();
   149 
   151 
   150                 var _picker = _this.editor_$.find(".Rk-Edit-ColorPicker");
   152                 var _picker = _this.editor_$.find(".Rk-Edit-ColorPicker");
   151 
   153 
   152                 this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
   154                 this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(