folder-tree.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. /**
  2. * Copyright © Magento, Inc. All rights reserved.
  3. * See COPYING.txt for license details.
  4. */
  5. define([
  6. 'jquery',
  7. 'jquery/ui',
  8. 'jquery/jstree/jquery.jstree'
  9. ], function ($) {
  10. 'use strict';
  11. $.widget('mage.folderTree', {
  12. options: {
  13. root: 'root',
  14. rootName: 'Root',
  15. url: '',
  16. currentPath: ['root'],
  17. tree: {
  18. 'plugins': ['themes', 'json_data', 'ui', 'hotkeys'],
  19. 'themes': {
  20. 'theme': 'default',
  21. 'dots': false,
  22. 'icons': true
  23. }
  24. }
  25. },
  26. /** @inheritdoc */
  27. _create: function () {
  28. var options = this.options,
  29. treeOptions = $.extend(
  30. true,
  31. {},
  32. options.tree,
  33. {
  34. 'json_data': {
  35. data: {
  36. data: options.rootName,
  37. state: 'closed',
  38. metadata: {
  39. node: {
  40. id: options.root,
  41. text: options.rootName
  42. }
  43. },
  44. attr: {
  45. 'data-id': options.root,
  46. id: options.root
  47. }
  48. },
  49. ajax: {
  50. url: options.url,
  51. /**
  52. * @param {Object} node
  53. * @return {Object}
  54. */
  55. data: function (node) {
  56. return {
  57. node: node.data('id'),
  58. 'form_key': window.FORM_KEY
  59. };
  60. },
  61. success: this._convertData
  62. }
  63. }
  64. }
  65. );
  66. this.element.jstree(treeOptions).on('loaded.jstree', $.proxy(this.treeLoaded, this));
  67. },
  68. /**
  69. * Tree loaded.
  70. */
  71. treeLoaded: function () {
  72. var path = this.options.currentPath,
  73. tree = this.element,
  74. lastExistentFolderEl,
  75. /**
  76. * Recursively open folders specified in path array.
  77. */
  78. recursiveOpen = function () {
  79. var folderEl = $('[data-id="' + path.pop() + '"]');
  80. // if folder doesn't exist, select the last opened folder
  81. if (!folderEl.length) {
  82. tree.jstree('select_node', lastExistentFolderEl);
  83. return;
  84. }
  85. lastExistentFolderEl = folderEl;
  86. if (path.length) {
  87. tree.jstree('open_node', folderEl, recursiveOpen);
  88. } else {
  89. tree.jstree('open_node', folderEl, function () {
  90. tree.jstree('select_node', folderEl);
  91. });
  92. }
  93. };
  94. recursiveOpen();
  95. },
  96. /**
  97. * @param {*} data
  98. * @return {*}
  99. * @private
  100. */
  101. _convertData: function (data) {
  102. return $.map(data, function (node) {
  103. var codeCopy = $.extend({}, node);
  104. return {
  105. data: node.text,
  106. attr: {
  107. 'data-id': node.id,
  108. id: node.id
  109. },
  110. metadata: {
  111. node: codeCopy
  112. },
  113. state: node.state || 'closed'
  114. };
  115. });
  116. }
  117. });
  118. return $.mage.folderTree;
  119. });