Initial commit

bbtreeview.css

@@ -0,0 +1,72 @@
+ul.bbtreeview {
+  background-image: url("line.png");
+  background-position: 4px 8px;
+  background-repeat: repeat-y;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 0 8px;
+}
+ul.bbtreeview ul {
+  background-image: url("line.png");
+  background-position: 4px 8px;
+  background-repeat: repeat-y;
+  list-style: none;
+  margin: 0 0 0 8px;
+  padding: 0;
+}
+ul.bbtreeview li {
+  background-position: 0px calc((1.2em - 9px)/2);
+  background-repeat: no-repeat;
+  cursor: default;
+  display: block;
+  padding-left: 14px;
+  width: 100%;
+}
+ul.bbtreeview li.c {
+  background-image: url("expand.png");
+}
+ul.bbtreeview li.e {
+  background-image: url("collapse.png");
+}
+ul.bbtreeview li.hidden {
+  display: none;
+}
+ul.bbtreeview div.li {
+  display: block;
+  height: 1.2em;
+  padding-left: 4px;
+}
+ul.bbtreeview div.li.highlighted {
+  background-color: rgb(169, 201, 249, 0.7);
+}
+ul.bbtreeview div.li > div.icon {
+  background-position: 0px center;
+  background-repeat: no-repeat;
+  display: inline-block;
+  height: 100%;
+  width: calc(16px);
+}
+ul.bbtreeview div.li > div.folder {
+  background-image: url("folder.png");
+}
+
+ul.bbtreeview li > div.li > div.checkbox {
+  background-image: url("folder.png");
+}
+ul.bbtreeview li.x > div.li > div.checkbox {
+  background-image: url("folder.png");
+}
+
+ul.bbtreeview div.li > span {
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: inline-block;
+  height: 1.2em;
+  line-height: 1.2em;
+  overflow: hidden;
+  padding-left: 6px;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  white-space: nowrap;
+}

bbtreeview.js

@@ -0,0 +1,386 @@
+/**
+ * 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);
+  });
+
+  // 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: "",
+      Icon: "folder",
+      Checked: false
+    }
+  };
+};
+
+
+BBTreeview.prototype.CollapseNode = function(node) {
+  const a = this;
+
+  node.Node.classList.remove("e");
+  node.Node.classList.add("c");
+
+  node.Items.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");
+
+  node.Items.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],
+    Items: a.getChildren(node[0])
+  };
+
+  // console.log(response);
+
+  return response;
+};
+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 + '">';
+  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.getChildren = 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.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.getParentNode = function(node) {
+  const a = this;
+
+  return a.parentsUntilTagName(node, "li");
+};
+
+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;
+};

demo-test.html

@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="content-type" content="text/html" charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="" />
+  <meta name="keyword" content="" />
+
+  <script src="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+  <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
+
+  <script src="bbtreeview.js"></script>
+  <link href="bbtreeview.css" rel="stylesheet" />
+
+  <title></title>
+</head>
+<body>
+
+<div id="treeview1"></div>
+
+
+  <script>
+
+var treeview1 = new BBTreeview({
+  ID: "#treeview1",
+  ShowCheckbox: true
+});
+
+var oldID = null;
+var newID = null;
+
+for (var i=0; i<5; i++) {
+
+newID = "F" + i;
+
+treeview1.AddItem({
+  // ID: "F" + Math.random(),
+  ID: newID,
+  ParentID: oldID,
+  Name: "Folder " + i,
+  Hint: ""
+});
+
+oldID = newID;
+
+}
+
+// treeview1.Find("F1");
+
+treeview1.AddItem({
+  ID: "F3_" + Math.random(),
+  ParentID: "F2",
+  Name: "Folder " + Math.random(),
+  Hint: ""
+});
+
+treeview1.AddItem({
+  ID: "F3_" + Math.random(),
+  ParentID: "F2",
+  Name: "Folder " + Math.random(),
+  Hint: ""
+});
+
+treeview1.AddItem({
+  ID: "F3_" + Math.random(),
+  ParentID: "F2",
+  Name: "Folder " + Math.random(),
+  Hint: ""
+});
+
+// treeview1.Remove("F2");
+
+  </script>
+
+
+</body>
+</html>

src/folder.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="currentColor"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="feather feather-folder"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="folder.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="34.666667"
+     inkscape:cx="11.985577"
+     inkscape:cy="12.014423"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="845"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
+     id="path2"
+     style="stroke:#ebc848;stroke-opacity:1;fill:#ffe999;fill-opacity:1" />
+</svg>

src/icon.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="currentColor"
+   stroke-width="2"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="feather feather-divide-square"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="icon.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="17.333333"
+     inkscape:cx="-0.60576923"
+     inkscape:cy="15.375"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="845"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <rect
+     x="2.4663463"
+     y="2.4663463"
+     width="8.3942308"
+     height="8.3942308"
+     rx="0.93269229"
+     ry="0.93269229"
+     id="rect2"
+     style="stroke:#a0a0a0;stroke-width:0.932692;stroke-opacity:1"
+     inkscape:export-filename="L:\gitea-hiimray\New folder\collapse.png"
+     inkscape:export-xdpi="96"
+     inkscape:export-ydpi="96" />
+  <line
+     x1="4.7980771"
+     y1="6.6634617"
+     x2="8.5288458"
+     y2="6.6634617"
+     id="line4"
+     style="stroke:#000000;stroke-width:0.932692;stroke-opacity:1"
+     inkscape:export-filename="L:\gitea-hiimray\New folder\collapse.png"
+     inkscape:export-xdpi="96"
+     inkscape:export-ydpi="96" />
+</svg>