forked from alphagov/govuk-design-system
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Convert all components to ES2015 classes
- Loading branch information
1 parent
59a30e4
commit 108142c
Showing
11 changed files
with
672 additions
and
652 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,65 @@ | ||
| function BackToTop($module) { | ||
| this.$module = $module | ||
| } | ||
|
|
||
| BackToTop.prototype.init = function () { | ||
| if (!this.$module) { | ||
| return | ||
| class BackToTop { | ||
| constructor($module) { | ||
| this.$module = $module | ||
| } | ||
|
|
||
| // Check if we can use Intersection Observers | ||
| if (!('IntersectionObserver' in window)) { | ||
| // If there's no support fallback to regular behaviour | ||
| // Since JavaScript is enabled we can remove the default hidden state | ||
| return this.$module.classList.remove('app-back-to-top--hidden') | ||
| } | ||
| init() { | ||
| if (!this.$module) { | ||
| return | ||
| } | ||
|
|
||
| const $footer = document.querySelector('.app-footer') | ||
| const $subNav = document.querySelector('.app-subnav') | ||
| // Check if we can use Intersection Observers | ||
| if (!('IntersectionObserver' in window)) { | ||
| // If there's no support fallback to regular behaviour | ||
| // Since JavaScript is enabled we can remove the default hidden state | ||
| return this.$module.classList.remove('app-back-to-top--hidden') | ||
| } | ||
|
|
||
| // Check if there is anything to observe | ||
| if (!$footer || !$subNav) { | ||
| return | ||
| } | ||
| const $footer = document.querySelector('.app-footer') | ||
| const $subNav = document.querySelector('.app-subnav') | ||
|
|
||
| let footerIsIntersecting = false | ||
| let subNavIsIntersecting = false | ||
| let subNavIntersectionRatio = 0 | ||
| // Check if there is anything to observe | ||
| if (!$footer || !$subNav) { | ||
| return | ||
| } | ||
|
|
||
| const observer = new window.IntersectionObserver((entries) => { | ||
| // Find the elements we care about from the entries | ||
| const footerEntry = entries.find((entry) => entry.target === $footer) | ||
| const subNavEntry = entries.find((entry) => entry.target === $subNav) | ||
| let footerIsIntersecting = false | ||
| let subNavIsIntersecting = false | ||
| let subNavIntersectionRatio = 0 | ||
|
|
||
| // If there is an entry this means the element has changed so lets check if it's intersecting. | ||
| if (footerEntry) { | ||
| footerIsIntersecting = footerEntry.isIntersecting | ||
| } | ||
| if (subNavEntry) { | ||
| subNavIsIntersecting = subNavEntry.isIntersecting | ||
| subNavIntersectionRatio = subNavEntry.intersectionRatio | ||
| } | ||
| const observer = new window.IntersectionObserver((entries) => { | ||
| // Find the elements we care about from the entries | ||
| const footerEntry = entries.find((entry) => entry.target === $footer) | ||
| const subNavEntry = entries.find((entry) => entry.target === $subNav) | ||
|
|
||
| // If the subnav or the footer not visible then fix the back to top link to follow the user | ||
| if (subNavIsIntersecting || footerIsIntersecting) { | ||
| this.$module.classList.remove('app-back-to-top--fixed') | ||
| } else { | ||
| this.$module.classList.add('app-back-to-top--fixed') | ||
| } | ||
| // If there is an entry this means the element has changed so lets check if it's intersecting. | ||
| if (footerEntry) { | ||
| footerIsIntersecting = footerEntry.isIntersecting | ||
| } | ||
| if (subNavEntry) { | ||
| subNavIsIntersecting = subNavEntry.isIntersecting | ||
| subNavIntersectionRatio = subNavEntry.intersectionRatio | ||
| } | ||
|
|
||
| // If the subnav is visible but you can see it all at once, then a back to top link is likely not as useful. | ||
| // We hide the link but make it focusable for screen readers users who might still find it useful. | ||
| if (subNavIsIntersecting && subNavIntersectionRatio === 1) { | ||
| this.$module.classList.add('app-back-to-top--hidden') | ||
| } else { | ||
| this.$module.classList.remove('app-back-to-top--hidden') | ||
| } | ||
| }) | ||
| // If the subnav or the footer not visible then fix the back to top link to follow the user | ||
| if (subNavIsIntersecting || footerIsIntersecting) { | ||
| this.$module.classList.remove('app-back-to-top--fixed') | ||
| } else { | ||
| this.$module.classList.add('app-back-to-top--fixed') | ||
| } | ||
|
|
||
| // If the subnav is visible but you can see it all at once, then a back to top link is likely not as useful. | ||
| // We hide the link but make it focusable for screen readers users who might still find it useful. | ||
| if (subNavIsIntersecting && subNavIntersectionRatio === 1) { | ||
| this.$module.classList.add('app-back-to-top--hidden') | ||
| } else { | ||
| this.$module.classList.remove('app-back-to-top--hidden') | ||
| } | ||
| }) | ||
|
|
||
| observer.observe($footer) | ||
| observer.observe($subNav) | ||
| observer.observe($footer) | ||
| observer.observe($subNav) | ||
| } | ||
| } | ||
|
|
||
| export default BackToTop |
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
Oops, something went wrong.