fix(carousel): Removed MutationObserver. Not needed. Difficult to tes…

…t. Call upgradeSlides() from cl

closes #63

demo/carousel.html

@@ -639,7 +639,7 @@ <h5>Carousel</h5>
     Add image to carousel
   </button>
   <p class="mdl-typography--caption" style="margin-top: 8px">
-    Verify that the MutationObserver works: Click the button to add a new image to the carousel. Move to the inserted
+    Click the button to add a new image to the carousel. Move to the inserted
     image and click it. It should have ripple effect if upgraded correctly.
   </p>
 </div>
@@ -728,6 +728,7 @@ <h5>Carousel</h5>
         var slide_fragment = '<li class="mdlext-carousel__slide"><figure><img src="./images/_D809914-2.jpg" alt="Humpback whale" title="Humpback whale"/></figure></li>';
         var carousel = document.querySelector('#mdlext-carousel-demo2');
         carousel.insertAdjacentHTML('beforeend', slide_fragment);
+        carousel.MaterialExtCarousel.upgradeSlides();
       });
 
     });

package.json

@@ -91,7 +91,7 @@
     "doctrine": "1.2.2",
     "eq.js": "1.9.0",
     "es6-promise": "3.2.1",
-    "eslint": "3.1.1",
+    "eslint": "3.2.0",
     "eslint-loader": "1.5.0",
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.9.0",

src/accordion/readme.md

@@ -293,6 +293,16 @@ Refer to [snippets/accordion.html](./snippets/accordion.html) or the [tests](../
 
 ## Public methods
 
+### upgradeTab(tabOrPanelElement)
+Upgrade a targeted panel with aria attributes and ripple effects. If you add a panel to the accordion after the page has 
+loaded, you must call `upgrade` to notify the accordion component about the newly added panel.
+
+```javascript
+var accordion = document.querySelector('#my-accordion');
+var panel3 = document.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(3)');
+accordion.MaterialExtAccordion.upgradeTab( panel3 );
+```
+
 ### command(detail)
 Executes an action, targeting a specific tab. The actions corresponds to the custom events defined for this component.
 

src/carousel/carousel.js

@@ -75,8 +75,6 @@ import { inOutQuintic } from '../utils/easing';
 
     this.scrollAnimation_ = new MdlExtAnimationLoop(33);
 
-    this.drawing_ = false; // Used by MutationObserver
-
     // Initialize instance.
     this.init();
   };
@@ -655,11 +653,11 @@ import { inOutQuintic } from '../utils/easing';
       // Listen to custom 'command' event
       this.element_.addEventListener('command', this.commandHandler_.bind(this), false);
 
