-
Notifications
You must be signed in to change notification settings - Fork 72
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make course module folding optional and implement automatic scrolling
The automatic folding and hiding of expired course modules on the user results page was suboptimal and annoying for some students/teachers. Old course modules are no longer hidden behind a button and folding is made optional with the use of a new "Expand all modules" button. Automatic scrolling takes the user to the first open module, unless the page contains previously unseen course news. Automatic scrolling behavior can be selected using a new button. Fixes #1125
- Loading branch information
Showing
4 changed files
with
158 additions
and
49 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| function startListen() { | ||
| if ($(".module-to-collapse").length > 0) { | ||
| // Show the "Expand all modules" button if some modules are collapsed | ||
| $("#toggle-expand-all-modules").show(); | ||
| // Check local storage and expand all modules if the variable "expandAllModules" is set to true | ||
| const expandAllModules = localStorage.getItem("expandAllModules") === "true"; | ||
| if (expandAllModules) { | ||
| $(".module-panel > div").addClass("in").collapse("show"); // addClass("in") skips the expand animation | ||
| $("#toggle-expand-all-modules").find("span").removeClass("glyphicon-unchecked").addClass("glyphicon-check"); | ||
| } | ||
|
|
||
| // Register an event handler to the "Expand all modules" button | ||
| $("#toggle-expand-all-modules").on("click", function(event) { | ||
| const button = $(this); | ||
| const expandAllModules = localStorage.getItem("expandAllModules") === "true"; | ||
| if (expandAllModules) { | ||
| $(".module-panel, .module-to-collapse > div").collapse("hide"); | ||
| button.find("span").removeClass("glyphicon-check").addClass("glyphicon-unchecked"); | ||
| localStorage.setItem("expandAllModules", false); | ||
| } else { | ||
| $(".module-panel > div").collapse("show"); | ||
| button.find("span").removeClass("glyphicon-unchecked").addClass("glyphicon-check"); | ||
| localStorage.setItem("expandAllModules", true); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| // Check automatic scrolling behavior and show appropriate button | ||
| const autoScrollBehavior = localStorage.getItem("autoScrollBehavior"); | ||
| if (autoScrollBehavior === "instant") { | ||
| $("#auto-scroll-behavior-instant").show(); | ||
| } else if (autoScrollBehavior === "off") { | ||
| $("#auto-scroll-behavior-off").show(); | ||
| } else { | ||
| $("#auto-scroll-behavior-smooth").show(); | ||
| localStorage.setItem("autoScrollBehavior", "smooth"); // Scroll smoothly by default | ||
| } | ||
|
|
||
| // Register event handlers to all three scroll behavior buttons | ||
| $("#cycle-auto-scroll-behavior button").on("click", function(event) { | ||
| $(this).hide(); | ||
| const autoScrollBehavior = localStorage.getItem("autoScrollBehavior"); | ||
| if (autoScrollBehavior === "instant") { | ||
| $("#auto-scroll-behavior-off").show(); | ||
| localStorage.setItem("autoScrollBehavior", "off"); | ||
| } else if (autoScrollBehavior === "off") { | ||
| $("#auto-scroll-behavior-smooth").show(); | ||
| localStorage.setItem("autoScrollBehavior", "smooth"); | ||
| } else { | ||
| $("#auto-scroll-behavior-instant").show(); | ||
| localStorage.setItem("autoScrollBehavior", "instant"); | ||
| } | ||
| }); | ||
|
|
||
| $('.filter-categories button').on("click", function(event) { | ||
| var button = $(this); | ||
| var id = button.attr("data-category"); | ||
| if (button.hasClass("active")) { | ||
| button.removeClass("active").find("span").removeClass("glyphicon-unchecked").addClass("glyphicon-check"); | ||
| $('.module-panel tr[data-category="' + id + '"]').removeClass("hide"); | ||
| } else { | ||
| button.addClass("active").find("span").removeClass("glyphicon-check").addClass("glyphicon-unchecked"); | ||
| $('.module-panel tr[data-category="' + id + '"]').addClass("hide"); | ||
| } | ||
| $('.module-panel').each(function(index, panel) { | ||
| var mod = $(panel); | ||
| if (mod.find("tr:not(.hide)").length > 0) { | ||
| mod.removeClass("hide"); | ||
| } else { | ||
| mod.addClass("hide"); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| // Get current course news from the document and previously shown course news from local storage | ||
| const news = []; | ||
| $(".news-panel > .list-group > .list-group-item > .list-group-item-text").each(function() { | ||
| news.push($(this)[0].innerText); | ||
| }); | ||
| const course = "{{course|safe}}"; | ||
| const allPreviousNews = JSON.parse(localStorage.getItem("courseNews")) || {}; | ||
| const previousNews = course in allPreviousNews ? allPreviousNews[course] : []; | ||
| const currentNews = news.length > 0 ? news : previousNews; | ||
| if (news.length > 0) { | ||
| const allCurrentNews = { ...allPreviousNews, [course]: currentNews }; | ||
| localStorage.setItem("courseNews", JSON.stringify(allCurrentNews)); | ||
| } | ||
|
|
||
| function autoScroll() { | ||
| const autoScrollBehavior = localStorage.getItem("autoScrollBehavior"); | ||
| if (autoScrollBehavior !== "off") { | ||
| // Scroll to the first open module if there are no new news items | ||
| const openModules = $(".module-panel:not(.module-to-collapse)"); | ||
| if (openModules.length > 0 && JSON.stringify(currentNews) === JSON.stringify(previousNews)) { | ||
| const firstHeadingId = openModules[0].querySelector(".panel-heading").id; | ||
| document.getElementById(firstHeadingId).scrollIntoView({ behavior: autoScrollBehavior }); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| setTimeout(autoScroll, 10); // Instant automatic scrolling does not work without a small delay | ||
| } |
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