-
Notifications
You must be signed in to change notification settings - Fork 245
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #687 from alphagov/center-layout
Remove fixed layout, introduce back to top component
- Loading branch information
Showing
20 changed files
with
247 additions
and
110 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,54 @@ | ||
| /* eslint-env jest */ | ||
| const configPaths = require('../config/paths.json') | ||
| const PORT = configPaths.testPort | ||
|
|
||
| let browser | ||
| let page | ||
| let baseUrl = 'http://localhost:' + PORT | ||
|
|
||
| beforeAll(async (done) => { | ||
| browser = global.browser | ||
| page = await browser.newPage() | ||
| await page.evaluateOnNewDocument(() => { | ||
| window.__TESTS_RUNNING = true | ||
| }) | ||
| done() | ||
| }) | ||
|
|
||
| afterAll(async (done) => { | ||
| await page.close() | ||
| done() | ||
| }) | ||
|
|
||
| const BACK_TO_TOP_LINK_SELECTOR = '[data-module="app-back-to-top"] a' | ||
|
|
||
| describe('Back to top', () => { | ||
| it('is always visible when JavaScript is disabled', async () => { | ||
| await page.setJavaScriptEnabled(false) | ||
| await page.goto(`${baseUrl}/styles/colour/`, { waitUntil: 'load' }) | ||
| const isBackToTopVisible = await page.waitForSelector(BACK_TO_TOP_LINK_SELECTOR, { visible: true }) | ||
| expect(isBackToTopVisible).toBeTruthy() | ||
| }) | ||
| it('is hidden when at the top of the page', async () => { | ||
| await page.goto(`${baseUrl}/styles/colour/`, { waitUntil: 'load' }) | ||
| const isBackToTopHidden = await page.waitForSelector(BACK_TO_TOP_LINK_SELECTOR, { visible: false }) | ||
| expect(isBackToTopHidden).toBeTruthy() | ||
| }) | ||
| it('is visible when at the bottom of the page', async () => { | ||
| await page.goto(`${baseUrl}/styles/colour/`, { waitUntil: 'load' }) | ||
| // Scroll to the bottom of the page | ||
| await page.evaluate(() => window.scrollBy(0, document.body.scrollHeight)) | ||
| const isBackToTopVisible = await page.waitForSelector(BACK_TO_TOP_LINK_SELECTOR, { visible: true }) | ||
| expect(isBackToTopVisible).toBeTruthy() | ||
| }) | ||
| it('goes back to the top of the page when interacted with', async () => { | ||
| await page.goto(`${baseUrl}/styles/colour/`, { waitUntil: 'load' }) | ||
| // Scroll to the bottom of the page | ||
| await page.evaluate(() => window.scrollBy(0, document.body.scrollHeight)) | ||
| // Make sure the back to top component is available to click | ||
| await page.waitForSelector(BACK_TO_TOP_LINK_SELECTOR, { visible: true }) | ||
| await page.click(BACK_TO_TOP_LINK_SELECTOR) | ||
| const isAtTopOfPage = await page.evaluate(() => window.scrollY === 0) | ||
| expect(isAtTopOfPage).toBeTruthy() | ||
| }) | ||
| }) |
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,62 @@ | ||
| import 'govuk-frontend/vendor/polyfills/Function/prototype/bind' | ||
|
|
||
| function BackToTop ($module, options) { | ||
| this.$module = $module | ||
| this.$observedElement = options.$observedElement | ||
| this.intersectionRatio = 0 | ||
| } | ||
|
|
||
| BackToTop.prototype.init = function () { | ||
| var $observedElement = this.$observedElement | ||
|
|
||
| // If there's no element for the back to top to follow, exit early. | ||
| if (!$observedElement) { | ||
| return | ||
| } | ||
|
|
||
| if (!('IntersectionObserver' in window)) { | ||
| // If there's no support fallback to regular sticky behaviour | ||
| return this.update() | ||
| } | ||
|
|
||
| // Create new IntersectionObserver | ||
| var observer = new window.IntersectionObserver(function (entries) { | ||
| // Available data when an intersection happens | ||
| // Back to top visibility | ||
| // Element enters the viewport | ||
| if (entries[0].intersectionRatio !== 0) { | ||
| // How much of the element is visible | ||
| this.intersectionRatio = entries[0].intersectionRatio | ||
| // Element leaves the viewport | ||
| } else { | ||
| this.intersectionRatio = 0 | ||
| } | ||
| this.update() | ||
| }.bind(this), { | ||
| // Call the observer, when the element enters the viewport, | ||
| // when 25%, 50%, 75% and the whole element are visible | ||
| threshold: [0, 0.25, 0.5, 0.75, 1] | ||
| }) | ||
|
|
||
| observer.observe($observedElement) | ||
| } | ||
|
|
||
| BackToTop.prototype.update = function () { | ||
| var thresholdPercent = (this.intersectionRatio * 100) | ||
|
|
||
| if (thresholdPercent === 100) { | ||
| this.hide() | ||
| } else if (thresholdPercent < 90) { | ||
| this.show() | ||
| } | ||
| } | ||
|
|
||
| BackToTop.prototype.hide = function () { | ||
| this.$module.classList.add('app-back-to-top--hidden') | ||
| } | ||
|
|
||
| BackToTop.prototype.show = function () { | ||
| this.$module.classList.remove('app-back-to-top--hidden') | ||
| } | ||
|
|
||
| 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| .app-back-to-top { | ||
| position: -webkit-sticky; // Needed for Safari on OSX | ||
| position: sticky; // sass-lint:disable-line no-duplicate-properties | ||
| top: govuk-spacing(6); | ||
| margin-bottom: govuk-spacing(6); | ||
| } | ||
|
|
||
| .app-back-to-top__icon { | ||
| display: inline-block; | ||
| width: .8em; | ||
| height: 1em; | ||
| margin-top: -(govuk-spacing(1)); | ||
| margin-right: govuk-spacing(2); | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| @supports (position: sticky) { | ||
| .js-enabled .app-back-to-top--hidden { | ||
| display: none; | ||
| } | ||
| } |
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,12 @@ | ||
| .app-phase-banner { | ||
| @include govuk-media-query($until: tablet) { | ||
| margin-right: 0; | ||
| margin-left: 0; | ||
| padding-right: govuk-spacing(3); | ||
| padding-left: govuk-spacing(3); | ||
| } | ||
|
|
||
| @include govuk-media-query($from: tablet) { | ||
| border-bottom: 0; | ||
| } | ||
| } |
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
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
Oops, something went wrong.