Adding snackbar to components docs.

Also cleaned up the snackbar demos a bit.

docs/_pages/components.md

@@ -241,6 +241,19 @@ categories:
             - caption: Starting value
               file: slider-starting-value.html
               demo_file: slider-starting-value-demo.html
+  - name: snackbar
+    title: Snackbar
+    description: Transient popup notifications.
+    components:
+      - name: snackbar
+        class: mdl-snackbar
+        snippets:
+          - snippet_group:
+            - caption: Snackbar
+              file: snackbar.html
+          - snippet_group:
+            - caption: Toast
+              file: toast.html
   - name: toggles
     title: Toggles
     description: Choose between states.

src/snackbar/snippets/snackbar.html

@@ -1,27 +1,27 @@
 <button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Snackbar</button>
 <div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
-    <div class="mdl-snackbar__text"></div>
-    <button class="mdl-snackbar__action" type="button"></button>
+  <div class="mdl-snackbar__text"></div>
+  <button class="mdl-snackbar__action" type="button"></button>
 </div>
 <script>
 (function() {
+  'use strict';
+  var snackbarContainer = document.querySelector('#demo-snackbar-example');
+  var showSnackbarButton = document.querySelector('#demo-show-snackbar');
+  var handler = function(event) {
+    showSnackbarButton.style.backgroundColor = '';
+  };
+  showSnackbarButton.addEventListener('click', function() {
     'use strict';
-    window['counter'] = 0;
-    var snackbarContainer = document.querySelector('#demo-snackbar-example'),
-      showSnackbarButton = document.querySelector('#demo-show-snackbar');
-    showSnackbarButton.addEventListener('click', function() {
-        'use strict';
-        event.target.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
-        var handler = function(event) {
-            document.querySelector('#demo-show-snackbar').style.backgroundColor = '';
-        };
-        var data = {
-          message: 'Button color changed.',
-          timeout: 2000,
-          actionHandler: handler,
-          actionText: 'Undo'
-        };
-        snackbarContainer.MaterialSnackbar.showSnackbar(data);
+    showSnackbarButton.style.backgroundColor = '#' +
+        Math.floor(Math.random() * 0xFFFFFF).toString(16);
+    var data = {
+      message: 'Button color changed.',
+      timeout: 2000,
+      actionHandler: handler,
+      actionText: 'Undo'
+    };
+    snackbarContainer.MaterialSnackbar.showSnackbar(data);
   });
 }());
 </script>

src/snackbar/snippets/toast.html

@@ -1,18 +1,18 @@
 <button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Toast</button>
 <div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
-    <div class="mdl-snackbar__text"></div>
-    <button class="mdl-snackbar__action" type="button"></button>
+  <div class="mdl-snackbar__text"></div>
+  <button class="mdl-snackbar__action" type="button"></button>
 </div>
 <script>
 (function() {
+  'use strict';
+  window['counter'] = 0;
+  var snackbarContainer = document.querySelector('#demo-toast-example');
+  var showToastButton = document.querySelector('#demo-show-toast');
+  showToastButton.addEventListener('click', function() {
     'use strict';
-    window['counter'] = 0;
-    var snackbarContainer = document.querySelector('#demo-toast-example'),
-      showToastButton = document.querySelector('#demo-show-toast');
-    showToastButton.addEventListener('click', function() {
-        'use strict';
-        var data = {message: 'Example Message # ' + ++counter};
-        snackbarContainer.MaterialSnackbar.showSnackbar(data);
+    var data = {message: 'Example Message # ' + ++counter};
+    snackbarContainer.MaterialSnackbar.showSnackbar(data);
   });
 }());
 </script>