-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for referencing FAQs via a has in the URL
The specified FAQ entry will be expanded and the window scrolls to it automatically. Add an anchor icon on the right side of the FAQ and tutorial tiles to copy the URL directly.
- Loading branch information
Showing
6 changed files
with
96 additions
and
23 deletions.
There are no files selected for viewing
This file contains 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 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 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 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 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 |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| document.addEventListener('DOMContentLoaded', function() { | ||
| // show and jump to FAQ list elements which are referenced by the URL anchor | ||
| let url = window.location.href; | ||
|
|
||
| if (url.includes('FAQ/#') || url.includes('FAQ#')) { | ||
| // we are on the FAQ main page and a FAQ should be opened | ||
| // first, display the FAQ to ensure it is there | ||
| let itemId = window.location.hash.substr(1); | ||
| showOne(itemId); | ||
| } | ||
|
|
||
| if (url.includes('#') && !url.includes('FAQ/tutorials/')) { | ||
| // some other FAQ page with FAQ list elements | ||
| let itemId = window.location.hash.substr(1); | ||
| let listElement = document.getElementById(itemId); | ||
| if (listElement != null) { | ||
| // un-collapse element without animation | ||
| listElement.getElementsByClassName('tile-head')[0].classList.add('active'); | ||
| listElement.getElementsByClassName('tile-body')[0].style.display = 'block'; | ||
|
|
||
| // scroll to element without having the navbar hiding it | ||
| let navbarHeight = document.getElementById("header").offsetHeight; | ||
| let elementPos = listElement.offsetTop; | ||
| let scrollPos = elementPos - navbarHeight; | ||
| // window.scrollTo(0, scrollPos); does not work for whatsoever reason.... using JQuery instead | ||
| $('html, body').animate({scrollTop: scrollPos}, 1); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| function clickListener() { | ||
| $(".faq-tiles .tile > .tile-head > :not(.tile-anchor)").click(function () { | ||
| let $tile = $(this).closest('.tile'); | ||
| $tile.hasClass("active") ? $tile.find(".tile-body").slideUp() : $tile.find(".tile-body").slideDown(); | ||
| $tile.toggleClass("active"); | ||
| }); | ||
| $(".faq-tiles .tile > .tile-head > .tile-anchor").click(function (event) { | ||
| onTilesAnchorClick(event, $(this)); | ||
| }); | ||
| } | ||
|
|
||
| function onTilesAnchorClick(event, tile) { | ||
| // prevent event / location change in case a tutorial was clicked | ||
| event.preventDefault(); | ||
|
|
||
| // change URL in browser address abr | ||
| let anchor = tile.closest('.tile').prop('id'); | ||
| let url = window.location.href.split('#')[0] + '#' + anchor; | ||
| history.pushState({}, '', url); | ||
|
|
||
| // copy the new url to the clipboard | ||
| // this is hackish, because we do not use the external (but always recommended) clipboard.js API to keep the site small | ||
| let tempSelect = $('<input>').val(url).appendTo('body').select(); | ||
| document.execCommand('copy'); | ||
| tempSelect.remove(); | ||
| } |
This file contains 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