literyzjs-treeview/bbtreeview.js

/**
 * BBTreeview
 * @version v0.1.1.006 (2023/09/27 2218)
 */
function BBTreeview(options)
{
  const a = this;

  a.initialise(options);
};

BBTreeview.prototype.AddItem = function(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();
  }

  const nodeHtml = a.generateNodeHtml(_options);

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

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

  // Setup events
  node.SetupEvents();

  return true;
};

BBTreeview.prototype.Remove = function(id) {
  const a = this;

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

  node.Remove();

  return true;
};

BBTreeview.prototype.Default = function() {
  return {
    TreeviewOptions: {
      ID: null,
      ShowCheckbox: false,
      ShowSelection: true,
      EnablePullUp: false,
      ShowIcon: true
    },
    TreeNodeOptions: {
      ID: null,
      ParentID: null,
      Name: "",
      Hint: "",
      Value: "",
      Icon: "folder",
      Checked: false,
      Tag: null
    }
  };
};

BBTreeview.prototype.Clear = function() {
  const a = this;

  a.initialise(a.Options);
};

BBTreeview.prototype.CollapseAll = function() {
  const a = this;

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

BBTreeview.prototype.ExpandAll = function() {
  const a = this;

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

BBTreeview.prototype.CheckAll = function(value) {
  const a = this;

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

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

BBTreeview.prototype.Find = function(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]);

  // console.log(treenode);

  return treenode;
};

BBTreeview.prototype.FindByName = function(value) {
  const a = this;

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

    response.push(e);
  });

  return response;
};

BBTreeview.prototype.FindByValue = function(value) {
  const a = this;

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

    response.push(e);
  });

  return response;
};

BBTreeview.prototype.GetAllNodes = function() {
  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;
};

BBTreeview.prototype.GetCheckedNodes = function() {
  const a = this;

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

    response.push(e);
  });

  return response;
};

BBTreeview.prototype.GetCheckedValues = function() {
  const a = this;

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

  return response;
};


BBTreeview.prototype.GetCheckedTags = function() {
  const a = this;

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

  return response;
};

BBTreeview.prototype.GetSelectedNode = function() {
  const a = this;

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

      return false;
    }
  });

  return response;
};

BBTreeview.prototype.initialise = function(options) {
  var a = this;

  a.Options = Object.assign(a.Default().TreeviewOptions, options);

  a.Container = null;

  let treeview = document.getElementsByTagName("body")[0].querySelectorAll(a.Options.ID);
  if (treeview.length <= 0) {
    return;
  }

  if (treeview[0] == null) {
    return;
  }

  a.Container = treeview[0];

  a.Container.innerHTML = "<ul class=\"bbtreeview\"></ul>";

  a.Container = a.Container.querySelectorAll("ul.bbtreeview")[0];
};

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

  node = node.content.firstChild;

  el.appendChild(node);
};

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

BBTreeview.prototype.generateNodeHtml = function(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;
};

BBTreeview.prototype.getNode = function(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);
};

BBTreeview.prototype.getOptions = function(options) {
  const a = this;

  let _options = Object.assign(a.Default().TreeNodeOptions, options);

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

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

  return _options;
};

BBTreeview.prototype.isNullOrWhitespace = function(value) {
  if (typeof (value) == "undefined") {
    return true;
  }

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

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

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

BBTreeview.prototype.parentsUntilTagName = function(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;
};