1 "use strict";

     2 

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

     4     

     5     var Utils = requtils.getUtils();

     6 

     7     /* EdgeEditor Begin */

     8 

     9     //var EdgeEditor = Renderer.EdgeEditor = Utils.inherit(Renderer._BaseEditor);

    10     var EdgeEditor = Utils.inherit(BaseEditor);

    11 

    12     _(EdgeEditor.prototype).extend({

    13         template: _.template(

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

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

    16                 + '<% if (options.show_edge_editor_uri) { %><p><label><%-renkan.translate("URI:")%></label><input class="Rk-Edit-URI" type="text" value="<%-edge.uri%>"/><a class="Rk-Edit-Goto" href="<%-edge.uri%>" target="_blank"></a></p>'

    17                 + '<% if (options.properties.length) { %><p><label><%-renkan.translate("Choose from vocabulary:")%></label><select class="Rk-Edit-Vocabulary">'

    18                 + '<% _(options.properties).each(function(ontology) { %><option class="Rk-Edit-Vocabulary-Class" value=""><%- renkan.translate(ontology.label) %></option>'

    19                 + '<% _(ontology.properties).each(function(property) { var uri = ontology["base-uri"] + property.uri; %><option class="Rk-Edit-Vocabulary-Property" value="<%- uri %>'

    20                 + '"<% if (uri === edge.uri) { %> selected<% } %>><%- renkan.translate(property.label) %></option>'

    21                 + '<% }) %><% }) %></select></p><% } } %>'

    22                 + '<% if (options.show_edge_editor_color) { %><div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-renkan.translate("Edge color:")%></span><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%-edge.color%>;"><span class="Rk-Edit-ColorTip"></span></span>'

    23                 + '<%= renkan.colorPicker %><span class="Rk-Edit-ColorPicker-Text"><%- renkan.translate("Choose color") %></span></div></div><% } %>'

    24                 + '<% if (options.show_edge_editor_direction) { %><p><span class="Rk-Edit-Direction"><%- renkan.translate("Change edge direction") %></span></p><% } %>'

    25                 + '<% if (options.show_edge_editor_nodes) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- shortenText(edge.from_title, 25) %></p>'

    26                 + '<p><span class="Rk-Editor-Label"><%-renkan.translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- shortenText(edge.to_title, 25) %></p><% } %>'

    27                 + '<% if (options.show_edge_editor_creator && edge.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- shortenText(edge.created_by_title, 25) %></p><% } %>'

    28         ),

    29         readOnlyTemplate: _.template(

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

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

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

    33                 + '<p><%-edge.description%></p>'

    34                 + '<% if (options.show_edge_tooltip_nodes) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- shortenText(edge.from_title, 25) %></p>'

    35                 + '<p><span class="Rk-Editor-Label"><%-renkan.translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- shortenText(edge.to_title, 25) %></p><% } %>'

    36                 + '<% if (options.show_edge_tooltip_creator && edge.has_creator) { %><p><span class="Rk-Editor-Label"><%-renkan.translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- shortenText(edge.created_by_title, 25) %></p><% } %>'

    37         ),

    38         draw: function() {

    39             var _model = this.source_representation.model,

    40             _from_model = _model.get("from"),

    41             _to_model = _model.get("to"),

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

    43             _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate);

    44             this.editor_$

    45             .html(_template({

    46                 edge: {

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

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

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

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

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

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

    53                     from_title: _from_model.get("title"),

    54                     to_title: _to_model.get("title"),

    55                     from_color: _from_model.get("color") || (_from_model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"),

    56                     to_color: _to_model.get("color") || (_to_model.get("created_by") || Utils._USER_PLACEHOLDER(this.renkan)).get("color"),

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

    58                     created_by_title: _created_by.get("title")

    59                 },

    60                 renkan: this.renkan,

    61                 shortenText: Utils.shortenText,

    62                 options: this.options

    63             }));

    64             this.redraw();

    65             var _this = this,

    66             closeEditor = function() {

    67                 _this.renderer.removeRepresentation(_this);

    68                 paper.view.draw();

    69             };

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

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

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

    73                     return false;

    74                 }

    75             });

    76 

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

    78 

    79                 var onFieldChange = _(function() {

    80                     _(function() {

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

    82                             var _data = {

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

    84                             };

    85                             if (_this.options.show_edge_editor_uri) {

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

    87                             }

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

    89                             _model.set(_data);

    90                             paper.view.draw();

    91                         } else {

    92                             closeEditor();

    93                         }

    94                     }).defer();

    95                 }).throttle(500);

    96 

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

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

    99                         closeEditor();

   100                     }

   101                 });

   102 

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

   104 

   105                 this.editor_$.find(".Rk-Edit-Vocabulary").change(function() {

   106                     var e = $(this),

   107                     v = e.val();

   108                     if (v) {

   109                         _this.editor_$.find(".Rk-Edit-Title").val(e.find(":selected").text());

   110                         _this.editor_$.find(".Rk-Edit-URI").val(v);

   111                         onFieldChange();

   112                     }

   113                 });

   114                 this.editor_$.find(".Rk-Edit-Direction").click(function() {

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

   116                         _model.set({

   117                             from: _model.get("to"),

   118                             to: _model.get("from")

   119                         });

   120                         _this.draw();

   121                     } else {

   122                         closeEditor();

   123                     }

   124                 });

   125 

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

   127 

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

   129                         function(_e) {

   130                             _e.preventDefault();

   131                             _picker.show();

   132                         },

   133                         function(_e) {

   134                             _e.preventDefault();

   135                             _picker.hide();

   136                         }

   137                 );

   138 

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

   140                         function(_e) {

   141                             _e.preventDefault();

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

   143                         },

   144                         function(_e) {

   145                             _e.preventDefault();

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

   147                         }

   148                 ).click(function(_e) {

   149                     _e.preventDefault();

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

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

   152                         _picker.hide();

   153                         paper.view.draw();

   154                     } else {

   155                         closeEditor();

   156                     }

   157                 });

   158             }

   159         },

   160         redraw: function() {

   161             var _coords = this.source_representation.paper_coords;

   162             Utils.drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$);

   163             this.editor_$.show();

   164             paper.view.draw();

   165         }

   166     });

   167 

   168     /* EdgeEditor End */

   169     

   170     return EdgeEditor;

   171 

   172 });