-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
chore: ♻️ remove jquery #1964
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
chore: ♻️ remove jquery #1964
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
4c372d3
add scroll-to-top and scroll class toggle with vanilla JS
ShubhamOulkar 47bf6fc
add language detection
ShubhamOulkar 9386a95
add i18n
ShubhamOulkar f492c50
Merge branch 'gh-pages' into remove-jquery
ShubhamOulkar f1ae195
Fix bug: there was no class hidden in CSS. Notice was hidden by hide(…
ShubhamOulkar 3655e87
fix flashing of i18n notice and improve a11y
ShubhamOulkar 5550938
add menu highlighting on scroll
ShubhamOulkar c327d43
♻️ remove jquery
ShubhamOulkar 5b03669
defer app.js
ShubhamOulkar 3a51fb7
remove DOMContentLoaded and fix root margin to 25%
ShubhamOulkar 7946483
Merge branch 'gh-pages' into remove-jquery
bjohansebas File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,122 +1,127 @@ | ||
| $(function(){ | ||
| var doc = $(document); | ||
|
|
||
| // top link | ||
| $('#top').click(function(e){ | ||
| $('html, body').animate({scrollTop : 0}, 500); | ||
| return false; | ||
| }); | ||
|
|
||
| // scrolling links | ||
| var added; | ||
| doc.scroll(function(e){ | ||
| if (doc.scrollTop() > 5) { | ||
| if (added) return; | ||
| added = true; | ||
| $('body').addClass('scroll'); | ||
| } else { | ||
| $('body').removeClass('scroll'); | ||
| added = false; | ||
| } | ||
| }) | ||
|
|
||
| // menu bar | ||
|
|
||
| var headings = $('h2, h3').map(function(i, el){ | ||
| return { | ||
| top: $(el).offset().top - 200, | ||
| id: el.id | ||
| } | ||
| }); | ||
|
|
||
| function closest() { | ||
| var h; | ||
| var top = $(window).scrollTop(); | ||
| var i = headings.length; | ||
| while (i--) { | ||
| h = headings[i]; | ||
| if (top >= h.top) return h; | ||
| } | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| const languageElement = document.getElementById('languageData'); | ||
| const languagesData = languageElement ? JSON.parse(languageElement.dataset.languages) : []; | ||
| const langDisplay = document.getElementById('current-lang'); | ||
| const i18nMsgBox = document.getElementById("i18n-notice-box"); | ||
| const scrollToTopBtn = document.getElementById("top"); | ||
|
|
||
| // display current language in language picker component | ||
| if (langDisplay) { | ||
| const currentLanguage = window.location.pathname.split('/')[1]; | ||
| const matchedLang = languagesData.find(lang => lang.code === currentLanguage); | ||
| langDisplay.textContent = matchedLang ? matchedLang.name : 'English'; | ||
| } | ||
|
|
||
| var currentApiPrefix; | ||
| var parentMenuSelector; | ||
| var lastApiPrefix; | ||
|
|
||
| if (document.readyState !== 'loading') { | ||
| const languageElement = document.getElementById('languageData'); | ||
| const languagesData = languageElement ? JSON.parse(languageElement.dataset.languages) : []; | ||
|
|
||
| const langDisplay = document.getElementById('current-lang'); | ||
|
|
||
| if (langDisplay) { | ||
| const currentLanguage = window.location.pathname.split('/')[1]; | ||
| const matchedLang = languagesData.find(lang => lang.code === currentLanguage); | ||
| langDisplay.textContent = matchedLang ? matchedLang.name : 'English'; | ||
| } | ||
| // scroll to top of the page | ||
| if (scrollToTopBtn) { | ||
| scrollToTopBtn.addEventListener("click", function (e) { | ||
| e.preventDefault(); | ||
| window.scrollTo({ | ||
| top: 0, | ||
| behavior: "smooth" | ||
| }) | ||
| }); | ||
|
ShubhamOulkar marked this conversation as resolved.
Outdated
|
||
| } | ||
|
|
||
| $(document).scroll(function() { | ||
| var h = closest(); | ||
| if (!h) return; | ||
|
|
||
| currentApiPrefix = h.id.split('.')[0]; | ||
| parentMenuSelector = '#'+ currentApiPrefix + '-menu'; | ||
|
|
||
| $(parentMenuSelector).addClass('active'); | ||
|
|
||
| if (lastApiPrefix && (lastApiPrefix != currentApiPrefix)) { | ||
| $('#'+ lastApiPrefix + '-menu').removeClass('active'); | ||
| // add/remove class 'scroll' on scroll by 5px | ||
| const scrollTarget = document.querySelector('.logo-container'); | ||
| const scrollObserver = new IntersectionObserver( | ||
| ([entry]) => { | ||
| if (!entry.isIntersecting) { | ||
| document.body.classList.add('scroll'); | ||
| } else { | ||
| document.body.classList.remove('scroll'); | ||
| } | ||
| }, | ||
| { | ||
| root: null, | ||
| threshold: 0, | ||
| rootMargin: '0px 0px 0px 0px' | ||
| } | ||
|
|
||
| $('#menu li a').removeClass('active'); | ||
|
|
||
| var a = $('a[href="#' + h.id + '"]'); | ||
| a.addClass('active'); | ||
|
|
||
| lastApiPrefix = currentApiPrefix.split('.')[0]; | ||
| }) | ||
|
|
||
| // i18n notice | ||
| if (readCookie('i18nClose')) { | ||
| $('#i18n-notice-box').hide(); | ||
| $("#i18n-notice-box").addClass("hidden"); | ||
| } | ||
| else { | ||
| $('#close-i18n-notice-box').on('click', function () { | ||
| $('#i18n-notice-box').hide(); | ||
| $("#i18n-notice-box").addClass("hidden"); | ||
| createCookie('i18nClose', 1); | ||
| }) | ||
| ); | ||
|
|
||
| if (scrollTarget) scrollObserver.observe(scrollTarget); | ||
|
|
||
| // heighlight current Menu on scroll | ||
| const headings = Array.from(document.querySelectorAll("h2, h3")); | ||
| const menuLinks = document.querySelectorAll("#menu li a"); | ||
|
|
||
| const observerOptions = { | ||
| root: null, | ||
| rootMargin: "-25% 0px -50px 0px", | ||
| threshold: 1, | ||
| }; | ||
|
|
||
| const menuObserver = new IntersectionObserver((entries) => { | ||
| entries.forEach((entry) => { | ||
| if (entry.isIntersecting) { | ||
| const currentApiPrefix = entry.target.id.split(".")[0]; | ||
| const parentMenuSelector = `#${currentApiPrefix}-menu`; | ||
| const parentMenuEl = document.querySelector(parentMenuSelector); | ||
|
|
||
| // open submenu on scroll | ||
| if (parentMenuEl) parentMenuEl.classList.add("active"); | ||
|
|
||
| // Remove active class from last menu item | ||
| const lastActiveMenu = document.querySelector(".active[id$='-menu']"); | ||
| if (lastActiveMenu && lastActiveMenu.id !== parentMenuEl.id) { | ||
| lastActiveMenu.classList.remove("active"); | ||
| } | ||
|
|
||
| // Update active link | ||
| menuLinks.forEach((link) => link.classList.remove("active")); | ||
| const activeLink = document.querySelector(`a[href="#${entry.target.id}"]`); | ||
| if (activeLink) activeLink.classList.add("active"); | ||
| } | ||
| }); | ||
| }, observerOptions); | ||
|
|
||
| headings.forEach((heading) => menuObserver.observe(heading)); | ||
|
|
||
| // i18n message box : this box appears hidden for all page.lang != 'en' | ||
| const isI18nCookie = readCookie('i18nClose'); | ||
| if (i18nMsgBox && !isI18nCookie) { | ||
| const closeI18nBtn = document.getElementById("close-i18n-notice-box"); | ||
| // show notice box | ||
| i18nMsgBox.hidden = false; | ||
| // close notice box | ||
| if (closeI18nBtn) { | ||
| closeI18nBtn.addEventListener("click", () => { | ||
| // hide notice | ||
| i18nMsgBox.hidden = true; | ||
| // set session cookie | ||
| createCookie('i18nClose', 1); | ||
| }); | ||
|
|
||
| // keyboard a11y | ||
| closeI18nBtn.addEventListener("keydown", (e) => { | ||
| if (e.key === "Enter" || e.key === " ") { | ||
| e.preventDefault(); | ||
| closeI18nBtn.click(); | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| function createCookie(name, value, days) { | ||
| let expires = ""; | ||
| if (days) { | ||
| const date = new Date(); | ||
| date.setTime(date.getTime() + (days * 864e5)); | ||
| expires = "; expires=" + date.toUTCString(); | ||
| } | ||
| document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}${expires}; path=/; SameSite=Lax; Secure`; | ||
| } | ||
| }) | ||
|
|
||
|
|
||
|
|
||
| function createCookie(name, value, days) { | ||
| var expires; | ||
|
|
||
| if (days) { | ||
| var date = new Date(); | ||
| date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); | ||
| expires = "; expires=" + date.toGMTString(); | ||
| } else { | ||
| expires = ""; | ||
| } | ||
| document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/"; | ||
| } | ||
|
|
||
| function readCookie(name) { | ||
| var nameEQ = encodeURIComponent(name) + "="; | ||
| var ca = document.cookie.split(';'); | ||
| for (var i = 0; i < ca.length; i++) { | ||
| var c = ca[i]; | ||
| while (c.charAt(0) === ' ') c = c.substring(1, c.length); | ||
| if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length)); | ||
| function readCookie(name) { | ||
| const nameEQ = encodeURIComponent(name) + "="; | ||
| const ca = document.cookie.split(';'); | ||
| for (var i = 0; i < ca.length; i++) { | ||
| var c = ca[i]; | ||
| while (c.charAt(0) === ' ') c = c.substring(1, c.length); | ||
| if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length)); | ||
| } | ||
|
ShubhamOulkar marked this conversation as resolved.
Outdated
|
||
| return null; | ||
| } | ||
| return null; | ||
| } | ||
|
|
||
| function eraseCookie(name) { | ||
| createCookie(name, "", -1); | ||
| } | ||
| }); | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.