fix(sticky header): Header should remain hidden when user scroll to e…

…nd of page

closes #65

src/carousel/readme.md

@@ -110,7 +110,7 @@ The carousel interacts with the following keyboard keys.
 *   `Drag or Swipe right` - Move slides outside container viewport into view
 
 
-## Configuration
+## Component configuration
 The component can be configured using a `data-config` attribute. The attribute value is a JSON string with the following properties.
 
 | Property        |    |    |
@@ -234,7 +234,7 @@ myCarousel.MaterialExtCarousel.upgradeSlides();
 Returns the `config` object.
 
 
-## CSS classes, attributes and SASS variables
+## Configuration options
 The MDLEXT CSS classes apply various predefined visual and behavioral enhancements to the carousel.
 The table below lists the available classes and their effects.
 

src/lightbox/readme.md

@@ -315,17 +315,6 @@ The table below lists the available classes and their effects.
 | `data-img-url-prev` | Displays previous image when dragging | URL to previous image in a collection |
 | `data-img-url-next` | Displays next image when dragging | URL to next imagein a collection |
 
-You can modify the lightbox trough the following SASS variables.
-
-| SASS variables |
-|----------------|
-| `$mdlext-lightbox-background-color` |
-| `$mdlext-lightbox-border` |
-| `$mdlext-lightbox-border-radius` |
-| `$mdlext-lightbox-figure-margin` |
-| `$mdlext-lightbox-figure-padding` |
-| `$mdlext-lightbox-footer-background-color` |
-
 
 ## How to use the component programmatically
 The [tests](../../test/lightbox/lightbox.spec.js) and the [snippets/lightbox.html](./snippets/lightbox.html) 

src/sticky-header/readme.md

@@ -124,6 +124,38 @@ bringing the header back when a user might need it: they reach the bottom of the
 * [Sticky header, Waterfall, No Drawer](http://leifoolsen.github.io/mdl-ext/demo/sticky-header-vi.html)
 
 
+## Component configuration
+The component can be configured using a `data-config` attribute. The attribute value is a JSON string with the following properties.
+
+| Property             |    |    |
+|----------------------|----|----|
+| `visibleAtScrollEnd` | if `true`, the header vil show when page is scrolled to the bottom | default: `false` |
+
+
+The `data-config` attribute must be a valid JSON string. You can use single or double quotes for the JSON properties. 
+
+Example 1, single quotes in JSON config string:
+```html
+<header class="mdl-layout__header mdlext-layout__sticky-header mdlext-js-sticky-header" 
+  data-config="{ 'visibleAtScrollEnd': true }">
+
+  <div class="mdl-layout__header-row">
+    <span id="header-title" class="mdl-layout-title">Title goes here</span>
+  </div>
+</header>
+```
+
+Example 2, double quotes in JSON config string:
+```html
+<header class="mdl-layout__header mdlext-layout__sticky-header mdlext-js-sticky-header" 
+  data-config='{ "visibleAtScrollEnd": true }'>
+
+  <div class="mdl-layout__header-row">
+    <span id="header-title" class="mdl-layout-title">Title goes here</span>
+  </div>
+</header>
+```
+
 ## Configuration options
 
 The MDLEXT CSS classes apply various predefined visual and behavioral enhancements to the lightbox.
@@ -135,25 +167,6 @@ The table below lists the available classes and their effects.
 | `mdlext-js-sticky-header` | Assigns basic MDL behavior to header | Required on `<header>` element |
 
 
-You can modify the sticky-header trough the following SASS variables.
-
-| SASS variable  | Value |
-|----------------|-------|
-| `$mdlext-sticky-header-background-color`            | transparent |
-| `$mdlext-sticky-header-background-color-scroll`     | transparent |
-| `$mdlext-sticky-header-gradient-color`              | $color-primary !default |
-| `$mdlext-sticky-header-gradient-color-start`        | unquote("rgb(#{$mdlext-sticky-header-gradient-color})") |
-| `$mdlext-sticky-header-gradient-color-end`          | $mdlext-sticky-header-gradient-color-start |
-| `$mdlext-sticky-header-gradient-color-scroll-start` | unquote("rgba(#{$mdlext-sticky-header-gradient-color}, 0.98)") |
-| `$mdlext-sticky-header-gradient-color-scroll-end`   | unquote("rgba(#{$mdlext-sticky-header-gradient-color}, 0.95)") |
-| // Background shorthand                             | |
-| `$mdlext-sticky-header-background`                  | `$mdlext-sticky-header-background-color linear-gradient(to bottom, $mdlext-sticky-header-gradient-color-start 0, $mdlext-sticky-header-gradient-color-end 100%)` |
-| // Background shorthand when content is scrolling   | |
-| `$mdlext-sticky-header-background-scroll`           | `$mdlext-sticky-header-background-color-scroll linear-gradient(to bottom, $mdlext-sticky-header-gradient-color-scroll-start 100%, $mdlext-sticky-header-gradient-color-scroll-end 100%)`|
-
->**Note:** Only the shorthand variables, `$mdlext-sticky-header-background` and `$mdlext-sticky-header-background-scroll`, 
-are used in the [SASS file](./_sticky-header.scss). The other variables are only helpers.
-
 ## How to use the component programmatically
 The [tests](../../test/sticky-header/sticky-header.spec.js) provides example code on how to use the component programmatically.
 

src/sticky-header/sticky-header.js

@@ -48,6 +48,12 @@
     // false: allow rAF to be called, true: blocks rAF
     this.drawing_ = false;
 
+    // Default config
+    this.config_ = {
+      visibleAtScrollEnd: false
+    };
+
+
     // Initialize instance.
     this.init();
   };
