1 "use strict";

     2 

     3 define(['jquery', 'underscore', 'requtils', 'renderer/baseeditor'], function ($, _, requtils, BaseEditor) {

     4     

     5     var Utils = requtils.getUtils();

     6 

     7     /* NodeEditor Begin */

     8     //var NodeEditor = Renderer.NodeEditor = Utils.inherit(Renderer._BaseEditor);

     9     var NodeEditor = Utils.inherit(BaseEditor);

    10 

    11     _(NodeEditor.prototype).extend({

    12         template: _.template(

    13                 '<h2><span class="Rk-CloseX">&times;</span><%-renkan.translate("Edit Node")%></span></h2>'

    14                 + '<p><label><%-renkan.translate("Title:")%></label><input class="Rk-Edit-Title" type="text" value="<%-node.title%>"/></p>'

    15                 + '<% 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><% } %>'

    16                 + '<% if (options.show_node_editor_description) { %><p><label><%-renkan.translate("Description:")%></label><textarea class="Rk-Edit-Description"><%-node.description%></textarea></p><% } %>'

    17                 + '<% 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><% } %>'

    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><% } %>'

    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><% }%>'

    22                 + '</div></div><p><label><%-renkan.translate("Image URL:")%></label><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></p>'

    23                 + '<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><% } %>'

    25         ),

    26         readOnlyTemplate: _.template(

    27                 '<h2><span class="Rk-CloseX">&times;</span><% if (options.show_node_tooltip_color) { %><span class="Rk-UserColor" style="background:<%-node.color%>;"></span><% } %>'

    28                 + '<span class="Rk-Display-Title"><% if (node.uri) { %><a href="<%-node.uri%>" target="_blank"><% } %><%-node.title%><% if (node.uri) { %></a><% } %></span></h2>'

    29                 + '<% if (node.uri && options.show_node_tooltip_uri) { %><p class="Rk-Display-URI"><a href="<%-node.uri%>" target="_blank"><%-node.short_uri%></a></p><% } %>'

    30                 + '<% if (options.show_node_tooltip_description) { %><p class="Rk-Display-Description"><%-node.description%></p><% } %>'

    31                 + '<% if (node.image && options.show_node_tooltip_image) { %><img class="Rk-Display-ImgPreview" src="<%-node.image%>" /><% } %>'

    32                 + '<% 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><% } %>'

    33         ),

    34         draw: function() {

    35             var _model = this.source_representation.model,

    36             _created_by = _model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan),

    37             _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate ),

    38             _image_placeholder = this.options.static_url + "img/image-placeholder.png",

    39             _size = (_model.get("size") || 0);

    40             this.editor_$

    41             .html(_template({

    42                 node: {

    43                     has_creator: !!_model.get("created_by"),

    44                     title: _model.get("title"),

    45                     uri: _model.get("uri"),

    46                     short_uri:  Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),

    47                     description: _model.get("description"),

    48                     image: _model.get("image") || "",

    49                     image_placeholder: _image_placeholder,

    50                     color: _model.get("color") || _created_by.get("color"),

    51                     clip_path: _model.get("clip_path") || false,

    52                     created_by_color: _created_by.get("color"),

    53                     created_by_title: _created_by.get("title"),

    54                     size: (_size > 0 ? "+" : "") + _size

    55                 },

    56                 renkan: this.renkan,

    57                 options: this.options,

    58                 shortenText: Utils.shortenText

    59             }));

    60             this.redraw();

    61             var _this = this,

    62             closeEditor = function() {

    63                 _this.renderer.removeRepresentation(_this);

    64                 paper.view.draw();

    65             };

    66 

    67             this.editor_$.find(".Rk-CloseX").click(closeEditor);

    68 

    69             this.editor_$.find(".Rk-Edit-Goto").click(function() {

    70                 if (!_model.get("uri")) {

    71                     return false;

    72                 }

    73             });

    74 

    75             if (this.renderer.isEditable()) {

    76 

    77                 var onFieldChange = _(function() {

    78                     _(function() {

    79                         if (_this.renderer.isEditable()) {

    80                             var _data = {

    81                                     title: _this.editor_$.find(".Rk-Edit-Title").val()

    82                             };

    83                             if (_this.options.show_node_editor_uri) {

    84                                 _data.uri = _this.editor_$.find(".Rk-Edit-URI").val();

    85                                 _this.editor_$.find(".Rk-Edit-Goto").attr("href",_data.uri || "#");

    86                             }

    87                             if (_this.options.show_node_editor_image) {

    88                                 _data.image = _this.editor_$.find(".Rk-Edit-Image").val();

    89                                 _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _data.image || _image_placeholder);

    90                             }

    91                             if (_this.options.show_node_editor_description) {

    92                                 _data.description = _this.editor_$.find(".Rk-Edit-Description").val();

    93                             }

    94                             _model.set(_data);

    95                             _this.redraw();

    96                         } else {

    97                             closeEditor();

    98                         }

    99 

   100                     }).defer();

   101                 }).throttle(500);

   102 

   103                 this.editor_$.on("keyup", function(_e) {

   104                     if (_e.keyCode === 27) {

   105                         closeEditor();

   106                     }

   107                 });

   108 

   109                 this.editor_$.find("input, textarea").on("change keyup paste", onFieldChange);

   110 

   111                 this.editor_$.find(".Rk-Edit-Image-File").change(function() {

   112                     if (this.files.length) {

   113                         var f = this.files[0],

   114                         fr = new FileReader();

   115                         if (f.type.substr(0,5) !== "image") {

   116                             alert(_this.renkan.translate("This file is not an image"));

   117                             return;

   118                         }

   119                         if (f.size > (_this.options.uploaded_image_max_kb * 1024)) {

   120                             alert(_this.renkan.translate("Image size must be under ") + _this.options.uploaded_image_max_kb + _this.renkan.translate("KB"));

   121                             return;

   122                         }

   123                         fr.onload = function(e) {

   124                             _this.editor_$.find(".Rk-Edit-Image").val(e.target.result);

   125                             onFieldChange();

   126                         };

   127                         fr.readAsDataURL(f);

   128                     }

   129                 });

   130                 this.editor_$.find(".Rk-Edit-Title")[0].focus();

   131 

   132                 var _picker = _this.editor_$.find(".Rk-Edit-ColorPicker");

   133 

   134                 this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(

   135                         function(_e) {

   136                             _e.preventDefault();

   137                             _picker.show();

   138                         },

   139                         function(_e) {

   140                             _e.preventDefault();

   141                             _picker.hide();

   142                         }

   143                 );

   144 

   145                 _picker.find("li").hover(

   146                         function(_e) {

   147                             _e.preventDefault();

   148                             _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color"));

   149                         },

   150                         function(_e) {

   151                             _e.preventDefault();

   152                             _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Utils._USER_PLACEHOLDER(_this.renkan)).get("color"));

   153                         }

   154                 ).click(function(_e) {

   155                     _e.preventDefault();

   156                     if (_this.renderer.isEditable()) {

   157                         _model.set("color", $(this).attr("data-color"));

   158                         _picker.hide();

   159                         paper.view.draw();

   160                     } else {

   161                         closeEditor();

   162                     }

   163                 });

   164 

   165                 var shiftSize = function(n) {

   166                     if (_this.renderer.isEditable()) {

   167                         var _newsize = n+(_model.get("size") || 0);

   168                         _this.editor_$.find(".Rk-Edit-Size-Value").text((_newsize > 0 ? "+" : "") + _newsize);

   169                         _model.set("size", _newsize);

   170                         paper.view.draw();

   171                     } else {

   172                         closeEditor();

   173                     }

   174                 };

   175 

   176                 this.editor_$.find(".Rk-Edit-Size-Down").click(function() {

   177                     shiftSize(-1);

   178                     return false;

   179                 });

   180                 this.editor_$.find(".Rk-Edit-Size-Up").click(function() {

   181                     shiftSize(1);

   182                     return false;

   183                 });

   184             } else {

   185                 if (typeof this.source_representation.highlighted === "object") {

   186                     var titlehtml = this.source_representation.highlighted.replace(_(_model.get("title")).escape(),'<span class="Rk-Highlighted">$1</span>');

   187                     this.editor_$.find(".Rk-Display-Title" + (_model.get("uri") ? " a" : "")).html(titlehtml);

   188                     if (this.options.show_node_tooltip_description) {

   189                         this.editor_$.find(".Rk-Display-Description").html(this.source_representation.highlighted.replace(_(_model.get("description")).escape(),'<span class="Rk-Highlighted">$1</span>'));

   190                     }

   191                 }

   192             }

   193             this.editor_$.find("img").load(function() {

   194                 _this.redraw();

   195             });

   196         },

   197         redraw: function() {

   198             var _coords = this.source_representation.paper_coords;

   199             Utils.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * .75, this.editor_$);

   200             this.editor_$.show();

   201             paper.view.draw();

   202         }

   203     });

   204 

   205     /* NodeEditor End */

   206     

   207     return NodeEditor;

   208 

   209 });