Commit 5109b1ca authored by Irina Oleynik's avatar Irina Oleynik

Табы

(cherry picked from commit 0ae96046)
parent 12395819
/*
model.tabs = [];
model.tabs.push({name: '', blocks: []});
model.tabs.push({name: '', blocks: [], accordion: [
{titleID: '', open: true, blocks: []}
]});
@param name - наименование таба
@param blocks - массив, перечисление ID компонентов которые будут входить в данный блок.
@param accordion.titleID - ID компонента на форме с типом label для заголовка блока
@param accordion.open - true/false, открытый или закрытый блок
@param accordion.blocks - массив, перечисление ID компонентов которые будут входить в данный блок.
*/
let parentContainer = view.playerView.container;
let tabContainer = $('<div>', {class: 'tab-container'});
let tab = $('<div>', {class: 'tab'});
let tabsData = [];
tabContainer.append(tab);
$(view.container).append(tabContainer);
if(model.hasOwnProperty('tabs')) tabsData = model.tabs;
const toggleAcc = (el, block) => {
el = el[0];
el.classList.toggle("active");
block.open = $(el).hasClass('active');
let panel = el.nextElementSibling;
if (panel.style.maxHeight) panel.style.maxHeight = null;
else panel.style.maxHeight = "initial";
}
tabsData.forEach((item, i) => {
let tabButton = $('<button>', {class: 'tablinks'}).text(item.name);
let tabcontent = $('<div>', {class: 'tabcontent'});
tab.append(tabButton);
tabContainer.append(tabcontent);
tabButton.on('click', e => {
tabContainer.find('.tablinks').removeClass('active');
tabButton.addClass('active');
tabContainer.find('.tabcontent').removeClass('active');
tabcontent.addClass('active');
});
if(i == 0) {
tabButton.addClass('active');
tabcontent.addClass('active');
}
if(item.hasOwnProperty('blocks')) {
item.blocks.forEach(block => {
let tabData = $(parentContainer).find(`[data-asformid $= ".container.${block}"]`);
tabData.parent().parent().hide();
tabcontent.append(tabData.detach());
});
}
if(item.hasOwnProperty('accordion')) {
let accordionContainer = $('<div class="custom-accordion">');
tabcontent.append(accordionContainer);
item.accordion.forEach(acc => {
let block = $('<div class="accordion-block">')
let title = $(parentContainer).find(`[data-asformid="label.label.${acc.titleID}"]`);
let button = $(`<button class="accordion-button">${title.text()}</button>`);
let body = $('<div class="accordion-body">');
title.parent().parent().parent().hide();
accordionContainer.append(block);
block.append(button).append(body);
button.on('click', () => toggleAcc(button, acc));
acc.blocks.forEach(accblock => {
let cc = $(parentContainer).find(`[data-asformid $= ".container.${accblock}"]`);
cc.parent().parent().hide();
body.append(cc.detach());
});
body.append('<div class="accordion-footer"></div>');
if(acc.open) toggleAcc(button, acc);
});
}
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment