1

I have my FancyTree initialised in a class. Here's what the class imports: Tree.js

import fancytree from 'jquery.fancytree';
import 'jquery.fancytree/dist/modules/jquery.fancytree.edit';
import 'jquery.fancytree/dist/modules/jquery.fancytree.filter';
import 'jquery.fancytree/dist/modules/jquery.fancytree.dnd5';
import 'jquery.fancytree/dist/modules/jquery.fancytree.glyph';
import 'jquery.fancytree/dist/modules/jquery.fancytree.table';
import 'jquery.fancytree/dist/modules/jquery.fancytree.wide';

I'm using RollUp, so the imports work as intended. However, I just can't find any solution to applying certain theme, i.e. bootstrap3 into my tree. index.html imports

<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
    <link href="//cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
    <script src="//cdn.jsdelivr.net/npm/jquery.fancytree@2.27/dist/jquery.fancytree-all-deps.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="assets/css/icons.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./node_modules/jquery.fancytree/dist/skin-bootstrap/ui.fancytree.css">
    <link href="./node_modules/jquery.fancytree/dist/skin-bootstrap/ui.fancytree.css" rel="stylesheet" class="skinswitcher">

And finally, the initialising of the FancyTree. Tree.js

$('#explorer-tree').fancytree({
      extensions: ['dnd5', 'edit', 'glyph', 'wide'],
      glyph: {
        preset: 'bootstrap3',
        map: {
          doc: 'fa fa-file-o',
          docOpen: 'fa fa-file-o',
          checkbox: 'fa fa-square-o',
          checkboxSelected: 'fa fa-check-square-o',
          checkboxUnknown: 'fa fa-square',
          dragHelper: 'fa arrow-right',
          dropMarker: 'fa long-arrow-right',
          error: 'fa fa-warning',
          expanderClosed: 'fa fa-caret-right',
          expanderLazy: 'fa fa-angle-right',
          expanderOpen: 'fa fa-caret-down',
          folder: 'fa fa-folder-o',
          folderOpen: 'fa fa-folder-open-o',
          loading: 'fa fa-spinner fa-pulse',
        },
      },
      icon: function(event, data) {
        // if( data.node.isFolder() ) {
        //   return "glyphicon glyphicon-book";
        // }
      },
      source: [
        {title: 'project-name', key: '1',
          expanded: true},
      ],
    });

The tree just looks the same - default. No styling applied, no nothing. Even documentation doesn't really explain how it works.

Martin Goncharov
  • 130
  • 2
  • 10

1 Answers1

0

Since FancyTree is made in a very isolated way, the only way to apply custom styles is to not include default ones in the first place. I had to rewrite css files to adjust them, otherwise it just wouldn't do anything. It would also overlap default icons with awesome4 ones if multiple css files are imported.

Martin Goncharov
  • 130
  • 2
  • 10