Common.js: различия между версиями
Материал из ВикиВоины
(Отмена правки 420473, сделанной Laurent Nautilus (обсуждение)) Метка: отмена |
|||
(не показано 40 промежуточных версий этого же участника) | |||
Строка 1: | Строка 1: | ||
$(document).ready(function() { | $(document).ready(function() { | ||
− | var $ | + | 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>'); | ||
+ | |||
+ | 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 { | } else { | ||
if ($('#toc').length) { | if ($('#toc').length) { | ||
var contents = $('<div class="contents side-nav"></div>'); | var contents = $('<div class="contents side-nav"></div>'); | ||
var isFixed = false; | var isFixed = false; | ||
− | var activeSection = null; | + | var activeSection = null; |
var linkList = $('<ul class="side-nav"></ul>'); | var linkList = $('<ul class="side-nav"></ul>'); | ||
Строка 60: | Строка 91: | ||
var scrollTop = $(window).scrollTop(); | var scrollTop = $(window).scrollTop(); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
if (scrollTop > sidebarTop && scrollTop > contentsTop && !isFixed) { | if (scrollTop > sidebarTop && scrollTop > contentsTop && !isFixed) { | ||
− | contents.addClass('fixed'); | + | contents.addClass('fixed'); |
isFixed = true; | isFixed = true; | ||
} else if ((scrollTop <= sidebarTop || scrollTop <= contentsTop) && isFixed) { | } else if ((scrollTop <= sidebarTop || scrollTop <= contentsTop) && isFixed) { | ||
− | contents.removeClass('fixed'); | + | contents.removeClass('fixed'); |
isFixed = false; | isFixed = false; | ||
} | } | ||
Строка 95: | Строка 101: | ||
} | } | ||
} | } | ||
+ | $(window).scroll(function() { | ||
+ | var currentPosition = $(this).scrollTop(); | ||
+ | |||
+ | $('h2, h3, h4').each(function() { | ||
+ | var sectionTop = $(this).offset().top; | ||
+ | var sectionId = $(this).find('.mw-headline').attr('id'); | ||
+ | |||
+ | if (currentPosition >= sectionTop) { | ||
+ | $('.side-nav li').removeClass('active'); | ||
+ | |||
+ | $('.side-nav li').find('a[href="#' + sectionId + '"]').parent().addClass('active'); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | var paths = document.querySelectorAll('path'); | ||
+ | var lis = document.querySelectorAll('.countries li'); | ||
+ | |||
+ | paths.forEach(function(path) { | ||
+ | path.addEventListener('click', function() { | ||
+ | var title = this.getAttribute('title'); | ||
+ | var matchingLi = document.querySelector('.countries li[title="' + title + '"]'); | ||
+ | if (matchingLi) { | ||
+ | if (this.classList.contains('selected-patch-country')) { | ||
+ | this.classList.remove('selected-patch-country'); | ||
+ | } else { | ||
+ | document.querySelectorAll('.selected-patch-country').forEach(function(selectedPath) { | ||
+ | selectedPath.classList.remove('selected-patch-country'); | ||
+ | }); | ||
+ | this.classList.add('selected-patch-country'); | ||
+ | } | ||
+ | |||
+ | var matchingActiveLi = document.querySelector('.countries li.active-country-list'); | ||
+ | if (matchingActiveLi && matchingActiveLi !== matchingLi) { | ||
+ | matchingActiveLi.classList.remove('active-country-list'); | ||
+ | } | ||
+ | matchingLi.classList.toggle('active-country-list'); | ||
+ | matchingLi.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | lis.forEach(function(li) { | ||
+ | li.addEventListener('click', function() { | ||
+ | var title = this.getAttribute('title'); | ||
+ | var matchingPath = document.querySelector('path[title="' + title + '"]'); | ||
+ | if (matchingPath) { | ||
+ | if (matchingPath.classList.contains('selected-patch-country')) { | ||
+ | matchingPath.classList.remove('selected-patch-country'); | ||
+ | } else { | ||
+ | document.querySelectorAll('.countries .selected-patch-country').forEach(function(path) { | ||
+ | path.classList.remove('selected-patch-country'); | ||
+ | }); | ||
+ | matchingPath.classList.add('selected-patch-country'); | ||
+ | } | ||
+ | } | ||
+ | var matchingLi = document.querySelector('.countries li.active-country-list'); | ||
+ | if (matchingLi && matchingLi.title !== title) { | ||
+ | matchingLi.classList.remove('active-country-list'); | ||
+ | } | ||
+ | this.classList.toggle('active-country-list'); | ||
+ | this.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | setTimeout(function() { | ||
+ | $('.button-comment').css('display', 'block'); | ||
+ | }, 1000); | ||
+ | |||
+ | |||
}); | }); |
Версия 18:04, 26 мая 2024
$(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; } }); } } $(window).scroll(function() { var currentPosition = $(this).scrollTop(); $('h2, h3, h4').each(function() { var sectionTop = $(this).offset().top; var sectionId = $(this).find('.mw-headline').attr('id'); if (currentPosition >= sectionTop) { $('.side-nav li').removeClass('active'); $('.side-nav li').find('a[href="#' + sectionId + '"]').parent().addClass('active'); } }); }); var paths = document.querySelectorAll('path'); var lis = document.querySelectorAll('.countries li'); paths.forEach(function(path) { path.addEventListener('click', function() { var title = this.getAttribute('title'); var matchingLi = document.querySelector('.countries li[title="' + title + '"]'); if (matchingLi) { if (this.classList.contains('selected-patch-country')) { this.classList.remove('selected-patch-country'); } else { document.querySelectorAll('.selected-patch-country').forEach(function(selectedPath) { selectedPath.classList.remove('selected-patch-country'); }); this.classList.add('selected-patch-country'); } var matchingActiveLi = document.querySelector('.countries li.active-country-list'); if (matchingActiveLi && matchingActiveLi !== matchingLi) { matchingActiveLi.classList.remove('active-country-list'); } matchingLi.classList.toggle('active-country-list'); matchingLi.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } }); }); lis.forEach(function(li) { li.addEventListener('click', function() { var title = this.getAttribute('title'); var matchingPath = document.querySelector('path[title="' + title + '"]'); if (matchingPath) { if (matchingPath.classList.contains('selected-patch-country')) { matchingPath.classList.remove('selected-patch-country'); } else { document.querySelectorAll('.countries .selected-patch-country').forEach(function(path) { path.classList.remove('selected-patch-country'); }); matchingPath.classList.add('selected-patch-country'); } } var matchingLi = document.querySelector('.countries li.active-country-list'); if (matchingLi && matchingLi.title !== title) { matchingLi.classList.remove('active-country-list'); } this.classList.toggle('active-country-list'); this.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }); }); setTimeout(function() { $('.button-comment').css('display', 'block'); }, 1000); });