ExtGlyph

About Fancytree glyph extension.

• Status: beta
• Examples: bootstrap and font awesome

Use glyph fonts as instead of icon sprites.

Options

• map, type: {object}, default: {}
  Map of icon class names for different symbol types. Use this map to override the settings that are defined by the preset option.

• preset, type: {object}, default: awesome4 (since 2.24)
  Define a default set of icon names.
  Possible values: "awesome3", "awesome4", "bootstrap3".
  Don't forget to include a matching css file for the preset.

Events

ext-glyph does not define own callbacks, but the tree.options.icon option is also useful here to define node icons (simply return a the class names, e.g. "fa fa-foobar").

Methods

(n.a.)

Example

In addition to jQuery, jQuery UI, and Fancytree, include jquery.fancytree.glyph.js.

Then add the glyph css, like bootstrap.min.css, font-awesome.min.css, or similar.

It is also important to use a Fancytree theme that is optimized for glyph icons instead of gif sprites, for example skin-awesome or skin-bootstrap:

  <!-- Include glyph font definitions, for example matching `preset: "awesome4"` -->
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
  <!-- Include a Fancytree skin that support glyphs -->
  <link href="../src/skin-bootstrap/ui.fancytree.css" rel="stylesheet">

  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="js/jquery.fancytree-all-deps.min.js"></script>

$("#tree").fancytree({
  extensions: ["glyph"],
  icon: function(event, data){
    // (Optional dynamic icon definition...)
  },
  glyph: {
    preset: "awesome4",
    map: {
      // Override distinct default icons here
      folder: "fa fa-folder",
      folderOpen: "fa fa-folder-open"
    }
  },
  ...
});

The bootstrap theme also plays well with the ext-wide extension.

Glyph Mapping Presets

"awesome4" Preset (Font Awesome 4.x)

Include the glyph css, use the skin-bootstrap theme, and define the icon mapping:

  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
  <link href="../src/skin-awesome/ui.fancytree.css" rel="stylesheet">

Font Awesome 4.x icon overview

preset: "awesome4" defines these default mappings:

map: {
  checkbox: "fa fa-square-o",
  checkboxSelected: "fa fa-check-square-o",
  checkboxUnknown: "fa fa-square",
  radio: "fa fa-circle-o",
  radioSelected: "fa fa-circle",
  radioUnknown: "fa fa-dot-circle-o",
  dragHelper: "fa fa-arrow-right",
  dropMarker: "fa fa-long-arrow-right",
  error: "fa fa-warning",
  expanderClosed: "fa fa-caret-right",
  expanderLazy: "fa fa-angle-right",
  expanderOpen: "fa fa-caret-down",
  loading: "fa fa-spinner fa-pulse",
  nodata: "fa fa-meh-o",
  noExpander: "",
  // Default node icons.
  // (Use tree.options.icon callback to define custom icons based on node data)
  doc: "fa fa-file-o",
  docOpen: "fa fa-file-o",
  folder: "fa fa-folder-o",
  folderOpen: "fa fa-folder-open-o"
}

Font Awesome 3.2 (outdated)

Include the glyph css, use the skin-awesome theme, and define the icon mapping:

  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <link href="../src/skin-awesome/ui.fancytree.css" rel="stylesheet">

Font Awesome 3.2 icon overview

preset: "awesome3" defines these default mappings:

map: {
  checkbox: "icon-check-empty",
  checkboxSelected: "icon-check",
  checkboxUnknown: "icon-check icon-muted",
  radio: "icon-circle-blank",
  radioSelected: "icon-circle",
  radioUnknown: "icon-circle icon-muted",
  dragHelper: "icon-caret-right",
  dropMarker: "icon-caret-right",
  error: "icon-exclamation-sign",
  expanderClosed: "icon-caret-right",
  expanderLazy: "icon-angle-right",
  expanderOpen: "icon-caret-down",
  loading: "icon-refresh icon-spin",
  nodata: "icon-meh",
  noExpander: "",
  // Default node icons.
  // (Use tree.options.icon callback to define custom icons based on node data)
  doc: "icon-file-alt",
  docOpen: "icon-file-alt",
  folder: "icon-folder-close-alt",
  folderOpen: "icon-folder-open-alt"
}

"bootstap3" Preset ()

Include the glyph css, use the skin-bootstrap theme, and define the icon mapping:

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="../src/skin-bootstrap/ui.fancytree.css" rel="stylesheet">

Bootstrap 3 Icon overview

preset: "bootstrap3" defines these default mappings:

map: {
  checkbox: "glyphicon glyphicon-unchecked",
  checkboxSelected: "glyphicon glyphicon-check",
  checkboxUnknown: "glyphicon glyphicon-expand",
  radio: "glyphicon glyphicon-remove-circle",
  radioSelected: "glyphicon glyphicon-ok-circle",
  radioUnknown: "glyphicon glyphicon-ban-circle",
  dragHelper: "glyphicon glyphicon-play",
  dropMarker: "glyphicon glyphicon-arrow-right",
  error: "glyphicon glyphicon-warning-sign",
  expanderClosed: "glyphicon glyphicon-menu-right",  // glyphicon-plus-sign
  expanderLazy: "glyphicon glyphicon-menu-right",  // glyphicon-plus-sign
  expanderOpen: "glyphicon glyphicon-menu-down",  // glyphicon-minus-sign
  loading: "glyphicon glyphicon-refresh glyphicon-spin",
  nodata: "glyphicon glyphicon-info-sign",
  noExpander: "",
  // Default node icons.
  // (Use tree.options.icon callback to define custom icons based on node data)
  doc: "glyphicon glyphicon-file",
  docOpen: "glyphicon glyphicon-file",
  folder: "glyphicon glyphicon-folder-close",
  folderOpen: "glyphicon glyphicon-folder-open"
}

Recipes

[Howto] Define custom icons per node type

Use the icon callback to define per-node custom icons:

$("#tree").fancytree({
  ...
  icon: function(event, data){
    if( data.node.isFolder() ) {
      return "glyphicon glyphicon-book";
    }
  },

Another approach is to override the icon class directly with the node data:

[
  {"title": "Node 1", "key": "1", "icon": "glyphicon glyphicon-book" },
  ...