Changed to SCSS

demo-test.html

@@ -12,7 +12,7 @@
 
   <!-- <link href="bbtreeview.css" rel="stylesheet" /> -->
   <!-- <link href="build/bbtreeview.min.css" rel="stylesheet" /> -->
-  <link href="src/treeview.css" rel="stylesheet" />
+  <!-- <link href="src/treeview.css" rel="stylesheet" /> -->
 
   <script src="dist/treeview.dist.js"></script>
 

package.json

@@ -2,6 +2,10 @@
   "name": "LiteRyzJS/Treeview",
   "version": "0.2.0.248",
   "devDependencies": {
+    "css-loader": "^7.1.2",
+    "sass": "^1.77.8",
+    "sass-loader": "^16.0.0",
+    "style-loader": "^4.0.0",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4"
   },

src/treeview.css

@@ -1,93 +0,0 @@
-ul.bbtreeview {
-  background-image: url("line.png");
-  background-repeat: repeat-y;
-  list-style: none;
-  padding: 0;
-  margin: 0 0 0 8px;
-}
-ul.bbtreeview ul {
-  background-image: url("line.png");
-  background-repeat: repeat-y;
-  list-style: none;
-  margin: 0 0 0 22px;
-  padding: 0;
-}
-ul.bbtreeview li {
-  background-repeat: no-repeat;
-  cursor: default;
-  display: block;
-}
-ul.bbtreeview li div.icon.expand {
-  margin-right: 2px;
-}
-
-ul.bbtreeview .c > ul {
-  display: none;
-}
-ul.bbtreeview div.li {
-  height: 1.2em;
-}
-ul.bbtreeview div.li.highlighted {
-  background-color: rgb(169, 201, 249, 0.7);
-}
-
-
-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;
-}
-
-ul.bbtreeview div.li > span.noicon {
-  padding-left: 0px !important;
-}
-
-
-
-
-ul.bbtreeview div.icon {
-  background-position-x: 0px;
-  background-repeat: no-repeat;
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-}
-
-ul.bbtreeview .c > div > div.icon.expand {
-  background-image: url("sprite.png");
-  background-position-y: -64px;
-}
-
-ul.bbtreeview .e > div > div.icon.expand {
-  background-image: url("sprite.png");
-  background-position-y: -48px;
-}
-
-ul.bbtreeview .nc > div > div.icon.expand {
-  /* background-image: none; */
-  background-image: url("sprite.png");
-  background-position-y: -80px;
-}
-
-ul.bbtreeview .o > div > div.icon.checkbox {
-  background-image: url("sprite.png");
-  background-position-y: -16px;
-}
-
-ul.bbtreeview .x > div > div.icon.checkbox {
-  background-image: url("sprite.png");
-  background-position-y: 0px;
-}
-
-ul.bbtreeview div.icon.folder {
-  background-image: url("sprite.png");
-  background-position-y: -32px;
-}

src/treeview.scss

@@ -0,0 +1,106 @@
+$highlight-colour: rgb(169, 201, 249, 0.7);
+$icon-sprite: url("sprite.png");
+$line-image: url("line.png");
+$row-height: 1.2em;
+$icon-size: 16px;
+
+
+ul.bbtreeview {
+  background-image: $line-image;
+  background-repeat: repeat-y;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 0 8px;
+
+
+  ul {
+    background-image: $line-image;
+    background-repeat: repeat-y;
+    list-style: none;
+    margin: 0 0 0 22px;
+    padding: 0;
+  }
+
+  li {
+    background-repeat: no-repeat;
+    cursor: default;
+    display: block;
+
+    div.icon.expand {
+      margin-right: 2px;
+    }
+
+  }
+
+  div.li {
+    height: $row-height;
+
+    span {
+      -webkit-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      display: inline-block;
+      height: $row-height;
+      line-height: $row-height;
+      overflow: hidden;
+      padding-left: 6px;
+      text-overflow: ellipsis;
+      vertical-align: top;
+      white-space: nowrap;
+    }
+
+    span.noicon {
+      padding-left: 0px !important;
+    }
+
+  }
+
+  div.li.highlighted {
+    background-color:$highlight-colour;
+  }
+
+  div.icon {
+    background-position-x: 0px;
+    background-repeat: no-repeat;
+    display: inline-block;
+    height: $icon-size;
+    width: $icon-size;
+  }
+
+  div.icon.folder {
+    background-image: $icon-sprite;
+    background-position-y: calc(2 * $icon-size * -1);
+  }
+
+
+  .c > ul {
+    display: none;
+  }
+
+  .c > div > div.icon.expand {
+    background-image: $icon-sprite;
+    background-position-y: calc(4 * $icon-size * -1);
+  }
+
+  .e > div > div.icon.expand {
+    background-image: $icon-sprite;
+    background-position-y: calc(3 * $icon-size * -1);
+  }
+
+  .nc > div > div.icon.expand {
+    /* background-image: none; */
+    background-image: $icon-sprite;
+    background-position-y: calc(5 * $icon-size * -1);
+  }
+
+  .o > div > div.icon.checkbox {
+    background-image: $icon-sprite;
+    background-position-y: calc(1 * $icon-size * -1);
+  }
+
+  .x > div > div.icon.checkbox {
+    background-image: $icon-sprite;
+    background-position-y: calc(0 * $icon-size * -1);
+  }
+
+}

src/treeview/treeview.js

@@ -1,5 +1,7 @@
 import TreeviewNode from './treeviewnode.js';
 
+import '../treeview.scss';
+
 
 class Treeview {
   constructor(options) {

src/treeview/treeviewnode.js

@@ -291,7 +291,7 @@ class TreeviewNode {
       e.stopPropagation();
       e.preventDefault();
 
-      const myNode = a.Treeview.getNode(e.target);
+      const myNode = a.Treeview.GetTreeNode(e.target);
       if (myNode == null) {
         return;
       }
@@ -304,7 +304,7 @@ class TreeviewNode {
       e.stopPropagation();
       e.preventDefault();
 
-      const myNode = a.Treeview.getNode(e.target);
+      const myNode = a.Treeview.GetTreeNode(e.target);
       if (myNode == null) {
         return;
       }

webpack.config.js

@@ -44,5 +44,17 @@ module.exports = {
         'process.env.VERSION': JSON.stringify(version)
     }),
     new PrependVersionPlugin()
-  ]
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      }
+    ]
+  }
 };