Действия

MediaWiki

Common.js: различия между версиями

Материал из ВикиВоины

 
(не показано 200 промежуточных версий этого же участника)
Строка 1: Строка 1:
const timeline = document.querySelector('.ages-timeline');
+
$(document).ready(function() {
const selflink = document.querySelector('.mw-selflink');
+
function createContentsList($list, $parentItem) {
timeline.scrollLeft = selflink.offsetLeft - (timeline.offsetWidth - selflink.offsetWidth) / 2;
+
  $list.children('li').each(function() {
 +
    var $listItem = $(this);
 +
    var classes = $listItem.attr('class').split(' ');
 +
    var tocLevel = classes.find(function(cls) {
 +
      return cls.startsWith('toclevel-');
 +
    });
  
const labels = document.querySelectorAll('.question-mark');
+
    if (tocLevel) {
 +
      var $sectionLink = $listItem.children('a').first();
 +
      var sectionTitle = $sectionLink.find('.toctext').text().trim();
 +
      var listItem = $('<li></li>');
 +
      var sectionLink = $('').text(sectionTitle);
 +
      sectionLink.attr('href', $sectionLink.attr('href'));
 +
      listItem.append(sectionLink);
  
labels.forEach(label => {
+
      var $subList = $listItem.children('ul').first();
  label.addEventListener('mouseover', function(event) {
+
      if ($subList.length) {
    const tooltip = document.createElement('div');
+
        var subLinkList = $('<ul class="side-nav"></ul>');
    tooltip.classList.add('tooltip');
+
        listItem.append(subLinkList);
    tooltip.innerHTML = 'This is a tool tip for this label';
+
        createContentsList($subList, subLinkList);
    document.body.appendChild(tooltip);
+
      }
  
    const labelRect = event.target.getBoundingClientRect();
+
      $parentItem.append(listItem);
     tooltip.style.left = labelRect.right + 'px';
+
     }
    tooltip.style.top = labelRect.top + 'px';
 
    tooltip.style.display = 'block';
 
 
   });
 
   });
 +
}
 +
 +
  if ($(window).width() < 640) {
 +
    var contents = $('<div class="contents-overlay"></div>').hide();
 +
    var sideNav = $('<ul class="side-nav"></ul>');
 +
    var contentsItemWrap = $('<div class="contents-item-wrap"></div>');
 +
    var contentsItemWrapFirst = $('<li></li>');
 +
    var label = $('<label class="sidebar" id="p-tb">Содержание</label>');
 +
 +
    label.appendTo(contentsItemWrapFirst);
 +
    contentsItemWrapFirst.appendTo(sideNav);
 +
    sideNav.appendTo(contents);
 +
    contentsItemWrap.appendTo(sideNav);
 +
    contents.appendTo('.inner-wrap');
 +
 +
    createContentsList($('#toc > ul'), contentsItemWrap);
 +
 +
    var closeButton = $('<button class="close-button"><i class="fa fa-times"></i></button>');
 +
    contents.append(closeButton);
 +
 +
    var isContentsOpen = false;
  
  label.addEventListener('mouseout', function() {
+
    $('.content-button').on('click touchstart', function(e) {
    const tooltip = document.querySelector('.tooltip');
+
      e.preventDefault();
    document.body.removeChild(tooltip);
+
      contents.toggle();
  });
+
      updateIconColor();
});
+
    });
  
$(document).ready(function() {
+
     $('.close-button').on('click touchstart', function(e) {
     $(".question-mark").hover(function() {
+
       e.preventDefault();
       var title = $(this).parent().attr("title");
+
       contents.hide();
       $("#tooltip").text(title);
+
       updateIconColor();
       $("#tooltip").show();
 
    }, function() {
 
      $("#tooltip").hide();
 
 
     });
 
     });
   });
+
 
 +
    function updateIconColor() {
 +
      var isVisible = contents.is(':visible');
 +
      $('.fa-list-ul').css('color', isVisible ? '#511414' : '');
 +
    }
 +
   } else {
 +
    if ($('#toc').length) {
 +
      var contents = $('<div class="contents side-nav"></div>');
 +
      var isFixed = false;
 +
      var activeSection = null;
 +
 
 +
      var linkList = $('<ul class="side-nav"></ul>');
 +
      contents.append(linkList);
 +
 
 +
      var contentLabel = $('<label class="sidebar" id="p-tb">Содержание</label>');
 +
      var contentListItem = $('<li></li>');
 +
      contentListItem.append(contentLabel);
 +
      linkList.append(contentListItem);
 +
 
 +
      createContentsList($('#toc > ul'), linkList);
 +
 
 +
      if (linkList.children().length > 1) {
 +
        $('#sidebar:last').append(contents);
 +
      }
 +
 
 +
      var sidebarTop = $('.sidebar:last').offset().top;
 +
      var contentsTop = contents.offset().top;
 +
      var windowHeight = $(window).height();
 +
 
 +
      $(window).scroll(function() {
 +
        var scrollTop = $(window).scrollTop();
 +
 
 +
        if (scrollTop > sidebarTop && scrollTop > contentsTop && !isFixed) {
 +
          contents.addClass('fixed');
 +
          isFixed = true;
 +
        } else if ((scrollTop <= sidebarTop || scrollTop <= contentsTop) && isFixed) {
 +
          contents.removeClass('fixed');
 +
          isFixed = false;
 +
        }
 +
      });
 +
    }
 +
  }
 +
});

