beta(carousel): Beta release of Image Carousel

leifoolsen · May 28, 2016 · e069795 · e069795
1 parent 32facdf
commit e069795
Show file tree

Hide file tree

Showing 22 changed files with 317 additions and 224 deletions.
diff --git a/demo/carousel.html b/demo/carousel.html
@@ -481,7 +481,7 @@ <h5>Carousel</h5>
     </nav>
   </footer>
 
-  <div id="carousel-container">
+  <section id="carousel-container">
     <ul id="mdlext-carousel-demo2" class="mdlext-carousel mdlext-js-carousel mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events">
       <li class="mdlext-carousel__slide" aria-selected="">
         <a href="./images/_D802143-2.jpg">
@@ -633,10 +633,20 @@ <h5>Carousel</h5>
         </figure>
       </li>
     </ul>
-  </div>
+  </section>
 </artichle>
 
 
+<div style="margin-top: 8px">
+  <button id="btn-add-image" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+    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
+    image and click it. It should have ripple effect if upgraded correctly.
+  </p>
+</div>
+
 <p class="mdl-typography--caption" style="margin-top: 32px;">
   All images appearing in this page are the exclusive property of Leif Olsen and are protected under the United States
   and International Copyright laws. The images may not be reproduced or manipulated without the written permission of