@@ -118,7 +124,7 @@
       if (this.content_.scrollHeight - this.content_.scrollTop <= this.content_.offsetHeight) {
         // Bottom of content
         if(headerTop != 0) {
-          this.header_.style.top = '0';
+          this.header_.style.top = this.config_.visibleAtScrollEnd ? '0' : `-${this.header_.offsetHeight}px`;
         }
       }
       else {
@@ -162,6 +168,18 @@
   MaterialExtStickyHeader.prototype.init = function() {
 
     if (this.header_) {
+
+      if(this.header_.hasAttribute('data-config')) {
+        const s = this.header_.getAttribute('data-config').replace(/'/g, '"');
+        try {
+          const c = JSON.parse(s);
+          Object.assign(this.config_, c);
+        }
+        catch (e) {
+          throw new Error(`Failed to parse data-config: ${s}. Error: ${e.message}`);
+        }
+      }
+
       this.content_ = this.header_.parentNode.querySelector(`.${CONTENT_CLASS}`) || null;
 
       if(this.content_) {

test/sticky-header/sticky-header.spec.js

@@ -3,6 +3,7 @@ import requireUncached from 'require-uncached';
 import jsdomify from 'jsdomify';
 import { expect, assert } from 'chai';
 import sinon from 'sinon';
+import { removeChilds } from '../testutils/domHelpers';
 import createMockRaf from '../testutils/mock-raf';
 
 describe('MaterialExtStickyHeader', () => {
@@ -29,7 +30,10 @@ describe('MaterialExtStickyHeader', () => {
         <a class="mdl-navigation__link" href="sticky-header.html">Sticky Header</a>
       </nav>
     </aside>
-  
+
+    <div id="mount-2">
+    </div>
+    
     <main id="mount" class="mdl-layout__content">
       <h1>Sticky Header Example</h1>
       <p>A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.</p>
@@ -40,6 +44,25 @@ describe('MaterialExtStickyHeader', () => {
 </body>
 </html>`;
 
+
+  const header_with_data_config = `
+<header id="header-2" class="mdl-layout__header mdl-layout__header--waterfall mdlext-layout__sticky-header mdlext-js-sticky-header" 
+  data-config="{ 'visibleAtScrollEnd': true }">
+  
+  <div class="mdl-layout__header-row">
+    <span id="header-title" class="mdl-layout-title">Title goes here</span>
+  </div>
+</header>`;
+
+  const header_with_malformed_data_config = `
+<header id="header-3" class="mdl-layout__header mdl-layout__header--waterfall mdlext-layout__sticky-header mdlext-js-sticky-header" 
+  data-config='{ "visibleAtScrollEnd: true }'>
+  
+  <div class="mdl-layout__header-row">
+    <span id="header-title" class="mdl-layout-title">Title goes here</span>
+  </div>
+</header>`;
+
   const fragment = `
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor lorem eu faucibus aliquet. 
   In vehicula risus turpis, ut dictum ante tristique et. Aenean ultricies sed urna ac condimentum. 
@@ -241,4 +264,35 @@ describe('MaterialExtStickyHeader', () => {
     assert.isTrue(spy.called, 'Expected "resize" event to fire');
     assert.notStrictEqual(header.style.top, startY, 'Expected header position to change')
   });
+
+  it('reads "data-config" attribute', () => {
+    const container = document.querySelector('#mount-2');
+    container.insertAdjacentHTML('beforeend', header_with_data_config);
+
+    try {
+      const element = document.querySelector('#header-2');
+      expect(() => {
+        componentHandler.upgradeElement(element, 'MaterialExtStickyHeader');
+      }).to.not.throw(Error);
+    }
+    finally {
+      removeChilds(container);
+    }
+  });
+
+  it('throws an error if "data-config" attribute is malformed', () => {
+    const container = document.querySelector('#mount-2');
+    container.insertAdjacentHTML('beforeend', header_with_malformed_data_config);
+
+    try {
+      const element = document.querySelector('#carousel-4');
+      expect(() => {
+        componentHandler.upgradeElement(element, 'MaterialExtStickyHeader');
+      }).to.throw(Error);
+    }
+    finally {
+      removeChilds(container);
+    }
+  });
+
 });