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.
 
 
 
 
 

355 lines
11 KiB

  1. /*!
  2. * jquery.fancytree.glyph.js
  3. *
  4. * Use glyph-fonts, ligature-fonts, or SVG icons instead of icon sprites.
  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 FT = $.ui.fancytree,
  33. PRESETS = {
  34. awesome3: {
  35. // Outdated!
  36. _addClass: "",
  37. checkbox: "icon-check-empty",
  38. checkboxSelected: "icon-check",
  39. checkboxUnknown: "icon-check icon-muted",
  40. dragHelper: "icon-caret-right",
  41. dropMarker: "icon-caret-right",
  42. error: "icon-exclamation-sign",
  43. expanderClosed: "icon-caret-right",
  44. expanderLazy: "icon-angle-right",
  45. expanderOpen: "icon-caret-down",
  46. loading: "icon-refresh icon-spin",
  47. nodata: "icon-meh",
  48. noExpander: "",
  49. radio: "icon-circle-blank",
  50. radioSelected: "icon-circle",
  51. // radioUnknown: "icon-circle icon-muted",
  52. // Default node icons.
  53. // (Use tree.options.icon callback to define custom icons based on node data)
  54. doc: "icon-file-alt",
  55. docOpen: "icon-file-alt",
  56. folder: "icon-folder-close-alt",
  57. folderOpen: "icon-folder-open-alt",
  58. },
  59. awesome4: {
  60. _addClass: "fa",
  61. checkbox: "fa-square-o",
  62. checkboxSelected: "fa-check-square-o",
  63. checkboxUnknown: "fa-square fancytree-helper-indeterminate-cb",
  64. dragHelper: "fa-arrow-right",
  65. dropMarker: "fa-long-arrow-right",
  66. error: "fa-warning",
  67. expanderClosed: "fa-caret-right",
  68. expanderLazy: "fa-angle-right",
  69. expanderOpen: "fa-caret-down",
  70. // We may prevent wobbling rotations on FF by creating a separate sub element:
  71. loading: { html: "<span class='fa fa-spinner fa-pulse' />" },
  72. nodata: "fa-meh-o",
  73. noExpander: "",
  74. radio: "fa-circle-thin", // "fa-circle-o"
  75. radioSelected: "fa-circle",
  76. // radioUnknown: "fa-dot-circle-o",
  77. // Default node icons.
  78. // (Use tree.options.icon callback to define custom icons based on node data)
  79. doc: "fa-file-o",
  80. docOpen: "fa-file-o",
  81. folder: "fa-folder-o",
  82. folderOpen: "fa-folder-open-o",
  83. },
  84. awesome5: {
  85. // fontawesome 5 have several different base classes
  86. // "far, fas, fal and fab" The rendered svg puts that prefix
  87. // in a different location so we have to keep them separate here
  88. _addClass: "",
  89. checkbox: "far fa-square",
  90. checkboxSelected: "far fa-check-square",
  91. // checkboxUnknown: "far fa-window-close",
  92. checkboxUnknown:
  93. "fas fa-square fancytree-helper-indeterminate-cb",
  94. radio: "far fa-circle",
  95. radioSelected: "fas fa-circle",
  96. radioUnknown: "far fa-dot-circle",
  97. dragHelper: "fas fa-arrow-right",
  98. dropMarker: "fas fa-long-arrow-alt-right",
  99. error: "fas fa-exclamation-triangle",
  100. expanderClosed: "fas fa-caret-right",
  101. expanderLazy: "fas fa-angle-right",
  102. expanderOpen: "fas fa-caret-down",
  103. loading: "fas fa-spinner fa-pulse",
  104. nodata: "far fa-meh",
  105. noExpander: "",
  106. // Default node icons.
  107. // (Use tree.options.icon callback to define custom icons based on node data)
  108. doc: "far fa-file",
  109. docOpen: "far fa-file",
  110. folder: "far fa-folder",
  111. folderOpen: "far fa-folder-open",
  112. },
  113. bootstrap3: {
  114. _addClass: "glyphicon",
  115. checkbox: "glyphicon-unchecked",
  116. checkboxSelected: "glyphicon-check",
  117. checkboxUnknown:
  118. "glyphicon-expand fancytree-helper-indeterminate-cb", // "glyphicon-share",
  119. dragHelper: "glyphicon-play",
  120. dropMarker: "glyphicon-arrow-right",
  121. error: "glyphicon-warning-sign",
  122. expanderClosed: "glyphicon-menu-right", // glyphicon-plus-sign
  123. expanderLazy: "glyphicon-menu-right", // glyphicon-plus-sign
  124. expanderOpen: "glyphicon-menu-down", // glyphicon-minus-sign
  125. loading: "glyphicon-refresh fancytree-helper-spin",
  126. nodata: "glyphicon-info-sign",
  127. noExpander: "",
  128. radio: "glyphicon-remove-circle", // "glyphicon-unchecked",
  129. radioSelected: "glyphicon-ok-circle", // "glyphicon-check",
  130. // radioUnknown: "glyphicon-ban-circle",
  131. // Default node icons.
  132. // (Use tree.options.icon callback to define custom icons based on node data)
  133. doc: "glyphicon-file",
  134. docOpen: "glyphicon-file",
  135. folder: "glyphicon-folder-close",
  136. folderOpen: "glyphicon-folder-open",
  137. },
  138. material: {
  139. _addClass: "material-icons",
  140. checkbox: { text: "check_box_outline_blank" },
  141. checkboxSelected: { text: "check_box" },
  142. checkboxUnknown: { text: "indeterminate_check_box" },
  143. dragHelper: { text: "play_arrow" },
  144. dropMarker: { text: "arrow-forward" },
  145. error: { text: "warning" },
  146. expanderClosed: { text: "chevron_right" },
  147. expanderLazy: { text: "last_page" },
  148. expanderOpen: { text: "expand_more" },
  149. loading: {
  150. text: "autorenew",
  151. addClass: "fancytree-helper-spin",
  152. },
  153. nodata: { text: "info" },
  154. noExpander: { text: "" },
  155. radio: { text: "radio_button_unchecked" },
  156. radioSelected: { text: "radio_button_checked" },
  157. // Default node icons.
  158. // (Use tree.options.icon callback to define custom icons based on node data)
  159. doc: { text: "insert_drive_file" },
  160. docOpen: { text: "insert_drive_file" },
  161. folder: { text: "folder" },
  162. folderOpen: { text: "folder_open" },
  163. },
  164. };
  165. function setIcon(node, span, baseClass, opts, type) {
  166. var map = opts.map,
  167. icon = map[type],
  168. $span = $(span),
  169. $counter = $span.find(".fancytree-childcounter"),
  170. setClass = baseClass + " " + (map._addClass || "");
  171. // #871 Allow a callback
  172. if (typeof icon === "function") {
  173. icon = icon.call(this, node, span, type);
  174. }
  175. // node.debug( "setIcon(" + baseClass + ", " + type + "): " + "oldIcon" + " -> " + icon );
  176. // #871: propsed this, but I am not sure how robust this is, e.g.
  177. // the prefix (fas, far) class changes are not considered?
  178. // if (span.tagName === "svg" && opts.preset === "awesome5") {
  179. // // fa5 script converts <i> to <svg> so call a specific handler.
  180. // var oldIcon = "fa-" + $span.data("icon");
  181. // // node.debug( "setIcon(" + baseClass + ", " + type + "): " + oldIcon + " -> " + icon );
  182. // if (typeof oldIcon === "string") {
  183. // $span.removeClass(oldIcon);
  184. // }
  185. // if (typeof icon === "string") {
  186. // $span.addClass(icon);
  187. // }
  188. // return;
  189. // }
  190. if (typeof icon === "string") {
  191. // #883: remove inner html that may be added by prev. mode
  192. span.innerHTML = "";
  193. $span.attr("class", setClass + " " + icon).append($counter);
  194. } else if (icon) {
  195. if (icon.text) {
  196. span.textContent = "" + icon.text;
  197. } else if (icon.html) {
  198. span.innerHTML = icon.html;
  199. } else {
  200. span.innerHTML = "";
  201. }
  202. $span
  203. .attr("class", setClass + " " + (icon.addClass || ""))
  204. .append($counter);
  205. }
  206. }
  207. $.ui.fancytree.registerExtension({
  208. name: "glyph",
  209. version: "2.38.3",
  210. // Default options for this extension.
  211. options: {
  212. preset: null, // 'awesome3', 'awesome4', 'bootstrap3', 'material'
  213. map: {},
  214. },
  215. treeInit: function (ctx) {
  216. var tree = ctx.tree,
  217. opts = ctx.options.glyph;
  218. if (opts.preset) {
  219. FT.assert(
  220. !!PRESETS[opts.preset],
  221. "Invalid value for `options.glyph.preset`: " + opts.preset
  222. );
  223. opts.map = $.extend({}, PRESETS[opts.preset], opts.map);
  224. } else {
  225. tree.warn("ext-glyph: missing `preset` option.");
  226. }
  227. this._superApply(arguments);
  228. tree.$container.addClass("fancytree-ext-glyph");
  229. },
  230. nodeRenderStatus: function (ctx) {
  231. var checkbox,
  232. icon,
  233. res,
  234. span,
  235. node = ctx.node,
  236. $span = $(node.span),
  237. opts = ctx.options.glyph;
  238. res = this._super(ctx);
  239. if (node.isRootNode()) {
  240. return res;
  241. }
  242. span = $span.children(".fancytree-expander").get(0);
  243. if (span) {
  244. // if( node.isLoading() ){
  245. // icon = "loading";
  246. if (node.expanded && node.hasChildren()) {
  247. icon = "expanderOpen";
  248. } else if (node.isUndefined()) {
  249. icon = "expanderLazy";
  250. } else if (node.hasChildren()) {
  251. icon = "expanderClosed";
  252. } else {
  253. icon = "noExpander";
  254. }
  255. // span.className = "fancytree-expander " + map[icon];
  256. setIcon(node, span, "fancytree-expander", opts, icon);
  257. }
  258. if (node.tr) {
  259. span = $("td", node.tr).find(".fancytree-checkbox").get(0);
  260. } else {
  261. span = $span.children(".fancytree-checkbox").get(0);
  262. }
  263. if (span) {
  264. checkbox = FT.evalOption("checkbox", node, node, opts, false);
  265. if (
  266. (node.parent && node.parent.radiogroup) ||
  267. checkbox === "radio"
  268. ) {
  269. icon = node.selected ? "radioSelected" : "radio";
  270. setIcon(
  271. node,
  272. span,
  273. "fancytree-checkbox fancytree-radio",
  274. opts,
  275. icon
  276. );
  277. } else {
  278. // eslint-disable-next-line no-nested-ternary
  279. icon = node.selected
  280. ? "checkboxSelected"
  281. : node.partsel
  282. ? "checkboxUnknown"
  283. : "checkbox";
  284. // span.className = "fancytree-checkbox " + map[icon];
  285. setIcon(node, span, "fancytree-checkbox", opts, icon);
  286. }
  287. }
  288. // Standard icon (note that this does not match .fancytree-custom-icon,
  289. // that might be set by opts.icon callbacks)
  290. span = $span.children(".fancytree-icon").get(0);
  291. if (span) {
  292. if (node.statusNodeType) {
  293. icon = node.statusNodeType; // loading, error
  294. } else if (node.folder) {
  295. icon =
  296. node.expanded && node.hasChildren()
  297. ? "folderOpen"
  298. : "folder";
  299. } else {
  300. icon = node.expanded ? "docOpen" : "doc";
  301. }
  302. setIcon(node, span, "fancytree-icon", opts, icon);
  303. }
  304. return res;
  305. },
  306. nodeSetStatus: function (ctx, status, message, details) {
  307. var res,
  308. span,
  309. opts = ctx.options.glyph,
  310. node = ctx.node;
  311. res = this._superApply(arguments);
  312. if (
  313. status === "error" ||
  314. status === "loading" ||
  315. status === "nodata"
  316. ) {
  317. if (node.parent) {
  318. span = $(".fancytree-expander", node.span).get(0);
  319. if (span) {
  320. setIcon(node, span, "fancytree-expander", opts, status);
  321. }
  322. } else {
  323. //
  324. span = $(
  325. ".fancytree-statusnode-" + status,
  326. node[this.nodeContainerAttrName]
  327. )
  328. .find(".fancytree-icon")
  329. .get(0);
  330. if (span) {
  331. setIcon(node, span, "fancytree-icon", opts, status);
  332. }
  333. }
  334. }
  335. return res;
  336. },
  337. });
  338. // Value returned by `require('jquery.fancytree..')`
  339. return $.ui.fancytree;
  340. }); // End of closure