Просмотр файла htmly-2.9.8/system/resources/js/jquery.nestable++.js

Размер файла: 4.82Kb
  1. /*jslint browser: true, devel: true, white: true, eqeq: true, plusplus: true, sloppy: true, vars: true*/
  2. /*global $ */
  3.  
  4. /*************** General ***************/
  5.  
  6. var updateOutput = function (e) {
  7. var list = e.length ? e : $(e.target),
  8. output = list.data('output');
  9. if (window.JSON) {
  10. if (output) {
  11. output.val(window.JSON.stringify(list.nestable('serialize')));
  12. }
  13. } else {
  14. alert('JSON browser support required for this page.');
  15. }
  16. };
  17.  
  18. var nestableList = $(".dd.nestable > .dd-list");
  19.  
  20. /***************************************/
  21.  
  22.  
  23. /*************** Delete ***************/
  24.  
  25. var deleteFromMenuHelper = function (target) {
  26. /**
  27. if (target.data('new') == 1) {
  28. // if it's not yet saved in the database, just remove it from DOM
  29. target.fadeOut(function () {
  30. target.remove();
  31. updateOutput($('.dd.nestable').data('output', $('#json-output')));
  32. });
  33. } else {
  34. // otherwise hide and mark it for deletion
  35. target.appendTo(nestableList); // if children, move to the top level
  36. target.data('deleted', '1');
  37. target.fadeOut();
  38. }
  39. **/
  40. target.remove();
  41. updateOutput($('.dd.nestable').data('output', $('#json-output')));
  42. };
  43.  
  44. var deleteFromMenu = function () {
  45. var targetId = $(this).data('owner-id');
  46. var target = $('[data-id="' + targetId + '"]');
  47.  
  48. var result = confirm("Delete " + target.data('name') + " and all its subitems ?");
  49. if (!result) {
  50. return;
  51. }
  52.  
  53. // Remove children (if any)
  54. target.find("li").each(function () {
  55. deleteFromMenuHelper($(this));
  56. });
  57.  
  58. // Remove parent
  59. deleteFromMenuHelper(target);
  60.  
  61. // update JSON
  62. updateOutput($('.dd.nestable').data('output', $('#json-output')));
  63. };
  64.  
  65. /***************************************/
  66.  
  67.  
  68. /*************** Edit ***************/
  69.  
  70. var menuAdd = $("#menu-add");
  71. var menuEditor = $("#menu-editor");
  72. var editButton = $("#editButton");
  73. var editInputName = $("#editInputName");
  74. var editInputSlug = $("#editInputSlug");
  75. var editInputClass = $("#editInputClass");
  76. var currentEditName = $("#currentEditName");
  77.  
  78. // Prepares and shows the Edit Form
  79. var prepareEdit = function () {
  80. var targetId = $(this).data('owner-id');
  81. var target = $('[data-id="' + targetId + '"]');
  82.  
  83. editInputName.val(target.data("name"));
  84. editInputSlug.val(target.data("slug"));
  85. editInputClass.val(target.data("class"));
  86. currentEditName.html(target.data("name"));
  87. editButton.data("owner-id", target.data("id"));
  88.  
  89. console.log("[INFO] Editing Menu Item " + editButton.data("owner-id"));
  90.  
  91. menuEditor.fadeIn('fast');
  92. menuAdd.fadeOut('fast');
  93. };
  94.  
  95. // Edits the Menu item and hides the Edit Form
  96. var editMenuItem = function () {
  97. var targetId = $(this).data('owner-id');
  98. var target = $('[data-id="' + targetId + '"]');
  99.  
  100. var newName = editInputName.val();
  101. var newSlug = editInputSlug.val();
  102. var newClass = editInputClass.val();
  103.  
  104. target.data("name", newName);
  105. target.data("slug", newSlug);
  106. target.data("class", newClass);
  107.  
  108. target.find("> .dd-handle").html(newName);
  109.  
  110. menuEditor.fadeOut('fast');
  111. menuAdd.fadeIn('fast');
  112.  
  113. // update JSON
  114. updateOutput($('.dd.nestable').data('output', $('#json-output')));
  115. };
  116.  
  117. /***************************************/
  118.  
  119.  
  120. /*************** Add ***************/
  121.  
  122. var newIdCount = new Date().getTime();
  123.  
  124. var addToMenu = function () {
  125. var newName = $("#addInputName").val();
  126. var newSlug = $("#addInputSlug").val();
  127. var newClass = $("#addInputClass").val();
  128. var newId = newIdCount;
  129.  
  130. nestableList.append(
  131. '<li class="dd-item" ' +
  132. 'data-class="' + newClass + '" ' +
  133. 'data-id="' + newId + '" ' +
  134. 'data-name="' + newName + '" ' +
  135. 'data-slug="' + newSlug + '">' +
  136. '<div class="dd-handle">' + newName + '</div> ' +
  137. '<span class="button-delete button-delete-' + newId + ' btn btn-danger btn-xs" ' +
  138. 'data-owner-id="' + newId + '"> ' +
  139. 'Delete' +
  140. '</span>' +
  141. '<span class="button-edit button-edit-' + newId + ' btn btn-primary btn-xs" ' +
  142. 'data-owner-id="' + newId + '">' +
  143. 'Edit' +
  144. '</span>' +
  145. '</li>'
  146. );
  147.  
  148. newIdCount++;
  149.  
  150. // update JSON
  151. updateOutput($('.dd.nestable').data('output', $('#json-output')));
  152.  
  153. // set events
  154. $(".dd.nestable .button-delete-"+newId).on("click", deleteFromMenu);
  155. $(".dd.nestable .button-edit-"+newId).on("click", prepareEdit);
  156.  
  157. // clear input
  158. $("#addInputName").val('');
  159. $("#addInputSlug").val('');
  160. $("#addInputClass").val('');
  161.  
  162. };
  163.  
  164.  
  165.  
  166. /***************************************/
  167.  
  168.  
  169.  
  170. $(function () {
  171.  
  172. // output initial serialised data
  173. updateOutput($('.dd.nestable').data('output', $('#json-output')));
  174.  
  175. // set onclick events
  176. editButton.on("click", editMenuItem);
  177.  
  178. $(".dd.nestable .button-delete").on("click", deleteFromMenu);
  179.  
  180. $(".dd.nestable .button-edit").on("click", prepareEdit);
  181.  
  182. $("#menu-editor").submit(function (e) {
  183. e.preventDefault();
  184. });
  185.  
  186. $("#menu-add").submit(function (e) {
  187. e.preventDefault();
  188. addToMenu();
  189. });
  190.  
  191. });
  192.