tabs 2.98 KB
Newer Older
Irina Oleynik's avatar
Irina Oleynik committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
/*
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);
    });
  }

});