Ray/literyzjs-treeview
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

Changed to SCSS

Browse Source
This commit is contained in:
Ray 2024-08-10 23:02:34 +01:00
parent f21c0e0049
commit 934e917d73
8 changed files with 887 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo-test.html
View File

@ -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>

759
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -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"
},
@ -9,4 +13,4 @@
"build": "webpack",
"watch": "webpack --watch"
}
}
}

93
src/treeview.css
View File

@ -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;
}

106
src/treeview.scss Normal file
View File

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

2
src/treeview/treeview.js
View File

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

4
src/treeview/treeviewnode.js
View File

@ -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;
}

14
webpack.config.js
View File

@ -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'
]
}
]
}
};