fix(menu-button): fixed #80, #81

#80: menu should re-position on scroll, window resize or orientation change. #81: menu should close when user taps outside the menu closes #80, closes #81
leifoolsen · Oct 14, 2016 · b08d497 · b08d497
2 parents 99a6ed5 + 7f70b00
commit b08d497
Show file tree

Hide file tree

Showing 46 changed files with 908 additions and 1,337 deletions.
diff --git a/blacklisted-versions.md b/blacklisted-versions.md
@@ -1,4 +1,4 @@
 * jsdomify-3.1.0, use 2.1.0
-* stylelint-webpack-plugin-0.3.1, use 0.3.0
+* stylelint-webpack-plugin-0.4.0, use 0.3.0
 
 
diff --git a/demo/accordion.html b/demo/accordion.html
@@ -23,7 +23,6 @@
 <!-- styles -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
 <link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
@@ -136,17 +135,6 @@
         </nav>
       </section>
     </li>
-    <li class="mdlext-accordion__panel">
-      <header class="mdlext-accordion__tab">
-        <span class="mdlext-accordion__tab__caption">Utils</span>
-        <i class="mdlext-aria-toggle-material-icons"></i>
-      </header>
-      <section class="mdlext-accordion__tabpanel">
-        <nav class="mdl-navigation">
-          <a class="mdl-navigation__link" href="resize-observer.html">Resize Observer</a>
-        </nav>
-      </section>
-    </li>
   </ul>
 </aside>
 

diff --git a/demo/bordered-fields.html b/demo/bordered-fields.html
@@ -23,7 +23,6 @@
 <!-- styles -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
 <link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
@@ -136,17 +135,6 @@
         </nav>
       </section>
     </li>
-    <li class="mdlext-accordion__panel">
-      <header class="mdlext-accordion__tab">
-        <span class="mdlext-accordion__tab__caption">Utils</span>
-        <i class="mdlext-aria-toggle-material-icons"></i>
-      </header>
-      <section class="mdlext-accordion__tabpanel">
-        <nav class="mdl-navigation">
-          <a class="mdl-navigation__link" href="resize-observer.html">Resize Observer</a>
-        </nav>
-      </section>
-    </li>
   </ul>
 </aside>
 

diff --git a/demo/carousel.html b/demo/carousel.html
@@ -23,7 +23,6 @@
 <!-- styles -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
 <link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
@@ -136,17 +135,6 @@
         </nav>
       </section>
     </li>
-    <li class="mdlext-accordion__panel">
-      <header class="mdlext-accordion__tab">
-        <span class="mdlext-accordion__tab__caption">Utils</span>
-        <i class="mdlext-aria-toggle-material-icons"></i>
-      </header>
-      <section class="mdlext-accordion__tabpanel">
-        <nav class="mdl-navigation">
-          <a class="mdl-navigation__link" href="resize-observer.html">Resize Observer</a>
-        </nav>
-      </section>
-    </li>
   </ul>
 </aside>
 

diff --git a/demo/color-themes.html b/demo/color-themes.html
@@ -23,7 +23,6 @@
 <!-- styles -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
 <link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
@@ -136,17 +135,6 @@
         </nav>
       </section>
     </li>
-    <li class="mdlext-accordion__panel">
-      <header class="mdlext-accordion__tab">
-        <span class="mdlext-accordion__tab__caption">Utils</span>
-        <i class="mdlext-aria-toggle-material-icons"></i>
-      </header>
-      <section class="mdlext-accordion__tabpanel">
-        <nav class="mdl-navigation">
-          <a class="mdl-navigation__link" href="resize-observer.html">Resize Observer</a>
-        </nav>
-      </section>
-    </li>
   </ul>
 </aside>
 

diff --git a/demo/grid.html b/demo/grid.html
@@ -23,7 +23,6 @@
 <!-- styles -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
 <link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
@@ -136,17 +135,6 @@
         </nav>
       </section>
     </li>
-    <li class="mdlext-accordion__panel">
-      <header class="mdlext-accordion__tab">
-        <span class="mdlext-accordion__tab__caption">Utils</span>
-        <i class="mdlext-aria-toggle-material-icons"></i>
-      </header>
-      <section class="mdlext-accordion__tabpanel">
-        <nav class="mdl-navigation">
-          <a class="mdl-navigation__link" href="resize-observer.html">Resize Observer</a>
-        </nav>
-      </section>
-    </li>
   </ul>
 </aside>
 

diff --git a/demo/index.html b/demo/index.html
@@ -23,7 +23,6 @@
 <!-- styles -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
 <link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
@@ -137,17 +136,6 @@
         </nav>
       </section>
     </li>
