github.com/darmach/terratest@v0.34.8-0.20210517103231-80931f95e3ff/docs/assets/js/collection-browser_scroll.js (about) 1 $(document).ready(function () { 2 3 const getElementForDataSelector = function (parentElement, selectorName, elementName) { 4 const selector = parentElement.data(selectorName); 5 if (!selector) { 6 throw new Error(`You must specify a 'data-${selectorName}' attribute for '${elementName}'.`); 7 } 8 9 const element = $(selector); 10 if (element.length !== 1) { 11 throw new Error(`Expected one element that matched selector '${selector}' for '${elementName}' but got ${element.length}`); 12 } 13 14 return element; 15 }; 16 17 // Move the TOC on the left side of the page with the user as the user scrolls down, so the TOC is always visible. 18 // Only start moving the TOC once the user has scrolled past the element specified in scroll-after-selector. Stop 19 // moving it at the bottom of the content. 20 const moveToCWithScrolling = function () { 21 const sidebar = $(".js-scroll-with-user"); 22 23 const scrollAfter = getElementForDataSelector(sidebar, 'scroll-after-selector', 'moveTocWithScrolling'); 24 const scrollUntil = getElementForDataSelector(sidebar, 'scroll-until-selector', 'moveTocWithScrolling'); 25 26 const scrollPosition = $(window).scrollTop(); 27 const scrollAfterHeightBottom = scrollAfter.offset().top + scrollAfter.innerHeight(); 28 29 const contentHeight = scrollUntil.innerHeight() + scrollAfterHeightBottom; 30 const sidebarHeight = sidebar.height(); 31 const sidebarBottomPos = scrollPosition + sidebarHeight; 32 33 // Only start moving the TOC once we're past the scroll-after item 34 if (scrollPosition >= scrollAfterHeightBottom) { 35 // Stop moving the TOC when we're at the bottom of the content 36 if (sidebarBottomPos >= contentHeight) { 37 sidebar.removeClass('fixed'); 38 sidebar.addClass('bottom'); 39 } else { 40 sidebar.addClass('fixed'); 41 sidebar.removeClass('bottom'); 42 } 43 } else { 44 sidebar.removeClass('fixed'); 45 sidebar.removeClass('bottom'); 46 } 47 }; 48 49 // Show a dot next to the part of the TOC where the user has scrolled to. We can't use bootstrap's built-in ScrollSpy 50 // because with Bootstrap 3.3.7, it only works with a Bootstrap Nav, whereas our TOC is auto-generated and does not 51 // use Bootstrap Nav classes/markup. 52 const scrollSpy = function () { 53 const content = $(".js-scroll-spy"); 54 55 const nav = getElementForDataSelector(content, 'scroll-spy-nav-selector', 'scrollSpy'); 56 57 const allNavLinks = nav.find('a'); 58 allNavLinks.removeClass('selected'); 59 60 // Only consider an item in view if it's visible in the top 20% of the screen 61 const buffer = $(window).height() / 5; 62 const scrollPosition = $(window).scrollTop(); 63 const contentHeadings = content.find('h2, h3, h4'); 64 const visibleHeadings = contentHeadings.filter((index, el) => scrollPosition + buffer >= $(el).offset().top); 65 66 if (visibleHeadings.length > 0) { 67 const selectedHeading = visibleHeadings.last(); 68 const selectedHeadingId = selectedHeading.attr('id'); 69 70 if (selectedHeadingId) { 71 const hash = `#${selectedHeadingId}`; 72 const selectedNavLink = nav.find(`a[href$='${hash}']`); 73 if (selectedNavLink.length > 0) { 74 selectedNavLink.addClass('selected'); 75 76 const allTopLevelNavListItems = nav.find('.sectlevel1 > li'); 77 78 const parentNavListItem = selectedNavLink.parents('.sectlevel2').parent(); 79 const topLevelNavListItem = selectedNavLink.parents('.sectlevel1'); 80 } 81 } 82 } 83 }; 84 85 86 87 $(window).scroll(moveToCWithScrolling); 88 $(moveToCWithScrolling); 89 90 $(window).scroll(scrollSpy); 91 $(scrollSpy); 92 93 $('.post-detail img').on('click', function () { 94 window.open(this.src, '_blank') 95 }) 96 });