jsTree contextmenu translation

Question

Мне нужно перевести contextmenu в jsTree (он отображается, когда вы нажимаете правую кнопку), на данный момент я создаю новый файл jstree.contextmenu.pl.js и скопирую-код с jquery.jstree.js и внесли свои изменения. Он работает, но я не уверен, что это лучший вариант.

$.jstree.plugin("contextmenu", { 
    __init : function() { 
     this.get_container() 
      .delegate("a", "contextmenu.jstree", $.proxy(function (e) { 
        e.preventDefault(); 
        if(!$(e.currentTarget).hasClass("jstree-loading")) { 
         this.show_contextmenu(e.currentTarget, e.pageX, e.pageY); 
        } 
       }, this)) 
      .delegate("a", "click.jstree", $.proxy(function (e) { 
        if(this.data.contextmenu) { 
         $.vakata.context.hide(); 
        } 
       }, this)) 
      .bind("destroy.jstree", $.proxy(function() { 
        // TODO: move this to descruct method 
        if(this.data.contextmenu) { 
         $.vakata.context.hide(); 
        } 
       }, this)); 
     $(document).bind("context_hide.vakata", $.proxy(function() { this.data.contextmenu = false; }, this)); 
    }, 
    defaults : { 
     select_node : false, // requires UI plugin 
     show_at_node : true, 
     items : { // Could be a function that should return an object like this one 
      "create" : { 
       "separator_before" : false, 
       "separator_after" : true, 
       "label"    : "Utwórz nowy", 
       "action"   : function (obj) { this.create(obj); } 
      }, 
      "rename" : { 
       "separator_before" : false, 
       "separator_after" : false, 
       "label"    : "Zmień nazwę", 
       "action"   : function (obj) { this.rename(obj); } 
      }, 
      "remove" : { 
       "separator_before" : false, 
       "icon"    : false, 
       "separator_after" : false, 
       "label"    : "Usuń", 
       "action"   : function (obj) { if(this.is_selected(obj)) { this.remove(); } else { this.remove(obj); } } 
      }, 
      "ccp" : { 
       "separator_before" : true, 
       "icon"    : false, 
       "separator_after" : false, 
       "label"    : "Edytuj", 
       "action"   : false, 
       "submenu" : { 
        "cut" : { 
         "separator_before" : false, 
         "separator_after" : false, 
         "label"    : "Wytnij", 
         "action"   : function (obj) { this.cut(obj); } 
        }, 
        "copy" : { 
         "separator_before" : false, 
         "icon"    : false, 
         "separator_after" : false, 
         "label"    : "Kopiuj", 
         "action"   : function (obj) { this.copy(obj); } 
        }, 
        "paste" : { 
         "separator_before" : false, 
         "icon"    : false, 
         "separator_after" : false, 
         "label"    : "Wklej", 
         "action"   : function (obj) { this.paste(obj); } 
        } 
       } 
      } 
     } 
    }, 
    _fn : { 
     show_contextmenu : function (obj, x, y) { 
      obj = this._get_node(obj); 
      var s = this.get_settings().contextmenu, 
       a = obj.children("a:visible:eq(0)"), 
       o = false, 
       i = false; 
      if(s.select_node && this.data.ui && !this.is_selected(obj)) { 
       this.deselect_all(); 
       this.select_node(obj, true); 
      } 
      if(s.show_at_node || typeof x === "undefined" || typeof y === "undefined") { 
       o = a.offset(); 
       x = o.left; 
       y = o.top + this.data.core.li_height; 
      } 
      i = obj.data("jstree") && obj.data("jstree").contextmenu ? obj.data("jstree").contextmenu : s.items; 
      if($.isFunction(i)) { i = i.call(this, obj); } 
      this.data.contextmenu = true; 
      $.vakata.context.show(i, a, x, y, this, obj, this._get_settings().core.rtl); 
      if(this.data.themes) { $.vakata.context.cnt.attr("class", "jstree-" + this.data.themes.theme + "-context"); } 
     } 
    } 
}); 

Как это сделать?

Answer 1

Абсолютно не нужно изменять jstree, где определены параметры контекстного меню. Вы можете изменить меню для вашего конкретного экземпляра дерева, как показано ниже

$("#jstreediv").jstree({ 
    contextmenu:{ 
    items:{ 
       "create" : { 
        "separator_before" : false, 
        "separator_after" : true, 
        "label"    : "Utwórz nowy", 
        "action"   : function (obj) { this.create(obj); } 
       }, 
       "rename" : { 
        "separator_before" : false, 
        "separator_after" : false, 
        "label"    : "Zmień nazwę", 
        "action"   : function (obj) { this.rename(obj); } 
       }, 
       "remove" : { 
        "separator_before" : false, 
        "icon"    : false, 
        "separator_after" : false, 
        "label"    : "Usuń", 
        "action"   : function (obj) { 
               if(this.is_selected(obj)) { 
                this.remove(); 
               } 
               else { 
                this.remove(obj); 
               } 
              } 
       } 
     } 
    }, 
    plugins: ["contextmenu"] 

}); 

Или, если вы хотите переместить всю эту конфигурацию в контекстном меню на какой-либо другой новый файл, а затем написать функцию, которая возвращает Контекстную деталь, как показано ниже ,

function yourContextMenu() { 

     var items = { 
         "create" : { 
          "separator_before" : false, 
          "separator_after" : true, 
          "label"    : "Utwórz nowy", 
          "action"   : function (obj) { this.create(obj); } 
         }, 
         "rename" : { 
          "separator_before" : false, 
          "separator_after" : false, 
          "label"    : "Zmień nazwę", 
          "action"   : function (obj) { this.rename(obj); } 
         }, 
         "remove" : { 
          "separator_before" : false, 
          "icon"    : false, 
          "separator_after" : false, 
          "label"    : "Usuń", 
          "action"   : function (obj) { 
                 if(this.is_selected(obj)) { 
                  this.remove(); 
                 } 
                 else { 
                  this.remove(obj); 
                 } 
                } 
         } 
         //add as many context menu items as you want here 
     }; 

     return items; 
} 

Сохранить эту функцию в файле яваскрипта somename.js и включить его в вашей странице.

<script src="somename.js"></script> 

И ваше дерево должно быть как ниже

$("#jstreediv").jstree({ 
     contextmenu:{ 
      items: yourContextMenu() 
     }, 
     plugins: ["contextmenu"] 
}); 

Answer 2

Поскольку элементы могут быть функцией, переводя их теперь может быть сделано с:

$('#jstreediv').jstree({ 
    //... 
    'contextmenu': { 
     'items': function(n) { 
      var tmp = $.jstree.defaults.contextmenu.items(); 
      tmp.create.label = 'Créer'; 
      tmp.rename.label = 'Renommer'; 
      tmp.remove.label = 'Supprimer'; 
      return tmp; 
     } 
    } 
});