-    <li class="mdlext-accordion__panel">
-      <header class="mdlext-accordion__tab">
-        <span class="mdlext-accordion__tab__caption">Utils</span>
-        <i class="mdlext-aria-toggle-material-icons"></i>
-      </header>
-      <section class="mdlext-accordion__tabpanel">
-        <nav class="mdl-navigation">
-          <a class="mdl-navigation__link" href="resize-observer.html">Resize Observer</a>
-        </nav>
-      </section>
-    </li>
   </ul>
 </aside>
 

diff --git a/demo/lightboard.html b/demo/lightboard.html
@@ -23,7 +23,6 @@
 <!-- styles -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
 <link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
@@ -136,17 +135,6 @@
         </nav>
       </section>
     </li>
-    <li class="mdlext-accordion__panel">
-      <header class="mdlext-accordion__tab">
-        <span class="mdlext-accordion__tab__caption">Utils</span>
-        <i class="mdlext-aria-toggle-material-icons"></i>
-      </header>
-      <section class="mdlext-accordion__tabpanel">
-        <nav class="mdl-navigation">
-          <a class="mdl-navigation__link" href="resize-observer.html">Resize Observer</a>
-        </nav>
-      </section>
-    </li>
   </ul>
 </aside>
 

diff --git a/demo/lightbox.html b/demo/lightbox.html
@@ -23,7 +23,6 @@
 <!-- styles -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
 <link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
@@ -136,17 +135,6 @@
         </nav>
       </section>
     </li>
-    <li class="mdlext-accordion__panel">
-      <header class="mdlext-accordion__tab">
-        <span class="mdlext-accordion__tab__caption">Utils</span>
-        <i class="mdlext-aria-toggle-material-icons"></i>
-      </header>
-      <section class="mdlext-accordion__tabpanel">
-        <nav class="mdl-navigation">
-          <a class="mdl-navigation__link" href="resize-observer.html">Resize Observer</a>
-        </nav>
-      </section>
-    </li>
   </ul>
 </aside>
 

diff --git a/demo/menu-button.html b/demo/menu-button.html
@@ -23,7 +23,6 @@
 <!-- styles -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
 <link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
@@ -136,17 +135,6 @@
         </nav>
       </section>
     </li>
-    <li class="mdlext-accordion__panel">
-      <header class="mdlext-accordion__tab">
-        <span class="mdlext-accordion__tab__caption">Utils</span>
-        <i class="mdlext-aria-toggle-material-icons"></i>
-      </header>
-      <section class="mdlext-accordion__tabpanel">
-        <nav class="mdl-navigation">
-          <a class="mdl-navigation__link" href="resize-observer.html">Resize Observer</a>
-        </nav>
-      </section>
-    </li>
   </ul>
 </aside>
 
@@ -160,6 +148,8 @@ <h5 class="mdlext-demo-header">Menu Button</h5>
 </p>
 </article>
 
