govuk_frontend_toolkit 4.18.2 → 4.18.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 69f29797348ec404bd8eff1ab334c112ddcb9d97
-  data.tar.gz: ba0f6485cef046dfda13fad5a545061663c97f75
+  metadata.gz: ff89585fe100d23ffb900f2b96330c86e7f0fdf5
+  data.tar.gz: 36ef8152896403bea8a5904192b42956109a8425
 SHA512:
-  metadata.gz: efd223fcb38ac707cdc3ad5c7a95c9f2748158479332e6a90985b7ecae3ab2b1743566138f71b290060c863e88bf759feebf1326a4eb24c24ee441f17aa895f6
-  data.tar.gz: ddb0056d66c87762147b11a4de3d77c3ca698b7d5fea3171bd44c293b2cd57264dd3b03b71258a1c88f620332b9333c095ff17d07a673508becb2fb58841c016
+  metadata.gz: 550dae177f300cb2c69a4220ed10bf07f05789478afd1529697d033569ab486b0ea35c006e1548ab171f0ffbd2bdb1ae3e9b898fd506dbdf195b8681b0b3d35d
+  data.tar.gz: 199cd1b7031db11cd65ec393be4eaa0749e9d690e9d28607073b8f82fdfefe2d2ef5eeba353dfaa4ab944b8418e6e3cfcde172a4cab7fb2214e0daf2e5836c1b

data/app/assets/CHANGELOG.md

