How to configure fancytree `glyph` extension with `material` theme #1163

gioisco · 2024-09-19T10:06:32Z

gioisco
Sep 19, 2024

I'm implementing fancytree in my codebase and I'd like to have a better design.
I tried to follow the wiki and the demo example, but this is my terrible result.

The following code is the html that produces the result shown in the image. It includes a minimal configuration of fancytree.
I tried to change the dependencies, but the result remained the same.

I expected the hardcoded JSON to be rendered correctly.
What did I do wrong?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Fancytree - Example: ext-glyph - material design</title>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

  <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="//code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <!-- <script defer src="//code.getmdl.io/1.3.0/material.min.js"></script> -->

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/skin-material/ui.fancytree.min.css" rel="stylesheet" class="skinswitcher">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.fancytree-all-deps.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/modules/jquery.fancytree.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/modules/jquery.fancytree.glyph.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/modules/jquery.fancytree.table.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/modules/jquery.fancytree.wide.js"></script>

<script type="text/javascript">
  $(function(){
    $("#tree").fancytree({
      extensions: ["glyph"],
      checkbox: true,
      selectMode: 3,
      glyph: {
        preset: "material",
        map: {}
      },
      source: [
        { id: 9, title: "dir1", folder: true, lazy: true },
        { id: 11, title: "dir2", lazy: true },
        { id: 12, title: "file1" }
        ],
      lazyLoad: function(event, data) {
        var dfd = new $.Deferred();
        data.result = dfd.promise();

        window.setTimeout(function() {
          var lazyData;
          var id = data.node.data.id;

          if (id === 9) {
            lazyData = [
              { id: 101, title: "lazy_file" },
              { id: 102, title: "lazy_dir", lazy: true }
              ];
          } else {
            lazyData = [
              { id: 301, title: "default_file" },
              { id: 302, title: "default_dir", lazy: true }
              ];
          }
          dfd.resolve(lazyData);
        }, 200);
      },
    });
  }); 
</script>
</head>

<body class="example_NOT">

  <div id="tree" class="">
  </div>

</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to configure fancytree `glyph` extension with `material` theme #1163

{{title}}

Replies: 0 comments

Select a reply

How to configure fancytree glyph extension with material theme #1163

gioisco Sep 19, 2024

Replies: 0 comments

How to configure fancytree `glyph` extension with `material` theme #1163

gioisco
Sep 19, 2024