govuk_frontend_toolkit 4.18.2 → 4.18.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 69f29797348ec404bd8eff1ab334c112ddcb9d97
4
- data.tar.gz: ba0f6485cef046dfda13fad5a545061663c97f75
3
+ metadata.gz: ff89585fe100d23ffb900f2b96330c86e7f0fdf5
4
+ data.tar.gz: 36ef8152896403bea8a5904192b42956109a8425
5
5
  SHA512:
6
- metadata.gz: efd223fcb38ac707cdc3ad5c7a95c9f2748158479332e6a90985b7ecae3ab2b1743566138f71b290060c863e88bf759feebf1326a4eb24c24ee441f17aa895f6
7
- data.tar.gz: ddb0056d66c87762147b11a4de3d77c3ca698b7d5fea3171bd44c293b2cd57264dd3b03b71258a1c88f620332b9333c095ff17d07a673508becb2fb58841c016
6
+ metadata.gz: 550dae177f300cb2c69a4220ed10bf07f05789478afd1529697d033569ab486b0ea35c006e1548ab171f0ffbd2bdb1ae3e9b898fd506dbdf195b8681b0b3d35d
7
+ data.tar.gz: 199cd1b7031db11cd65ec393be4eaa0749e9d690e9d28607073b8f82fdfefe2d2ef5eeba353dfaa4ab944b8418e6e3cfcde172a4cab7fb2214e0daf2e5836c1b
@@ -1,3 +1,7 @@
1
+ # 4.18.3
2
+
3
+ - For smaller screens (<768px) ensure that the GOVUK.StickAtTopWhenScrolling JS "unsticks" the element which was previously "stuck" (by removing both the class which sets fixed positioning and the shim). ([PR #329](https://github.com/alphagov/govuk_frontend_toolkit/pull/329))
4
+
1
5
  # 4.18.2
2
6
 
3
7
  - Remove unnecessary print font fallback that causes regression downstream ([PR #328](https://github.com/alphagov/govuk_frontend_toolkit/pull/328))
@@ -1 +1 @@
1
- 4.18.2
1
+ 4.18.3
@@ -8,7 +8,23 @@
8
8
  var sticky = {
9
9
  _hasScrolled: false,
10
10
  _scrollTimeout: false,
11
+ _hasResized: false,
12
+ _resizeTimeout: false,
11
13
 
14
+ getWindowDimensions: function() {
15
+ return {
16
+ height: $(global).height(),
17
+ width: $(global).width()
18
+ };
19
+ },
20
+ getWindowPositions: function() {
21
+ return {
22
+ scrollTop: $(global).scrollTop()
23
+ };
24
+ },
25
+ getElementOffset: function($el) {
26
+ return $el.offset()
27
+ },
12
28
  init: function(){
13
29
  var $els = $('.js-stick-at-top-when-scrolling');
14
30
 
@@ -19,7 +35,11 @@
19
35
  $(global).scroll(sticky.onScroll);
20
36
  sticky._scrollTimeout = global.setInterval(sticky.checkScroll, 50);
21
37
  }
22
- $(global).resize(sticky.onResize);
38
+
39
+ if(sticky._resizeTimeout === false) {
40
+ $(global).resize(sticky.onResize);
41
+ sticky._resizeTimeout = global.setInterval(sticky.checkResize, 50);
42
+ }
23
43
  }
24
44
  if(GOVUK.stopScrollingAtFooter){
25
45
  $els.each(function(i,el){
@@ -39,26 +59,47 @@
39
59
  onScroll: function(){
40
60
  sticky._hasScrolled = true;
41
61
  },
62
+ onResize: function(){
63
+ sticky._hasResized = true;
64
+ },
42
65
  checkScroll: function(){
43
66
  if(sticky._hasScrolled === true){
44
67
  sticky._hasScrolled = false;
45
68
 
46
- var windowVerticalPosition = $(global).scrollTop();
69
+ var windowVerticalPosition = sticky.getWindowPositions().scrollTop;
70
+
71
+ var windowDimensions = sticky.getWindowDimensions();
72
+
47
73
  sticky.$els.each(function(i, el){
48
74
  var $el = $(el),
49
75
  scrolledFrom = $el.data('scrolled-from');
50
76
 
51
77
  if (scrolledFrom && windowVerticalPosition < scrolledFrom){
52
78
  sticky.release($el);
53
- } else if($(global).width() > 768 && windowVerticalPosition >= $el.offset().top) {
79
+ } else if(windowDimensions.width > 768 && windowVerticalPosition >= sticky.getElementOffset($el).top) {
54
80
  sticky.stick($el);
55
81
  }
56
82
  });
57
83
  }
58
84
  },
85
+ checkResize: function() {
86
+ if(sticky._hasResized === true){
87
+ sticky._hasResized = false;
88
+
89
+ var windowDimensions = sticky.getWindowDimensions();
90
+
91
+ sticky.$els.each(function(i, el){
92
+ var $el = $(el);
93
+
94
+ if(windowDimensions.width <= 768) {
95
+ sticky.release($el);
96
+ }
97
+ });
98
+ }
99
+ },
59
100
  stick: function($el){
60
101
  if (!$el.hasClass('content-fixed')) {
61
- $el.data('scrolled-from', $el.offset().top);
102
+ $el.data('scrolled-from', sticky.getElementOffset($el).top);
62
103
  var height = Math.max($el.height(), 1);
63
104
  $el.before('<div class="shim" style="width: '+ $el.width() + 'px; height: ' + height + 'px">&nbsp;</div>');
64
105
  $el.css('width', $el.width() + "px").addClass('content-fixed');
@@ -13,27 +13,109 @@ describe("stick-at-top-when-scrolling", function(){
13
13
  $stickyWrapper.remove();
14
14
  });
15
15
 
16
- it('should add fixed class on stick', function(){
17
- expect(!$stickyElement.hasClass('content-fixed')).toBe(true);
18
- GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
19
- expect($stickyElement.hasClass('content-fixed')).toBe(true);
16
+ describe('when stick is called', function(){
17
+
18
+ it('should add fixed class on stick', function(){
19
+ expect(!$stickyElement.hasClass('content-fixed')).toBe(true);
20
+ GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
21
+ expect($stickyElement.hasClass('content-fixed')).toBe(true);
22
+ });
23
+
24
+ it('should insert shim when sticking the element', function(){
25
+ expect($('.shim').length).toBe(0);
26
+ GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
27
+ expect($('.shim').length).toBe(1);
28
+ });
29
+
30
+ it('should insert shim with minimum height', function(){
31
+ GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
32
+ expect($('.shim').height()).toBe(1);
33
+ });
34
+
20
35
  });
21
36
 
22
- it('should remove fixed class on release', function(){
23
- $stickyElement.addClass('content-fixed');
24
- GOVUK.stickAtTopWhenScrolling.release($stickyElement);
25
- expect(!$stickyElement.hasClass('content-fixed')).toBe(true);
37
+ describe('when release is called', function(){
38
+
39
+ it('should remove fixed class', function(){
40
+ $stickyElement.addClass('content-fixed');
41
+ GOVUK.stickAtTopWhenScrolling.release($stickyElement);
42
+ expect($stickyElement.hasClass('content-fixed')).toBe(false);
43
+ });
44
+
45
+ it('should remove the shim', function(){
46
+ $stickyElement = $('<div class="stick-at-top-when-scrolling content-fixed"></div>');
47
+ GOVUK.stickAtTopWhenScrolling.release($stickyElement);
48
+ expect($('.shim').length).toBe(0);
49
+ });
50
+
26
51
  });
27
52
 
28
- it('should insert shim when sticking content', function(){
29
- expect($('.shim').length).toBe(0);
30
- GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
31
- expect($('.shim').length).toBe(1);
53
+ describe('for larger screens (>768px)', function(){
54
+
55
+ beforeEach(function() {
56
+ GOVUK.stickAtTopWhenScrolling.getWindowPositions = function(){
57
+ return {
58
+ scrollTop: 300
59
+ };
60
+ };
61
+ GOVUK.stickAtTopWhenScrolling.getElementOffset = function(){
62
+ return {
63
+ top: 300
64
+ };
65
+ };
66
+ GOVUK.stickAtTopWhenScrolling.getWindowDimensions = function(){
67
+ return {
68
+ height: 768,
69
+ width: 769
70
+ };
71
+ };
72
+ GOVUK.stickAtTopWhenScrolling.$els = $stickyElement;
73
+ GOVUK.stickAtTopWhenScrolling._hasScrolled = true;
74
+ GOVUK.stickAtTopWhenScrolling.checkScroll();
75
+ });
76
+
77
+ it('should stick, if the scroll position is past the element position', function(){
78
+ expect($stickyElement.hasClass('content-fixed')).toBe(true);
79
+ });
80
+
81
+ it('should unstick, if the scroll position is less than the point at which scrolling started', function(){
82
+ GOVUK.stickAtTopWhenScrolling.getWindowPositions = function() {
83
+ return {
84
+ scrollTop: 0
85
+ };
86
+ };
87
+ GOVUK.stickAtTopWhenScrolling.$els = $stickyElement;
88
+ GOVUK.stickAtTopWhenScrolling._hasScrolled = true;
89
+ GOVUK.stickAtTopWhenScrolling.checkScroll();
90
+ expect($stickyElement.hasClass('content-fixed')).toBe(false);
91
+ });
92
+
32
93
  });
33
94
 
34
- it('should insert shim with minimum height', function(){
35
- GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
36
- expect($('.shim').height()).toBe(1);
95
+ describe('for smaller screens (<=768px)', function(){
96
+
97
+ beforeEach(function() {
98
+ GOVUK.stickAtTopWhenScrolling.getWindowDimensions = function() {
99
+ return {
100
+ height: 768,
101
+ width: 767
102
+ };
103
+ };
104
+ GOVUK.stickAtTopWhenScrolling.getElementOffset = function() {
105
+ return {
106
+ top: 300
107
+ };
108
+ };
109
+ GOVUK.stickAtTopWhenScrolling.$els = $stickyElement;
110
+ GOVUK.stickAtTopWhenScrolling._hasScrolled = true;
111
+ GOVUK.stickAtTopWhenScrolling.checkScroll();
112
+ });
113
+
114
+ it('should unstick the element', function(){
115
+ expect($stickyElement.hasClass('content-fixed')).toBe(false);
116
+ });
117
+
37
118
  });
119
+
38
120
  });
39
121
 
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_frontend_toolkit
3
3
  version: !ruby/object:Gem::Version
4
- version: 4.18.2
4
+ version: 4.18.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Government Digital Service
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-09-27 00:00:00.000000000 Z
11
+ date: 2016-10-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails