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.
 
 
 
 
 

126 lines
4.6 KiB

  1. /*!
  2. * jquery.fancytree.themeroller.js
  3. *
  4. * Enable jQuery UI ThemeRoller styles.
  5. * (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/)
  6. *
  7. * @see http://jqueryui.com/themeroller/
  8. *
  9. * Copyright (c) 2008-2023, Martin Wendt (https://wwWendt.de)
  10. *
  11. * Released under the MIT license
  12. * https://github.com/mar10/fancytree/wiki/LicenseInfo
  13. *
  14. * @version 2.38.3
  15. * @date 2023-02-01T20:52:50Z
  16. */
  17. (function (factory) {
  18. if (typeof define === "function" && define.amd) {
  19. // AMD. Register as an anonymous module.
  20. define(["jquery", "./jquery.fancytree"], factory);
  21. } else if (typeof module === "object" && module.exports) {
  22. // Node/CommonJS
  23. require("./jquery.fancytree");
  24. module.exports = factory(require("jquery"));
  25. } else {
  26. // Browser globals
  27. factory(jQuery);
  28. }
  29. })(function ($) {
  30. "use strict";
  31. /*******************************************************************************
  32. * Extension code
  33. */
  34. $.ui.fancytree.registerExtension({
  35. name: "themeroller",
  36. version: "2.38.3",
  37. // Default options for this extension.
  38. options: {
  39. activeClass: "ui-state-active", // Class added to active node
  40. // activeClass: "ui-state-highlight",
  41. addClass: "ui-corner-all", // Class added to all nodes
  42. focusClass: "ui-state-focus", // Class added to focused node
  43. hoverClass: "ui-state-hover", // Class added to hovered node
  44. selectedClass: "ui-state-highlight", // Class added to selected nodes
  45. // selectedClass: "ui-state-active"
  46. },
  47. treeInit: function (ctx) {
  48. var $el = ctx.widget.element,
  49. opts = ctx.options.themeroller;
  50. this._superApply(arguments);
  51. if ($el[0].nodeName === "TABLE") {
  52. $el.addClass("ui-widget ui-corner-all");
  53. $el.find(">thead tr").addClass("ui-widget-header");
  54. $el.find(">tbody").addClass("ui-widget-conent");
  55. } else {
  56. $el.addClass("ui-widget ui-widget-content ui-corner-all");
  57. }
  58. $el.on(
  59. "mouseenter mouseleave",
  60. ".fancytree-node",
  61. function (event) {
  62. var node = $.ui.fancytree.getNode(event.target),
  63. flag = event.type === "mouseenter";
  64. $(node.tr ? node.tr : node.span).toggleClass(
  65. opts.hoverClass + " " + opts.addClass,
  66. flag
  67. );
  68. }
  69. );
  70. },
  71. treeDestroy: function (ctx) {
  72. this._superApply(arguments);
  73. ctx.widget.element.removeClass(
  74. "ui-widget ui-widget-content ui-corner-all"
  75. );
  76. },
  77. nodeRenderStatus: function (ctx) {
  78. var classes = {},
  79. node = ctx.node,
  80. $el = $(node.tr ? node.tr : node.span),
  81. opts = ctx.options.themeroller;
  82. this._super(ctx);
  83. /*
  84. .ui-state-highlight: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons.
  85. .ui-state-error: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons.
  86. .ui-state-error-text: An additional class that applies just the error text color without background. Can be used on form labels for instance. Also applies error icon color to child icons.
  87. .ui-state-default: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons.
  88. .ui-state-hover: Class to be applied on mouseover to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.
  89. .ui-state-focus: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.
  90. .ui-state-active: Class to be applied on mousedown to clickable button-like elements. Applies "clickable active" container styles to an element and its child text, links, and icons.
  91. */
  92. // Set ui-state-* class (handle the case that the same class is assigned
  93. // to different states)
  94. classes[opts.activeClass] = false;
  95. classes[opts.focusClass] = false;
  96. classes[opts.selectedClass] = false;
  97. if (node.isActive()) {
  98. classes[opts.activeClass] = true;
  99. }
  100. if (node.hasFocus()) {
  101. classes[opts.focusClass] = true;
  102. }
  103. // activeClass takes precedence before selectedClass:
  104. if (node.isSelected() && !node.isActive()) {
  105. classes[opts.selectedClass] = true;
  106. }
  107. $el.toggleClass(opts.activeClass, classes[opts.activeClass]);
  108. $el.toggleClass(opts.focusClass, classes[opts.focusClass]);
  109. $el.toggleClass(opts.selectedClass, classes[opts.selectedClass]);
  110. // Additional classes (e.g. 'ui-corner-all')
  111. $el.addClass(opts.addClass);
  112. },
  113. });
  114. // Value returned by `require('jquery.fancytree..')`
  115. return $.ui.fancytree;
  116. }); // End of closure