Текущая версия на 13:34, 21 октября 2023

$(document).ready(function() {
function createContentsList($list, $parentItem) {
  $list.children('li').each(function() {
    var $listItem = $(this);
    var classes = $listItem.attr('class').split(' ');
    var tocLevel = classes.find(function(cls) {
      return cls.startsWith('toclevel-');
    });

    if (tocLevel) {
      var $sectionLink = $listItem.children('a').first();
      var sectionTitle = $sectionLink.find('.toctext').text().trim();
      var listItem = $('<li></li>');
      var sectionLink = $('').text(sectionTitle);
      sectionLink.attr('href', $sectionLink.attr('href'));
      listItem.append(sectionLink);

      var $subList = $listItem.children('ul').first();
      if ($subList.length) {
        var subLinkList = $('<ul class="side-nav"></ul>');
        listItem.append(subLinkList);
        createContentsList($subList, subLinkList);
      }

      $parentItem.append(listItem);
    }
  });
}

  if ($(window).width() < 640) {
    var contents = $('<div class="contents-overlay"></div>').hide();
    var sideNav = $('<ul class="side-nav"></ul>');
    var contentsItemWrap = $('<div class="contents-item-wrap"></div>');
    var contentsItemWrapFirst = $('<li></li>');
    var label = $('<label class="sidebar" id="p-tb">Содержание</label>');

    label.appendTo(contentsItemWrapFirst);
    contentsItemWrapFirst.appendTo(sideNav);
    sideNav.appendTo(contents);
    contentsItemWrap.appendTo(sideNav);
    contents.appendTo('.inner-wrap');

    createContentsList($('#toc > ul'), contentsItemWrap);

    var closeButton = $('<button class="close-button"><i class="fa fa-times"></i></button>');
    contents.append(closeButton);

    var isContentsOpen = false; 

    $('.content-button').on('click touchstart', function(e) {
      e.preventDefault();
      contents.toggle();
      updateIconColor();
    });

    $('.close-button').on('click touchstart', function(e) {
      e.preventDefault();
      contents.hide();
      updateIconColor();
    });

    function updateIconColor() {
      var isVisible = contents.is(':visible');
      $('.fa-list-ul').css('color', isVisible ? '#511414' : '');
    }
  } else {
    if ($('#toc').length) {
      var contents = $('<div class="contents side-nav"></div>');
      var isFixed = false;
      var activeSection = null; 

      var linkList = $('<ul class="side-nav"></ul>');
      contents.append(linkList);

      var contentLabel = $('<label class="sidebar" id="p-tb">Содержание</label>');
      var contentListItem = $('<li></li>');
      contentListItem.append(contentLabel);
      linkList.append(contentListItem);

      createContentsList($('#toc > ul'), linkList);

      if (linkList.children().length > 1) {
        $('#sidebar:last').append(contents);
      }

      var sidebarTop = $('.sidebar:last').offset().top;
      var contentsTop = contents.offset().top;
      var windowHeight = $(window).height();

      $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();

        if (scrollTop > sidebarTop && scrollTop > contentsTop && !isFixed) {
          contents.addClass('fixed'); 
          isFixed = true;
        } else if ((scrollTop <= sidebarTop || scrollTop <= contentsTop) && isFixed) {
          contents.removeClass('fixed'); 
          isFixed = false;
        }
      });
    }
  }
});