@@ -649,70 +659,80 @@ <h5>Carousel</h5>
   (function() {
     'use strict';
 
-    document.querySelector('#carousel-btn-first').addEventListener('click', function(e) {
-      var ev = new CustomEvent('command', { detail: { action : 'first' } });
-      document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
-    });
-
-    document.querySelector('#carousel-btn-scroll-prev').addEventListener('click', function(e) {
-      var ev = new CustomEvent('command', { detail: { action : 'scroll-prev' } });
-      document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
-    });
-
-    document.querySelector('#carousel-btn-prev').addEventListener('click', function(e) {
-      var ev = new CustomEvent('command', { detail: { action : 'prev' } });
-      document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
-    });
-
-    document.querySelector('#carousel-btn-next').addEventListener('click', function(e) {
-      var ev = new CustomEvent('command', { detail: { action : 'next' } });
-      document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
-    });
-
-    document.querySelector('#carousel-btn-scroll-next').addEventListener('click', function(e) {
-      var ev = new CustomEvent('command', { detail: { action : 'scroll-next' } });
-      document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
-    });
-
-    document.querySelector('#carousel-btn-last').addEventListener('click', function(e) {
-      var ev = new CustomEvent('command', { detail: { action : 'last' } });
-      document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
-    });
-
-    document.querySelector('#carousel-btn-play-pause').addEventListener('click', function(e) {
-      // Toggle play icon
-      var i = this.querySelector('i');
-      var action = i.innerText === 'play_circle_outline' ? 'play' : 'pause';
-      i.textContent = action === 'play' ? 'pause_circle_outline' : 'play_circle_outline';
-
-      var ev = new CustomEvent('command', { detail: { action : action, interval: 3000 } });
-      document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
-    });
-
-    document.querySelector('#mdlext-carousel-demo2').addEventListener('select', function(e) {
-
-      if('pause' === e.detail.command) {
-        // Set play icon
-        var i = document.querySelector('#carousel-btn-play-pause i');
-        i.textContent = 'play_circle_outline';
-      }
-      else {
-        var oldImage = document.querySelector('#carousel-imgviewer img');
-        var selectImage = e.detail.source.querySelector('img');
-        var selectImageSrc = selectImage.src;
-        if(e.detail.source.querySelector('a')) {
-          selectImageSrc = e.detail.source.querySelector('a').href;
+    window.addEventListener('load', function() {
+
+      document.querySelector('#carousel-btn-first').addEventListener('click', function (e) {
+        var ev = new CustomEvent('command', {detail: {action: 'first'}});
+        document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
+      });
+
+      document.querySelector('#carousel-btn-scroll-prev').addEventListener('click', function (e) {
+        var ev = new CustomEvent('command', {detail: {action: 'scroll-prev'}});
+        document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
+      });
+
+      document.querySelector('#carousel-btn-prev').addEventListener('click', function (e) {
+        var ev = new CustomEvent('command', {detail: {action: 'prev'}});
+        document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
+      });
+
+      document.querySelector('#carousel-btn-next').addEventListener('click', function (e) {
+        var ev = new CustomEvent('command', {detail: {action: 'next'}});
+        document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
+      });
+
+      document.querySelector('#carousel-btn-scroll-next').addEventListener('click', function (e) {
+        var ev = new CustomEvent('command', {detail: {action: 'scroll-next'}});
+        document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
+      });
+
+      document.querySelector('#carousel-btn-last').addEventListener('click', function (e) {
+        var ev = new CustomEvent('command', {detail: {action: 'last'}});
+        document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
+      });
+
+      document.querySelector('#carousel-btn-play-pause').addEventListener('click', function (e) {
+        // Toggle play icon
+        var i = this.querySelector('i');
+        var action = i.innerText === 'play_circle_outline' ? 'play' : 'pause';
+        i.textContent = action === 'play' ? 'pause_circle_outline' : 'play_circle_outline';
+
+        var ev = new CustomEvent('command', {detail: {action: action, interval: 3000}});
+        document.querySelector('#mdlext-carousel-demo2').dispatchEvent(ev);
+      });
+
+      document.querySelector('#mdlext-carousel-demo2').addEventListener('select', function (e) {
+
+        if ('pause' === e.detail.command) {
+          // Set play icon
+          var i = document.querySelector('#carousel-btn-play-pause i');
+          i.textContent = 'play_circle_outline';
         }
+        else {
+          var oldImage = document.querySelector('#carousel-imgviewer img');
+          var selectImage = e.detail.source.querySelector('img');
+          var selectImageSrc = selectImage.src;
+          if (e.detail.source.querySelector('a')) {
+            selectImageSrc = e.detail.source.querySelector('a').href;
+          }
+
+          if (selectImageSrc !== oldImage.src) {
+            var newImage = oldImage.cloneNode(true);
+            newImage.src = selectImageSrc;
+            oldImage.parentNode.replaceChild(newImage, oldImage);
+
+            var title = document.querySelector('#carousel-viewer-title');
+            title.textContent = selectImage.title;
+          }
+        }
+      });
 
-        if(selectImageSrc !== oldImage.src) {
-          var newImage = oldImage.cloneNode(true);
-          newImage.src = selectImageSrc;
-          oldImage.parentNode.replaceChild(newImage, oldImage);
+      document.querySelector('#btn-add-image').addEventListener('click', function (e) {
+        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);
+      });
 
-          var title = document.querySelector('#carousel-viewer-title');
-          title.textContent = selectImage.title;
-        }
-      }
     });
 
   }());

diff --git a/lib/mdl-ext-eqjs.css b/lib/mdl-ext-eqjs.css
diff --git a/lib/mdl-ext-eqjs.css.map b/lib/mdl-ext-eqjs.css.map
diff --git a/lib/mdl-ext-eqjs.min.css b/lib/mdl-ext-eqjs.min.css
diff --git a/lib/mdl-ext-eqjs.min.css.map b/lib/mdl-ext-eqjs.min.css.map
diff --git a/lib/mdl-ext.css b/lib/mdl-ext.css
diff --git a/lib/mdl-ext.css.map b/lib/mdl-ext.css.map
diff --git a/lib/mdl-ext.js b/lib/mdl-ext.js
diff --git a/lib/mdl-ext.js.map b/lib/mdl-ext.js.map
diff --git a/lib/mdl-ext.min.css b/lib/mdl-ext.min.css
diff --git a/lib/mdl-ext.min.css.map b/lib/mdl-ext.min.css.map
diff --git a/lib/mdl-ext.min.js b/lib/mdl-ext.min.js
diff --git a/lib/mdl-ext.min.js.map b/lib/mdl-ext.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mdl-ext",
-  "version": "0.0.0-semantically-released",
+  "version": "0.9.0-beta.0",
   "description": "Components based on the Google Material Design Lite framework",
   "main": "lib/mdl-ext.js",
   "scripts": {
@@ -87,7 +87,7 @@
     "doctrine": "1.2.2",
     "eq.js": "1.9.0",
     "es6-promise": "3.2.1",
-    "eslint": "2.10.2",
+    "eslint": "2.11.0",
     "eslint-loader": "1.3.0",
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.8.5",
@@ -97,10 +97,10 @@
     "gulp-posthtml": "1.5.2",
     "ignore-styles": "2.0.0",
     "istanbul": "1.0.0-alpha.2",
-    "jsdom": "9.1.0",
+    "jsdom": "9.2.0",
     "jsdomify": "2.1.0",
     "material-design-lite": "1.1.3",
-    "mocha": "2.5.1",
+    "mocha": "2.5.3",
     "node-sass": "3.7.0",
     "null-loader": "0.1.1",
     "object-assign": "4.1.0",

diff --git a/src/_variables.scss b/src/_variables.scss
@@ -190,6 +190,7 @@ $mdlext-lightboard-figcaption-text-color       : unquote('rgb(#{$palette-grey-40
 
 /* ==========  Carousel  ========== */
 $mdlext-carousel-slide-border-top-width        : 3px;
+$mdlext-carousel-slide-margin-horizontal       : 0;
 $mdlext-carousel-slide-border-top-color        : unquote("rgb(#{$color-accent})");
 $mdlext-carousel-slide-figcaption-color        : $mdlext-lightboard-figcaption-text-color;
 $mdlext-carousel-slide-ripple-color            : $mdlext-lightboard-ripple-color;