+<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+
 <style>
   .size-22 {
     font-size: 22px;
@@ -203,31 +193,11 @@ <h5 class="mdlext-demo-header">Menu Button</h5>
   function signedIn(sn) {
     return 'Signed in with&nbsp;&nbsp;<i class="size-22 icon ion-social-' + sn + '"></i>&nbsp;';
   }
+  function signedInIcon(sn) {
+    return '<i class="size-22 icon ion-social-' + sn + '"></i>';
+  }
 </script>
 
-<ul id="shared-social-menu" class="mdlext-menu" hidden="">
-  <li class="mdlext-menu__item" data-value="twitter">
-    <span class="mdlext-menu__item__caption">Twitter</span>
-    <i class="icon ion-social-twitter-outline size-22"></i>
-  </li>
-  <li class="mdlext-menu__item" data-value="github">
-    <span class="mdlext-menu__item__caption">GitHub</span>
-    <i class="ion-social-github-outline size-22"></i>
-  </li>
-  <li class="mdlext-menu__item" data-value="googleplus">
-    <span class="mdlext-menu__item__caption">G+</span>
-    <i class="ion-social-googleplus-outline size-22"></i>
-  </li>
-  <li class="mdlext-menu__item" data-value="linkedin">
-    <span class="mdlext-menu__item__caption">LinkedIn</span>
-    <i class="icon ion-social-linkedin-outline size-22"></i>
-  </li>
-  <li class="mdlext-menu__item" data-value="facebook">
-    <span class="mdlext-menu__item__caption">Facebook</span>
-    <i class="icon ion-social-facebook-outline size-22"></i>
-  </li>
-</ul>
-
 <div class="mdl-grid mdl-grid--no-spacing">
   <div class="mdl-cell mdl-cell--4-col">
     <p><code>mdl-button</code></p>
@@ -271,7 +241,7 @@ <h5 class="mdlext-demo-header">Menu Button</h5>
     </script>
   </div> <!--cell -->
 
-  <div class="mdl-cell mdl-cell--4-col mdlext-bordered-fields">
+  <div class="mdl-cell mdl-cell--4-col">
     <p>custom styled <code>&lt;div&gt;</code></p>
     <div id="btn-social-4" class="mdlext-menu-button mdlext-js-menu-button" style="width:300px; height:46px; max-width:100%;  border:1px solid green" aria-controls="shared-social-menu">
       <span class="mdlext-menu-button__caption">Sign in with ...</span>
@@ -287,21 +257,43 @@ <h5 class="mdlext-demo-header">Menu Button</h5>
 
 
   <div class="mdl-cell mdl-cell--4-col">
-    <p>MDL menu</p>
+    <p>mdl-button--icon</p>
 
-    <button id="demo-menu-lower-left" style="height:46px; width:46px;" class="mdl-button mdl-js-button mdl-button--icon">
+    <button id="btn-social-5" style="height:46px; width:46px;" class="mdl-button mdl-js-button mdl-button--icon mdlext-js-menu-button" aria-controls="shared-social-menu">
       <i class="material-icons">more_vert</i>
     </button>
+    <script>
+      document.querySelector('#btn-social-5').addEventListener('menuselect', function(event) {
+        this.innerHTML = signedInIcon(event.detail.source.getAttribute('data-value'));
+      });
+    </script>
 
-    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left">
-      <li class="mdl-menu__item">Some Action</li>
-      <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
-      <li disabled="" class="mdl-menu__item">Disabled Action</li>
-      <li class="mdl-menu__item">Yet Another Action</li>
-    </ul>
   </div> <!--cell -->
 
-</div>
+</div> <!-- grid -->
+
+<ul id="shared-social-menu" class="mdlext-menu" hidden="">
+  <li class="mdlext-menu__item" data-value="twitter">
+    <span class="mdlext-menu__item__caption">Twitter</span>
+    <i class="icon ion-social-twitter-outline size-22"></i>
+  </li>
+  <li class="mdlext-menu__item" data-value="github">
+    <span class="mdlext-menu__item__caption">GitHub</span>
+    <i class="ion-social-github-outline size-22"></i>
+  </li>
+  <li class="mdlext-menu__item" data-value="googleplus">
+    <span class="mdlext-menu__item__caption">G+</span>
+    <i class="ion-social-googleplus-outline size-22"></i>
+  </li>
+  <li class="mdlext-menu__item" data-value="linkedin">
+    <span class="mdlext-menu__item__caption">LinkedIn</span>
+    <i class="icon ion-social-linkedin-outline size-22"></i>
+  </li>
+  <li class="mdlext-menu__item" data-value="facebook">
+    <span class="mdlext-menu__item__caption">Facebook</span>
+    <i class="icon ion-social-facebook-outline size-22"></i>
+  </li>
+</ul>
 
 <p style="margin-top: 16px;">Menu buttons positioned left, middle and right, using <code>textalign</code>.</p>
 <div role="presentation">

diff --git a/demo/resize-observer.html b/demo/resize-observer.html
@@ -23,7 +23,6 @@
 <!-- styles -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
 <link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
@@ -136,17 +135,6 @@
         </nav>
       </section>
     </li>
-    <li class="mdlext-accordion__panel">
-      <header class="mdlext-accordion__tab">
-        <span class="mdlext-accordion__tab__caption">Utils</span>
-        <i class="mdlext-aria-toggle-material-icons"></i>
-      </header>
-      <section class="mdlext-accordion__tabpanel">
-        <nav class="mdl-navigation">
-          <a class="mdl-navigation__link" href="resize-observer.html">Resize Observer</a>
-        </nav>
-      </section>
-    </li>
   </ul>
 </aside>
 

diff --git a/demo/selectfield.html b/demo/selectfield.html
@@ -23,7 +23,6 @@
 <!-- styles -->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 <link rel="stylesheet" href="styles/dialog-polyfill.css">
 <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
 <link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
@@ -136,17 +135,6 @@
         </nav>
       </section>
     </li>
-    <li class="mdlext-accordion__panel">
-      <header class="mdlext-accordion__tab">
-        <span class="mdlext-accordion__tab__caption">Utils</span>
-        <i class="mdlext-aria-toggle-material-icons"></i>
-      </header>
-      <section class="mdlext-accordion__tabpanel">
-        <nav class="mdl-navigation">
-          <a class="mdl-navigation__link" href="resize-observer.html">Resize Observer</a>
-        </nav>
-      </section>
-    </li>
   </ul>
 </aside>