Skip to content

ExtGlyph

Jump to bottom Edit New page
Martin Wendt edited this page Apr 9, 2021 · 26 revisions

About Fancytree glyph extension.

Use glyph-fonts, ligature-fonts, or SVG icons instead of icon sprites.

This plugin includes presets for some popular glyph fonts (e.g. Font Awesome, ...) and ligature fonts (e.g. Material icons). There is also a demo for SVG icons.

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: {string}, default: null (since 2.24)
    Define a default set of icon names.
    Possible values: "awesome3", "awesome4", "awesome5", "bootstrap3", "material".
    If not set, the map option must define a complete set of all possible states. Otherwise only values that should override the preset need to be defined.
    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").
@since 2.37 the glyph.map.<TYPE> option also allows to pass a callback(node, span, type).

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="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
  <!-- Include a Fancytree skin that support glyphs -->
  <link href="../src/skin-awesome/ui.fancytree.css" rel="stylesheet">

  <script src="//code.jquery.com/jquery-3.6.0.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: {
    // The preset defines defaults for all supported icon types.
    preset: "awesome5",
    map: {
      // Override distinct default icons here
      folder: "fas fa-folder",
      folderOpen: "fas fa-folder-open",
      ...
    }
  },
  ...
});

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

Glyph Mapping Presets

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">

preset: "awesome3" defines these default mappings:

map: {
  _addClass: "",
  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: "",
  radio: "icon-circle-blank",
  radioSelected: "icon-circle",
  // 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"
}

Online Demo
Font Awesome 3.2 icon overview.

"awesome4" Preset (Font Awesome 4.x)

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

preset: "awesome4" defines these default mappings:

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

Online Demo
Font Awesome 4.x icon overview

"awesome5" Preset (Font Awesome 5.x)

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

  <link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
  <link href="../src/skin-awesome/ui.fancytree.css" rel="stylesheet">

preset: "awesome5" defines these default mappings:

NOTE: See also the alternative approach using SVG icons

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

Online Demo
Font Awesome 5.x icon overview

"bootstap3" Preset

Note: Starting with release v4, Bootstrap does not include own icons, but recommends external libraries.

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">

preset: "bootstrap3" defines these default mappings:

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

Note: For the bootstrap theme, we can add the fancytree-colorize-selected class to the container, in order to draw selected nodes with a colored background. This requires some JS, because the container is not available in the markup before initialization:

$("#tree").fancytree({
    ...
    init: function(event, data) {
        data.tree.$container.addClass("fancytree-colorize-selected");
    },

(Adding custom CSS that overrides distinct stock theme styles is another solution.)

Online Demo
Bootstrap 3 Icon overview

"material" Preset

Include the glyph css, use the skin-awesome 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-awesome/ui.fancytree.css" rel="stylesheet">

preset: "bootstrap3" defines these default mappings:

map: {
  _addClass: "material-icons",
  checkbox: { text: "check_box_outline_blank" },
  checkboxSelected: { text: "check_box" },
  checkboxUnknown: { text: "indeterminate_check_box" },
  dragHelper: { text: "play_arrow" },
  dropMarker: { text: "arrow-forward" },
  error: { text: "warning" },
  expanderClosed: { text: "chevron_right" },
  expanderLazy: { text: "last_page" },
  expanderOpen: { text: "expand_more" },
  loading: { text: "autorenew", addClass: "fancytree-helper-spin" },
  nodata: { text: "info" },
  noExpander: { text: "" },
  radio: { text: "radio_button_unchecked" },
  radioSelected: { text: "radio_button_checked" },
  // Default node icons.
  // (Use tree.options.icon callback to define custom icons based on node data)
  doc: { text: "web_asset" },
  docOpen: { text: "web_asset" },
  folder: { text: "folder" },
  folderOpen: { text: "folder" }
}

Online Demo
Material Design icon overview.

Recipes

[Howto] Use SVG Icons

See the demo for SVG icons.

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

Documentation Home - Project Page - Copyright (c) 2008-2022, Martin Wendt (https://wwWendt.de)

Index

Clone this wiki locally