update shared components

dashboard-ui/bower_components/material-design-lite/src/radio/_radio.scss

@@ -0,0 +1,160 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../variables";
+@import "../mixins";
+
+.mdl-radio {
+  position: relative;
+
+  font-size: $radio-label-font-size;
+  line-height: $radio-label-height;
+
+  display: inline-block;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding-left: 0;
+
+  &.is-upgraded {
+    padding-left: $radio-button-size + $radio-padding;
+  }
+}
+
+.mdl-radio__button {
+  line-height: $radio-label-height;
+
+  .mdl-radio.is-upgraded & {
+    // Hide input element, while still making it respond to focus.
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+  }
+}
+
+.mdl-radio__outer-circle {
+  position: absolute;
+  top: $radio-top-offset;
+  left: 0;
+
+  display: inline-block;
+
+  box-sizing: border-box;
+  width: $radio-button-size;
+  height: $radio-button-size;
+  margin: 0;
+
+  cursor: pointer;
+
+  border: 2px solid $radio-off-color;
+  border-radius: 50%;
+
+  z-index: 2;
+
+  .mdl-radio.is-checked & {
+    border: 2px solid $radio-color;
+  }
+
+  fieldset[disabled] .mdl-radio,
+  .mdl-radio.is-disabled & {
+    border: 2px solid $radio-disabled-color;
+    cursor: auto;
+  }
+}
+
+.mdl-radio__inner-circle {
+  position: absolute;
+  z-index: 1;
+  margin: 0;
+  top: $radio-top-offset + $radio-inner-margin;
+  left: $radio-inner-margin;
+
+  box-sizing: border-box;
+  width: $radio-button-size - ($radio-inner-margin * 2);
+  height: $radio-button-size - ($radio-inner-margin * 2);
+
+  cursor: pointer;
+
+  @include material-animation-default(0.28s);
+  transition-property: transform;
+  transform: scale3d(0, 0, 0);
+
+  border-radius: 50%;
+  background: $radio-color;
+
+  .mdl-radio.is-checked & {
+    transform: scale3d(1, 1, 1);
+  }
+
+  fieldset[disabled] .mdl-radio &,
+  .mdl-radio.is-disabled & {
+    background: $radio-disabled-color;
+    cursor: auto;
+  }
+
+  .mdl-radio.is-focused & {
+    box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.mdl-radio__label {
+  cursor: pointer;
+
+  fieldset[disabled] .mdl-radio &,
+  .mdl-radio.is-disabled & {
+    color: $radio-disabled-color;
+    cursor: auto;
+  }
+}
+
+.mdl-radio__ripple-container {
+  position: absolute;
+  z-index: 2;
+  top: -(($radio-ripple-size - $radio-label-height) / 2);
+  left: -(($radio-ripple-size - $radio-button-size) / 2);
+
+  box-sizing: border-box;
+  width: $radio-ripple-size;
+  height: $radio-ripple-size;
+  border-radius: 50%;
+
+  cursor: pointer;
+
+  overflow: hidden;
+  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
+
+  & .mdl-ripple {
+    background: $radio-color;
+  }
+
+  fieldset[disabled] .mdl-radio &,
+  .mdl-radio.is-disabled & {
+    cursor: auto;
+  }
+
+  fieldset[disabled] .mdl-radio & .mdl-ripple,
+  .mdl-radio.is-disabled & .mdl-ripple {
+    background: transparent;
+  }
+}

dashboard-ui/bower_components/material-design-lite/src/radio/radio.js

@@ -0,0 +1,279 @@
+/**
+ * @license
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Class constructor for Radio MDL component.
+   * Implements MDL component design pattern defined at:
+   * https://github.com/jasonmayes/mdl-component-design-pattern
+   *
+   * @constructor
+   * @param {HTMLElement} element The element that will be upgraded.
+   */
+  var MaterialRadio = function MaterialRadio(element) {
+    this.element_ = element;
+
+    // Initialize instance.
+    this.init();
+  };
+  window['MaterialRadio'] = MaterialRadio;
+
+  /**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string | number}
+   * @private
+   */
+  MaterialRadio.prototype.Constant_ = {
+    TINY_TIMEOUT: 0.001
+  };
+
+  /**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+  MaterialRadio.prototype.CssClasses_ = {
+    IS_FOCUSED: 'is-focused',
+    IS_DISABLED: 'is-disabled',
+    IS_CHECKED: 'is-checked',
+    IS_UPGRADED: 'is-upgraded',
+    JS_RADIO: 'mdl-js-radio',
+    RADIO_BTN: 'mdl-radio__button',
+    RADIO_OUTER_CIRCLE: 'mdl-radio__outer-circle',
+    RADIO_INNER_CIRCLE: 'mdl-radio__inner-circle',
+    RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+    RIPPLE_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events',
+    RIPPLE_CONTAINER: 'mdl-radio__ripple-container',
+    RIPPLE_CENTER: 'mdl-ripple--center',
+    RIPPLE: 'mdl-ripple'
+  };
+
+  /**
+   * Handle change of state.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialRadio.prototype.onChange_ = function(event) {
+    // Since other radio buttons don't get change events, we need to look for
+    // them to update their classes.
+    var radios = document.getElementsByClassName(this.CssClasses_.JS_RADIO);
+    for (var i = 0; i < radios.length; i++) {
+      var button = radios[i].querySelector('.' + this.CssClasses_.RADIO_BTN);
+      // Different name == different group, so no point updating those.
+      if (button.getAttribute('name') === this.btnElement_.getAttribute('name')) {
+        radios[i]['MaterialRadio'].updateClasses_();
+      }
+    }
+  };
+
+  /**
+   * Handle focus.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialRadio.prototype.onFocus_ = function(event) {
+    this.element_.classList.add(this.CssClasses_.IS_FOCUSED);
+  };
+
+  /**
+   * Handle lost focus.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialRadio.prototype.onBlur_ = function(event) {
+    this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);
+  };
+
+  /**
+   * Handle mouseup.
+   *
+   * @param {Event} event The event that fired.
+   * @private
+   */
+  MaterialRadio.prototype.onMouseup_ = function(event) {
+    this.blur_();
+  };
+
+  /**
+   * Update classes.
+   *
+   * @private
+   */
+  MaterialRadio.prototype.updateClasses_ = function() {
+    this.checkDisabled();
+    this.checkToggleState();
+  };
+
+  /**
+   * Add blur.
+   *
+   * @private
+   */
+  MaterialRadio.prototype.blur_ = function() {
+
+    // TODO: figure out why there's a focus event being fired after our blur,
+    // so that we can avoid this hack.
+    window.setTimeout(function() {
+      this.btnElement_.blur();
+    }.bind(this), /** @type {number} */ (this.Constant_.TINY_TIMEOUT));
+  };
+
+  // Public methods.
+
+  /**
+   * Check the components disabled state.
+   *
+   * @public
+   */
+  MaterialRadio.prototype.checkDisabled = function() {
+    if (this.btnElement_.disabled) {
+      this.element_.classList.add(this.CssClasses_.IS_DISABLED);
+    } else {
+      this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
+    }
+  };
+  MaterialRadio.prototype['checkDisabled'] =
+      MaterialRadio.prototype.checkDisabled;
+
+  /**
+   * Check the components toggled state.
+   *
+   * @public
+   */
+  MaterialRadio.prototype.checkToggleState = function() {
+    if (this.btnElement_.checked) {
+      this.element_.classList.add(this.CssClasses_.IS_CHECKED);
+    } else {
+      this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
+    }
+  };
+  MaterialRadio.prototype['checkToggleState'] =
+      MaterialRadio.prototype.checkToggleState;
+
+  /**
+   * Disable radio.
+   *
+   * @public
+   */
+  MaterialRadio.prototype.disable = function() {
+    this.btnElement_.disabled = true;
+    this.updateClasses_();
+  };
+  MaterialRadio.prototype['disable'] = MaterialRadio.prototype.disable;
+
+  /**
+   * Enable radio.
+   *
+   * @public
+   */
+  MaterialRadio.prototype.enable = function() {
+    this.btnElement_.disabled = false;
+    this.updateClasses_();
+  };
+  MaterialRadio.prototype['enable'] = MaterialRadio.prototype.enable;
+
+  /**
+   * Check radio.
+   *
+   * @public
+   */
+  MaterialRadio.prototype.check = function() {
+    this.btnElement_.checked = true;
+    this.updateClasses_();
+  };
+  MaterialRadio.prototype['check'] = MaterialRadio.prototype.check;
+
+  /**
+   * Uncheck radio.
+   *
+   * @public
+   */
+  MaterialRadio.prototype.uncheck = function() {
+    this.btnElement_.checked = false;
+    this.updateClasses_();
+  };
+  MaterialRadio.prototype['uncheck'] = MaterialRadio.prototype.uncheck;
+
+  /**
+   * Initialize element.
+   */
+  MaterialRadio.prototype.init = function() {
+    if (this.element_) {
+      this.btnElement_ = this.element_.querySelector('.' +
+          this.CssClasses_.RADIO_BTN);
+
+      this.boundChangeHandler_ = this.onChange_.bind(this);
+      this.boundFocusHandler_ = this.onChange_.bind(this);
+      this.boundBlurHandler_ = this.onBlur_.bind(this);
+      this.boundMouseUpHandler_ = this.onMouseup_.bind(this);
+
+      var outerCircle = document.createElement('span');
+      outerCircle.classList.add(this.CssClasses_.RADIO_OUTER_CIRCLE);
+
+      var innerCircle = document.createElement('span');
+      innerCircle.classList.add(this.CssClasses_.RADIO_INNER_CIRCLE);
+
+      this.element_.appendChild(outerCircle);
+      this.element_.appendChild(innerCircle);
+
+      var rippleContainer;
+      if (this.element_.classList.contains(
+          this.CssClasses_.RIPPLE_EFFECT)) {
+        this.element_.classList.add(
+            this.CssClasses_.RIPPLE_IGNORE_EVENTS);
+        rippleContainer = document.createElement('span');
+        rippleContainer.classList.add(
+            this.CssClasses_.RIPPLE_CONTAINER);
+        rippleContainer.classList.add(this.CssClasses_.RIPPLE_EFFECT);
+        rippleContainer.classList.add(this.CssClasses_.RIPPLE_CENTER);
+        rippleContainer.addEventListener('mouseup', this.boundMouseUpHandler_);
+
+        var ripple = document.createElement('span');
+        ripple.classList.add(this.CssClasses_.RIPPLE);
+
+        rippleContainer.appendChild(ripple);
+        this.element_.appendChild(rippleContainer);
+      }
+
+      this.btnElement_.addEventListener('change', this.boundChangeHandler_);
+      this.btnElement_.addEventListener('focus', this.boundFocusHandler_);
+      this.btnElement_.addEventListener('blur', this.boundBlurHandler_);
+      this.element_.addEventListener('mouseup', this.boundMouseUpHandler_);
+
+      this.updateClasses_();
+      this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+    }
+  };
+
+  // The component registers itself. It can assume componentHandler is available
+  // in the global scope.
+  componentHandler.register({
+    constructor: MaterialRadio,
+    classAsString: 'MaterialRadio',
+    cssClass: 'mdl-js-radio',
+    widget: true
+  });
+})();

dashboard-ui/bower_components/material-design-lite/src/radio/snippets/radio-off.html

@@ -0,0 +1,4 @@
+<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
+  <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
+  <span class="mdl-radio__label">Second</span>
+</label>

dashboard-ui/bower_components/material-design-lite/src/radio/snippets/radio-on.html

@@ -0,0 +1,4 @@
+<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
+  <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
+  <span class="mdl-radio__label">First</span>
+</label>