Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-13 13:54:23 +00:00
Code Issues Actions Projects Releases Wiki Activity

hop

Browse Source
This commit is contained in:
Tchama 2019-12-13 13:03:15 +01:00
parent 600c48b193
commit fb9c3cdff3
2 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
Resources/public/modules/tabs/tabs.js
View File

@ -29,8 +29,11 @@ let countNewActive = function(links, link)
/*
* Set class active on both new elements: link and content
*/
let setNewActive = function(link, contents, rank)
let setNewActive = function(links, contents, rank)
{
if (! links[rank-1]) { rank = 1; }
link = links[rank-1];
link.classList.add('active');
count = 0;
@ -42,6 +45,19 @@ let setNewActive = function(link, contents, rank)
});
}
/*
* Set height of content pane
*/
let setPaneHeight = function(contents)
{
contents.forEach(function(pane) {
// let computedStyle = getComputedStyle(pane);
// console.log(computedStyle.height);
// comment prendre la hauteur d'une div masquée avec display:none
});
}
/*
* Main function
*/
@ -61,15 +77,21 @@ window.addEventListener('load', function()
tabPanel.classList.add('pills');
}
if (! unit.startPanel) {
unit.startPanel = 1;
}
setPaneHeight(contents);
// initial position
setNewActive(links[unit.startPanel-1], contents, unit.startPanel);
setNewActive(links, contents, unit.startPanel);
// listen
links.forEach(function(link) {
link.addEventListener('click', function()
{
resetActive(links, contents);
setNewActive(link, contents, countNewActive(links, link));
setNewActive(links, contents, countNewActive(links, link));
});
});

11
Resources/views/Test/index.html.twig
View File

@ -12,17 +12,18 @@
let tabParams = [{
id : 'test1',
type: 'tab',
startPanel: 5,
startPanel: 2,
disposition: 'horizontal',
fade: true
},
{
id : 'test2',
type: 'pill',
startPanel: 3,
startPanel: 5,
disposition: 'vertical',
fade: false
}];
}
];
</script>
<script type="text/javascript" src="{{ asset('build/tabs.js') }}"></script>
@ -46,7 +47,7 @@
<a class="nav-link" href="#">Link 4</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link 5</a>
<a class="nav-link" href="#">Link 5</a>
</li>
</ul>
</nav>
@ -87,7 +88,7 @@
<a class="nav-link" href="#">Link 4</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link 5</a>
<a class="nav-link" href="#">Link 5</a>
</li>
</ul>
</nav>