компонент меню func F

by Aleksandr Tomashov

HTML

<div id="menu1"></div> 
 <div id="menu2"></div>

CSS

.menu--closed .menu__list {
  display: none;
}

.menu__title {
  cursor: pointer;
}

.js-hidden {
  display: none;
}

JavaScript

'use strict'


// конструктор Menu
function Menu(element, title, options) {
  element.classList.add('menu');
  // вызов констркуктора родителя
  Component.apply(this, arguments);
  Menu._count++;

  function displayClosed() {
    element.classList.toggle('menu--closed');
  }

  let totalOption = '';

  for ( let option of options) {
    totalOption += `<li class="munu__item">${ option }</li>`
  }

  element.innerHTML = `
    <span class="menu__title">${ title }</span>
    <ul class="menu__list">
    ${ totalOption }    
  `;

  element.querySelector('.menu__title').addEventListener('click', displayClosed);
}

// наследование 
Menu.prototype.__proto__ = Component.prototype;

// метод для конструктора Menu
Menu.prototype.close = function() {
  this._element.classList.add('menu--closed');
};

// метод родителя в нутри своего 
Menu.prototype.hide = function() {
  Component.prototype.hide.call(this);
}

// конструктор Component
function Component (element) {
  this._element = element;
}

// метод для конструктора Compontnt
Component.prototype.hide = function() {
  this._element.classList.add( 'js-hidden');
};

// метод для конструктора Compontnt
Component.prototype.show = function() {
  this._element.classList.remove( 'js-hidden');
};

// счетчик консткуктора Menu
Menu._count = 0;

// метод счетчика меню 
Menu.getCount = function() {
  return this._count;
};

// объект меню1
let menu1 = new Menu(
  document.querySelector('#menu1'), 
  'Menu 1',
  [1, 2, 3] 
);

// объект меню2
let menu2 = new Menu(
    document.querySelector('#menu2'), 
    'Menu 2',
    [4, 5, 6] 
);
  
// вызов метода через прототипное наследование
menu2.close();

// количество созданных меню
console.log(Menu.getCount());

// вызов родительского метода на прямую
//menu.hide();