-
Notifications
You must be signed in to change notification settings - Fork 17
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 #2023 from alphagov/move-from-static-to-gem
Switch from static to govuk_publishing_components scripts
- Loading branch information
Showing
17 changed files
with
224 additions
and
20 deletions.
There are no files selected for viewing
117 changes: 117 additions & 0 deletions
117
app/assets/javascripts/modules/sticky-element-container.js
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,117 @@ | ||
| /* | ||
| This module will cause a child in the target element to: | ||
| - hide when the top of the target element is visible; | ||
| - stick to the bottom of the window while the parent element is in view; | ||
| - stick to the bottom of the target when the user scrolls past the bottom. | ||
| Use 'data-module="sticky-element-container"' to instantiate, and add | ||
| `[data-sticky-element]` to the child you want to position. | ||
| */ | ||
| (function (Modules, root) { | ||
| 'use strict' | ||
|
|
||
| var $ = root.$ | ||
| var $window = $(root) | ||
|
|
||
| Modules.StickyElementContainer = function () { | ||
| var self = this | ||
|
|
||
| self._getWindowDimensions = function _getWindowDimensions () { | ||
| return { | ||
| height: $window.height(), | ||
| width: $window.width() | ||
| } | ||
| } | ||
|
|
||
| self._getWindowPositions = function _getWindowPositions () { | ||
| return { | ||
| scrollTop: $window.scrollTop() | ||
| } | ||
| } | ||
|
|
||
| self.start = function start ($el) { | ||
| var $element = $el.find('[data-sticky-element]') | ||
| var _hasResized = true | ||
| var _hasScrolled = true | ||
| var _interval = 50 | ||
| var _windowVerticalPosition = 1 | ||
| var _startPosition, _stopPosition | ||
|
|
||
| initialise() | ||
|
|
||
| function initialise () { | ||
| $window.resize(onResize) | ||
| $window.scroll(onScroll) | ||
| setInterval(checkResize, _interval) | ||
| setInterval(checkScroll, _interval) | ||
| checkResize() | ||
| checkScroll() | ||
| $element.addClass('sticky-element--enabled') | ||
| } | ||
|
|
||
| function onResize () { | ||
| _hasResized = true | ||
| } | ||
|
|
||
| function onScroll () { | ||
| _hasScrolled = true | ||
| } | ||
|
|
||
| function checkResize () { | ||
| if (_hasResized) { | ||
| _hasResized = false | ||
| _hasScrolled = true | ||
|
|
||
| var windowDimensions = self._getWindowDimensions() | ||
| _startPosition = $el.offset().top | ||
| _stopPosition = $el.offset().top + $el.height() - windowDimensions.height | ||
| } | ||
| } | ||
|
|
||
| function checkScroll () { | ||
| if (_hasScrolled) { | ||
| _hasScrolled = false | ||
|
|
||
| _windowVerticalPosition = self._getWindowPositions().scrollTop | ||
|
|
||
| updateVisibility() | ||
| updatePosition() | ||
| } | ||
| } | ||
|
|
||
| function updateVisibility () { | ||
| var isPastStart = _startPosition < _windowVerticalPosition | ||
| if (isPastStart) { | ||
| show() | ||
| } else { | ||
| hide() | ||
| } | ||
| } | ||
|
|
||
| function updatePosition () { | ||
| var isPastEnd = _stopPosition < _windowVerticalPosition | ||
| if (isPastEnd) { | ||
| stickToParent() | ||
| } else { | ||
| stickToWindow() | ||
| } | ||
| } | ||
|
|
||
| function stickToWindow () { | ||
| $element.addClass('sticky-element--stuck-to-window') | ||
| } | ||
|
|
||
| function stickToParent () { | ||
| $element.removeClass('sticky-element--stuck-to-window') | ||
| } | ||
|
|
||
| function show () { | ||
| $element.removeClass('sticky-element--hidden') | ||
| } | ||
|
|
||
| function hide () { | ||
| $element.addClass('sticky-element--hidden') | ||
| } | ||
| } | ||
| } | ||
| })(window.GOVUK.Modules, window) |
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
23 changes: 23 additions & 0 deletions
23
app/assets/stylesheets/helpers/_sticky-element-container.scss
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,23 @@ | ||
| .js-enabled .sticky-element { | ||
| position: absolute; | ||
| bottom: 0; | ||
|
|
||
| &--stuck-to-window { | ||
| bottom: 0; | ||
| position: fixed; | ||
| } | ||
|
|
||
| &--enabled { | ||
| transition: opacity, .3s, ease; | ||
| opacity: 1; | ||
|
|
||
| @include govuk-media-query($until: tablet) { | ||
| position: static; | ||
| } | ||
| } | ||
|
|
||
| &--hidden { | ||
| opacity: 0; | ||
| pointer-events: 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
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
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,63 @@ | ||
| describe('A sticky-element-container module', function () { | ||
| 'use strict' | ||
|
|
||
| var GOVUK = window.GOVUK | ||
| var $ = window.$ | ||
| var instance | ||
|
|
||
| beforeEach(function () { | ||
| instance = new GOVUK.Modules.StickyElementContainer() | ||
| }) | ||
|
|
||
| describe('in a large parent element', function () { | ||
| var $element = $( | ||
| '<div data-module="sticky-element-container" style="height: 9001px; margin-bottom: 1000px">' + | ||
| '<div data-sticky-element>' + | ||
| '<span>Content</span>' + | ||
| '</div>' + | ||
| '</div>' | ||
| ) | ||
| var $footer = $element.find('[data-sticky-element]') | ||
|
|
||
| describe('on desktop', function () { | ||
| beforeEach(function () { | ||
| instance._getWindowDimensions = function () { | ||
| return { | ||
| height: 768, | ||
| width: 1024 | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| it('hides the element, when scrolled at the top', function () { | ||
| instance.start($element) | ||
|
|
||
| expect($footer.hasClass('sticky-element--hidden')).toBe(true) | ||
| }) | ||
|
|
||
| it('shows the element, stuck to the window, when scrolled in the middle', function () { | ||
| instance._getWindowPositions = function () { | ||
| return { | ||
| scrollTop: 5000 | ||
| } | ||
| } | ||
| instance.start($element) | ||
|
|
||
| expect($footer.hasClass('sticky-element--hidden')).toBe(false) | ||
| expect($footer.hasClass('sticky-element--stuck-to-window')).toBe(true) | ||
| }) | ||
|
|
||
| it('shows the element, stuck to the parent, when scrolled at the bottom', function () { | ||
| instance._getWindowPositions = function () { | ||
| return { | ||
| scrollTop: 9800 | ||
| } | ||
| } | ||
| instance.start($element) | ||
|
|
||
| expect($footer.hasClass('sticky-element--hidden')).toBe(false) | ||
| expect($footer.hasClass('sticky-element--stuck-to-window')).toBe(false) | ||
| }) | ||
| }) | ||
| }) | ||
| }) |
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