govuk_frontend_toolkit 0.44.0 → 0.45.0

data/app/assets/README.md

@@ -698,6 +698,34 @@ Or to add it just to that list you could use:
 new GOVUK.PrimaryList($('#primary-list'), '.primary-item');
 ```
 
+## Stick at top when scrolling
+
+`GOVUK.stickAtTopWhenScrolling` tries to add a class to an element when the top
+of that element would be scrolled out of the viewport.
+
+The following would cause the element to stay when you scroll:
+
+```html
+<div class="js-stick-at-top-when-scrolling">something</div>
+```
+
+```css
+.content-fixed {
+  position: fixed;
+  top: 0;
+}
+.shim {
+  display: block;
+}
+```
+
+```javascript
+GOVUK.stickAtTopWhenScrolling.init();
+```
+
+If you also include the `stopScrollingAtFooter` JavaScript this will also try
+and stop the elements before they get to the bottom.
+
 
 ## Licence
 

data/app/assets/javascripts/govuk/primary-links.js

@@ -32,9 +32,11 @@
     },
     hideExtraLinks: function(){
       this.$extraLinks.addClass('visuallyhidden');
+      $(window).trigger('govuk.pageSizeChanged')
     },
     showExtraLinks: function(){
       this.$extraLinks.removeClass('visuallyhidden');
+      $(window).trigger('govuk.pageSizeChanged')
     }
   };
   GOVUK.PrimaryList = PrimaryList;

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

@@ -0,0 +1,76 @@
+(function () {
+  "use strict"
+  var root = this,
+      $ = root.jQuery;
+  if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
+
+  // Stick elements to top of screen when you scroll past, documentation is in the README.md
+  var sticky = {
+    _hasScrolled: false,
+    _scrollTimeout: false,
+
+    init: function(){
+      var $els = $('.js-stick-at-top-when-scrolling');
+
+      if($els.length > 0){
+        sticky.$els = $els;
+
+        if(sticky._scrollTimeout === false) {
+          $(root).scroll(sticky.onScroll);
+          sticky._scrollTimeout = root.setInterval(sticky.checkScroll, 50);
+        }
+        $(root).resize(sticky.onResize);
+      }
+      if(root.GOVUK.stopScrollingAtFooter){
+        $els.each(function(i,el){
+          var $img = $(el).find('img');
+          if($img.length > 0){
+            var image = new Image();
+            image.onload = function(){
+              root.GOVUK.stopScrollingAtFooter.addEl($(el), $(el).outerHeight());
+            };
+            image.src = $img.attr('src');
+          } else {
+            root.GOVUK.stopScrollingAtFooter.addEl($(el), $(el).outerHeight());
+          }
+        });
+      }
+    },
+    onScroll: function(){
+      sticky._hasScrolled = true;
+    },
+    checkScroll: function(){
+      if(sticky._hasScrolled === true){
+        sticky._hasScrolled = false;
+
+        var windowVerticalPosition = $(root).scrollTop();
+        sticky.$els.each(function(i, el){
+          var $el = $(el),
+              scrolledFrom = $el.data('scrolled-from');
+
+          if (scrolledFrom && windowVerticalPosition < scrolledFrom){
+            sticky.release($el);
+          } else if($(root).width() > 768 && windowVerticalPosition >= $el.offset().top) {
+            sticky.stick($el);
+          }
+        });
+      }
+    },
+    stick: function($el){
+      if (!$el.hasClass('content-fixed')) {
+        $el.data('scrolled-from', $el.offset().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');
+      }
+    },
+    release: function($el){
+      if($el.hasClass('content-fixed')){
+        $el.data('scrolled-from', false);
+        $el.removeClass('content-fixed').css('width', '');
+        $el.siblings('.shim').remove();
+      }
+    }
+  }
+  root.GOVUK.stickAtTopWhenScrolling = sticky;
+}).call(this);

data/app/assets/spec/StickAtTopWhenScrollingSpec.js

@@ -0,0 +1,39 @@
+describe("stick-at-top-when-scrolling", function(){
+  var $stickyElement,
+      $stickyWrapper;
+
+  beforeEach(function(){
+    $stickyElement = $('<div class="stick-at-top-when-scrolling"></div>');
+    $stickyWrapper = $('<div>').append($stickyElement);
+
+    $('body').append($stickyWrapper);
+  });
+
+  afterEach(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);
+  });
+
+  it('should remove fixed class on release', function(){
+    $stickyElement.addClass('content-fixed');
+    GOVUK.stickAtTopWhenScrolling.release($stickyElement);
+    expect(!$stickyElement.hasClass('content-fixed')).toBe(true);
+  });
+
+  it('should insert shim when sticking content', 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);
+  });
+});
+

data/lib/govuk_frontend_toolkit/version.rb

@@ -1,3 +1,3 @@
 module GovUKFrontendToolkit
-  VERSION = "0.44.0"
+  VERSION = "0.45.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_frontend_toolkit
 version: !ruby/object:Gem::Version
-  version: 0.44.0
+  version: 0.45.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-03-19 00:00:00.000000000 Z
+date: 2014-03-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -204,6 +204,7 @@ files:
 - app/assets/images/player-icon-volume.png
 - app/assets/javascripts/govuk/multivariate-test.js
 - app/assets/javascripts/govuk/primary-links.js
+- app/assets/javascripts/govuk/stick-at-top-when-scrolling.js
 - app/assets/javascripts/govuk/stop-scrolling-at-footer.js
 - app/assets/javascripts/govuk_toolkit.js
 - app/assets/javascripts/stageprompt.js
@@ -212,6 +213,7 @@ files:
 - app/assets/package.json
 - app/assets/spec/MultivariateTestSpec.js
 - app/assets/spec/PrimaryLinksSpec.js
+- app/assets/spec/StickAtTopWhenScrollingSpec.js
 - app/assets/stylesheets/.gitkeep
 - app/assets/stylesheets/_colours.scss
 - app/assets/stylesheets/_conditionals.scss
@@ -240,7 +242,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 4141806898857661575
+      hash: 623435425171733917
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -249,7 +251,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 4141806898857661575
+      hash: 623435425171733917
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.23