Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: anchor tag scroll based on name attribute

Browse Source 
This PR changes the default function of HTML anchor tags that focus on another element on the page based on the name attribute. Previously the anchor tags that were set to scroll on the page to another element would do nothing since the scroll was set to only look for the id attribute. As a result, users would have to manually scroll to the location of the name attribute, if it is previously known. Otherwise, the link appears to be broken. Now when the anchor tag is used to focus it and send the location of the focus element to the parent page to scroll to the correct location. This change will impact the Learner in the New Experience view.
This commit is contained in:
Kristin Aoki
2021-06-10 12:12:46 -04:00
committed by GitHub
parent 5fee0a8174
commit 9ca8c430de
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
lms/templates/courseware/courseware-chromeless.html
View File

@@ -134,17 +134,21 @@ ${HTML(fragment.foot_html())}
if (eventType !== 'load' && newWidth === lastWidth && newHeight === lastHeight) {
// Monitor when any anchor tag is clicked, it is checked to make sure
// it is referencing an element's id (not an external website). If
// the href attribute is an id, the location of the selected focus
// it is referencing an element's id or name (not an external website). If
// the href attribute is an id or name, the location of the selected focus
// element is sent through its offset attribute. The offset will
// allow the page to scroll to the location of the focus element so
// that it is at the top of the page.
// that it is at the top of the page. Unique ids and names are
// required for proper scrolling.
$('a').on("click", function(event){
if ($(this).attr('href')[0] === "#") {
event.preventDefault()
var targetId = $(this).attr('href')
window.parent.postMessage({"offset": $(targetId).offset().top}, document.referrer)
event.preventDefault();
var targetId = $(this).attr('href');
var targetName = $(this).attr('href').slice(1);
// Checks if the target uses an id or name to focus and gets offset.
var targetOffset = $(targetId).offset() || $(document.getElementsByName(targetName)[0]).offset();
window.parent.postMessage({"offset": targetOffset.top}, document.referrer);
}
})
return;