Mockup footer with copyright notice
This commit is contained in:
@@ -30,7 +30,7 @@ func InitHttpServer(config *viper.Viper, dbHandler *sql.DB) HttpServer {
|
|||||||
|
|
||||||
// static content
|
// static content
|
||||||
router.Static("/static", "../static")
|
router.Static("/static", "../static")
|
||||||
router.StaticFile("/", "./static/index.html")
|
router.StaticFile("/", "../static/index.html")
|
||||||
|
|
||||||
router.GET("/test", Test)
|
router.GET("/test", Test)
|
||||||
|
|
||||||
|
|||||||
@@ -1,175 +0,0 @@
|
|||||||
ul.tree, ul.tree ul {
|
|
||||||
list-style-type: none;
|
|
||||||
background: url(vline.png) repeat-y;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
padding-left: 7px;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.last {
|
|
||||||
background-image: 'url("css/lastnode.png")';
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.tree ul {
|
|
||||||
padding-left: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.tree li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 12px;
|
|
||||||
line-height: 22px;
|
|
||||||
background: url(node.png) no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.tree li.last {
|
|
||||||
background: #fff url(lastnode.png) no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.exp_col {
|
|
||||||
position: absolute;
|
|
||||||
margin-top: 4px;
|
|
||||||
margin-left: -20px;
|
|
||||||
vertical-align: sub;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.exp_col_empty {
|
|
||||||
position: absolute;
|
|
||||||
margin-top: 4px;
|
|
||||||
margin-left: -20px;
|
|
||||||
vertical-align: sub;
|
|
||||||
width: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.icon_tree {
|
|
||||||
vertical-align: middle;
|
|
||||||
padding-left: 3px;
|
|
||||||
margin-top: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.node {
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.node a {
|
|
||||||
padding-left: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.node {
|
|
||||||
margin-left: -1px;
|
|
||||||
padding-right: 3px;
|
|
||||||
|
|
||||||
padding-top: 4px;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.node:hover {
|
|
||||||
margin-left: -1px;
|
|
||||||
padding-right: 3px;
|
|
||||||
padding-top: 4px;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
background-color: #DCEDFF;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.node_selected {
|
|
||||||
margin-left: -2px;
|
|
||||||
padding-right: 3px;
|
|
||||||
|
|
||||||
padding-top: 4px;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
background-color: #CEFFCE;
|
|
||||||
border: 1px solid #8AE88A;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.node_selected a {
|
|
||||||
padding-left: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu,.sub-menu {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font: 10px Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu,
|
|
||||||
.sub-menu {
|
|
||||||
list-style: none;
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
.sub-menu {
|
|
||||||
background: #F1F1F1;
|
|
||||||
}
|
|
||||||
.menu a {
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu span {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu div {
|
|
||||||
position: absolute;
|
|
||||||
right: 4px;
|
|
||||||
top: 0px;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu .menu_img {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu img {
|
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: sub;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
.menu li {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu li:hover {
|
|
||||||
background: aquamarine;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sub-menu li:hover {
|
|
||||||
background: aquamarine;
|
|
||||||
}
|
|
||||||
.menu li:hover > .sub-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
width: 150px;
|
|
||||||
position: absolute;
|
|
||||||
background: #F1F1F1;
|
|
||||||
-webkit-user-select: none; /* Chrome/Safari */
|
|
||||||
-moz-user-select: none; /* Firefox */
|
|
||||||
-ms-user-select: none; /* IE10+ */
|
|
||||||
cursor: default;
|
|
||||||
box-shadow: 2px 2px 3px #BDBDBD;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.sub-menu {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
min-width: 150px;
|
|
||||||
box-shadow: 2px 2px 3px #BDBDBD;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu .sub-menu {
|
|
||||||
top: 0;
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans;
|
|
||||||
}
|
|
||||||
|
|
||||||
#div_tree {
|
|
||||||
font: 10px Verdana, sans-serif;
|
|
||||||
display: inline-block;
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#div_log {
|
|
||||||
width: 400px;
|
|
||||||
height: 400px;
|
|
||||||
overflow: scroll;
|
|
||||||
padding:10px;
|
|
||||||
vertical-align: top;
|
|
||||||
display: inline-block;
|
|
||||||
border: 1px solid gray;
|
|
||||||
font: 10px Verdana, sans-serif;
|
|
||||||
line-height: 16px;
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 993 B |
Binary file not shown.
|
Before Width: | Height: | Size: 950 B |
Binary file not shown.
|
Before Width: | Height: | Size: 939 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 838 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 679 B |
Binary file not shown.
|
Before Width: | Height: | Size: 297 B |
Binary file not shown.
|
Before Width: | Height: | Size: 879 B |
Binary file not shown.
|
Before Width: | Height: | Size: 301 B |
Binary file not shown.
|
Before Width: | Height: | Size: 707 B |
Binary file not shown.
|
Before Width: | Height: | Size: 406 B |
Binary file not shown.
|
Before Width: | Height: | Size: 491 B |
Binary file not shown.
|
Before Width: | Height: | Size: 573 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 963 B |
Binary file not shown.
|
Before Width: | Height: | Size: 755 B |
Binary file not shown.
|
Before Width: | Height: | Size: 716 B |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -8,102 +8,99 @@
|
|||||||
<title>X-CPQ by Simply CPQ</title>
|
<title>X-CPQ by Simply CPQ</title>
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="icon" type="image/x-icon" href="/static/images/SimplyCPQ_Logo.svg" />
|
||||||
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
|
<link href="/static/css/daisyui.css" rel="stylesheet" type="text/css" />
|
||||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||||
|
<script src="/static/js/index.global.js"></script>
|
||||||
|
<script src="/static/js/htmx.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="max-w-10xl mx-auto">
|
<div class="max-w-10xl min-h-screen">
|
||||||
<section id="nacigation">
|
<header>
|
||||||
<div class="navbar bg-base-100 shadow-sm rounded-box">
|
<nav>
|
||||||
<div class="flex-1">
|
<div class="navbar bg-base-300 shadow-sm rounded-box">
|
||||||
<a class="btn btn-ghost text-xl">X-CPQ by Simply CPQ 2026 Material Editor</a>
|
<div class="navbar-start">
|
||||||
</div>
|
<div class="flex-none">
|
||||||
<div class="flex-none">
|
<img src="/static/images/SimplyCPQ_Logo.svg" class="w-10 rounded-30" />
|
||||||
<ul class="menu menu-horizontal px-1">
|
</div>
|
||||||
<li><a>Properties</a></li>
|
<div class="flex-1">
|
||||||
<li><a>Products</a></li>
|
<a class="btn btn-ghost text-xl">X-CPQ by Simply CPQ 2026 Material Editor</a>
|
||||||
<li><a>Conditions</a></li>
|
</div>
|
||||||
<li><a>Translations</a></li>
|
</div>
|
||||||
<li><a>Imports</a></li>
|
<div class="navbar-center">
|
||||||
</ul>
|
<ul class="menu menu-horizontal px-1">
|
||||||
|
<li><a class="link link-hover">Eigenschaften</a></li>
|
||||||
<label class="swap swap-rotate">
|
<li><a class="link link-hover">Produkte</a></li>
|
||||||
<!-- this hidden checkbox controls the state -->
|
<li><a class="link link-hover">Preiskonditionen</a></li>
|
||||||
<input type="checkbox" class="theme-controller" value="business" />
|
<li><a class="link link-hover">Übersetzungen</a></li>
|
||||||
|
<li><a class="link link-hover">Importe</a></li>
|
||||||
<!-- sun icon -->
|
|
||||||
<svg class="swap-off h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24">
|
|
||||||
<path
|
|
||||||
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<!-- moon icon -->
|
|
||||||
<svg class="swap-on h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24">
|
|
||||||
<path
|
|
||||||
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
|
|
||||||
</svg>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="tabs" >
|
|
||||||
<div flex-col lg:flex-row ml-16>
|
|
||||||
<div class="tabs tabs-boxed">
|
|
||||||
<a class="tab tab-active">Properties</a>
|
|
||||||
<a class="tab">Products</a>
|
|
||||||
<a class="tab">Conditions</a>
|
|
||||||
<a class="tab">Translations</a>
|
|
||||||
<a class="tab">Imports</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="content">
|
|
||||||
|
|
||||||
<div class="hero bg-base-200 min-h-screen mt-2 rounded-box">
|
|
||||||
<div class="hero-content flex-col lg:flex-row">
|
|
||||||
|
|
||||||
<div class="breadcrumbs max-w-xs text-sm">
|
|
||||||
<ul>
|
|
||||||
<li>Long text 1</li>
|
|
||||||
<li>Long text 2</li>
|
|
||||||
<li>Long text 3</li>
|
|
||||||
<li>Long text 4</li>
|
|
||||||
<li>Long text 5</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="navbar-end">
|
||||||
|
<div class="avatar">
|
||||||
|
<div class="w-10 rounded-full">
|
||||||
|
<img alt="angemeldeter User" src="/static/images/users/tsindt.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<img alt="Tailwind CSS hero component"
|
<label class="swap swap-rotate ml-4">
|
||||||
src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
|
<!-- this hidden checkbox controls the state -->
|
||||||
class="max-w-sm rounded-lg shadow-2xl" />
|
<input type="checkbox" class="theme-controller" value="business" />
|
||||||
<div>
|
|
||||||
<h1 class="text-5xl font-bold">Box Office News!</h1>
|
<!-- sun icon -->
|
||||||
<p class="py-6">
|
<svg class="swap-off h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg"
|
||||||
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
|
viewBox="0 0 24 24">
|
||||||
quasi. In deleniti eaque aut repudiandae et a id nisi.
|
<path
|
||||||
</p>
|
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
|
||||||
<button class="btn btn-primary">Get Started</button>
|
</svg>
|
||||||
|
|
||||||
|
<!-- moon icon -->
|
||||||
|
<svg class="swap-on h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="gap-2 p-2 bg-base-200 shadow-sm rounded-box mt-5">
|
||||||
|
<div id="main-content">
|
||||||
|
<div class="flex flex-col md:flex-row">
|
||||||
|
<aside>
|
||||||
|
<div>
|
||||||
|
<img src="/static/images/SimplyCPQ_Logo.svg" class="w-10 rounded-30" />
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<article>
|
||||||
|
<div class="ml-4">
|
||||||
|
<div id="content">
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Willkommen zum X-CPQ Material Editor</h1>
|
||||||
|
<p>Hier können Sie Ihre Materialien und Produkte konfigurieren und verwalten.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</main>
|
||||||
|
|
||||||
<section id="footer">
|
<footer class="footer sm:footer-horizontal footer-center bg-base-300 text-base-content p-4 mt-5 shadow-sm rounded-box">
|
||||||
<footer class="footer sm:footer-horizontal footer-center bg-base-300 text-base-content p-4 mt-10 rounded-box">
|
<aside>
|
||||||
<aside>
|
<p>Copyright © 2026 - All right reserved by Simply CPQ/p>
|
||||||
<p>X-CPQ Copyright © 2026 - All right reserved by Simply CPQ</p>
|
</aside>
|
||||||
</aside>
|
</footer>
|
||||||
</footer>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,510 +0,0 @@
|
|||||||
///// Creating the tree component
|
|
||||||
// p_div: ID of the div where the tree will be rendered;
|
|
||||||
// p_backColor: Background color of the region where the tree is being rendered;
|
|
||||||
// p_contextMenu: Object containing all the context menus. Set null for no context menu;
|
|
||||||
function createTree(p_div,p_backColor,p_contextMenu) {
|
|
||||||
var tree = {
|
|
||||||
name: 'tree',
|
|
||||||
div: p_div,
|
|
||||||
ulElement: null,
|
|
||||||
childNodes: [],
|
|
||||||
backcolor: p_backColor,
|
|
||||||
contextMenu: p_contextMenu,
|
|
||||||
selectedNode: null,
|
|
||||||
nodeCounter: 0,
|
|
||||||
contextMenuDiv: null,
|
|
||||||
rendered: false,
|
|
||||||
///// Creating a new node
|
|
||||||
// p_text: Text displayed on the node;
|
|
||||||
// p_expanded: True or false, indicating wether the node starts expanded or not;
|
|
||||||
// p_icon: Relative path to the icon displayed with the node. Set null if the node has no icon;
|
|
||||||
// p_parentNode: Reference to the parent node. Set null to create the node on the root;
|
|
||||||
// p_tag: Tag is used to store additional information on the node. All node attributes are visible when programming events and context menu actions;
|
|
||||||
// p_contextmenu: Name of the context menu, which is one of the attributes of the p_contextMenu object created with the tree;
|
|
||||||
createNode: function(p_text,p_expanded, p_icon, p_parentNode,p_tag,p_contextmenu) {
|
|
||||||
v_tree = this;
|
|
||||||
node = {
|
|
||||||
id: 'node_' + this.nodeCounter,
|
|
||||||
text: p_text,
|
|
||||||
icon: p_icon,
|
|
||||||
parent: p_parentNode,
|
|
||||||
expanded : p_expanded,
|
|
||||||
childNodes : [],
|
|
||||||
tag : p_tag,
|
|
||||||
contextMenu: p_contextmenu,
|
|
||||||
elementLi: null,
|
|
||||||
///// Removing the node and all its children
|
|
||||||
removeNode: function() { v_tree.removeNode(this); },
|
|
||||||
///// Expanding or collapsing the node, depending on the expanded value
|
|
||||||
toggleNode: function(p_event) { v_tree.toggleNode(this); },
|
|
||||||
///// Expanding the node
|
|
||||||
expandNode: function(p_event) { v_tree.expandNode(this); },
|
|
||||||
///// Expanding the node and its children recursively
|
|
||||||
expandSubtree: function() { v_tree.expandSubtree(this); },
|
|
||||||
///// Changing the node text
|
|
||||||
// p_text: New text;
|
|
||||||
setText: function(p_text) { v_tree.setText(this,p_text); },
|
|
||||||
///// Collapsing the node
|
|
||||||
collapseNode: function() { v_tree.collapseNode(this); },
|
|
||||||
///// Collapsing the node and its children recursively
|
|
||||||
collapseSubtree: function() { v_tree.collapseSubtree(this); },
|
|
||||||
///// Deleting all child nodes
|
|
||||||
removeChildNodes: function() { v_tree.removeChildNodes(this); },
|
|
||||||
///// Creating a new child node;
|
|
||||||
// p_text: Text displayed;
|
|
||||||
// p_expanded: True or false, indicating wether the node starts expanded or not;
|
|
||||||
// p_icon: Icon;
|
|
||||||
// p_tag: Tag;
|
|
||||||
// p_contextmenu: Context Menu;
|
|
||||||
createChildNode: function(p_text,p_expanded,p_icon,p_tag,p_contextmenu) { return v_tree.createNode(p_text,p_expanded,p_icon,this,p_tag,p_contextmenu); }
|
|
||||||
}
|
|
||||||
|
|
||||||
this.nodeCounter++;
|
|
||||||
|
|
||||||
if (this.rendered) {
|
|
||||||
if (p_parentNode==undefined) {
|
|
||||||
this.drawNode(this.ulElement,node);
|
|
||||||
this.adjustLines(this.ulElement,false);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
var v_ul = p_parentNode.elementLi.getElementsByTagName("ul")[0];
|
|
||||||
if (p_parentNode.childNodes.length==0) {
|
|
||||||
if (p_parentNode.expanded) {
|
|
||||||
p_parentNode.elementLi.getElementsByTagName("ul")[0].style.display = 'block';
|
|
||||||
v_img = p_parentNode.elementLi.getElementsByTagName("img")[0];
|
|
||||||
v_img.style.visibility = "visible";
|
|
||||||
v_img.src = 'images/collapse.png';
|
|
||||||
v_img.id = 'toggle_off';
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
p_parentNode.elementLi.getElementsByTagName("ul")[0].style.display = 'none';
|
|
||||||
v_img = p_parentNode.elementLi.getElementsByTagName("img")[0];
|
|
||||||
v_img.style.visibility = "visible";
|
|
||||||
v_img.src = 'images/expand.png';
|
|
||||||
v_img.id = 'toggle_on';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.drawNode(v_ul,node);
|
|
||||||
this.adjustLines(v_ul,false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (p_parentNode==undefined) {
|
|
||||||
this.childNodes.push(node);
|
|
||||||
node.parent=this;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
p_parentNode.childNodes.push(node);
|
|
||||||
|
|
||||||
return node;
|
|
||||||
},
|
|
||||||
///// Render the tree;
|
|
||||||
drawTree: function() {
|
|
||||||
|
|
||||||
this.rendered = true;
|
|
||||||
|
|
||||||
var div_tree = document.getElementById(this.div);
|
|
||||||
div_tree.innerHTML = '';
|
|
||||||
|
|
||||||
ulElement = createSimpleElement('ul',this.name,'tree');
|
|
||||||
this.ulElement = ulElement;
|
|
||||||
|
|
||||||
for (var i=0; i<this.childNodes.length; i++) {
|
|
||||||
this.drawNode(ulElement,this.childNodes[i]);
|
|
||||||
}
|
|
||||||
|
|
||||||
div_tree.appendChild(ulElement);
|
|
||||||
|
|
||||||
this.adjustLines(document.getElementById(this.name),true);
|
|
||||||
|
|
||||||
},
|
|
||||||
///// Drawing the node. This function is used when drawing the Tree and should not be called directly;
|
|
||||||
// p_ulElement: Reference to the UL tag element where the node should be created;
|
|
||||||
// p_node: Reference to the node object;
|
|
||||||
drawNode: function(p_ulElement,p_node) {
|
|
||||||
|
|
||||||
v_tree = this;
|
|
||||||
|
|
||||||
var v_icon = null;
|
|
||||||
|
|
||||||
if (p_node.icon!=null)
|
|
||||||
v_icon = createImgElement(null,'icon_tree',p_node.icon);
|
|
||||||
|
|
||||||
var v_li = document.createElement('li');
|
|
||||||
p_node.elementLi = v_li;
|
|
||||||
|
|
||||||
var v_span = createSimpleElement('span',null,'node');
|
|
||||||
|
|
||||||
var v_exp_col = null;
|
|
||||||
|
|
||||||
if (p_node.childNodes.length == 0) {
|
|
||||||
v_exp_col = createImgElement('toggle_off','exp_col','images/collapse.png');
|
|
||||||
v_exp_col.style.visibility = "hidden";
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if (p_node.expanded) {
|
|
||||||
v_exp_col = createImgElement('toggle_off','exp_col','images/collapse.png');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
v_exp_col = createImgElement('toggle_on','exp_col','images/expand.png');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
v_span.ondblclick = function() {
|
|
||||||
v_tree.doubleClickNode(p_node);
|
|
||||||
};
|
|
||||||
|
|
||||||
v_exp_col.onclick = function() {
|
|
||||||
v_tree.toggleNode(p_node);
|
|
||||||
};
|
|
||||||
|
|
||||||
v_span.onclick = function() {
|
|
||||||
v_tree.selectNode(p_node);
|
|
||||||
};
|
|
||||||
|
|
||||||
v_span.oncontextmenu = function(e) {
|
|
||||||
v_tree.selectNode(p_node);
|
|
||||||
v_tree.nodeContextMenu(e,p_node);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (v_icon!=undefined)
|
|
||||||
v_span.appendChild(v_icon);
|
|
||||||
|
|
||||||
v_a = createSimpleElement('a',null,null);
|
|
||||||
v_a.innerHTML=p_node.text;
|
|
||||||
v_span.appendChild(v_a);
|
|
||||||
v_li.appendChild(v_exp_col);
|
|
||||||
v_li.appendChild(v_span);
|
|
||||||
|
|
||||||
p_ulElement.appendChild(v_li);
|
|
||||||
|
|
||||||
var v_ul = createSimpleElement('ul','ul_' + p_node.id,null);
|
|
||||||
v_li.appendChild(v_ul);
|
|
||||||
|
|
||||||
if (p_node.childNodes.length > 0) {
|
|
||||||
|
|
||||||
if (!p_node.expanded)
|
|
||||||
v_ul.style.display = 'none';
|
|
||||||
|
|
||||||
for (var i=0; i<p_node.childNodes.length; i++) {
|
|
||||||
this.drawNode(v_ul,p_node.childNodes[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
///// Changing node text
|
|
||||||
// p_node: Reference to the node that will have its text updated;
|
|
||||||
// p_text: New text;
|
|
||||||
setText: function(p_node,p_text) {
|
|
||||||
p_node.elementLi.getElementsByTagName('span')[0].lastChild.innerHTML = p_text;
|
|
||||||
p_node.text = p_text;
|
|
||||||
},
|
|
||||||
///// Expanding all tree nodes
|
|
||||||
expandTree: function() {
|
|
||||||
for (var i=0; i<this.childNodes.length; i++) {
|
|
||||||
if (this.childNodes[i].childNodes.length>0) {
|
|
||||||
this.expandSubtree(this.childNodes[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
///// Expanding all nodes inside the subtree that have parameter 'p_node' as root
|
|
||||||
// p_node: Subtree root;
|
|
||||||
expandSubtree: function(p_node) {
|
|
||||||
this.expandNode(p_node);
|
|
||||||
for (var i=0; i<p_node.childNodes.length; i++) {
|
|
||||||
if (p_node.childNodes[i].childNodes.length>0) {
|
|
||||||
this.expandSubtree(p_node.childNodes[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
///// Collapsing all tree nodes
|
|
||||||
collapseTree: function() {
|
|
||||||
for (var i=0; i<this.childNodes.length; i++) {
|
|
||||||
if (this.childNodes[i].childNodes.length>0) {
|
|
||||||
this.collapseSubtree(this.childNodes[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
///// Collapsing all nodes inside the subtree that have parameter 'p_node' as root
|
|
||||||
// p_node: Subtree root;
|
|
||||||
collapseSubtree: function(p_node) {
|
|
||||||
this.collapseNode(p_node);
|
|
||||||
for (var i=0; i<p_node.childNodes.length; i++) {
|
|
||||||
if (p_node.childNodes[i].childNodes.length>0) {
|
|
||||||
this.collapseSubtree(p_node.childNodes[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
///// Expanding node
|
|
||||||
// p_node: Reference to the node;
|
|
||||||
expandNode: function(p_node) {
|
|
||||||
if (p_node.childNodes.length>0 && p_node.expanded==false) {
|
|
||||||
if (this.nodeBeforeOpenEvent!=undefined)
|
|
||||||
this.nodeBeforeOpenEvent(p_node);
|
|
||||||
|
|
||||||
var img=p_node.elementLi.getElementsByTagName("img")[0];
|
|
||||||
|
|
||||||
p_node.expanded = true;
|
|
||||||
|
|
||||||
img.id="toggle_off";
|
|
||||||
img.src = 'images/collapse.png';
|
|
||||||
elem_ul = img.parentElement.getElementsByTagName("ul")[0];
|
|
||||||
elem_ul.style.display = 'block';
|
|
||||||
|
|
||||||
if (this.nodeAfterOpenEvent!=undefined)
|
|
||||||
this.nodeAfterOpenEvent(p_node);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
///// Collapsing node
|
|
||||||
// p_node: Reference to the node;
|
|
||||||
collapseNode: function(p_node) {
|
|
||||||
if (p_node.childNodes.length>0 && p_node.expanded==true) {
|
|
||||||
var img=p_node.elementLi.getElementsByTagName("img")[0];
|
|
||||||
|
|
||||||
p_node.expanded = false;
|
|
||||||
if (this.nodeBeforeCloseEvent!=undefined)
|
|
||||||
this.nodeBeforeCloseEvent(p_node);
|
|
||||||
|
|
||||||
img.id="toggle_on";
|
|
||||||
img.src = 'images/expand.png';
|
|
||||||
elem_ul = img.parentElement.getElementsByTagName("ul")[0];
|
|
||||||
elem_ul.style.display = 'none';
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
///// Toggling node
|
|
||||||
// p_node: Reference to the node;
|
|
||||||
toggleNode: function(p_node) {
|
|
||||||
if (p_node.childNodes.length>0) {
|
|
||||||
if (p_node.expanded)
|
|
||||||
p_node.collapseNode();
|
|
||||||
else
|
|
||||||
p_node.expandNode();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
///// Double clicking node
|
|
||||||
// p_node: Reference to the node;
|
|
||||||
doubleClickNode: function(p_node) {
|
|
||||||
this.toggleNode(p_node);
|
|
||||||
},
|
|
||||||
///// Selecting node
|
|
||||||
// p_node: Reference to the node;
|
|
||||||
selectNode: function(p_node) {
|
|
||||||
var span = p_node.elementLi.getElementsByTagName("span")[0];
|
|
||||||
span.className = 'node_selected';
|
|
||||||
if (this.selectedNode!=null && this.selectedNode!=p_node)
|
|
||||||
this.selectedNode.elementLi.getElementsByTagName("span")[0].className = 'node';
|
|
||||||
this.selectedNode = p_node;
|
|
||||||
},
|
|
||||||
///// Deleting node
|
|
||||||
// p_node: Reference to the node;
|
|
||||||
removeNode: function(p_node) {
|
|
||||||
var index = p_node.parent.childNodes.indexOf(p_node);
|
|
||||||
|
|
||||||
if (p_node.elementLi.className=="last" && index!=0) {
|
|
||||||
p_node.parent.childNodes[index-1].elementLi.className += "last";
|
|
||||||
p_node.parent.childNodes[index-1].elementLi.style.backgroundColor = this.backcolor;
|
|
||||||
}
|
|
||||||
|
|
||||||
p_node.elementLi.parentNode.removeChild(p_node.elementLi);
|
|
||||||
p_node.parent.childNodes.splice(index, 1);
|
|
||||||
|
|
||||||
if (p_node.parent.childNodes.length==0) {
|
|
||||||
var v_img = p_node.parent.elementLi.getElementsByTagName("img")[0];
|
|
||||||
v_img.style.visibility = "hidden";
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
///// Deleting all node children
|
|
||||||
// p_node: Reference to the node;
|
|
||||||
removeChildNodes: function(p_node) {
|
|
||||||
|
|
||||||
if (p_node.childNodes.length>0) {
|
|
||||||
var v_ul = p_node.elementLi.getElementsByTagName("ul")[0];
|
|
||||||
|
|
||||||
var v_img = p_node.elementLi.getElementsByTagName("img")[0];
|
|
||||||
v_img.style.visibility = "hidden";
|
|
||||||
|
|
||||||
p_node.childNodes = [];
|
|
||||||
v_ul.innerHTML = "";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
///// Rendering context menu when mouse right button is pressed over a node. This function should no be called directly
|
|
||||||
// p_event: Event triggered when right clicking;
|
|
||||||
// p_node: Reference to the node;
|
|
||||||
nodeContextMenu: function(p_event,p_node) {
|
|
||||||
if (p_event.button==2) {
|
|
||||||
p_event.preventDefault();
|
|
||||||
p_event.stopPropagation();
|
|
||||||
if (p_node.contextMenu!=undefined) {
|
|
||||||
|
|
||||||
v_tree = this;
|
|
||||||
|
|
||||||
var v_menu = this.contextMenu[p_node.contextMenu];
|
|
||||||
|
|
||||||
var v_div;
|
|
||||||
if (this.contextMenuDiv==null) {
|
|
||||||
v_div = createSimpleElement('ul','ul_cm','menu');
|
|
||||||
document.body.appendChild(v_div);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
v_div = this.contextMenuDiv;
|
|
||||||
|
|
||||||
v_div.innerHTML = '';
|
|
||||||
|
|
||||||
var v_left = p_event.pageX-5;
|
|
||||||
var v_right = p_event.pageY-5;
|
|
||||||
|
|
||||||
v_div.style.display = 'block';
|
|
||||||
v_div.style.position = 'absolute';
|
|
||||||
v_div.style.left = v_left + 'px';
|
|
||||||
v_div.style.top = v_right + 'px';
|
|
||||||
|
|
||||||
for (var i=0; i<v_menu.elements.length; i++) (function(i){
|
|
||||||
|
|
||||||
var v_li = createSimpleElement('li',null,null);
|
|
||||||
|
|
||||||
var v_span = createSimpleElement('span',null,null);
|
|
||||||
v_span.onclick = function () { v_menu.elements[i].action(p_node) };
|
|
||||||
|
|
||||||
var v_a = createSimpleElement('a',null,null);
|
|
||||||
var v_ul = createSimpleElement('ul',null,'sub-menu');
|
|
||||||
|
|
||||||
v_a.appendChild(document.createTextNode(v_menu.elements[i].text));
|
|
||||||
|
|
||||||
v_li.appendChild(v_span);
|
|
||||||
|
|
||||||
if (v_menu.elements[i].icon!=undefined) {
|
|
||||||
var v_img = createImgElement('null','null',v_menu.elements[i].icon);
|
|
||||||
v_li.appendChild(v_img);
|
|
||||||
}
|
|
||||||
|
|
||||||
v_li.appendChild(v_a);
|
|
||||||
v_li.appendChild(v_ul);
|
|
||||||
v_div.appendChild(v_li);
|
|
||||||
|
|
||||||
if (v_menu.elements[i].submenu!=undefined) {
|
|
||||||
var v_span_more = createSimpleElement('div',null,null);
|
|
||||||
v_span_more.appendChild(createImgElement(null,'menu_img','images/right.png'));
|
|
||||||
v_li.appendChild(v_span_more);
|
|
||||||
v_tree.contextMenuLi(v_menu.elements[i].submenu,v_ul,p_node);
|
|
||||||
}
|
|
||||||
|
|
||||||
})(i);
|
|
||||||
|
|
||||||
this.contextMenuDiv = v_div;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
///// Recursive function called when rendering context menu submenus. This function should no be called directly
|
|
||||||
// p_submenu: Reference to the submenu object;
|
|
||||||
// p_ul: Reference to the UL tag;
|
|
||||||
// p_node: Reference to the node;
|
|
||||||
contextMenuLi : function(p_submenu,p_ul,p_node) {
|
|
||||||
|
|
||||||
v_tree = this;
|
|
||||||
|
|
||||||
for (var i=0; i<p_submenu.elements.length; i++) (function(i){
|
|
||||||
|
|
||||||
var v_li = createSimpleElement('li',null,null);
|
|
||||||
|
|
||||||
var v_span = createSimpleElement('span',null,null);
|
|
||||||
v_span.onclick = function () { p_submenu.elements[i].action(p_node) };
|
|
||||||
|
|
||||||
var v_a = createSimpleElement('a',null,null);
|
|
||||||
var v_ul = createSimpleElement('ul',null,'sub-menu');
|
|
||||||
|
|
||||||
v_a.appendChild(document.createTextNode(p_submenu.elements[i].text));
|
|
||||||
|
|
||||||
v_li.appendChild(v_span);
|
|
||||||
|
|
||||||
if (p_submenu.elements[i].icon!=undefined) {
|
|
||||||
var v_img = createImgElement('null','null',p_submenu.elements[i].icon);
|
|
||||||
v_li.appendChild(v_img);
|
|
||||||
}
|
|
||||||
|
|
||||||
v_li.appendChild(v_a);
|
|
||||||
v_li.appendChild(v_ul);
|
|
||||||
p_ul.appendChild(v_li);
|
|
||||||
|
|
||||||
if (p_submenu.elements[i].p_submenu!=undefined) {
|
|
||||||
var v_span_more = createSimpleElement('div',null,null);
|
|
||||||
v_span_more.appendChild(createImgElement(null,'menu_img','images/right.png'));
|
|
||||||
v_li.appendChild(v_span_more);
|
|
||||||
v_tree.contextMenuLi(p_submenu.elements[i].p_submenu,v_ul,p_node);
|
|
||||||
}
|
|
||||||
|
|
||||||
})(i);
|
|
||||||
},
|
|
||||||
///// Adjusting tree dotted lines. This function should not be called directly
|
|
||||||
// p_node: Reference to the node;
|
|
||||||
adjustLines: function(p_ul,p_recursive) {
|
|
||||||
var tree = p_ul;
|
|
||||||
|
|
||||||
var lists = [];
|
|
||||||
|
|
||||||
if (tree.childNodes.length>0) {
|
|
||||||
lists = [ tree ];
|
|
||||||
|
|
||||||
if (p_recursive) {
|
|
||||||
for (var i = 0; i < tree.getElementsByTagName("ul").length; i++) {
|
|
||||||
var check_ul = tree.getElementsByTagName("ul")[i];
|
|
||||||
if (check_ul.childNodes.length!=0)
|
|
||||||
lists[lists.length] = check_ul;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var i = 0; i < lists.length; i++) {
|
|
||||||
var item = lists[i].lastChild;
|
|
||||||
|
|
||||||
while (!item.tagName || item.tagName.toLowerCase() != "li") {
|
|
||||||
item = item.previousSibling;
|
|
||||||
}
|
|
||||||
|
|
||||||
item.className += "last";
|
|
||||||
item.style.backgroundColor = this.backcolor;
|
|
||||||
|
|
||||||
item = item.previousSibling;
|
|
||||||
|
|
||||||
if (item!=null)
|
|
||||||
if (item.tagName.toLowerCase() == "li") {
|
|
||||||
item.className = "";
|
|
||||||
item.style.backgroundColor = 'transparent';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.onclick = function() {
|
|
||||||
if (tree.contextMenuDiv!=null)
|
|
||||||
tree.contextMenuDiv.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
return tree;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper Functions
|
|
||||||
|
|
||||||
//Create a HTML element specified by parameter 'p_type'
|
|
||||||
function createSimpleElement(p_type,p_id,p_class) {
|
|
||||||
element = document.createElement(p_type);
|
|
||||||
if (p_id!=undefined)
|
|
||||||
element.id = p_id;
|
|
||||||
if (p_class!=undefined)
|
|
||||||
element.className = p_class;
|
|
||||||
return element;
|
|
||||||
}
|
|
||||||
|
|
||||||
//Create img element
|
|
||||||
function createImgElement(p_id,p_class,p_src) {
|
|
||||||
element = document.createElement('img');
|
|
||||||
if (p_id!=undefined)
|
|
||||||
element.id = p_id;
|
|
||||||
if (p_class!=undefined)
|
|
||||||
element.className = p_class;
|
|
||||||
if (p_src!=undefined)
|
|
||||||
element.src = p_src;
|
|
||||||
return element;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user