Fancytree

Fancytree is a JavaScript tree view and tree grid plugin. Key features include:

• Keyboard navigation
• Inline editing
• Filtering
• Checkboxes
• Drag'n'drop
• Lazy loading

Fancytree uses a customized build of jQuery UI that includes only the widgets minimally required for its operation. This reduces bundle size and avoids conflicts with other jQuery UI instances.

The required widgets included in this build are:

• widget.js
• position.js
• keycode.js
• scroll-parent.js
• unique-id.js

To use Fancytree in a modern ES6 environment, import jQuery, the desired skin (CSS or LESS), the createTree function, and any specific modules you need (such as edit or filter). Initialize the tree by calling createTree on a selector with a configuration object specifying the extensions and source data.

Note: Loading and initialization may be asynchronous, meaning nodes might not be immediately accessible after the call.

import $ from "jquery";

import 'jquery.fancytree/dist/skin-lion/ui.fancytree.less';  // CSS or LESS

import {createTree} from 'jquery.fancytree';

import 'jquery.fancytree/dist/modules/jquery.fancytree.edit';
import 'jquery.fancytree/dist/modules/jquery.fancytree.filter';

const tree = createTree('#tree', {
  extensions: ['edit', 'filter'],
  source: {...},
  ...
});

To run or build upon the Taxonomy Browser demo, the following libraries are required:

• jQuery
• Bootstrap.js
• Handlebars.js
• Fancytree

To use the Super Theme Switcher, call the .themeswitcher() method on a jQuery selector. All configuration options are optional, so you can initialize it with no arguments for default behavior.

// Basic initialization with options
$('#switcher').themeswitcher({
    imgpath: "images/",
    loadTheme: "dot-luv"
});

// Minimal initialization using defaults
$('#switcher').themeswitcher();

If you need to update the customized jQuery UI dependencies used by Fancytree, follow these steps:

1. Download new versions of the required widgets from https://jqueryui.com/.
2. Apply the necessary modifications (replacing UMD headers with IIFE wrappers for jquery-ui-iife.js and applying the widget-protection patch for jquery.fancytree.ui-deps.js).
3. Run grunt build to test the changes.

To create a custom skin, follow these steps:

1. Create a new folder for your skin (e.g., src/skin-custom-...).
2. Copy the following files from an existing skin folder (e.g., src/skin-...) into your new folder to use as a base:
   • ui.fancytree.less (Required)
   • icons.gif (If your skin uses custom icons)
   • loading.gif (If your skin uses a custom loading animation)
3. Navigate to the root fancytree directory in your terminal.
4. Run the development server using Grunt to enable automatic CSS generation.
5. Edit your ui.fancytree.less file. The ui.fancytree.css file will be automatically generated and updated whenever you save changes to the LESS file.

Prerequisites:

• NPM and Grunt must be installed on your system.

The default template uses the OpenSans typeface. If you need to regenerate the font files, follow these steps using Font Squirrel:

1. Open the OpenSans page at Font Squirrel.
2. Click on the 'Webfont Kit' tab.
3. Select a subset: use 'Western Latin (Default)' or select 'No Subsetting' if more glyphs are required.
4. Click 'DOWNLOAD @FONT-FACE KIT'.
5. For every typeface variant used, copy the .eot, .svg, and .woff files into the templates/default/static/fonts directory.

The columnview extension allows Fancytree to render like a Mac Finder's column view. It transforms a standard Fancytree into a multi-column table layout where each level of the tree hierarchy is displayed in a subsequent table column.

Requirements

• The target element must be a <table> with at least two columns.
• You must not use the ext-table extension simultaneously with columnview.

Behavior

• Navigation: Uses arrow keys to navigate between columns and nodes. Right moves to the first child (or an expanded child), Left moves to the parent, and Up/Down moves between siblings.
• Automatic Configuration: When enabled, the extension forces autoCollapse: true, toggleEffect: false, and clickFolderMode: 1 to ensure smooth column transitions.