@@ -1,3 +1,7 @@
+# 4.18.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.18.2
 
 - Remove unnecessary print font fallback that causes regression downstream ([PR #328](https://github.com/alphagov/govuk_frontend_toolkit/pull/328))

data/app/assets/VERSION.txt

@@ -1 +1 @@
-4.18.2
+4.18.3

data/app/assets/javascripts/govuk/stick-at-top-when-scrolling.js

@@ -8,7 +8,23 @@
   var sticky = {
     _hasScrolled: false,
     _scrollTimeout: false,
+    _hasResized: false,
+    _resizeTimeout: false,
 
+    getWindowDimensions: function() {
+      return {
+        height: $(global).height(),
+        width: $(global).width()
+      };
+    },
+    getWindowPositions: function() {
+      return {
+        scrollTop: $(global).scrollTop()
+      };
+    },
+    getElementOffset: function($el) {
+      return $el.offset()
+    },
     init: function(){
       var $els = $('.js-stick-at-top-when-scrolling');
 
@@ -19,7 +35,11 @@
           $(global).scroll(sticky.onScroll);
           sticky._scrollTimeout = global.setInterval(sticky.checkScroll, 50);
         }
-        $(global).resize(sticky.onResize);
+
+        if(sticky._resizeTimeout === false) {
+          $(global).resize(sticky.onResize);
+          sticky._resizeTimeout = global.setInterval(sticky.checkResize, 50);
+        }
       }
       if(GOVUK.stopScrollingAtFooter){
         $els.each(function(i,el){
@@ -39,26 +59,47 @@
     onScroll: function(){
       sticky._hasScrolled = true;
     },
+    onResize: function(){
+      sticky._hasResized = true;
+    },
     checkScroll: function(){
       if(sticky._hasScrolled === true){
         sticky._hasScrolled = false;
 
-        var windowVerticalPosition = $(global).scrollTop();
+        var windowVerticalPosition = sticky.getWindowPositions().scrollTop;
+
+        var windowDimensions = sticky.getWindowDimensions();
+
         sticky.$els.each(function(i, el){
           var $el = $(el),
               scrolledFrom = $el.data('scrolled-from');
 
           if (scrolledFrom && windowVerticalPosition < scrolledFrom){
             sticky.release($el);
-          } else if($(global).width() > 768 && windowVerticalPosition >= $el.offset().top) {
+          } else if(windowDimensions.width > 768 && windowVerticalPosition >= sticky.getElementOffset($el).top) {
             sticky.stick($el);
           }
         });
       }
     },
+    checkResize: function() {
+      if(sticky._hasResized === true){
+        sticky._hasResized = false;
+
+        var windowDimensions = sticky.getWindowDimensions();
+
+        sticky.$els.each(function(i, el){
+          var $el = $(el);
+
+          if(windowDimensions.width <= 768) {
+            sticky.release($el);
+          }
+        });
+      }
+    },
     stick: function($el){
       if (!$el.hasClass('content-fixed')) {
-        $el.data('scrolled-from', $el.offset().top);
+        $el.data('scrolled-from', sticky.getElementOffset($el).top);
         var height = Math.max($el.height(), 1);
         $el.before('<div class="shim" style="width: '+ $el.width() + 'px; height: ' + height + 'px">&nbsp;</div>');
         $el.css('width', $el.width() + "px").addClass('content-fixed');

data/app/assets/spec/unit/stick-at-top-when-scrolling.spec.js

@@ -13,27 +13,109 @@ describe("stick-at-top-when-scrolling", function(){
     $stickyWrapper.remove();
   });
 
-  it('should add fixed class on stick', function(){
-    expect(!$stickyElement.hasClass('content-fixed')).toBe(true);
-    GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
-    expect($stickyElement.hasClass('content-fixed')).toBe(true);
+  describe('when stick is called', function(){
+
+    it('should add fixed class on stick', function(){
+      expect(!$stickyElement.hasClass('content-fixed')).toBe(true);
+      GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
+      expect($stickyElement.hasClass('content-fixed')).toBe(true);
+    });
+
+    it('should insert shim when sticking the element', function(){
+      expect($('.shim').length).toBe(0);
+      GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
+      expect($('.shim').length).toBe(1);
+    });
+
+    it('should insert shim with minimum height', function(){
+      GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
+      expect($('.shim').height()).toBe(1);
+    });
+
   });
 
-  it('should remove fixed class on release', function(){
-    $stickyElement.addClass('content-fixed');
-    GOVUK.stickAtTopWhenScrolling.release($stickyElement);
-    expect(!$stickyElement.hasClass('content-fixed')).toBe(true);
+  describe('when release is called', function(){
+
+    it('should remove fixed class', function(){
+      $stickyElement.addClass('content-fixed');
+      GOVUK.stickAtTopWhenScrolling.release($stickyElement);
+      expect($stickyElement.hasClass('content-fixed')).toBe(false);
+    });
+
+    it('should remove the shim', function(){
+      $stickyElement = $('<div class="stick-at-top-when-scrolling content-fixed"></div>');
+      GOVUK.stickAtTopWhenScrolling.release($stickyElement);
+      expect($('.shim').length).toBe(0);
+    });
+
   });
 
-  it('should insert shim when sticking content', function(){
-    expect($('.shim').length).toBe(0);
-    GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
-    expect($('.shim').length).toBe(1);
+  describe('for larger screens (>768px)', function(){
+
+    beforeEach(function() {
+      GOVUK.stickAtTopWhenScrolling.getWindowPositions = function(){
+        return {
+          scrollTop: 300
+        };
+      };
+      GOVUK.stickAtTopWhenScrolling.getElementOffset = function(){
+        return {
+          top: 300
+        };
+      };
+      GOVUK.stickAtTopWhenScrolling.getWindowDimensions = function(){
+        return {
+          height: 768,
+          width: 769
+        };
+      };
+      GOVUK.stickAtTopWhenScrolling.$els = $stickyElement;
+      GOVUK.stickAtTopWhenScrolling._hasScrolled = true;
+      GOVUK.stickAtTopWhenScrolling.checkScroll();
+    });
+
+    it('should stick, if the scroll position is past the element position', function(){
+      expect($stickyElement.hasClass('content-fixed')).toBe(true);
+    });
+
+    it('should unstick, if the scroll position is less than the point at which scrolling started', function(){
+      GOVUK.stickAtTopWhenScrolling.getWindowPositions = function() {
+        return {
+          scrollTop: 0
+        };
+      };
+      GOVUK.stickAtTopWhenScrolling.$els = $stickyElement;
+      GOVUK.stickAtTopWhenScrolling._hasScrolled = true;
+      GOVUK.stickAtTopWhenScrolling.checkScroll();
+      expect($stickyElement.hasClass('content-fixed')).toBe(false);
+    });
+
   });
 
-  it('should insert shim with minimum height', function(){
-    GOVUK.stickAtTopWhenScrolling.stick($stickyElement);
-    expect($('.shim').height()).toBe(1);
+  describe('for smaller screens (<=768px)', function(){
+
+    beforeEach(function() {
+      GOVUK.stickAtTopWhenScrolling.getWindowDimensions = function() {
+        return {
+          height: 768,
+          width: 767
+        };
+      };
+      GOVUK.stickAtTopWhenScrolling.getElementOffset = function() {
+        return {
+          top: 300
+        };
+      };
+      GOVUK.stickAtTopWhenScrolling.$els = $stickyElement;
+      GOVUK.stickAtTopWhenScrolling._hasScrolled = true;
+      GOVUK.stickAtTopWhenScrolling.checkScroll();
+    });
+
+    it('should unstick the element', function(){
+      expect($stickyElement.hasClass('content-fixed')).toBe(false);
+    });
+
   });
+
 });
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_frontend_toolkit
 version: !ruby/object:Gem::Version
-  version: 4.18.2
+  version: 4.18.3
 platform: ruby
 authors:
 - Government Digital Service
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-09-27 00:00:00.000000000 Z
+date: 2016-10-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails