bbtreeview/src/bbtreeview.js

class BBTreeview {
  constructor(options) {
    this.Options = {};

    this.initialiseComponents(options);
  }

  initialiseComponents(options) {
    var a = this;

    a.Options = Object.assign({
      ID: null,
      ShowCheckbox: false,
      ShowSelection: true,
      EnablePullUp: false,
      ShowIcon: true
    }, options);

    // Replace treeview
    a.createTreeview();

    // a.Container = a.getTreeview();
  }


  get Container() {
    return this.getTreeview();
  }


  AddItem(options) {
    const a = this;
    const _options = Object.assign({
      ID: null,
      ParentID: null,
      Name: "",
      Hint: "",
      Value: "",
      Icon: "folder",
      Checked: false,
      Tag: null
    }, options);

    if (_options.ID == null) _options.ID = a.generateID();
    if (_options.Tag == null) _options.Tag = "";

    // Don't add duplicate
    if (a.Find(_options.ID) != null) {
      return false;
    }

    // Check parent exists
    let parentNode = null;
    if (_options.ParentID != null) {
      parentNode = a.Find(_options.ParentID);
      if (parentNode == null) {
        return false;
      }
    }

    if (parentNode == null) {
      parentNode = a.Container;
    } else {
      parentNode = parentNode.ChildNode;
    }

    const nodeHtml = a.generateNodeHtml(_options);

    // Add node
    a.appendHtml(parentNode, nodeHtml);

    const node = a.Find(_options.ID);

    // Setup events
    node.InvalidateEvents();

    return true;
  }

  Remove(id) {
    const a = this;

    const node = a.Find(id);
    if (node == null) {
      return false;
    }

    node.Remove();

    return true;
  }

  Clear() {
    const a = this;

    a.initialiseComponents(a.Options);
  }

  CollapseAll() {
    const a = this;

    a.GetAllNodes().forEach(function(e) {
      e.Collapse();
    });
  }

  ExpandAll() {
    const a = this;

    a.GetAllNodes().forEach(function(e) {
      e.Expand();
    });
  }

  CheckAll(value) {
    const a = this;

    if (!a.Options.ShowCheckbox) {
      return;
    }

    a.GetAllNodes().forEach(function(e) {
      e.Check(value);
    });
  }

  Find(id) {
    const a = this;

    if (a.Container == null){
      console.log("BBTreeview container not found");
      return;
    }

    const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']");
    if (node.length <= 0) {
      return null;
    }

    const treenode = new BBTreeviewNode(this, node[0]);

    return treenode;
  }

  FindByName(value) {
    const a = this;

    let response = [];
    a.GetAllNodes().forEach(function(e) {
      if (e.Name != value) {
        return;
      }

      response.push(e);
    });

    return response;
  }

  FindByValue(value) {
    const a = this;

    let response = [];
    a.GetAllNodes().forEach(function(e) {
      if (e.Value != value) {
        return;
      }

      response.push(e);
    });

    return response;
  }

  GetAllNodes() {
    const a = this;

    const node = a.Container.querySelectorAll("li");
    if (node.length <= 0) {
      return [];
    }

    let response = [];
    node.forEach(function(e) {
      const id = e.getAttribute("data-bbtv-id");
      if (a.isNullOrWhitespace(id)) {
        return;
      }

      const myNode = a.Find(id);
      if (myNode == null) {
        return;
      }

      response.push(myNode);
    });

    return response;
  }

  GetCheckedNodes() {
    const a = this;

    let response = [];
    a.GetAllNodes().forEach(function(e) {
      if (!e.IsChecked) {
        return;
      }

      response.push(e);
    });

    return response;
  }

  GetCheckedValues() {
    const a = this;

    let response = [];
    a.GetCheckedNodes().map(function(e) {
      response.push(e.Value);
    });

    return response;
  }

  GetCheckedTags() {
    const a = this;

    let response = [];
    a.GetCheckedNodes().map(function(e) {
      response.push(e.Tag);
    });

    return response;
  }

  GetSelectedNode() {
    const a = this;

    let response = null;
    a.GetAllNodes().forEach(function(e) {
      if (e.IsHighlighted) {
        response = e;

        return false;
      }
    });

    return response;
  }


  appendHtml(el, html) {
    let node = document.createElement('template');
    node.innerHTML = html;

    node = node.content.firstChild;

    el.appendChild(node);
  }

  createTreeview() {
    const a = this;

    let container = a.getContainer();
    if (container != null) {
      container.innerHTML = "<ul class=\"bbtreeview\"></ul>";
    }
  }

  generateID() {
    return "treeviewItem" + (Math.floor(Math.random() * 1000001) + 100).toString();
  }

  generateNodeHtml(options) {
    const a = this;

    let tag = "";
    if (!a.isNullOrWhitespace(options.Tag)) {
      tag = encodeURIComponent(JSON.stringify(options.Tag));
    }

    let html = '<li data-bbtv-id="' + options.ID + '" data-bbtv-value="' + options.Value + '" data-bbtv-tag="' + tag + '">';
    html += '<div class="li">'

    if (a.Options.ShowCheckbox) {
      html += '<div class="icon checkbox"></div>';
    }

    if (a.Options.ShowIcon) {
      html += '<div class="icon ' + options.Icon + '"></div>';
      html += '<span title="' + options.Hint + '">' + options.Name + '</span>';
    } else {
      html += '<span class="noicon" title="' + options.Hint + '">' + options.Name + '</span>';
    }

    html += '</div>';
    html += '<ul></ul>';
    html += '</li>';

    return html;
  }

  getContainer() {
    const a = this;

    let result = document.getElementsByTagName("body");
    if (result.length <= 0) {
      return;
    }

    result = result[0];

    result = result.querySelectorAll(a.Options.ID);
    if (result.length <= 0) {
      return;
    }

    result = result[0];

    return result;
  }

  getNode(el) {
    const a = this;

    let node = null;
    if (a.isTag(el, "li")) {
      node = el;
    } else {
      node = a.parentsUntilTagName(el, "li");
    }

    const id = node.getAttribute("data-bbtv-id");

    if (a.isNullOrWhitespace(id)) {
      return null;
    }

    return a.Find(id);
  }

  getTreeview() {
    const a = this;

    let container = a.getContainer();
    if (container == null) {
      return;
    }

    // if (container.querySelectorAll("ul.bbtreeview").length <= 0) {
    //   container.innerHTML = "<ul class=\"bbtreeview\"></ul>";
    // }

    container = container.querySelectorAll("ul.bbtreeview");
    if (container.length <= 0) {
      return;
    }

    container = container[0];

    return container;
  }

  isNullOrWhitespace(value) {
    if (typeof (value) == "undefined") {
      return true;
    }

    if (value == null) {
      return true;
    }

    return (value.toString().trim().length <= 0);
  }

  isTag(el, tagName) {
    return (el.tagName.toLowerCase() == tagName);
  }

  parentsUntilTagName(el, tagName) {
    const a = this;

    let node = el;

    while (true) {
      if (typeof(node.parentNode) == "undefined") {
        break;
      }

      node = node.parentNode;

      if (typeof(node) == "undefined") {
        break;
      }

      if (a.isTag(node, "ul")) {
        if (node.classList.contains("bbtreeview")) {
          return null;
        }
      }

      if (a.isTag(node, tagName)) {
        break;
      }
    }

    return node;
  }

}