Revision 2ed89b85
Added by Andreas Kohlbecker about 3 years ago
modules/cdm_dataportal/js/derivation-tree.js | ||
---|---|---|
1 | 1 |
/** |
2 | 2 |
* Expected dom structure like: |
3 |
* <div class="derived-unit-tree"> |
|
4 |
* <div class="derived-unit-item derived-unit-tree-root "> |
|
5 |
* <div class="unit-label">(B SP-99999).</div> |
|
6 |
* <div class="unit-content"> |
|
7 |
* <ul class="specimens derivate_tree"> |
|
8 |
* <li class="derived-unit-item"> |
|
9 |
* <div class="unit-label">(B B-923845).</div> |
|
10 |
* <div class="unit-content"> |
|
11 |
* </li> |
|
12 |
<li class="derived-unit-item"> |
|
13 |
<div class="unit-label">(B DNA-9098080).</div> |
|
14 |
<div class="unit-content"></div> |
|
15 |
</li> |
|
16 |
</ul> |
|
3 |
* <div class="item-tree"> |
|
4 |
* <div class="item-list"> |
|
5 |
* <ul> |
|
6 |
* <li class="derived-unit-item derived-unit-tree-root "> |
|
7 |
* <div class="unit-label">(B SP-99999).</div> |
|
8 |
* <div class="unit-content"> |
|
9 |
* <ul class="specimens derivate_tree"> |
|
10 |
* <li class="derived-unit-item"> |
|
11 |
* <div class="unit-label">(B B-923845).</div> |
|
12 |
* <div class="unit-content"> |
|
13 |
* </li> |
|
14 |
<li class="derived-unit-item"> |
|
15 |
<div class="unit-label">(B DNA-9098080).</div> |
|
16 |
<div class="unit-content"></div> |
|
17 |
</li> |
|
18 |
</ul> |
|
19 |
</li> |
|
20 |
</ul> |
|
17 | 21 |
</div> |
18 | 22 |
* </div> |
19 | 23 |
* The plugin function should be bound to outer div with '.derived-unit-tree' |
... | ... | |
29 | 33 |
}; |
30 | 34 |
} |
31 | 35 |
|
32 |
var $element = $(this);
|
|
36 |
let $element = $(this);
|
|
33 | 37 |
$element.find(".derived-unit-item").each(function () { |
34 |
var $listItem = $(this); |
|
35 |
var unitLabel = $listItem.children('.unit-header'); |
|
36 |
unitLabel.find('.page-link').click(function(event){ |
|
38 |
let $listItem = $(this); |
|
39 |
let $itemWrapper = $listItem.children('.item-wrapper'); |
|
40 |
let $unitHeader = $itemWrapper.children('.unit-header-wrapper').children('.unit-header'); |
|
41 |
let $collapsibleSymbol = $unitHeader.find('.unit-label > .tree-node-symbol-collapsible'); |
|
42 |
|
|
43 |
$unitHeader.find('.page-link').click(function(event){ |
|
37 | 44 |
event.stopPropagation(); |
38 | 45 |
}); |
39 |
var unitContent = $listItem.children('.unit-content') |
|
40 |
if(unitContent.length == 0){ |
|
41 |
// must be the root unit, we gonna dig one level deeper |
|
42 |
unitContent = $listItem.children('.unit-content-wrapper').children('.unit-content') |
|
43 |
} |
|
44 |
unitContent.hide(); |
|
45 |
unitLabel.click(function(){ |
|
46 |
unitContent.toggle(); |
|
46 |
let $unitContent = $itemWrapper.children('.unit-content'); |
|
47 |
$unitContent.hide(); |
|
48 |
$unitHeader.click(function(){ |
|
49 |
$unitContent.toggle(); |
|
50 |
}); |
|
51 |
$collapsibleSymbol.click(function(event){ |
|
52 |
$listItem.toggleClass('collapsed').children('.item-list').children('ul.derived-unit-item').toggleClass('collapsed'); |
|
53 |
$(this).find('.fa').toggleClass('fa-rotate-90'); |
|
54 |
event.stopPropagation(); |
|
55 |
} |
|
56 |
).hover(function(event){ |
|
57 |
event.stopsPropagation(); // allows the css hover effect to be handled but stops from bubbling up to the label |
|
47 | 58 |
}); |
59 |
|
|
48 | 60 |
}); |
49 | 61 |
|
50 | 62 |
}; |
Also available in: Unified diff
ref #7599 derivate tree with collapsible items