{"id":191850,"date":"2013-08-29T12:59:02","date_gmt":"2013-08-29T08:59:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=191850"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=191850","title":{"rendered":"\u0414\u0435\u043b\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0443 \u0443\u043c\u0430 \u043d\u0430 Javascript \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/span>"},"content":{"rendered":"
\t\t\t
\u042d\u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0443\u0447\u0435\u0431\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/a> \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u0430\u0440\u0442\u044b \u0443\u043c\u0430. \u0417\u0430 \u0441\u0447\u0451\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0445 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043f\u043e\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u043d\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. <\/p>\n

\u042f \u043e\u0442\u0440\u0430\u0436\u0443 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u0430\u0440\u0442\u044b \u0443\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041f\u0440\u0438\u0447\u0451\u043c, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 LocalStorage, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0442\u044c 5 \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442. \u041e\u0431\u044a\u0451\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0435\u0432\u044b\u0441\u0438\u0442\u044c 100-200 \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f IndexedDB \u0438\u043b\u0438 webSQL, \u043c\u043e\u0442\u0440\u044f \u0447\u0442\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n

\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0432\u044b\u043b\u043e\u0436\u0435\u043d\u044b \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043d\u0430 Github<\/a>.<\/p>\n

\u041c\u044b \u0443\u043b\u043e\u0436\u0438\u043c\u0441\u044f \u0432 520 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432 \u043d\u0430\u0448\u0435\u0439 \u043a\u0430\u0440\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0442\u044c \u0443\u0437\u043b\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439, \u0443\u0434\u0430\u043b\u044f\u0442\u044c, \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438\u0437 120 \u0438\u043a\u043e\u043d\u043e\u043a \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e.<\/p>\n

\u0421\u0435\u043a\u0440\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0437\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0435 \u0432 \u0431\u043e\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u044b: <\/p>\n

    \n
  1. Ydn.db<\/a> \u2014 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0441 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0438 \u0435\u0434\u0438\u043d\u044b\u043c API <\/li>\n
  2. jQuery context menu<\/a> \u2014 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Javascript<\/li>\n
  3. jsPlumb<\/a> \u2014 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438<\/li>\n
  4. jQuery UI <\/a>\u2014 Drag&drop \u2014 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439<\/li>\n<\/ol>\n

    PS: \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u00ab\u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u00bb, \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0442\u044c \u0441\u0435\u0431\u0435 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 jQuery \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 $.Deferred(), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 LiveReload, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u043a\u0440\u0430\u0441\u043a\u0443 \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0448\u0435 F5 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 CSS \u0438 \u043a\u043e\u0434\u0430 \u0432 HTML \u0438 Javascript.
    <\/a><\/p>\n

    \u041a\u043e\u0434 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0441 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438, \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0442\u043e\u0440\u043e\u043f\u0438\u0442\u0441\u044f<\/h5>\n

    \u041c\u043d\u043e\u0433\u0438\u0435 \u043c\u043e\u0433\u0443\u0442 \u0434\u0430\u043b\u044c\u0448\u0435 \u043d\u0435 \u0447\u0438\u0442\u0430\u0442\u044c, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043a\u043e\u0434\u043e\u043c. <\/p>\n

    \u0413\u043b\u0430\u0432\u043d\u044b\u0439 Javascript \u043a\u043e\u0434 \u0441 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438<\/b><\/p>\n
    \n
    var API_4_MINDMAP = function(){  \/\/singleton - \u043f\u0440\u0438 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u043e\u0436\u0434\u044b \t if ( (typeof arguments.callee.instance=='undefined') ) { \/\/\u0435\u0441\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0435\u0449\u0451 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043d \t\t arguments.callee.instance = new function() { \t\t     var this_api = this; \/\/\u043a\u044d\u0448\u0438\u0440\u0443\u0435\u043c \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0435\u0431\u044f, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439  \t\t     var my_all_data = {}; \/\/\u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \t\t       \t\t     var my_all_data_template = { \/\/\u0437\u0430\u0434\u0430\u0451\u043c \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \t\t\t\t "n1":{ id:1, parent_id:0, title:"\u041a\u0430\u0440\u0442\u0430 \u0443\u043c\u0430<br>\u0441\u0432\u043e\u0438\u043c\u0438 \u0440\u0443\u043a\u0430\u043c\u0438<br>"+     \t\t\t "\u0441 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445<br>\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<br>Javascript" },     \t\t\t "n2":{ id:2, parent_id:1, title:"\u0418\u0437\u0443\u0447\u0438\u043c", icon:"icon-gift" },     \t\t\t "n3":{ id:3, parent_id:2, title:"\u0420\u0438\u0441\u0443\u0435\u043c \u043b\u0438\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438", icon:"icon-flow-line" },      \t\t\t "n5":{ id:5, parent_id:3, title:"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d jsPlumb", icon: "icon-link" },      \t\t\t "n4":{ id:4, parent_id:3, title:"\u041a\u0430\u0436\u0434\u0430\u044f \u043b\u0438\u043d\u0438\u044f - \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 SVG" },      \t\t\t "n7":{ id:7, parent_id:6, title:"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d jQuery ContextMenu", icon: "icon-link" },      \t\t\t "n8":{ id:8, parent_id:1, title:"\u041e\u0431\u044a\u0451\u043c \u043a\u043e\u0434\u0430", icon: "icon-lamp" },      \t\t\t "n9":{ id:9, parent_id:8, title:"Javascript + jQuery \u2014 520 \u0441\u0442\u0440\u043e\u043a" },     \t\t\t "n10":{ id:10, parent_id:2, title:"\u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435", icon: "icon-floppy-1" },     \t\t\t "n11":{ id:11, parent_id:17, title:"IndexedDB" },     \t\t\t "n12":{ id:12, parent_id:17, title:"webSQL" },     \t\t\t "n13":{ id:13, parent_id:17, title:"LocalStorage" },     \t\t\t "n14":{ id:14, parent_id:10, title:"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d Ydn.db", icon: "icon-link" },     \t\t\t "n15":{ id:15, parent_id:10, title:"\u041e\u0431\u044a\u0451\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d" },     \t\t\t "n16":{ id:16, parent_id:2, title:"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d \u0432 Javascript", icon: "icon-cd" },     \t\t\t "n17":{ id:17, parent_id:10, title:"\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u044b" },     \t\t\t "n18":{ id:18, parent_id:6, title:"\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0443\u043d\u043a\u0442\u043e\u0432" },     \t\t\t "n20":{ id:20, parent_id:8, title:"CSS \u2014 220 \u0441\u0442\u0440\u043e\u043a" },     \t\t\t "n19":{ id:19, parent_id:8, title:"HTML \u2014 50 \u0441\u0442\u0440\u043e\u043a" },     \t\t\t "n22":{ id:22, parent_id:16, title:"\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445" },     \t\t\t "n23":{ id:23, parent_id:16, title:"\u041d\u0430\u0432\u043e\u0434\u0438\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u0440\u0435\u0434\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439" },     \t\t\t "n24":{ id:24, parent_id:2, title:"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442", icon: "icon-emo-wink" },     \t\t\t "n6":{ id:6, parent_id:2, title:"\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e", icon: "icon-list" },      \t\t\t "n25":{ id:25, parent_id:24, title:"\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0430\u0431\u043e\u0440 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 Fontello", icon: "icon-link" },     \t\t\t "n27":{ id:27, parent_id:2, title:"Drag&Drop jQuery UI", icon: "icon-link" },     \t\t\t "n26":{ id:26, parent_id:24, title:"\u0412\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0441 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u0433\u043b\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u0435\u043c" }     \t\t   }; \t\t \t \t\t \t this.jsSaveAllToDB = function() { \/\/\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432\u0435\u0441\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \t\t\t \t $.each(my_all_data, function(i, el){ \t\t       \t\tdb.put("mindmap_db", el ).done(function(){  \t\t       \t\t}); \t\t\t \t }); \t\t \t }  \t\t \t this.jsLoadAllFromDB = function() { \/\/\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0432\u0435\u0441\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438\u043b\u0438 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \t\t\t \t var d=new $.Deferred(); \/\/\u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e  \t\t \t \t my_all_data = {}; \/\/\u043e\u0431\u043d\u0443\u043b\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \t    \t\t db.values("mindmap_db",null,99999999).done(function(records) { \t    \t\t \tif(records.length && false) { \t    \t\t \t$.each(records, function(i, el){ \t\t    \t\t \tmy_all_data["n"+el.id] = {}; \t\t    \t\t \tmy_all_data["n"+el.id] = el; \t    \t\t \t}); \t    \t\t \t} else { \/\/\u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a, \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044e \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0443 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \t\t    \t\t \tmy_all_data = my_all_data_template; \t\t    \t\t \tthis_api.jsSaveAllToDB(); \t    \t\t \t} \t    \t\t \td.resolve(); \/\/\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043e\u0431\u0435\u0449\u0430\u043d\u0438\u0435, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f done \t    \t\t }); \t    \t\t  \t    \t\t return d.promise(); \/\/\u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u0441\u043a\u043e\u0440\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u043e\u0431\u0435\u0449\u0430\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0451 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f  \t\t \t } \t\t \t \t\t \t this.jsFind = function(id, changes) { \/\/\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 id \u0438\u043b\u0438 \u043c\u0435\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \t\t \t \t \t\t \t \t \/\/\u043d\u0430\u0445\u043e\u0434\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0431\u0443\u043a\u0432\u0430 n \u043d\u0443\u0436\u043d\u0430 \u0434\u043b\u044f \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 id \t\t \t \t var answer = my_all_data["n"+id];  \t\t \t \t if(!answer) return false; \/\/\u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u043d\u0435\u0442 \t\t \t  \t\t \t \t if(changes) { \/\/\u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u043d\u0435\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0438\u0445 \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \t\t\t \t \t $.each(changes, function(name_field, new_field_value){ \t\t\t\t \t \t answer[name_field] = new_field_value; \t\t\t \t \t }); \t\t       \t\t  \t\t       \t\t db.put("mindmap_db", answer ).done(function(){ \/\/\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0431\u0430\u0437\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \t\t       \t\t \tconsole.info("\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u044b \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430"); \/\/\u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \t\t       \t\t }); \t\t\t \t \t  \t\t \t \t } \t\t\t \t return answer; \t\t \t } \t\t \t  \t\t \t this.jsFindByParent = function(parent_id) { \/\/\u043f\u043e\u0434\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435\u0445 \u0434\u0435\u0442\u0435\u0439 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f parent_id \t\t \t \t var answer = []; \t\t\t \t $.each(my_all_data, function(i,el){ \/\/\u0444\u0438\u043b\u044c\u0442\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u043d\u0435\u0443\u0434\u0430\u043b\u0451\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043c = parent_id \t\t\t\t \tif((el.parent_id == parent_id) && (!el.del)) answer.push(el); \t\t\t \t }); \t\t\t \t return answer; \t\t \t } \t\t \t  \t\t \t this.jsAddNew = function(parent_id, title) { \/\/\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0431\u0451\u043d\u043a\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044e parent_id \t\t \t \tvar max_id = 0; \t\t \t \t$.each(my_all_data, function(i,el){ \/\/\u043d\u0430\u0445\u043e\u0434\u0438\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 id \t\t\t \t \tif(el.id>max_id) max_id = el.id; \t\t \t \t}); \t\t \t \tvar new_id = (parseInt(max_id)+1); \/\/\u043d\u043e\u0432\u044b\u0439 \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 id \t\t \t \tmy_all_data["n"+new_id] = {}; \/\/\u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \t\t \t \tmy_all_data["n"+new_id] = {id:new_id, parent_id: parent_id, title: title}; \/\/\u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \t\t \t \t \t\t \t \treturn new_id; \t\t\t } \t\t\t  \t\t \t \/\/\u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u0442 \u0412\u0421\u0415\u0425 \u0434\u0435\u0442\u0435\u0439, \u0432\u043d\u0443\u043a\u043e\u0432 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435 \t\t \t this.jsRecursiveByParent = function(id, recursive_array) { \t\t \t   if(!recursive_array) recursive_array = []; \t\t \t    \t\t \t   var answer = this_api.jsFindByParent(id); \t\t \t    \t\t \t   $.each(answer,function(i,el) { \/\/\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u0430\u043c\u0438 \u0441\u0435\u0431\u044f, \u043f\u043e\u043a\u0430 \u0435\u0441\u0442\u044c \u0434\u0435\u0442\u0438 \t\t \t   \t   recursive_array.push(el); \t\t \t       recursive_array = this_api.jsRecursiveByParent(el.id, recursive_array); \t\t \t   }); \t\t \t return recursive_array; \t\t \t } \t\t \t   \t\t \t this.jsDeleteById = function(id) { \/\/\u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0432\u0441\u0435\u0445 \u0434\u0435\u0442\u0435\u0439 \u0438 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u044d\u0442\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \t\t \t \t if(confirm("\u0423\u0434\u0430\u043b\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2116"+id+" \u0438 \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435?")) { \t\t \t \t \tvar childs = this_api.jsRecursiveByParent(id); \t\t \t \t \t$.each(childs, function(i, el){ \t\t \t \t \t\tapi4mindmap.jsFind(el.id, {del:1}); \/\/"\u0434\u0436\u0438\u0445\u0430\u0434" - \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0434\u0435\u0442\u0435\u0439 \u0438 \u0432\u0441\u0435\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \t\t \t \t \t}); \t\t \t \t \tif(id!=1) api4mindmap.jsFind(id, {del:1}); \/\/\u043f\u043e\u0442\u043e\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435 \u21161 \t\t \t \t } \t\t \t } \t\t \t  \t\t \t this.jsRenderAllMap = function(focus_id) { \/\/\u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u0440\u0442\u044b \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \t\t \t \t if(!focus_id) focus_id = 1; \t\t\t \t var html = "<ul myid='"+focus_id+"'>"; \t\t\t \t html = this_api.jsRenderOneParent(focus_id, html); \/\/\u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \t\t\t \t html += "<\/ul>"; \t\t\t \t $("#mindmap").html(html); \t\t\t \t jsMakeDroppable(); \/\/\u0434\u0435\u043b\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u044b\u043c\u0438 \t\t \t } \t\t \t  \t\t \t this.jsRenderOneParent = function(parent_id, html) { \/\/\u0440\u0438\u0441\u0443\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u0432\u0441\u0435\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \t\t\t \t html += "<li id='node_"+parent_id+"' myid='"+parent_id+"'>"; \t\t\t \t html += "<div class='big_n_title'>"; \t\t\t \t html += this_api.jsRenderOneElement(parent_id); \/\/\u0440\u0438\u0441\u0443\u0435\u043c \u0441\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \t\t\t \t html += "<\/div>"; \t\t\t \t  \t\t\t \t var childs = this_api.jsFindByParent(parent_id); \/\/\u043f\u043e\u0434\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435\u0445 \u0434\u0435\u0442\u0435\u0439 \t\t\t \t if(childs.length) { \t\t\t\t \t html += "<ul class='childs' myid='"+parent_id+"'>"; \t\t\t \t } \t\t\t \t $.each(childs, function(i,el){ \t\t\t\t \thtml = this_api.jsRenderOneParent(el.id,html); \/\/\u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u0430\u043c\u0438 \u0441\u0435\u0431\u044f, \u043f\u043e\u043a\u0430 \u0435\u0441\u0442\u044c \u0434\u0435\u0442\u0438 \t\t\t \t }); \t\t\t \t if(childs.length) { \t\t\t\t \t html += "<\/ul>"; \t\t\t \t } \t\t\t \t  \t\t\t \t html += "<\/li>"; \t\t\t \t return html; \t\t \t } \t\t \t  \t\t \t  \t\t \t this.jsRenderOneElement = function(id) { \/\/\u0440\u0438\u0441\u0443\u0435\u043c \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \t\t \t \t var element = this_api.jsFind(id); \/\/\u0441\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \t\t \t \t var childs_count = this_api.jsFindByParent(id).length; \/\/\u043a\u043e\u043b-\u0432\u043e \u0434\u0435\u0442\u0435\u0439 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430  \t\t \t \t var icon_type = ''; \t\t \t \t if(element.icon) icon_type = element.icon; \/\/\u0435\u0441\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0451 \t\t \t \t  \t\t \t \t if(childs_count>0) { \/\/\u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u0430\u043f\u043a\u0430 \t\t \t \t \tvar collapser_html = "<div class='collapse'><\/div>"; \/\/\u043a\u0440\u0443\u0433\u043b\u044b\u0439 \u043c\u0438\u043d\u0443\u0441 \u0438\u043b\u0438 \u043f\u043b\u044e\u0441, \u0434\u043b\u044f \u0441\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \t\t\t \t \tvar icon = "<div class='type_icon'><i class='icon-folder-1 folder'><div class='count'>"+ \t\t\t \t \t\tchilds_count+"<\/div><\/i><i class='"+icon_type+"'><\/i>"+"<\/div>"; \t\t \t \t } else { \t\t\t \t \tvar collapser_html = ""; \t\t\t \t \tvar icon = "<div class='type_icon'><i class='"+icon_type+"'><\/i><\/div>"; \t\t \t \t } \t\t \t \t  \t\t\t \t var answer = icon+"<div class='n_title' contenteditable='true'>"+element.title+ \t\t\t \t \t\t\t       "<\/div><div class='contextmenu'><\/div>"+collapser_html; \t\t\t \t return answer;  \t\t \t } \t\t   \t \t \t\t\t this.jsDrawMindmap = function(focus_id) { \/\/\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0438\u0441\u0443\u0435\u0442 \u043b\u0438\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \t\t\t  \t\t\t    var line_cache = []; \t\t\t     \t\t\t    $("#mindmap ul:visible").each(function(){ \/\/\u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u0432\u0451\u0440\u043d\u0443\u0442\u044b\u0435 \u0441\u043f\u0438\u0441\u043a\u0438 ul \t\t\t    \tvar ul_id = $(this).attr("myid"); \t\t\t    \tvar childs = this_api.jsFindByParent(ul_id);  \t\t\t     \t$.each(childs, function(i,el){ \/\/\u0434\u043b\u044f \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u043d\u0443\u0436\u043d\u044b\u0445 \u043b\u0438\u043d\u0438\u0439 \t\t\t    \t \tvar target = el.id; \t\t\t    \t \tif(!$("li[myid='"+target+"']"+" .big_n_title:first").hasClass("_jsPlumb_endpoint_anchor_")) { \t\t\t    \t\t \tvar parent_id = el.parent_id; \t\t\t    \t\t \tline_cache.push( {source: parent_id, target: target} ); \t\t\t    \t \t} \t\t\t     \t}); \t\t\t    }); \t\t\t     \t\t\t    if(line_cache.length) { \/\/\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043b\u0438\u043d\u0438\u0439, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \t\t\t     \tif(!myjsPlumb.isSuspendDrawing()) { \t\t\t     \t\tmyjsPlumb.setSuspendDrawing(true, true); \t\t\t     \t\tconsole.info("set_suspend"); \t\t\t     \t} \t\t\t    } \t\t\t     \t\t\t     \t\t\t    $.each(line_cache, function(i, el){ \t\t\t\t       \t\t\t\t      if(el.source == 1) { \/\/\u0443 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043b\u0438\u043d\u0438\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u044b \u0432\u044b\u0441\u043e\u0442\u044b \t\t\t\t      \tanchor1 = [ 1, 0.5, 1, 0, -1, -1 ]; \t\t\t\t      } else { \t\t\t\t      \tanchor1 = [ 1, 1, 1, 0, -1, -1 ]; \/\/\u043b\u0438\u043d\u0438\u044f \u0438\u0434\u0451\u0442 \u0441 \u043d\u0438\u0437\u0430 \t\t\t\t      } \t\t\t     \t\t\t\t\t  \/\/\u043f\u0435\u0440\u0432\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0434\u043b\u044f \u043b\u0438\u043d\u0438\u0438: \t\t    \t      var p1 = myjsPlumb.addEndpoint("node_"+el.source+" .big_n_title:first",  \t\t    \t      \t\t                        { anchor: anchor1 });\t\t\t    \t       \t\t    \t      \/\/\u0432\u0442\u043e\u0440\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0434\u043b\u044f \u043b\u0438\u043d\u0438\u0438:\t\t                         \t\t    \t      var p2 = myjsPlumb.addEndpoint("node_"+el.target+" .big_n_title:first",  \t\t    \t      \t\t\t\t\t\t\t\t{ anchor: [ 0, 1, -1, 0, 1, -1 ]}); \t\t\t\t\t  \/\/\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0435\u0442\u0435\u0439 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430: \t\t\t\t\t  var count = this_api.jsFindByParent(el.source).length;  \t\t\t\t\t  if(count>10) { \/\/\u0435\u0441\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u0435\u0441\u044f\u0442\u0438, \u0442\u043e \u043b\u0438\u043d\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u044f\u043c\u044b\u043c\u0438 \t\t\t    \t      var LineType = "Straight"; \t\t\t\t\t  } else { \t\t\t    \t      var LineType = "Bezier"; \/\/\u043a\u0440\u0438\u0432\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0411\u0435\u0437\u044c\u0435 \t\t\t\t\t  } \t\t\t    \t   \t\t\t    \t  \/\/\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0434\u0432\u0435 \u0442\u043e\u0447\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u0432\u044b\u0448\u0435   \t\t\t  \t\t  myjsPlumb.connect({source: p1, target: p2, scope:"someScope",  \t\t\t  \t\t  \t\t\t\t\tdeleteEndpointsOnDetach:true, connector:[ LineType,  \t\t\t  \t\t  \t\t\t\t\t{ curviness: 30, cornerRadius: 20 } ]}); \t\t\t   }); \t\t\t } \/\/jsDrawMindmap \t\t   \t \t \t\t   \t this.jsRefreshMindmap = function() { \/\/\u0431\u044b\u0441\u0442\u0440\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0439 \u043a\u0430\u0440\u0442\u044b \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \t\t   \t \t myjsPlumb.reset(); \/\/\u0441\u0442\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u043b\u0438\u043d\u0438\u0438 \t\t   \t \t var save_scroll_top = $("#mindmap").scrollTop();  \/\/\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0440\u043d\u0443\u0442\u044c \t\t   \t \t var save_scroll_left = $("#mindmap").scrollLeft();\/\/\u0432\u0441\u0451 \u043a\u0430\u043a \u0431\u044b\u043b\u043e \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0440\u0435\u0438\u0441\u043e\u0432\u043a\u0438 \t\t   \t \t  \t\t   \t \t var hidden_elements = []; \/\/\u043c\u0430\u0441\u0441\u0438\u0432 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u0451\u0440\u043d\u0443\u0442\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \t\t   \t \t  \t\t   \t \t $(".hide").each(function(){ \t\t\t   \t \thidden_elements.push($(this).attr("myid")); \t\t   \t \t }); \t\t   \t \t  \t\t\t   \t api4mindmap.jsRenderAllMap(1); \/\/\u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u044e \u043a\u0430\u0440\u0442\u0443 \u0437\u0430\u043d\u043e\u0432\u043e  \t\t   \t \t $.each(hidden_elements, function(i, el){ \/\/\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0441\u043a\u0440\u044b\u0442\u044b \u0434\u043e. \t\t\t   \t \t$("#node_"+el).addClass("hide"); \t\t   \t \t }); \t\t   \t \t  \t\t   \t \t api4mindmap.jsDrawMindmap(1);  \/\/\u043d\u0430\u043c\u0435\u0447\u0430\u0435\u043c \u043b\u0438\u043d\u0438\u0438, \u0432\u0437\u044f\u0432 \u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u0443\u0437\u043b\u044b \u0441 \u044d\u043a\u0440\u0430\u043d\u0430 \t\t   \t \t onResize(); \/\/\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043b\u0438\u043d\u0438\u0439 \t\t   \t \t  \t\t   \t \t $("#mindmap").scrollTop(save_scroll_top);  \/\/\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0440\u043d\u0443\u0442\u044c \t\t   \t \t $("#mindmap").scrollLeft(save_scroll_left);\/\/\u0432\u0441\u0451 \u043a\u0430\u043a \u0431\u044b\u043b\u043e \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0440\u0435\u0438\u0441\u043e\u0432\u043a\u0438  \t\t   \t } \t\t   \t \t \t\t \t this.jsRegAllKeys = function() { \/\/\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043a\u043b\u0438\u043a\u0438 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b  \t\t\t \t $("#mindmap").on("keydown", ".n_title", function(e){ \/\/\u043e\u0442\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u044f Enter \t\t\t\t\t  \t\t\t \t \t if(e.keyCode==13) { \t\t\t\t \t \te.preventDefault(); \t\t\t \t \t \t$(this).blur(); \/\/\u0443\u0432\u043e\u0434\u0438\u043c \u0444\u043e\u043a\u0443\u0441, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435 \t\t\t \t \t } \t\t\t \t });  \t\t\t \t $("#mindmap").on("keyup", ".n_title", function(e){ \t\t\t\t\t e.preventDefault(); \t\t\t \t \t if(e.keyCode==13) $(this).blur();  \t\t\t\t \t onResize(); \/\/\u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u043b\u0438\u043d\u0438\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0451, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0441\u0434\u0432\u0438\u043d\u0443\u043b\u043e\u0441\u044c \t\t\t \t });  \t\t\t \t $("#mindmap").on("blur", ".n_title", function(){ \/\/\u043f\u0440\u0438 \u0443\u0432\u043e\u0434\u0435 \u0444\u043e\u043a\u0443\u0441\u0430, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \t\t\t \t \t var n_title_text = $(this).html(); \t\t\t \t \t var id = $(this).parents("li:first").attr("myid"); \t\t\t \t \t if(n_title_text.length==0) n_title_text = "\u041d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442"; \/\/\u0435\u0441\u043b\u0438 \u0432\u0441\u0451 \u0441\u0442\u0451\u0440\u043b\u0438, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043f\u043e \u0443\u043c\u043e\u043b\u0447. \t\t\t \t \t $(this).html( strip_tags(n_title_text) ); \/\/\u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u0435\u0433\u0438 \u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044b \u0441\u0442\u0440\u043e\u043a \t\t\t \t \t this_api.jsFind(id, {title:n_title_text}); \/\/\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u0438 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \t\t\t\t \t onResize(); \/\/\u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u043b\u0438\u043d\u0438\u0438 \t\t\t \t });  \t\t\t \t $("#mindmap").on("click", ".n_title", function(){ \/\/\u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u0435\u043c\u0441\u044f \t\t\t \t \t$(this).focus(); \t\t\t \t });  \t\t\t \t $("#mindmap").on("focus", ".n_title", function(){ \/\/\u043f\u0440\u0438 \u0444\u043e\u043a\u0443\u0441\u0435, \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c \u0432\u0435\u0441\u044c \u0442\u0435\u043a\u0441\u0442 \t\t\t \t \tvar ntitle = $(this);  \t \t\t \t  \tsetTimeout(function(){  \t\t \t  \t\tif(ntitle.is(":focus")) document.execCommand('selectAll',false,null);  \t\t \t  \t\t},3); \/\/\u043d\u0443\u0436\u043d\u0430 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0432\u0441\u0435\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f Firefox  \t\t\t \t }); \t\t\t \t  \t\t\t \t $("#mindmap").on("click", ".collapse", function(){ \/\/\u043f\u0440\u0438 \u0441\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0438 \u0438 \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0438 \u0443\u0437\u043b\u043e\u0432 \t\t\t \t \t$(this).parents("li:first").toggleClass("hide"); \/\/\u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043a\u043b\u0430\u0441\u0441 \t\t\t \t \tapi4mindmap.jsDrawMindmap(1);  \/\/\u0434\u043e\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u043b\u0438\u043d\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442 \t\t\t \t \tonResize(); \t\t\t \t \treturn false; \t\t\t \t });  \t\t\t \t var font_size = 14; \/\/\u0448\u0440\u0438\u0444\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \t\t\t \t $("#zoom_in").on("click", function(){ \/\/\u043a\u043d\u043e\u043f\u043a\u0430 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430 \t\t\t \t \tfont_size += 1; \t\t\t \t \t$("#mindmap").css("font-size", font_size+"px"); \t\t\t \t \tonResize(); \t\t\t \t \treturn false; \t\t\t \t }); \t\t\t \t $("#zoom_out").on("click", function(){ \/\/\u043a\u043d\u043e\u043f\u043a\u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430 \t\t\t \t \tfont_size -= 1; \t\t\t \t \t$("#mindmap").css("font-size", font_size+"px"); \t\t\t \t \tonResize(); \t\t\t \t \treturn false; \t\t\t \t }); \t\t\t \t  \t\t\t \t $("#collapse_all").on("click", function(){ \/\/\u043a\u043d\u043e\u043f\u043a\u0430 "\u0441\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b" \t\t\t \t \t$("#node_1 ul li").addClass("hide"); \t\t\t \t \tonResize(); \t\t\t \t \treturn false; \t\t\t \t });  \t\t\t \t $("#expand_all").on("click", function(){ \/\/\u043a\u043d\u043e\u043f\u043a\u0430 "\u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b" \t\t\t \t \t$("#node_1 ul li").removeClass("hide");  \t\t\t \t \tonResize(); \t\t\t \t \treturn false; \t\t\t \t }); \t\t\t \t   \t\t \t } \/\/jsRegAllKeys \t\t   \t \t \t\t   \t \t \t\t }      }      return arguments.callee.instance; \/\/\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0432\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 }  function onResize() { \tmyjsPlumb.setSuspendDrawing(false, true); \/\/\u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 }  function jsGetIcons(n) { \/\/\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043c\u043d\u043e\u0433\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0435 \u043c\u0435\u043d\u044e \u0438\u043a\u043e\u043d\u043e\u043a \tvar icons = {}; \t     icons[0] = ["progress-0","progress-1","progress-2","progress-3","dot","dot-2","dot-3","star-empty","star","record"];     icons[1] = ["check","heart-empty","heart","bookmark-empty","bookmark","ok-2","help","wallet","mail-2","cloud"];     icons[2] = ["tree","chat-2","article-alt","volume","flash","aperture-alt","layers","steering-wheel","skiing","flight"];     icons[3] = ["lock-open","lock","umbrella","camera","book-open","clock-1","plus","minus","trash","music"];     icons[4] = ["calculator","address","pin","vcard","basket-1","swimming","youtube","leaf","mic","target"];     icons[5] = ["monitor","phone","download","bell","at","pause","play","stop-1","flag","key"];     icons[6] = ["users-1","eye","inbox","brush","moon","college","fast-food","coffee","top-list","bag"];     icons[7] = ["chart-area","info","home-1","hourglass","attention","scissors","tint","guidedog","archive","flow-line"];     icons[8] = ["emo-grin","emo-happy","emo-wink","emo-sunglasses","emo-thumbsup","emo-sleep","emo-unhappy","emo-devil","emo-surprised","emo-tongue"];     icons[9] = ["plus","minus","keyboard","fast-fw","to-end","to-start","cancel-circle","check","flash","feather"];     icons[10] = ["plus-circle","pencil-alt","target-1","chart-pie","adjust","user-add","volume","install","flow-cascade","sitemap"];     icons[11] = ["minus-circle","clock-1","light-down","light-up","lamp","upload","picture-2","dollar","gift","link-1"]; \t\t\t \tanswer = {};\t  \t$.each(icons, function(j, icon_group){ \t\tsub_icons = {}; \t\t$.each(icons[j], function(i, icon){ \t\t\tsub_icons["icon-"+icon] = {}; \t\t\tsub_icons["icon-"+icon] = {name:icon, icon: "icon-"+icon}; \t\t});  \t\tanswer["icon-group"+icon_group]\t= {}; \t\tanswer["icon-group"+icon_group]\t= {name:"\u041d\u0430\u0431\u043e\u0440 \u2116"+(parseInt(j)+1), icon: "icon-"+icons[j][0], items: sub_icons}; \t\t \t});\t \t\t\t \treturn answer; \/\/\u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e }  function jsMakeDroppable() { \/\/\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c\u044b\u043c\u0438  \t\t$(".n_title").not("ui-draggable").draggable({ \t\t\t\tzIndex: 999, \t\t\t\tdelay:50, \t\t\t\trevert: false,      \/\/ will cause the event to go back to its \t\t\t\thelper:"clone", \t\t\t\tappendTo: "body", \t\t\t\trefreshPositions:true \t\t\t});  \t\t$( ".n_title" ).not("ui-droppable").droppable({ \t\t\taccept: ".n_title", \t\t\tactiveClass: "ui-can-recieve", \t\t\ttolerance: "pointer", \t\t\thoverClass: "ui-can-hover", \t\t\tover: function (event, ui) { \t\t\t\t\/\/$(this).click(); \t\t\t\t},             drop: function( event, ui ) {             \t\/\/console.info("drop-all",usedOverlays,ui,ui.draggable[0] );             \t             \tvar my_draggable = $(ui.draggable[0]);             \tvar my_droppable = $(event.target);             \t             \tmy_draggable_id = my_draggable.parents("li:first").attr("myid");             \tmy_droppable_id = my_droppable.parents("li:first").attr("myid");             \t             \tif( jsCanDrop(my_draggable_id, my_droppable_id) ) { \/\/\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435\u0431\u044b\u043b\u043e \u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u0439 \t\t\t\t\tapi4mindmap.jsFind(my_draggable_id, {parent_id:my_droppable_id}); \t\t\t\t\tapi4mindmap.jsRefreshMindmap(); \t   \t\t\t\t$(".ui-draggable-dragging").remove(); \/\/\u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u043b\u043e\u043d \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043b\u0438              \t} else { \t\t\t\t\talert("\u041d\u0435 \u043c\u043e\u0433\u0443 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u043d\u0443\u0442\u0440\u044c \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0435\u0431\u044f");             \t}             \t \t\t\t\t} \t\t\t});  }  function jsCanDrop(draggable_id, droppable_id) { \/\/\u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u043d\u0435 \u0431\u044b\u043b \u0432\u043d\u0443\u043a\u043e\u043c \u0441\u0432\u043e\u0438\u0445 \u0434\u0435\u0442\u0435\u0439 \tvar can_drop = true; \tvar all_childs = api4mindmap.jsRecursiveByParent(my_draggable_id); \t$.each(all_childs, function(i,el){ \t\tconsole.info(el.id, droppable_id); \t\tif(el.id == droppable_id)  \t\t\tcan_drop = false; \t}); \t \tif(draggable_id == droppable_id) var can_drop = false; \t \treturn can_drop; }  \/\/ \u0447\u0438\u0441\u0442\u0438\u043c \u0432\u0432\u043e\u0434 \u0442\u0435\u043a\u0441\u0442\u0430 \u043e\u0442 \u0442\u0435\u0433\u043e\u0432 function strip_tags( str ){\t \tif(!str) return ""; \tanswer = str.replace(\/<\\\/?[^>]+>\/gi, ''); \tanswer = answer.replace(\/\\n\/gi, ''); \treturn answer; }  var myjsPlumb; \/\/\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 html \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ function jsDoFirst() {  \tapi4mindmap = new API_4_MINDMAP(); \/\/\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 api \u0438\u0437 "\u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u0430"  \tjsPlumb.Defaults.Container = $("#mindmap"); \/\/\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b "\u0440\u0438\u0441\u043e\u0432\u0430\u043b\u044c\u0449\u0438\u043a\u0430" \u043b\u0438\u043d\u0438\u0439     myjsPlumb = jsPlumb.getInstance({     \tDragOptions: { cursor: 'pointer', zIndex: 2000 },     \tPaintStyle:{      \t  lineWidth:1,      \t  strokeStyle:"#888"     \t},     \tConnector:[ "Bezier", { curviness: 30 } ],     \tEndpoint:[ "Blank", { radius:5 } ],     \tEndpointStyle : { fillStyle: "#567567"  },     \tAnchors : [[ 1, 1, 1, 0, -1, -1 ],[ 0, 1, -1, 0, 1, -1 ]]     });          var icons_html = jsGetIcons(0); \/\/\u0431\u0435\u0440\u0451\u043c \u0432\u0441\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0438 \u0438\u0445 \u0433\u0440\u0443\u043f\u043f\u044b \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e  \t$.contextMenu({ \/\/\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u043d\u0430 \u043b\u0435\u0432\u044b\u0439 \u043a\u043b\u0438\u043a \u0432 .contextmenu         selector: '.contextmenu',          trigger: 'left',         callback: function(key, options) {         \tvar id = $(this).parents("li:first").attr("myid");             if( \/icon-\/ig.test(key) ) { \/\/\u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0443             \tapi4mindmap.jsFind(id, {icon:key}); \t            api4mindmap.jsRefreshMindmap();             } else if(key == "delete") { \/\/\u0443\u0434\u0430\u043b\u044f\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \t           api4mindmap.jsDeleteById(id); \t           api4mindmap.jsRefreshMindmap(id);             } else if(key == "add_down") { \/\/\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043d\u0438\u0437             \tvar parent_id = api4mindmap.jsFind(id).parent_id; \t            var new_id = api4mindmap.jsAddNew(parent_id, "\u041d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442"); \t            api4mindmap.jsRefreshMindmap(); \t            $("#node_"+new_id+" .n_title").focus();             } else if(key == "add_right") { \/\/\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u044c \t            var new_id = api4mindmap.jsAddNew(id, "\u041d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442"); \t            $(this).parents("li").removeClass("hide"); \t            api4mindmap.jsRefreshMindmap(); \t            $("#node_"+new_id+" .n_title").focus();             }         },         delay:0,         items: {         \t"add_down": {"name":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043d\u0438\u0437", "icon": "icon-down-1"},         \t"add_right": {"name":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043f\u0440\u0430\u0432\u043e", "icon": "icon-right-1"},         \t"sep1": "--------",         \t"delete": {"name":"\u0423\u0434\u0430\u043b\u0438\u0442\u044c", "icon": "icon-trash"},             "context_make_did1011": {"name": "\u0418\u043a\u043e\u043d\u043a\u0430", "icon": "icon-emo-wink",  \t            "items": icons_html \/\/\u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u0443\u043d\u043a\u0442\u044b \u043c\u0435\u043d\u044e \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438             } \t\t} \t\t});\t \t   \t\/\/\u0441\u0445\u0435\u043c\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445   \tvar mindmap_store_schema = { \/\/\u0441\u0445\u0435\u043c\u0430 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445   \t  name: "mindmap_db",  \/\/\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b   \t  keyPath: 'id', \/\/ \u043a\u043b\u044e\u0447 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043a\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435,    \t  autoIncrement: false    \t};   \t   \tvar schema = { \/\/\u0432\u0441\u0435 \u0441\u0445\u0435\u043c\u044b \u0442\u0430\u0431\u043b\u0438\u0446   \t  stores: [mindmap_store_schema]   \t};    \t\t  \t   \tif( navigator.userAgent.toLowerCase().indexOf("android") !=-1 ) {\t  \t   \t\tvar options = {mechanisms: ['websql', 'indexeddb']};  \/\/\u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c websql \u0432 \u0430\u043d\u0434\u0440\u043e\u0438\u0434     } else {     \tvar options = {}; \/\/\u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c indexeddb \u043e\u043d \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439), \u0430 \u043f\u043e\u0442\u043e\u043c \u0443\u0436\u0435 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435     } \t \tdb = new ydn.db.Storage('_all_mindmap', schema, options); \/\/\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430  \tapi4mindmap.jsLoadAllFromDB().done(function(){ \/\/\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \t\tapi4mindmap.jsRegAllKeys();    \/\/\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \t\tapi4mindmap.jsRenderAllMap(1); \/\/\u0440\u0438\u0441\u0443\u0435\u043c \u043a\u0430\u0440\u0442\u0443 \u0434\u043b\u044f \u0443\u0437\u043b\u0430 \u21161 \t\tapi4mindmap.jsDrawMindmap(1);  \/\/\u0440\u0438\u0441\u0443\u0435\u043c \u043b\u0438\u043d\u0438\u0438, \u0431\u0435\u0440\u044f \u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u0443\u0437\u043b\u044b \u0441 \u044d\u043a\u0440\u0430\u043d\u0430 \t \tonResize(); \/\/\u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u043b\u0438\u043d\u0438\u0438 \t}); \/\/\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0432\u0435\u0441\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \t }  <\/code><\/pre>\n
      <\/div>\n<\/div>\n
    \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u044f \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u043f\u0440\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438<\/h5>\n
      \u041f\u043e\u043a\u0430 \u043e\u0442\u043b\u043e\u0436\u0438\u043c \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u043a\u0440\u0430\u0442\u043a\u043e \u043e\u043f\u0438\u0448\u0443 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u044f \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c. \u041c\u043d\u043e\u0433\u0438\u0435 \u043d\u043e\u0432\u0438\u0447\u043a\u0438 \u043e \u043d\u0438\u0445 \u043d\u0435 \u0437\u043d\u0430\u044e\u0442 \u0438 \u0442\u0435\u0440\u044f\u044e\u0442 \u043d\u0430 \u044d\u0442\u043e\u043c \u0432\u0440\u0435\u043c\u044f.<\/p>\n
      \u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u0443\u044e \u044f \u0432 Coda<\/a>, \u0430 \u0438\u043d\u043e\u0433\u0434\u0430 \u0432 Sublime Text<\/a>. Coda \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u0435\u0435, \u043d\u043e \u0447\u0443\u0442\u044c \u043f\u043e\u0434\u0442\u043e\u0440\u043c\u0430\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0441\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u044f \u043a\u043e\u0434 (\u043e\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434 \u041c\u0430\u043a), \u0430 Sublime Text \u2014 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435, \u043d\u043e, \u0432\u043e \u043f\u0435\u0440\u0432\u044b\u0445, \u044f \u0435\u0449\u0451 \u043a \u043d\u0435\u043c\u0443 \u043d\u0435 \u043f\u0440\u0438\u0432\u044b\u043a, \u0430 \u0432\u043e \u0432\u0442\u043e\u0440\u044b\u0445, \u043b\u044e\u0431\u043b\u044e \u0437\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0432 Coda \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432. \u0418 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u043e\u043c \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u0438 \u0441 Debian \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0447\u0435\u0440\u0435\u0437 Coda.<\/p>\n
      \u041d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u043c \u043f\u0440\u043e\u0440\u044b\u0432\u043e\u043c \u0432 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0441\u0442\u0430\u043b\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 GIT<\/a>. \u042d\u0442\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0432\u0435\u0440\u0441\u0438\u0439. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0435\u0451 \u0447\u0435\u0440\u0435\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 GitHub<\/a>:
      <\/p>\n
      Github \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043a\u0430\u043a \u043e\u0431\u043b\u0430\u0447\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u044e \u0440\u0435\u043b\u0438\u0437\u044b \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e. \u0427\u0442\u043e\u0431\u044b \u00ab\u0437\u0430\u0440\u0435\u043b\u0438\u0437\u0438\u0442\u044c\u00bb \u0432\u0435\u0440\u0441\u0438\u044e \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430, \u044f \u0434\u0435\u043b\u0430\u044e \u0442\u0430\u043a:  <\/p>\n
      \n
    1. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0430\u0439\u0442\u0430 \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u0435 \u0438 \u0434\u0435\u043b\u0430\u044e \u00ab\u041a\u043e\u043c\u043c\u0438\u0442\u00bb, \u0442.\u0435. \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f (\u0441\u043c.\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0432\u044b\u0448\u0435, \u043a\u043d\u043e\u043f\u043a\u0430 Commit) <\/li>\n
    2. \u00ab\u041f\u0443\u0448\u0443\u00bb \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0434\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 (\u0432 \u0442\u043e\u043c \u0436\u0435 \u043e\u043a\u043d\u0435 \u0432\u043d\u0438\u0437\u0443 \u0435\u0441\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0430 Sync)<\/li>\n
    3. \u0417\u0430\u0445\u043e\u0436\u0443 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u043d\u0430 \u0441\u0432\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0432 \u0413\u0435\u0440\u043c\u0430\u043d\u0438\u0438<\/a> \u043f\u043e SSH \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e \u043a\u043e\u043c\u043c\u0430\u043d\u0434\u0443: 
        git pull htt\u0440s:\/\/myuser_name:mysslpassword@github.com\/Imater\/tree.git master <\/li>\n
    4. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u044e \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0436\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 JS \u0438 CSS \u0444\u0430\u0439\u043b\u044b, \u0432\u044b\u043a\u0438\u0434\u044b\u0432\u0430\u044f \u0438\u0437 \u043d\u0438\u0445 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0438 ZIP-\u0443\u044f \u0438\u0445 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b js \u0438 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b css. \u0427\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432\u044b \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0432 \u0441\u0432\u043e\u044e HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443, \u0442\u0435\u043c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u0439\u0442<\/li>\n<\/ol>\n
        \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u0434\u043e\u043c \u0443 \u043c\u0435\u043d\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0442\u043a\u0440\u044b\u0442 Chrome \u0438 \u0435\u0433\u043e \u043a\u043e\u043d\u0441\u043e\u043b\u044c. \u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 \u043e\u0442\u043b\u0430\u0434\u0438\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u0430\u0434\u0447\u0438\u043a\u0430:
        <\/p>\n
        \u041d\u0430\u0443\u0447\u0438\u0442\u0435\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u044e \u0438 Developer Tools<\/a> \u0438 \u0431\u0443\u0434\u0435\u0442\u0435 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n
        \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043a\u0440\u0430\u0441\u043a\u0435 \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0448\u0435 F5 (\u0432 \u0441\u043b\u0443\u0447\u0430\u0435 MacOS \u2014 cmd+r). \u0421\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f LiveReload<\/a>. \u0415\u0441\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044f \u0438 \u043f\u043e\u0434 Win \u0438 \u043f\u043e\u0434 Mac. <\/p>\n
        \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443, \u043f\u043e\u0442\u043e\u043c \u0441\u0442\u0430\u0432\u0438\u0442\u0435 \u043f\u043b\u0430\u0433\u0438\u043d \u043f\u043e\u0434 \u0425\u0440\u043e\u043c \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u043b\u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043a\u043e\u0434 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430 \u0442\u0435\u0433\u043e\u043c body \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c HTML \u0444\u0430\u0439\u043b\u0435:   <\/p>\n
      <script>document.write('<script src=\\"http:\/\/' + (location.host || 'localhost').split(':')[0] + ':35729\/livereload.js?snipver=1\\"><\/' + 'script>')<\/script> <\/code><\/pre>\n
        \u0418 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u043c\u0430\u0441\u0441\u0443 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u044f. \u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0442\u0430\u043a\u043e\u0439: \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0435 \u0441\u0432\u043e\u0439 \u0441\u0430\u0439\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u0443\u0435\u0442\u0435, \u043f\u043e\u0442\u043e\u043c \u043f\u0438\u0448\u0435\u0442\u0435 \u043a\u043e\u0434 \u0432 CSS \u0438\u043b\u0438 Javascript \u0438\u043b\u0438 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u043f\u0430\u043f\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u00ab\u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u0442\u00bb livereload, \u0438 \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438, \u0441\u0430\u0439\u0442 \u0441\u0440\u0430\u0437\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043c\u0435\u043d\u0438\u043b\u0438 CSS, \u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n
        \u041d\u0443 \u0438 \u0432 \u043a\u043e\u043d\u0446\u0435, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0445\u043e\u0447\u0443 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u0442\u044c \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u0435\u043b\u044c<\/a> \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a PNG, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u0434\u043e 70% \u043e\u0431\u044a\u0451\u043c\u0430 \u0438, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c, \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0430\u0439\u0442\u0430.<\/p>\n
      \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u044b \u0443\u043c\u0430<\/h5>\n
        \u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u0432\u044b\u043b\u043e\u0436\u0435\u043d \u043d\u0430 Github<\/a>. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0435\u0433\u043e \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u043b\u044e\u0431\u0443\u044e \u043f\u0430\u043f\u043a\u0443. \u0412\u0441\u0451 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0443\u0436\u0435 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438. \u0412\u0441\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0432 \u043f\u0430\u043f\u043a\u0435. \u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0432 \u043a\u043e\u0434\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0435.<\/p>\n
        \u041d\u0430\u0447\u043d\u0451\u043c \u0441 \u043e\u0441\u043d\u043e\u0432. \u042f \u043b\u044e\u0431\u043b\u044e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0451 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432 "\u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d<\/a>". \u0414\u0435\u043b\u0430\u044e \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:  <\/p>\n
      var API_4_MINDMAP = function(){  \/\/singleton - \u043f\u0440\u0438 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u043e\u0436\u0434\u044b \t if ( (typeof arguments.callee.instance=='undefined') ) { \/\/\u0435\u0441\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0435\u0449\u0451 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043d \t\t arguments.callee.instance = new function() { \t\t     var my_all_data = {}; \t\t     var this_api = this; \/\/\u043a\u044d\u0448\u0438\u0440\u0443\u0435\u043c \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0435\u0431\u044f, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \t\t     this.jsAlert = function( name ) { \t\t        if( prompt("Hello "+name+", are you ok?") ) { \t\t           var is_ok = true; \t\t        } else { \t\t           var is_ok = false; \t\t        } \t\t        my_all_data[name] = {}; \t\t        my_all_data[name] = {name: name, hi_is_ok: is_ok}; \t\t        return my_all_data; \t\t     }                           }      return arguments.callee.instance; \/\/\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0432\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 }  api4mindmap = new API_4_MINDMAP(); \/\/\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 api \u0438\u0437 "\u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u0430" console.info( api4mindmap.jsAlert("Habrahabr") );  <\/code><\/pre>\n
        \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0432 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u00ab\u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u0430\u00bb \u0438 \u043d\u0435 \u0431\u043e\u044f\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438\u043b\u0438 \u043a\u0430\u043a\u043e\u0439 \u043b\u0438\u0431\u043e \u043f\u043b\u0430\u0433\u0438\u043d \u0438\u0437\u043c\u0435\u043d\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435. \u041c\u044b \u0438\u0437\u043e\u043b\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0410 \u0438\u0437 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043d\u0430\u0431\u0438\u0440\u0430\u0442\u044c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438: \u00abapi4mindmap.js…\u00bb \u0438 \u0436\u0434\u0430\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0441\u043e\u0437\u0434\u0430\u043b. \u0411\u044b\u0441\u0442\u0440\u043e \u0438 \u0443\u0434\u043e\u0431\u043d\u043e.<\/p>\n
        \u0412 \u0441\u0432\u043e\u0451 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0431\u044b\u043b\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435\u043c<\/a>, \u0447\u0442\u043e \u0432 \u0432\u044b\u0448\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 my_all_data \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0432\u044b\u0437\u043e\u0432\u0430\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n
        \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c:<\/p>\n
      Ydn.db<\/a> \u2014 \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/h5>\n
        \u042d\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f jQuery, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0435\u0434\u0438\u043d\u043e\u0433\u043e api \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0438 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0430\u0437 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u043d\u0430 \u043b\u044e\u0431\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445. \u0414\u0430\u0436\u0435 \u0432 Phonegap.<\/p>\n
        \u042f \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e\u043c \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e, \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445:  <\/p>\n
       this.jsLoadAllFromDB = function() { \/\/\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0432\u0435\u0441\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438\u043b\u0438 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \t var d=new $.Deferred(); \/\/\u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e   \t my_all_data = {}; \/\/\u043e\u0431\u043d\u0443\u043b\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435     db.values("mindmap_db",null,99999999).done(function(records) { \t \tif(records.length) { \t \t$.each(records, function(i, el){ \t\t \tmy_all_data["n"+el.id] = {}; \t\t \tmy_all_data["n"+el.id] = el; \t \t}); \t \t} else { \/\/\u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a, \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044e \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0443 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \t\t \tmy_all_data = my_all_data_template; \t\t \tthis_api.jsSaveAllToDB();  \t}  \td.resolve(); \/\/\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043e\u0431\u0435\u0449\u0430\u043d\u0438\u0435, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f done  });    return d.promise(); \/\/\u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u0441\u043a\u043e\u0440\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u043e\u0431\u0435\u0449\u0430\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0451 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f   }   this.jsFind = function(id, changes) { \/\/\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 id \u0438\u043b\u0438 \u043c\u0435\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b  \t  \t \/\/\u043d\u0430\u0445\u043e\u0434\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0431\u0443\u043a\u0432\u0430 n \u043d\u0443\u0436\u043d\u0430 \u0434\u043b\u044f \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 id  \t var answer = my_all_data["n"+id];   \t if(!answer) return false; \/\/\u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 \u043d\u0435\u0442    \t if(changes) { \/\/\u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u043d\u0435\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0438\u0445 \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \t \t $.each(changes, function(name_field, new_field_value){  \t \t answer[name_field] = new_field_value; \t \t });   \t\t    \t\t db.put("mindmap_db", answer ).done(function(){ \/\/\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0431\u0430\u0437\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430   \t\t \tconsole.info("\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u044b \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430"); \/\/\u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430   \t\t }); \t \t   \t } \t return answer;  } <\/code><\/pre>\n
        \u042d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u0430\u0440\u0442 \u0443\u043c\u0430. \u0422\u0443\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b: db.values(\u00abmindmap_db\u00bb,null,99999999) \u2014 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0437 \u0442\u0430\u0431\u043b\u0438\u0446\u044b IndexedDb (\u0435\u0441\u043b\u0438 \u0432 \u0425\u0440\u043e\u043c\u0435) \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445 .done(). \u0422\u0430\u043a \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0437 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445. \u041c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b: db.get(\u00abmindmap_db\u00bb,5) \u2014 \u0442\u0430\u043a \u0432\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 id = 5.<\/p>\n
        \u0414\u043b\u044f \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430: db.put(\u00abmindmap_db\u00bb, answer ). \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u0436\u0434\u0451\u0442 \u0435\u0451 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u043e\u043d\u0430 \u043d\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 Chrome \u0431\u044b\u0441\u0442\u0440\u0435\u0435.<\/p>\n
        \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0432 jQuery \u043e\u0431\u044a\u0435\u043a\u0442 $.Deferred()<\/a>. \u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d \u0432\u044b\u0448\u0435. \u0412\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u0435\u0449\u0430\u0435\u0442\u0435 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0447\u0442\u043e \u0432\u0435\u0440\u043d\u0451\u0442\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e, \u0442\u0430\u043a \u0441\u0440\u0430\u0437\u0443, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b: return d.promise(x); \u0410 \u043f\u043e\u0442\u043e\u043c \u043a\u043e\u0433\u0434\u0430 \u0443 \u0432\u0430\u0441 \u0432\u0441\u0451 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u043e\u0441\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0432\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0435 d.resolve(200); \u0422\u043e\u0433\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f .done() \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438 \u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 x.<\/p>\n
        \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430. \u0410 \u0435\u0449\u0451, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 $.when. \u042f \u0435\u0451 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 \u0445\u043e\u0442\u0438\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u0435-\u0447\u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440:  <\/p>\n
      function jsDo() {   var dfdArray = [];   for(var i=0; i<1000; i++) {     dfdArray.push( jsAsync() );   }   $.when.apply(null, dfdArray).then( function(){ alert("\u0412\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b") } ); }  function jsAcync() {   var d = new $.Deferred();   setTimeout(function(){      d.resolve();   }, Math.random()*5000 );  return d.promise(); } <\/code><\/pre>\n
        \u041f\u043e \u0441\u0443\u0442\u0438, \u0442\u0443\u0442 \u0432\u0441\u0435 \u00ab\u043e\u0431\u0435\u0449\u0430\u043d\u0438\u044f\u00bb \u043d\u0430\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0435 $.when, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e ".done" \u0440\u043e\u0432\u043d\u043e \u0432 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u0435\u0449\u0430\u043d\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043e.<\/p>\n
        Ydn.db \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u044f\u0441\u044c \u043e \u043c\u0435\u0442\u043e\u0434\u0430\u0445 \u0438\u0445 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0438\u0445 \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 api. \u041e\u043d, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u043c\u0438, \u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u0431\u043e\u0440\u044b, \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u044b, \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0441\u0443\u043c\u043c\u044b \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u041d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0430 \u0440\u043e\u043b\u044c \u0438\u043d\u0434\u0435\u043a\u0441\u0430 \u0443 \u043d\u0430\u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 my_all_data, \u044d\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f api4mindmap.jsFind(id, {title: \u00abnew_title\u00bb}), \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u044d\u0442\u043e\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0440\u0430\u0437\u0443, \u0430 \u0432 \u0431\u0430\u0437\u0443 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e. \u041d\u043e, \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0443\u0437\u043b\u0430 \u0432 \u043a\u0430\u0440\u0442\u0435 \u0443\u043c\u0430 \u0438 \u0442\u0443\u0442 \u0436\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0430 \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f. \u0411\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e, \u043d\u0430\u0434\u0451\u0436\u043d\u043e \u0438 \u0438\u043c\u0435\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 100 \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438.<\/p>\n
        \u0418\u0437\u0443\u0447\u0438\u0432 Ydn.db, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u0440\u043e 5 \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 LocalStorage. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0431\u0443\u0434\u0443\u0442 \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u0430\u0436\u0434\u044b\u0435 5 \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442 (Chrome \u043d\u0435 \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442).<\/p>\n
        \u042d\u0442\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 Android \u0438 \u0432 iOS. \u041d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043e\u043a, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u044b\u0431\u043e\u0440 IndexedDB \u0432 Android. \u0427\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 Internet Explorer \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f IndexedDB, \u0447\u0442\u043e \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0437\u0430 \u0441\u0447\u0451\u0442 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0441\u0442\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0437\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0435 1000 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u0441 \u0440\u0430\u0437\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e, \u0447\u0442\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c.<\/p>\n
      jsPlumb<\/a> \u2014 \u0440\u0438\u0441\u0443\u0435\u043c \u043b\u0438\u043d\u0438\u0438 SVG \u0432 \u043b\u044e\u0431\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/h5>\n
        \u0414\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0439 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 html \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Canvas, \u043d\u043e \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432. \u0412\u0430\u043c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c Canvas \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 4000 x 4000 px, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u0431\u044b \u043a \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041b\u0438\u043d\u0438\u0438 \u0431\u044b\u043b\u0438 \u0431\u044b \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u043c\u0438 \u0438 \u043d\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 Retina, \u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438\u0441\u044c \u0431\u044b \u0445\u0443\u0436\u0435, \u0447\u0435\u043c \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0435. \u0410 \u0441\u0430\u043c\u043e\u0435 \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0435, \u0447\u0442\u043e \u0432\u0441\u0435 \u044d\u0442\u0438 16 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u043e\u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0438 \u0431\u044b \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0432\u0432\u043e\u0434\u0435 \u0431\u0443\u043a\u0432\u044b \u0432 \u043a\u0430\u0440\u0442\u0443 \u0443\u043c\u0430.<\/p>\n
        jsPlumb \u0440\u0438\u0441\u0443\u0435\u0442 \u043a\u0430\u0436\u0434\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u0432 SVG \u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 \u043d\u0443\u0436\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e, \u0441\u0442\u0430\u0432\u044f \u0435\u043c\u0443 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e absolute \u0438 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b. \u0415\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043b\u0438\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439. \u041f\u043e \u0441\u0443\u0442\u0438, \u0432\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443, \u0437\u0430\u0442\u0435\u043c \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0438\u0445 \u043b\u0438\u043d\u0438\u0435\u0439 \u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u0440\u043e \u043f\u043b\u0430\u0433\u0438\u043d. \u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 3 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438 \u0432\u044b \u0443\u043c\u0435\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u043b\u0438\u043d\u0438\u044f\u043c\u0438.<\/p>\n
        \u041d\u0430 \u0438\u0445 \u0441\u0430\u0439\u0442\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u043c\u044b\u0448\u043a\u043e\u0439, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043b\u0438\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u043b\u0435\u0434 \u0437\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0431\u0435\u0437 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044f.
        <\/p>\n
        \u0418\u0437\u0443\u0447\u0438\u0442\u0435, \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f: \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440, \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432, \u043e\u0431\u0443\u0447\u0430\u043b\u043e\u043a (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043b\u0438\u043d\u0438\u0435\u0439 \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u043e\u0439 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u043e\u0432\u043e\u0440\u044f\u0442), \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440 \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u044f\u0442\u0438\u0439, \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043d\u0430 iOS \u0438 Android.<\/p>\n
      jQuery context menu<\/a> \u2014 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e<\/h5>\n
        \u0412\u0441\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u043c\u0435\u043d\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0432\u0438\u0434\u0435\u043b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0439 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 html. \u0410 \u0432 \u044d\u0442\u043e\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0432 \u043f\u0440\u043e\u0441\u0442\u043e\u043c, \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 JSON \u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/p>\n
        
        \u0417\u0430\u0434\u0430\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043c\u0430\u043d\u0434 \u0432 \u043c\u0435\u043d\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430:  <\/p>\n
      \t$.contextMenu({ \/\/\u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u043d\u0430 \u043b\u0435\u0432\u044b\u0439 \u043a\u043b\u0438\u043a \u0432 .contextmenu         selector: '.contextmenu',          trigger: 'left',         callback: function(key, options) {         \tvar id = $(this).parents("li:first").attr("myid");             if( \/icon-\/ig.test(key) ) { \/\/\u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0443             \tapi4mindmap.jsFind(id, {icon:key}); \t            api4mindmap.jsRefreshMindmap();             } else if(key == "delete") { \/\/\u0443\u0434\u0430\u043b\u044f\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \t           api4mindmap.jsDeleteById(id); \t           api4mindmap.jsRefreshMindmap(id);             } else if(key == "add_down") { \/\/\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043d\u0438\u0437             \tvar parent_id = api4mindmap.jsFind(id).parent_id; \t            var new_id = api4mindmap.jsAddNew(parent_id, "\u041d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442"); \t            api4mindmap.jsRefreshMindmap(); \t            $("#node_"+new_id+" .n_title").focus();             } else if(key == "add_right") { \/\/\u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u044c \t            var new_id = api4mindmap.jsAddNew(id, "\u041d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442"); \t            $(this).parents("li").removeClass("hide"); \t            api4mindmap.jsRefreshMindmap(); \t            $("#node_"+new_id+" .n_title").focus();             }         },         delay:0,         items: {         \t"add_down": {"name":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043d\u0438\u0437", "icon": "icon-down-1"},         \t"add_right": {"name":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043f\u0440\u0430\u0432\u043e", "icon": "icon-right-1"},         \t"sep1": "--------",         \t"delete": {"name":"\u0423\u0434\u0430\u043b\u0438\u0442\u044c", "icon": "icon-trash"},             "context_make_did1011": {"name": "\u0418\u043a\u043e\u043d\u043a\u0430", "icon": "icon-emo-wink",  \t            "items": icons_html \/\/\u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u0443\u043d\u043a\u0442\u044b \u043c\u0435\u043d\u044e \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438             } \t\t} \t\t});\t  <\/code><\/pre>\n
        \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0443\u043d\u043a\u0442 items, \u0432\u0441\u0451 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u043e. \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435, \u0447\u0442\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u044b\u043c \u043c\u0435\u043d\u044e \u0432\u043c\u0435\u0441\u0442\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 callback, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f.<\/p>\n
        \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0440\u0438\u0441\u043e\u0432\u0430\u043b \u043d\u0435 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438, \u0430 \u0438\u043a\u043e\u043d\u043a\u0438 \u0438\u0437 \u0448\u0440\u0438\u0444\u0442\u0430 Fontello.<\/p>\n
        \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043b\u0430\u0432\u0438\u0448\u0430\u043c\u0438 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u043f\u0443\u043d\u043a\u0442\u043e\u0432 \u0438, \u0434\u0430\u0436\u0435, \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u0433\u043e\u0440\u044f\u0447\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b. \u0412\u0441\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u044b \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0444.\u0441\u0430\u0439\u0442\u0435<\/a>.<\/p>\n
      Fontello<\/a> \u2014 \u0448\u0440\u0438\u0444\u0442 \u0441 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438<\/h5>\n
        \u0422\u0443\u0442 \u043a\u0430\u043a \u0432 \u0441\u0443\u043f\u0435\u0440\u043c\u0430\u0440\u043a\u0435\u0442\u0435, \u0437\u0430\u0445\u043e\u0434\u0438\u0442\u0435 \u043d\u0430 \u0441\u0430\u0439\u0442 \u0438 \u043d\u0430\u0431\u0438\u0440\u0430\u0435\u0442\u0435 \u0442\u0435 \u0438\u043a\u043e\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u043c \u0441\u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f:
        <\/p>\n
        \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0435 \u0430\u0440\u0445\u0438\u0432 \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0432 \u0441\u0432\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 html \u0444\u0430\u0439\u043b \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 CSS \u0444\u0430\u0439\u043b. \u0421 \u0442\u0435\u0445 \u043f\u043e\u0440, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c \u044d\u0442\u0438\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 \u0432\u043e\u0442 \u0442\u0430\u043a:  \u2014 \u0442\u0430\u043a\u043e\u0439 html \u043a\u043e\u0434 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u0432 \u0438\u043a\u043e\u043d\u043a\u0443.<\/p>\n
        \u0421\u0430\u043c\u0438 \u0438\u043a\u043e\u043d\u043a\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0432 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438<\/a> \u043a\u0430\u0440\u0442\u044b \u0443\u043c\u0430, \u0437\u0430\u0439\u0434\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e. \u0422\u0430\u043c 120 \u0438\u043a\u043e\u043d\u043e\u043a \u0432 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435 \u043e\u0431\u0438\u0442\u0430\u043d\u0438\u044f.<\/p>\n
      jQuery UI<\/a> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c<\/h5>\n
        \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0437\u043d\u0430\u043c\u0435\u043d\u0438\u0442\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u043a: \u0432\u044b\u0431\u043e\u0440 \u0434\u0430\u0442\u044b \u0438\u0437 \u043a\u0430\u043b\u0435\u043d\u0434\u0430\u0440\u0438\u043a\u0430, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043b\u044e\u0431\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435, \u0432\u0435\u0440\u0445\u043d\u0438\u0435 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0438, \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u043c\u044b\u0448\u043a\u043e\u0439 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u0418\u0437\u0443\u0447\u0438\u0442\u0435, \u043d\u0435 \u043f\u043e\u0436\u0430\u043b\u0435\u0435\u0442\u0435.<\/p>\n
        
        \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u0430\u0440\u0442\u044b \u0443\u043c\u0430, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Drag&drop \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0443\u0437\u043b\u043e\u0432 \u043a\u0430\u0440\u0442\u044b \u043c\u0435\u0436\u0434\u0443 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0443\u0437\u043b\u0430\u043c\u0438. \u0422\u0443\u0442 \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e, \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u00ab\u0437\u0430\u043c\u0443\u0434\u0440\u0438\u0442\u044c\u00bb, \u044d\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u043a \u0441\u0432\u043e\u0438\u043c \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u0431\u044b \u043a \u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u044e \u0434\u0435\u0440\u0435\u0432\u0430.<\/p>\n
      CSS \u2014 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u0443\u043c\u0430<\/h5>\n
        \u041a\u0430\u0436\u0434\u044b\u0439 \u0443\u0437\u0435\u043b \u0443 \u043d\u0430\u0441 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a:  <\/p>\n
      <div id="mindmap">  <ul class='childs'>   <li>    <div class='big_n_title'><div class='n_title'><\/div><\/div>    <ul class='childs'>       ......    <\/ul>   <\/li>  <\/ul> <\/div> <\/code><\/pre>\n
        \u0415\u0441\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c ul, li, .big_n_title \u0438 .n_title, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u0430\u044f \u043a\u0430\u0440\u0442\u0430 \u0443\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435. \u0412\u0441\u0435 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445<\/a>.<\/p>\n
        \u041f\u043e \u0441\u0443\u0442\u0438, \u0432\u0435\u0441\u044c \u0441\u0435\u043a\u0440\u0435\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a:  <\/p>\n
      #mindmap { \tbackground-image: url(cross.png); \tbackground-attachment: scroll; \twhite-space: nowrap; }  #mindmap ul { \tdisplay: inline-block; \twhite-space: nowrap; \tvertical-align: middle; \tlist-style: none; }  #mindmap .big_n_title { \tdisplay: inline-block; \tvertical-align: baseline; \tmargin-right: 40px; \tposition: relative; }  #mindmap .n_title { \tdisplay: inline-block; \twhite-space: normal; }  <\/code><\/pre>\n
        \u0422.\u0435. \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043a\u0430\u043c \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443, \u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0434\u0435\u043b\u0430\u0435\u043c display:inline-block, \u0442\u0430\u043a \u0447\u0442\u043e \u043e\u043d\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043f\u043e\u0434\u043e\u0431\u0438\u0435\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u0442\u0435\u043a\u0441\u0442\u0430. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438, \u0430 \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0437\u043b\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043c\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0443\u0437\u0435\u043b \u0432 div.big_n_title.<\/p>\n
        \u041d\u0438\u0447\u0435\u0433\u043e \u0440\u0435\u0432\u043e\u043b\u044e\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0438 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e. \u0418 \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n
        \u041f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043e, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u0451\u043c \u0441 direction: rtl<\/a>, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0443 \u0438 \u0432 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u2014 \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e. \u041c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043b\u0435\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u0430\u0440\u0442\u044b \u0443\u0445\u043e\u0434\u0438\u043b\u0430 \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u0430 \u043f\u0440\u0430\u0432\u0430\u044f \u0432 \u0434\u0440\u0443\u0433\u0443\u044e. \u041d\u043e \u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u043b\u044e\u0431\u043b\u044e \u043e\u0434\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u2014 \u0438\u0445 \u043f\u0440\u043e\u0449\u0435 \u0447\u0438\u0442\u0430\u0442\u044c.<\/p>\n
        \u041d\u0430\u0447\u043d\u0451\u043c \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u044f\u0442\u044c\u0441\u044f. \u0412\u0441\u0435 \u043a\u0442\u043e \u0445\u043e\u0447\u0435\u0442, \u043f\u043e\u0447\u0438\u0442\u0430\u044e\u0442 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0432 \u043b\u0438\u0441\u0442\u0438\u043d\u0433\u0435 \u043a\u043e\u0434\u0430 \u043d\u0430 github, \u0445\u043e\u0442\u044f \u044f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u0438\u043d\u043d\u044b\u043c\u0438 \u0438\u043c\u0435\u043d\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0430\u043c\u0438 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u0435\u043b\u0430\u0435\u0442. \u041c\u043e\u0439 \u043a\u043e\u0434, \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c, \u043d\u043e \u0442\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u043e \u043c\u043d\u043e\u0439 \u0441\u0442\u043e\u044f\u043b\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u043c \u043c\u043e\u0451\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/a>.<\/p>\n
        \u0418\u0437\u0443\u0447\u0430\u0439\u0442\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/a>, \u0432\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044b.<\/p>\n
        PS: \u0415\u0441\u043b\u0438 \u0432\u044b \u00ab\u0447\u0443\u0442\u044c\u00bb \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 mindmaster<\/a> \u0438 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0431\u0440\u0430\u0442\u044c \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043e\u0442 5 \u0434\u043e 15 \u0434\u043e\u043b\u043b\u0430\u0440\u043e\u0432 \u0432 \u043c\u0435\u0441\u044f\u0446 (\u0448\u0443\u0442\u043a\u0430).<\/p>\n
        \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0432\u0430\u043c \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0430 jQuery \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u044f\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0437\u0430 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u044e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \t\t\t<\/p>\n
      <\/div>\n<\/p><\/div>\n
       \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  http:\/\/habrahabr.ru\/post\/191850\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
       \t\t\t
        \u042d\u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0443\u0447\u0435\u0431\u043d\u044b\u0439       \u043f\u0440\u0438\u043c\u0435\u0440<\/a> \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u0430\u0440\u0442\u044b \u0443\u043c\u0430. \u0417\u0430 \u0441\u0447\u0451\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0445 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043f\u043e\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u043d\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. <\/p>\n
        \u042f \u043e\u0442\u0440\u0430\u0436\u0443 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043a\u0430\u0440\u0442\u044b \u0443\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041f\u0440\u0438\u0447\u0451\u043c, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 LocalStorage, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0442\u044c 5 \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442. \u041e\u0431\u044a\u0451\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0435\u0432\u044b\u0441\u0438\u0442\u044c 100-200 \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f IndexedDB \u0438\u043b\u0438 webSQL, \u043c\u043e\u0442\u0440\u044f \u0447\u0442\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n
        \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0432\u044b\u043b\u043e\u0436\u0435\u043d\u044b \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043d\u0430 Github<\/a>.<\/p>\n
        \u041c\u044b \u0443\u043b\u043e\u0436\u0438\u043c\u0441\u044f \u0432 520 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432 \u043d\u0430\u0448\u0435\u0439 \u043a\u0430\u0440\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0442\u044c \u0443\u0437\u043b\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439, \u0443\u0434\u0430\u043b\u044f\u0442\u044c, \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438\u0437 120 \u0438\u043a\u043e\u043d\u043e\u043a \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e.<\/p>\n
        \u0421\u0435\u043a\u0440\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0437\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0435 \u0432 \u0431\u043e\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u044b:  <\/p>\n
        \n
      1. Ydn.db<\/a> \u2014 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0441 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0438 \u0435\u0434\u0438\u043d\u044b\u043c API <\/li>\n
      2. jQuery context menu<\/a> \u2014 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Javascript<\/li>\n
      3. jsPlumb<\/a> \u2014 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438<\/li>\n
      4. jQuery UI <\/a>\u2014 Drag&drop \u2014 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439<\/li>\n<\/ol>\n
          PS: \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u00ab\u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u00bb, \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0442\u044c \u0441\u0435\u0431\u0435 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 jQuery \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 $.Deferred(), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 LiveReload, \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u043a\u0440\u0430\u0441\u043a\u0443 \u043d\u0430 \u043a\u043b\u0430\u0432\u0438\u0448\u0435 F5 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 CSS \u0438 \u043a\u043e\u0434\u0430 \u0432 HTML \u0438 Javascript.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-191850","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/191850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=191850"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/191850\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=191850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=191850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=191850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}