Advertisement
Igor150195

asdas

May 14th, 2024 (edited)
459
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Проверяем наличие контейнера с похожими тегами
  2. let similarTagsContainer = document.querySelector('.similar-tags-container');
  3. if (similarTagsContainer) {
  4.     // Скрываем кнопку "Ещё"
  5.     document.querySelector('.similar-name-dev-btn').style.display = 'none';
  6.  
  7.     // Получаем ширину блока и инициализируем переменные
  8.     let blockWidth = similarTagsContainer.offsetWidth;
  9.     let rowWidth = 0;
  10.     let moreBtnFlag = true;
  11.  
  12.     // Перебираем теги
  13.     let similarNameTags = document.querySelectorAll('.similar-tags-container .similar-name-tag');
  14.     similarNameTags.forEach(function(tag) {
  15.         rowWidth += tag.offsetWidth;
  16.  
  17.         if (rowWidth > blockWidth) {
  18.             if (moreBtnFlag) {
  19.                 tag.previousElementSibling.classList.add('hidden-tag');
  20.                 tag.previousElementSibling.style.display = 'none';
  21.                 similarTagsContainer.appendChild(document.querySelector('.similar-name-dev-btn .tags-more-btn').cloneNode(true));
  22.                 similarTagsContainer.appendChild(document.querySelector('.similar-name-dev-btn .tags-close-btn').cloneNode(true));
  23.                 document.querySelector('.tags-close-btn').style.display = 'none';
  24.             }
  25.  
  26.             tag.classList.add('hidden-tag');
  27.             tag.style.display = 'none';
  28.  
  29.             moreBtnFlag = false;
  30.         }
  31.     });
  32.  
  33.     // Показываем количество скрытых тегов
  34.     let hiddenTags = document.querySelectorAll('.hidden-tag');
  35.     document.querySelector('.tags-more-btn .tags-counter').textContent = hiddenTags.length;
  36.  
  37.     // Обработчик клика на кнопку "Ещё"
  38.     document.querySelector('.tags-more-btn').addEventListener('click', function() {
  39.         hiddenTags.forEach(function(tag) {
  40.             tag.style.display = 'inline-flex';
  41.         });
  42.         this.style.display = 'none';
  43.         document.querySelector('.tags-close-btn').style.display = 'inline-flex';
  44.     });
  45.  
  46.     // Обработчик клика на кнопку "Скрыть"
  47.     document.querySelector('.tags-close-btn').addEventListener('click', function() {
  48.         hiddenTags.forEach(function(tag) {
  49.             tag.style.display = 'none';
  50.         });
  51.         this.style.display = 'none';
  52.         document.querySelector('.tags-more-btn').style.display = 'inline-flex';
  53.     });
  54. }
  55.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement