You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

206 lines
5.8 KiB

  1. /*!
  2. * jquery.fancytree.columnview.js
  3. *
  4. * Render tree like a Mac Finder's column view.
  5. * (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
  6. *
  7. * Copyright (c) 2008-2023, Martin Wendt (https://wwWendt.de)
  8. *
  9. * Released under the MIT license
  10. * https://github.com/mar10/fancytree/wiki/LicenseInfo
  11. *
  12. * @version 2.38.3
  13. * @date 2023-02-01T20:52:50Z
  14. */
  15. (function (factory) {
  16. if (typeof define === "function" && define.amd) {
  17. // AMD. Register as an anonymous module.
  18. define(["jquery", "./jquery.fancytree"], factory);
  19. } else if (typeof module === "object" && module.exports) {
  20. // Node/CommonJS
  21. require("./jquery.fancytree");
  22. module.exports = factory(require("jquery"));
  23. } else {
  24. // Browser globals
  25. factory(jQuery);
  26. }
  27. })(function ($) {
  28. "use strict";
  29. /*******************************************************************************
  30. * Private functions and variables
  31. */
  32. var _assert = $.ui.fancytree.assert,
  33. FT = $.ui.fancytree;
  34. /*******************************************************************************
  35. * Private functions and variables
  36. */
  37. $.ui.fancytree.registerExtension({
  38. name: "columnview",
  39. version: "2.38.3",
  40. // Default options for this extension.
  41. options: {},
  42. // Overide virtual methods for this extension.
  43. // `this` : is this extension object
  44. // `this._base` : the Fancytree instance
  45. // `this._super`: the virtual function that was overriden (member of prev. extension or Fancytree)
  46. treeInit: function (ctx) {
  47. var $tdFirst,
  48. $ul,
  49. tree = ctx.tree,
  50. $table = tree.widget.element;
  51. tree.tr = $("tbody tr", $table)[0];
  52. tree.$tdList = $(">td", tree.tr);
  53. tree.columnCount = tree.$tdList.length;
  54. // Perform default behavior
  55. this._superApply(arguments);
  56. // Standard Fancytree created a root <ul>. Now move this into first table cell
  57. $ul = $(tree.rootNode.ul);
  58. $tdFirst = tree.$tdList.eq(0);
  59. _assert(
  60. $.inArray("table", this.options.extensions) < 0,
  61. "columnview extensions must not use ext-table"
  62. );
  63. _assert(
  64. tree.columnCount >= 2,
  65. "columnview target must be a table with at least two columns"
  66. );
  67. $ul.removeClass("fancytree-container").removeAttr("tabindex");
  68. tree.$container = $table;
  69. $table
  70. .addClass("fancytree-container fancytree-ext-columnview")
  71. .attr("tabindex", "0");
  72. $tdFirst.empty();
  73. $ul.detach().appendTo($tdFirst);
  74. // Force some required options
  75. tree.widget.options.autoCollapse = true;
  76. // tree.widget.options.autoActivate = true;
  77. tree.widget.options.toggleEffect = false;
  78. tree.widget.options.clickFolderMode = 1;
  79. $table
  80. // Make sure that only active path is expanded when a node is activated:
  81. .on("fancytreeactivate", function (event, data) {
  82. var node = data.node,
  83. tree = data.tree,
  84. level = node.getLevel();
  85. tree._callHook("nodeCollapseSiblings", node);
  86. // Clear right neighbours
  87. if (!node.expanded) {
  88. tree.$tdList.eq(level).nextAll().empty();
  89. }
  90. // Expand nodes on activate, so we populate the right neighbor cell
  91. if (!node.expanded && (node.children || node.lazy)) {
  92. node.setExpanded();
  93. }
  94. })
  95. // Adjust keyboard behaviour:
  96. .on("fancytreekeydown", function (event, data) {
  97. var next = null,
  98. handled = true,
  99. node = data.node || data.tree.getFirstChild();
  100. if (node.getLevel() >= tree.columnCount) {
  101. return;
  102. }
  103. switch (FT.eventToString(event)) {
  104. case "down":
  105. next = node.getNextSibling();
  106. break;
  107. case "left":
  108. if (!node.isTopLevel()) {
  109. next = node.getParent();
  110. }
  111. break;
  112. case "right":
  113. next = node.getFirstChild();
  114. if (!next) {
  115. // default processing: expand or ignore
  116. return;
  117. }
  118. // Prefer an expanded child if any
  119. next.visitSiblings(function (n) {
  120. if (n.expanded) {
  121. next = n;
  122. return false;
  123. }
  124. }, true);
  125. break;
  126. case "up":
  127. next = node.getPrevSibling();
  128. break;
  129. default:
  130. handled = false;
  131. }
  132. if (next) {
  133. next.setActive();
  134. }
  135. return !handled;
  136. });
  137. },
  138. nodeSetExpanded: function (ctx, flag, callOpts) {
  139. var $wait,
  140. node = ctx.node,
  141. tree = ctx.tree,
  142. level = node.getLevel();
  143. if (flag !== false && !node.expanded && node.isUndefined()) {
  144. $wait = $(
  145. "<span class='fancytree-icon fancytree-icon-loading'>"
  146. );
  147. tree.$tdList.eq(level).empty().append($wait);
  148. }
  149. return this._superApply(arguments);
  150. },
  151. nodeRemoveChildren: function (ctx) {
  152. // #899: node's children removed: remove child marker...
  153. $(ctx.node.span).find("span.fancytree-cv-right").remove();
  154. // ...and clear right columns
  155. ctx.tree.$tdList.eq(ctx.node.getLevel()).nextAll().empty();
  156. return this._superApply(arguments);
  157. },
  158. nodeRender: function (ctx, force, deep, collapsed, _recursive) {
  159. // Render standard nested <ul> - <li> hierarchy
  160. this._super(ctx, force, deep, collapsed, _recursive);
  161. // Remove expander and add a trailing triangle instead
  162. var level,
  163. $tdChild,
  164. $ul,
  165. tree = ctx.tree,
  166. node = ctx.node,
  167. $span = $(node.span);
  168. $span.find("span.fancytree-expander").remove();
  169. if (
  170. node.hasChildren() !== false &&
  171. !$span.find("span.fancytree-cv-right").length
  172. ) {
  173. $span.append(
  174. $("<span class='fancytree-icon fancytree-cv-right'>")
  175. );
  176. }
  177. // Move <ul> with children into the appropriate <td>
  178. if (node.ul && node.expanded) {
  179. node.ul.style.display = ""; // might be hidden if RIGHT was pressed
  180. level = node.getLevel();
  181. if (level < tree.columnCount) {
  182. // only if we are not in the last column
  183. $tdChild = tree.$tdList.eq(level);
  184. $ul = $(node.ul).detach();
  185. $tdChild.empty().append($ul);
  186. }
  187. }
  188. },
  189. });
  190. // Value returned by `require('jquery.fancytree..')`
  191. return $.ui.fancytree;
  192. }); // End of closure