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

"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-share",
    dragHelper: "glyphicon glyphicon-play",
    dropMarker: "glyphicon glyphicon-arrow-right",
    error: "glyphicon glyphicon-warning-sign",
    expanderClosed: "glyphicon glyphicon-plus-sign",
    expanderLazy: "glyphicon glyphicon-plus-sign",
    expanderOpen: "glyphicon glyphicon-minus-sign",
    // 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",
    loading: "glyphicon glyphicon-refresh glyphicon-spin"
  }

"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

  map: {
    checkbox: "fa fa-square-o",
    checkboxSelected: "fa fa-check-square-o",
    checkboxUnknown: "fa fa-square",
    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",
    nodata: "fa fa-meh-o",
    loading: "fa fa-spinner fa-pulse",
    // 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

Include the glyph css, use the skin-bootstrap 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

  map: {
    checkbox: "icon-check-empty",
    checkboxSelected: "icon-check",
    checkboxUnknown: "icon-check 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"
  }

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" },
  ...