literyzjs-treeview/bbtreeview.js

/**
 * BBTreeview
 * @version v0.1.0.223 (2023/09/08 2027)
 */
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.ChildNode;
  }

  const nodeHtml = a.generateNodeHtml(_options);

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

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

  // Events
  node.Node.addEventListener("click", function(e){
    e.stopPropagation();
    e.preventDefault();

    if (!a.isTag(e.target, "li")) {
      return;
    }

    if ((e.offsetX < 0) || (e.offsetX > 16) || (e.offsetY < 0) || (e.offsetY > 16)) {
      return;
    }

    const myNode = a.getNode(e.target);
    if (myNode == null) {
      return;
    }

    a.Toggle(myNode);
  });

  // Setup checkbox events
  if (a.Options.ShowCheckbox) {
    node.Checkbox.addEventListener("mousedown", function(e){
      e.stopPropagation();
      e.preventDefault();

      node.Checked = !node.Checked;

      a.CheckNode(node, node.Checked);
    });

    node.Checkbox.addEventListener("click", function(e){
      e.stopPropagation();
      e.preventDefault();

      // do nothing
    });

    node.Checkbox.addEventListener("dblclick", function(e){
      e.stopPropagation();
      e.preventDefault();

      // do nothing
    });
  }

  // node.Label.addEventListener("click", function(e){
  //   e.stopPropagation();
  //   e.preventDefault();

  // });

  // Highlighting
  node.Container.addEventListener("mousedown", function(e){
    e.stopPropagation();
    e.preventDefault();

    const myNode = a.getNode(e.target);
    if (myNode == null) {
      return;
    }

    a.Container.querySelectorAll("div.highlighted").forEach(function(e) {
      e.classList.remove("highlighted");
    });

    myNode.Container.classList.add("highlighted");
  });

  // Toggle
  node.Container.addEventListener("dblclick", function(e){
    e.stopPropagation();
    e.preventDefault();

    const myNode = a.getNode(e.target);
    if (myNode == null) {
      return;
    }

    a.Toggle(myNode);
  });

  // Invalidate state
  if (node.ParentNode != null) {
    if (node.ParentNode.classList.contains("c")) {
      node.Node.classList.add("hidden");
    } else if (node.ParentNode.classList.contains("e")) {
      node.Node.classList.remove("hidden");
    } else {
      node.ParentNode.classList.add("e");
      node.Node.classList.remove("hidden");
    }
  }

  return true;
};

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

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

  node.Node.parentNode.removeChild(node.Node);

  if (node.ParentNode != null) {
    if (node.ParentNode.classList.contains("e")) {
      node.ParentNode.classList.remove("e");
    }

    if (node.ParentNode.classList.contains("c")) {
      node.ParentNode.classList.remove("c");
    }
  }

  return true;
};


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


BBTreeview.prototype.CheckNode = function(node, value) {
  const a = this;

  a.setNodeCheckbox(node.Node, value);

  // Update children
  node.Node.querySelectorAll("li").forEach(function(e) {
    a.setNodeCheckbox(e, value);
  });

  // Invalidate ParentNode
  node.ParentNode = a.GetParentNode(node.Node);

  // Update parent state
  if (node.ParentNode != null) {
    let uncheckedCount = 0;
    node.ParentNode.querySelectorAll("li").forEach(function(e) {
      if (e.classList.contains("x")) {
        return;
      }

      uncheckedCount++;
    });

    a.setNodeCheckbox(node.ParentNode, (uncheckedCount <= 0));
  }
};

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

  node.Node.classList.remove("e");
  node.Node.classList.add("c");

  a.GetChildNodes(node.Node).forEach(function(e) {
    e.classList.add("hidden");
  });
};

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

  node.Node.classList.remove("c");
  node.Node.classList.add("e");

  a.GetChildNodes(node.Node).forEach(function(e) {
    e.classList.remove("hidden");
  });
};

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

  const node = a.Container.querySelectorAll("li[data-bbtv-id='" + id + "']");

  if (node.length <= 0) {
    return null;
  }

  let response = {
    ID: id,
    Node: node[0],
    ParentNode: a.GetParentNode(node[0]),
    ChildNode: a.getChildNode(node[0]),
    Container: node[0].querySelectorAll("div.li")[0],
    Label: node[0].querySelectorAll("span")[0],
    Checked: node[0].classList.contains("x"),
    Checkbox: (a.Options.ShowCheckbox ? node[0].querySelectorAll("div.icon.checkbox")[0] : null),
    Value: node[0].getAttribute("data-bbtv-value")
  };

  // console.log(response);

  return response;
};

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

  const childNode = a.getChildNode(node);
  if (childNode == null) {
    return [];
  }

  let nodes = childNode.querySelectorAll("li");
  if (nodes.length <= 0) {
    return [];
  }

  let result = [];
  nodes.forEach(function(e) {
    if (typeof(e.parentNode) == "undefined") {
      return;
    }

    if (e.parentNode != childNode) {
      return;
    }

    result.push(e);
  });

  return result;
};

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

  return a.parentsUntilTagName(node, "li");
};

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

  if (node.Node.classList.contains("c")) {
    a.ExpandNode(node);
  } else if (node.Node.classList.contains("e")) {
    a.CollapseNode(node);
  } else {
    // do nothing
  }
};


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 html = '<li data-bbtv-id="' + options.ID + '" data-bbtv-value="' + options.Value + '">';
  html += '<div class="li">'

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

  html += '<div class="icon ' + options.Icon + '"></div>';
  html += '<span title="' + options.Hint + '">' + options.Name + '</span>';
  html += '</div>';
  html += '<ul></ul>';
  html += '</li>';

  return html;
};

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

  let result = node.querySelectorAll("ul");
  if (result.length <= 0) {
    return null;
  }

  return result[0];
};

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

  return _options;
};

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

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

  return (value.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) {
    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;
};

BBTreeview.prototype.setNodeCheckbox = function(el, value) {
  const a = this;

  if (value) {
    if (!el.classList.contains("x")) {
      el.classList.add("x");
    }
  } else {
    if (el.classList.contains("x")) {
      el.classList.remove("x");
    }
  }
};