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

  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.GetCheckbox().addEventListener("mousedown", function(e){
      e.stopPropagation();
      e.preventDefault();

      // node.Checked = !node.Checked;

      // a.CheckNode(node, node.Checked);
      node.Check(!node.IsChecked());
    });

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

      // do nothing
    });

    node.GetCheckbox().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");
    });

    // Don't show selection
    if (!a.Options.ShowSelection) {
      return;
    }

    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.GetParentNode() != null) {
    if (node.GetParentNode().classList.contains("c")) {
      node.Node.classList.add("hidden");
    } else if (node.GetParentNode().classList.contains("e")) {
      node.Node.classList.remove("hidden");
    } else {
      node.GetParentNode().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.Remove();

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

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

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

  return true;
};


BBTreeview.prototype.Default = function() {
  return {
    TreeviewOptions: {
      ID: null,
      ShowCheckbox: false,
      ShowSelection: true
    },
    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.GetParentNode() != null) {
//     let uncheckedCount = 0;
//     node.GetParentNode().querySelectorAll("li").forEach(function(e) {
//       if (e.classList.contains("x")) {
//         return;
//       }

//       uncheckedCount++;
//     });

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

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

  a.initialise(a.Options);
};

// 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 treenode = new BBTreeviewNode(this);
  treenode.Load(node[0]);

  console.log(treenode);

  return treenode;

  // 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);
    node.Expand();
  } else if (node.Node.classList.contains("e")) {
    // a.CollapseNode(node);
    node.Collapse();
  } 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");
//     }
//   }
// };






function BBTreeviewNode(treeview)
{
  const a = this;

  a.Treeview = treeview;

  a.initialise();
};

BBTreeviewNode.prototype.Load = function(node) {
  const a = this;

  a.ID = node.getAttribute("data-bbtv-id");
  a.Node = node;

  // a.ParentNode: a.GetParentNode(node[0]);
  // a.ChildNode: a.getChildNode(node[0]);

  a.Container = node.querySelectorAll("div.li")[0];
  a.Label = node.querySelectorAll("span")[0];
  // a.Checked = a.IsChecked();
  // a.Checkbox = a.GetCheckbox();
  a.Value = node.getAttribute("data-bbtv-value");
};


BBTreeviewNode.prototype.Check = function(value) {
  const a = this;

  a.setCheckbox(a.Node, value);

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

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

      uncheckedCount++;
    });

    a.setCheckbox(a.GetParentNode(), (uncheckedCount <= 0));
  }
};

BBTreeviewNode.prototype.Collapse = function() {
  const a = this;

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

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

BBTreeviewNode.prototype.Expand = function() {
  const a = this;

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

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

BBTreeviewNode.prototype.GetCheckbox = function() {
  const a = this;

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

  const checkboxes = a.Node.querySelectorAll("div.icon.checkbox");
  if (typeof(checkboxes) == "undefined") {
    return null;
  }

  return checkboxes[0];
};

BBTreeviewNode.prototype.GetChildNode = function() {
  const a = this;

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

  return result[0];
};

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

  const childNode = a.GetChildNode();
  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;
};

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

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

BBTreeviewNode.prototype.IsChecked = function() {
  const a = this;

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

  return a.Node.classList.contains("x");
};

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

  if (a.GetParentNode() != null) {
    if (a.GetParentNode().classList.contains("e")) {
      a.GetParentNode().classList.remove("e");
    }

    if (a.GetParentNode().classList.contains("c")) {
      a.GetParentNode().classList.remove("c");
    }
  }

  a.Node.parentNode.removeChild(a.Node);
};

BBTreeviewNode.prototype.initialise = function() {
  const a = this;

  a.ID = null;
  a.ParentID = null;
  a.Name = "";
  a.Hint = "";
  a.Value = "";
  a.Icon = "folder";
  a.Checked = false;
};

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

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

BBTreeviewNode.prototype.setCheckbox = function(el, value) {
  if (value) {
    if (!el.classList.contains("x")) {
      el.classList.add("x");
    }
  } else {
    if (el.classList.contains("x")) {
      el.classList.remove("x");
    }
  }
};