+      /* Not needed. Difficult to test. Call upgradeSlides() from client instead.
       // Detect insertions into components DOM
       const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
 
       // jsdom does not support MutationObserver - so this is not testable
-      /* istanbul ignore next */
       new MutationObserver( mutations => {
         mutations.forEach( mutation => {
           if (mutation.addedNodes.length > 0) {
@@ -672,6 +670,7 @@ import { inOutQuintic } from '../utils/easing';
         characterData: false,
         subtree: false
       });
+      */
 
       // Slides collection
       this.upgradeSlides();

src/carousel/readme.md

@@ -23,7 +23,6 @@ interchangeably.
 * User interactions via keyboard, mouse or touch events may be blocked, if configured 
 * Start slideshow at component initialization using a data attribute
 * The carousel emits custom events reflecting a user action. E.g. clicking an image will emit a 'select' event with a detail object holding a reference to the selected image.
-* Listen to mutation events, to detect insertions of elements into components DOM tree 
 
 ### Limitations:
 * The carousel should pause any running animation on window.bur or tab.blur - not implemented
@@ -223,8 +222,13 @@ componentHandler.downgradeElements([...content]);
 ```
 
 ### `upgradeSlides()`
-The component uses a mutation observer to upgrade slides inserted into the components DOM tree after component 
-initialization. If the observer, for some reason, does not work, call `upgradeSlides()` to upgrade newly inserted slides.
+Upgrade slides. If you add slides to the carousel after the page has loaded, you must call `upgradeSlides` to 
+notify the component about the newly inserted slides.
+
+```javascript
+myCarousel = document.querySelector('#my-carousel');
+myCarousel.MaterialExtCarousel.upgradeSlides();
+```
 
 ### `getConfig()`
 Returns the `config` object.
@@ -250,16 +254,6 @@ Attributes.
 | `listitem` | The component add the role `listitem` to `mdlext-carousel__slide` items |  |
 
 
-SASS variables.
-
-| SASS variable |
-|----------------|
-| `$mdlext-carousel-slide-border-top-width` | 
-| `$mdlext-carousel-slide-border-top-color` | 
-| `$mdlext-carousel-slide-margin-horizontal` |
-| `$mdlext-carousel-slide-figcaption-color` | 
-| `$mdlext-carousel-slide-ripple-color` |     
-
 ## How to use the component programmatically
 The [tests](../../test/carousel/carousel.spec.js) and the [snippets/lightbox.html](./snippets/carousel.html) 
 code provides examples on how to use the component programmatically.

src/carousel/snippets/carousel.html

@@ -509,7 +509,7 @@ <h5>Carousel</h5>
     Add image to carousel
   </button>
   <p class="mdl-typography--caption" style="margin-top: 8px">
-    Verify that the MutationObserver works: Click the button to add a new image to the carousel. Move to the inserted
+    Click the button to add a new image to the carousel. Move to the inserted
     image and click it. It should have ripple effect if upgraded correctly.
   </p>
 </div>
@@ -598,6 +598,7 @@ <h5>Carousel</h5>
         var slide_fragment = '<li class="mdlext-carousel__slide"><figure><img src="./images/_D809914-2.jpg" alt="Humpback whale" title="Humpback whale"/></figure></li>';
         var carousel = document.querySelector('#mdlext-carousel-demo2');
         carousel.insertAdjacentHTML('beforeend', slide_fragment);
+        carousel.MaterialExtCarousel.upgradeSlides();
       });
 
     });

src/lightboard/readme.md

@@ -322,6 +322,26 @@ myLightboard.dispatchEvent(ce);
 
 ## Public methods
 
+### upgradeSlides()
+Upgrade slides. If you add slides to the lightboard after the page has loaded, you must call `upgradeSlides` to 
+notify the component about the new slides.
+
+```javascript
+slide = 
+   '<li class="mdlext-lightboard__slide">'
+  +'  <a href="#" class="mdlext-lightboard__slide__frame">'
+  +'    <figure>'
+  +'      <img src="_D802181.jpg" title="Landscape in blue pastel"/>'
+  +'      <figcaption>_D802181.jpg</figcaption>'
+  +'    </figure>'
+  +'  </a>'
+  +'</li>';
+
+myLightboard = document.querySelector('#my-lightboard');
+myLightboard.insertAdjacentHTML('beforeend', slide);
+myLightboard.MaterialExtLightboard.upgradeSlides();
+```
+
 ### command( detail )
 Executes an action, optionally targeting a specific slide. The actions corresponds to the custom events defined for this 
 component.

test/carousel/carousel.spec.js

@@ -153,7 +153,7 @@ describe('MaterialExtCarousel', () => {
     window.cancelAnimationFrame = mockRaf.raf.cancel;
     rAFStub = sinon.stub(window, 'requestAnimationFrame', mockRaf.raf);
 
-
+    /* Not needed. Difficult to test. Call upgradeSlides() from client instead.
     // Stub unsupported jsdom window.MutationObserver
     window.MutationObserver = window.MutationObserver ||  (function(undefined) {
         "use strict";
@@ -180,9 +180,8 @@ describe('MaterialExtCarousel', () => {
         return MutationObserver;
       })(void 0);
 
-    // TODO: Use mutationobserver-polyfill.js
-    //requireUncached('../testutils/mutationobserver-polyfill');
     global.MutationObserver = window.MutationObserver;
+    */
 
   });
 
@@ -332,6 +331,7 @@ describe('MaterialExtCarousel', () => {
 
       // Insert a new slide after component has been upgraded
       element.insertAdjacentHTML('beforeend', carousel_slide_fragment);
+      element.MaterialExtCarousel.upgradeSlides();
 
       [...document.querySelectorAll('#mount-2 mdlext-carousel__slide')].forEach( slide => {