bbtreeview/src/bbtreeview.js

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

    this.initialiseComponents(options);
  }


  initialiseComponents(options) {
    var a = this;

    a.Options = Object.assign(a.DefaultOptions.Treeview, options);
  }


  get Container() {
    const a = this;

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

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

    result[0].innerHTML = "<ul class=\"bbtreeview\"></ul>";

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

    return result[0];
  }

  get DefaultOptions() {
    return {
      Treeview: {
        ID: null,
        ShowCheckbox: false,
        ShowSelection: true,
        EnablePullUp: false,
        ShowIcon: true
      },
      TreeNode: {
        ID: null,
        ParentID: null,
        Name: "",
        Hint: "",
        Value: "",
        Icon: "folder",
        Checked: false,
        Tag: null
      }
    };
  }

  AddItem(options) {
    const a = this;
    const _options = a.getOptions(options);

    // 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.GetChildNode();
    }

    if (parentNode == null) {
      return false;
    }

    const nodeHtml = a.generateNodeHtml(_options);

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

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

    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.IsChecked = 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;
    }

    let treenode = new BBTreeviewNode(this);
    treenode.Load(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.Checked) {
        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.Highlighted) {
        response = e;

        return false;
      }
    });

    return response;
  }

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

    node = node.content.firstChild;

    el.appendChild(node);
  }

  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;
  }

  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);
  }

  getOptions(options) {
    const a = this;

    let _options = Object.assign(a.DefaultOptions.TreeNode, options);

    if (_options.ID == null) {
      _options.ID = a.generateID();
    }

    if (_options.Tag == null) {
      _options.Tag = "";
    }

    return _options;
  }

  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;
  }

}