refactor(): use strict, consolidate material.core, interimElement chaining

Closes #643. Closes #650. Closes #597. Closes #596. Closes #525.

Author: rschmukler

src/components/animate/_effects.scss

@@ -25,21 +25,21 @@ angular.module('material.components.progressLinear', [
  *
  * For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.
  *
- * @param {string} mdMode Select from one of four modes: determinate, indeterminate, buffer or query.
+ * @param {string} mode Select from one of four modes: determinate, indeterminate, buffer or query.
  * @param {number=} value In determinate and buffer modes, this number represents the percentage of the primary progress bar. Default: 0
- * @param {number=} mdBufferValue In the buffer mode, this number represents the precentage of the secondary progress bar. Default: 0
+ * @param {number=} secondaryValue In the buffer mode, this number represents the precentage of the secondary progress bar. Default: 0
  *
  * @usage
  * <hljs lang="html">
- * <md-progress-linear md-mode="determinate" value="..."></md-progress-linear>
+ * <md-progress-linear mode="determinate" value="..."></md-progress-linear>
  *
- * <md-progress-linear md-mode="determinate" ng-value="..."></md-progress-linear>
+ * <md-progress-linear mode="determinate" ng-value="..."></md-progress-linear>
  *
- * <md-progress-linear md-mode="indeterminate"></md-progress-linear>
+ * <md-progress-linear mode="indeterminate"></md-progress-linear>
  *
- * <md-progress-linear md-mode="buffer" value="..." md-buffer-value="..."></md-progress-linear>
+ * <md-progress-linear mode="buffer" value="..." secondaryValue="..."></md-progress-linear>
  *
- * <md-progress-linear md-mode="query"></md-progress-linear>
+ * <md-progress-linear mode="query"></md-progress-linear>
  * </hljs>
  */
 function MdProgressLinearDirective($$rAF, $mdConstant, $mdTheming) {
@@ -68,7 +68,7 @@ function MdProgressLinearDirective($$rAF, $mdConstant, $mdTheming) {
       container = angular.element(element[0].querySelector('.md-container'));
 
     attr.$observe('value', function(value) {
-      if (attr.mdMode == 'query') {
+      if (attr.mode == 'query') {
         return;
       }
 
@@ -77,7 +77,7 @@ function MdProgressLinearDirective($$rAF, $mdConstant, $mdTheming) {
       bar2Style[$mdConstant.CSS.TRANSFORM] = transforms[clamped];
     });
 
-    attr.$observe('mdBufferValue', function(value) {
+    attr.$observe('secondaryvalue', function(value) {
       bar1Style[$mdConstant.CSS.TRANSFORM] = transforms[clamp(value)];
     });
 

src/components/progressLinear/progressLinear.js

@@ -33,9 +33,9 @@ describe('mdProgressLinear', function() {
     expect(progress.eq(0).attr('aria-valuenow')).toEqual('50');
   }));
 
-  it('should set transform based on buffer value', inject(function($compile, $rootScope, $mdConstant) {
+  it('should set transform based on secondaryvalue', inject(function($compile, $rootScope, $mdConstant) {
     var element = $compile('<div>' +
-      '<md-progress-linear value="{{progress}}" md-buffer-value="{{progress2}}">' +
+      '<md-progress-linear value="{{progress}}" secondaryvalue="{{progress2}}">' +
       '</md-progress-linear>' +
       '</div>')($rootScope);
 
@@ -52,7 +52,7 @@ describe('mdProgressLinear', function() {
 
   it('should not set transform in query mode', inject(function($compile, $rootScope, $mdConstant) {
     var element = $compile('<div>' +
-      '<md-progress-linear md-mode="query" value="{{progress}}">' +
+      '<md-progress-linear mode="query" value="{{progress}}">' +
       '</md-progress-linear>' +
       '</div>')($rootScope);
 

src/components/progressLinear/progressLinear.spec.js

@@ -31,7 +31,7 @@ function mdSidenavController($scope, $element, $attrs, $timeout, $mdSidenav, $md
 
   var self = this;
 
-  this.destroy = $mdComponentRegistry.register(this, $attrs.mdComponentId);
+  this.destroy = $mdComponentRegistry.register(this, $attrs.componentId);
 
   this.isOpen = function() {
     return !!$scope.isOpen;
@@ -109,7 +109,7 @@ function mdSidenavService($mdComponentRegistry) {
  * @usage
  * <hljs lang="html">
  * <div layout="horizontal" ng-controller="MyController">
- *   <md-sidenav md-component-id="left" class="md-sidenav-left">
+ *   <md-sidenav component-id="left" class="md-sidenav-left">
  *     Left Nav!
  *   </md-sidenav>
  *
@@ -120,8 +120,8 @@ function mdSidenavService($mdComponentRegistry) {
  *     </md-button>
  *   </md-content>
  *
- *   <md-sidenav md-component-id="right"
- *     md-is-locked-open="$media('min-width: 333px')"
+ *   <md-sidenav component-id="right" 
+ *     is-locked-open="$media('min-width: 333px')"
  *     class="md-sidenav-right">
  *     Right Nav!
  *   </md-sidenav>
@@ -137,25 +137,25 @@ function mdSidenavService($mdComponentRegistry) {
  * });
  * </hljs>
  *
- * @param {expression=} mdIsOpen A model bound to whether the sidenav is opened.
- * @param {string=} mdComponentId componentId to use with $mdSidenav service.
- * @param {expression=} mdIsLockedOpen When this expression evalutes to true,
+ * @param {expression=} is-open A model bound to whether the sidenav is opened.
+ * @param {string=} component-id componentId to use with $mdSidenav service.
+ * @param {expression=} is-locked-open When this expression evalutes to true,
  * the sidenav 'locks open': it falls into the content's flow instead
  * of appearing over it. This overrides the `is-open` attribute.
  *
  * A $media() function is exposed to the is-locked-open attribute, which
  * can be given a media query or one of the `sm`, `md` or `lg` presets.
  * Examples:
  *
- *   - `<md-sidenav md-is-locked-open="shouldLockOpen"></md-sidenav>`
- *   - `<md-sidenav md-is-locked-open="$media('min-width: 1000px')"></md-sidenav>`
- *   - `<md-sidenav md-is-locked-open="$media('sm')"></md-sidenav>` <!-- locks open on small screens !-->
+ *   - `<md-sidenav is-locked-open="shouldLockOpen"></md-sidenav>`
+ *   - `<md-sidenav is-locked-open="$media('min-width: 1000px')"></md-sidenav>`
+ *   - `<md-sidenav is-locked-open="$media('sm')"></md-sidenav>` <!-- locks open on small screens !-->
  */
 function mdSidenavDirective($timeout, $animate, $parse, $mdMedia, $mdConstant, $compile, $mdTheming) {
   return {
     restrict: 'E',
     scope: {
-      isOpen: '=?mdIsOpen'
+      isOpen: '=?'
     },
     controller: '$mdSidenavController',
     compile: function(element) {
@@ -166,7 +166,7 @@ function mdSidenavDirective($timeout, $animate, $parse, $mdMedia, $mdConstant, $
   };
 
   function postLink(scope, element, attr, sidenavCtrl) {
-    var isLockedOpenParsed = $parse(attr.mdIsLockedOpen);
+    var isLockedOpenParsed = $parse(attr.isLockedOpen);
     var backdrop = $compile(
       '<md-backdrop class="md-sidenav-backdrop md-opaque">'
     )(scope);
@@ -270,7 +270,7 @@ function mdMediaFactory($window, $mdUtil, $timeout) {
   function add(query) {
     return cache.put(query, !!$window.matchMedia(query).matches);
   }
-
+  
   function updateAll() {
     var keys = cache.keys();
     if (keys.length) {
@@ -283,7 +283,7 @@ function mdMediaFactory($window, $mdUtil, $timeout) {
   }
 
 }
-
+  
 function mdComponentRegistry($log) {
   var instances = [];
 

src/components/sidenav/sidenav.js

@@ -23,7 +23,7 @@ angular.module('material.components.slider', [
  * of values, and 'discrete' mode, where the user slides between only a few
  * select values.
  *
- * To enable discrete mode, add the `md-discrete` attribute to a slider,
+ * To enable discrete mode, add the `discrete` attribute to a slider,
  * and use the `step` attribute to change the distance between
  * values the user is allowed to pick.
  *
@@ -35,11 +35,11 @@ angular.module('material.components.slider', [
  * </hljs>
  * <h4>Discrete Mode</h4>
  * <hljs lang="html">
- * <md-slider md-discrete ng-model="myDiscreteValue" step="10" min="10" max="130">
+ * <md-slider discrete ng-model="myDiscreteValue" step="10" min="10" max="130">
  * </md-slider>
  * </hljs>
  *
- * @param {boolean=} mdDiscrete Whether to enable discrete mode.
+ * @param {boolean=} discrete Whether to enable discrete mode.
  * @param {number=} step The distance between values the user is allowed to pick. Default 1.
  * @param {number=} min The minimum value the user is allowed to pick. Default 0.
  * @param {number=} max The maximum value the user is allowed to pick. Default 100.
@@ -180,7 +180,7 @@ function SliderController($scope, $element, $attrs, $$rAF, $window, $mdAria, $md
     // which could quickly become a performance bottleneck.
     var tickCanvas, tickCtx;
     function redrawTicks() {
-      if (!angular.isDefined($attrs.mdDiscrete)) return;
+      if (!angular.isDefined($attrs.discrete)) return;
 
       var numSteps = Math.floor( (max - min) / step );
       if (!tickCanvas) {
@@ -286,7 +286,7 @@ function SliderController($scope, $element, $attrs, $$rAF, $window, $mdAria, $md
      * Slide listeners
      */
     var isSliding = false;
-    var isDiscrete = angular.isDefined($attrs.mdDiscrete);
+    var isDiscrete = angular.isDefined($attrs.discrete);
 
     function onInput(ev) {
       if (!isSliding && ev.eventType === Hammer.INPUT_START &&

src/components/slider/slider.js

@@ -118,7 +118,7 @@ function MdSwipeFactory() {
  * HammerJS horizontal swipe left and pan left support will be active. The swipe/pan action
  * can result in custom activity trigger by evaluating `expression`.
  *
- * @param {boolean=} mdNoPan Use of attribute indicates flag to disable detection of `panleft` activity
+ * @param {boolean=} noPan Use of attribute indicates flag to disable detection of `panleft` activity
  *
  * @usage
  * <hljs lang="html">
@@ -151,7 +151,7 @@ function MdSwipeLeftDirective($parse, $mdSwipe) {
  * that attaches HammerJS horizontal swipe right and pan right support to an element. The swipe/pan action
  * can result in activity trigger by evaluating `expression`
  *
- * @param {boolean=} mdNoPan Use of attribute indicates flag to disable detection of `panright` activity
+ * @param {boolean=} noPan Use of attribute indicates flag to disable detection of `panright` activity
  *
  * @usage
  * <hljs lang="html">

src/components/swipe/swipe.js

@@ -48,16 +48,16 @@ angular.module('material.components.toolbar', [
  * </div>
  * </hljs>
  *
- * @param {boolean=} mdScrollShrink Whether the header should shrink away as
- * the user scrolls down, and reveal itself as the user scrolls up.
- * Note: for scrollShrink to work, the toolbar must be a sibling of a
+ * @param {boolean=} scrollShrink Whether the header should shrink away as 
+ * the user scrolls down, and reveal itself as the user scrolls up. 
+ * Note: for scrollShrink to work, the toolbar must be a sibling of a 
  * `md-content` element, placed before it. See the scroll shrink demo.
  *
  *
- * @param {number=} mdShrinkSpeedFactor How much to change the speed of the toolbar's
+ * @param {number=} shrinkSpeedFactor How much to change the speed of the toolbar's
  * shrinking by. For example, if 0.25 is given then the toolbar will shrink
  * at one fourth the rate at which the user scrolls down. Default 0.5.
- */
+ */ 
 function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming) {
 
   return {
@@ -66,7 +66,7 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming) {
     link: function(scope, element, attr) {
       $mdTheming(element);
 
-      if (angular.isDefined(attr.mdScrollShrink)) {
+      if (angular.isDefined(attr.scrollShrink)) {
         setupScrollShrink();
       }
 
@@ -76,7 +76,7 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming) {
         // Store the last scroll top position
         var prevScrollTop = 0;
 
-        var shrinkSpeedFactor = attr.mdShrinkSpeedFactor || 0.5;
+        var shrinkSpeedFactor = attr.shrinkSpeedFactor || 0.5;
 
         var toolbarHeight;
         var contentElement;
@@ -114,7 +114,7 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming) {
           // As the user scrolls down, the content will be transformed up slowly
           // to put the content underneath where the toolbar was.
           contentElement.css(
-            'margin-top',
+            'margin-top', 
             (-toolbarHeight * shrinkSpeedFactor) + 'px'
           );
           onContentScroll();
@@ -126,16 +126,16 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming) {
           debouncedUpdateHeight();
 
           y = Math.min(
-            toolbarHeight / shrinkSpeedFactor,
+            toolbarHeight / shrinkSpeedFactor, 
             Math.max(0, y + scrollTop - prevScrollTop)
           );
 
           element.css(
-            $mdConstant.CSS.TRANSFORM,
+            $mdConstant.CSS.TRANSFORM, 
             'translate3d(0,' + (-y * shrinkSpeedFactor) + 'px,0)'
           );
           contentElement.css(
-            $mdConstant.CSS.TRANSFORM,
+            $mdConstant.CSS.TRANSFORM, 
             'translate3d(0,' + ((toolbarHeight - y) * shrinkSpeedFactor) + 'px,0)'
           );