|
45 | 45 | padding: 0; |
46 | 46 | width: 100%; |
47 | 47 | } |
48 | | - .tree a { |
49 | | - text-decoration: none; |
50 | | - display: block; |
| 48 | + .tree .tree-inner { |
| 49 | + width:100%; |
51 | 50 | padding: 5px 7px; |
52 | 51 | border-radius: 6px; |
53 | 52 | color: #313131; |
| 53 | + cursor:pointer; |
| 54 | +
|
| 55 | + -webkit-box-sizing: border-box; |
| 56 | + -moz-box-sizing: border-box; |
| 57 | + box-sizing: border-box; |
| 58 | + } |
| 59 | + .tree a { |
| 60 | + text-decoration: none; |
| 61 | + } |
| 62 | + .tree button { |
| 63 | + width:10px; |
| 64 | + height:10px; |
| 65 | + background: none; |
| 66 | + border: none; |
54 | 67 | } |
55 | | - .tree ul ul a { |
| 68 | + .tree ul ul .tree-inner { |
56 | 69 | padding-left: 22px; |
57 | 70 | } |
58 | | - .tree ul ul ul a { |
| 71 | + .tree ul ul ul .tree-inner { |
59 | 72 | padding-left: 37px; |
60 | 73 | } |
61 | | - .tree ul ul ul ul a { |
| 74 | + .tree ul ul ul ul .tree-inner { |
62 | 75 | padding-left: 52px; |
63 | 76 | } |
64 | | - .tree ul ul ul ul ul a { |
| 77 | + .tree ul ul ul ul ul .tree-inner { |
65 | 78 | padding-left: 67px; |
66 | 79 | } |
67 | | - .tree a:hover { |
| 80 | + .tree .tree-inner:hover { |
68 | 81 | background: #dfdfdf; |
69 | 82 | } |
70 | | - .tree a.active, a.active:hover { |
| 83 | + .tree .tree-inner.active, .tree .tree-inner.active:hover { |
71 | 84 | background: #dfdfdf; |
72 | 85 | font-weight: bold; |
73 | 86 | color: #313131; |
|
107 | 120 | {% endif %} |
108 | 121 |
|
109 | 122 | <script> |
| 123 | + function TreeView(tree) { |
| 124 | + this.collapseAll = function () { |
| 125 | + var children = tree.querySelectorAll('ul'); |
| 126 | +
|
| 127 | + for (var i = 0, l = children.length; i < l; i++) { |
| 128 | + if (children[i].style.display != 'none') { |
| 129 | + children[i].style.display = 'none'; |
| 130 | + } else { |
| 131 | + children[i].style.display = 'block'; |
| 132 | + } |
| 133 | + } |
| 134 | + }; |
| 135 | +
|
| 136 | + this.expand = function (element) { |
| 137 | + element.style.display = 'block'; |
| 138 | + }; |
| 139 | +
|
| 140 | + this.collapse = function (element) { |
| 141 | + element.style.display = 'none'; |
| 142 | + }; |
| 143 | +
|
| 144 | + this.toggle = function (element) { |
| 145 | + if (element.style.display !== 'none') { |
| 146 | + this.collapse(element); |
| 147 | +
|
| 148 | + return 'collapse'; |
| 149 | + } |
| 150 | +
|
| 151 | + this.expand(element); |
| 152 | +
|
| 153 | + return 'expand'; |
| 154 | + } |
| 155 | + } |
| 156 | +
|
| 157 | + var tree = document.querySelector('.tree ul'); |
| 158 | +
|
| 159 | + var treeView = new TreeView(tree); |
| 160 | + treeView.collapseAll(); |
| 161 | + treeView.expand(document.querySelector('.tree ul ul')); |
| 162 | +
|
| 163 | + var buttons = tree.querySelectorAll('button'); |
| 164 | + for (var j = 0, l = buttons.length; j < l; j++) { |
| 165 | + buttons[j].addEventListener('click', function (e) { |
| 166 | + if ('collapse' === treeView.toggle(this.parentElement.parentElement.querySelector('ul'))) { |
| 167 | + this.textContent = '+'; |
| 168 | + } else { |
| 169 | + this.textContent = '-'; |
| 170 | + } |
| 171 | + }, false); |
| 172 | + } |
| 173 | +
|
110 | 174 | function TabView() { |
111 | 175 | var _activeLink = null, |
112 | 176 | _activeView = null; |
113 | 177 |
|
114 | 178 | this.init = function () { |
115 | | - var links = document.querySelectorAll('.tree a'), |
| 179 | + var links = document.querySelectorAll('.tree .tree-inner'), |
116 | 180 | views = document.querySelectorAll('.tree-details'), |
117 | 181 | i, |
118 | 182 | l; |
|
122 | 186 |
D631
var link = links[i]; |
123 | 187 |
|
124 | 188 | link.addEventListener('click', function (e) { |
125 | | - var href = link.getAttribute('href'), |
126 | | - targetId = href.substr(href.indexOf('#') + 1), |
| 189 | + var targetId = 'details_' + link.dataset.targetId, |
127 | 190 | view = document.getElementById(targetId); |
128 | 191 |
|
129 | 192 | if (view) { |
|
173 | 236 |
|
174 | 237 | {% macro form_tree_entry(name, data) %} |
175 | 238 | <li> |
176 | | - <a href="#details_{{ data.id }}">{{ name }}</a> |
| 239 | + <div class="tree-inner" data-target-id="{{ data.id }}"> |
| 240 | + {% if data.children is not empty %} |
| 241 | + <button>+</button> |
| 242 | + {% endif %} |
| 243 | + {{ name }} |
| 244 | + </div> |
177 | 245 |
|
178 | 246 | {% if data.children is not empty %} |
179 | 247 | <ul> |
|
0 commit comments