refactor(switch): refactor for spec changes

[ajoslin]

• Focus styles
• Proper theming
• Pullable/draggable, using our own 65-line dragging implementation that works on windows phone/desktop/android/iOS

PROBLEMS:

• How to unit test? We don't use click events, we listen to mousedown/mouseup
• Disable transition of background-color on initial load?

[googlebot]

CLAs look good, thanks!

[ajoslin]

@robertmesserle do you know a good way to disable the transition of background-color on initial load?

[marcysutton]

Switches need interaction styles for mouse, keyboard, and touch.

[ajoslin]

Forgot about focus, thanks.

[marcysutton]

ngAria isn't able to compute aria-checked with the use of ngmodel on the second
"Switch 2: nope" component:

$scope.data = {
cb2: 'nope',
}

That data setup appears truthy to ngAria, triggering aria-checked="true" even though the switch isn't active.

[ajoslin]

Ready for final review and merge.

@marcysutton fixed both problems.

[mzbyszynski]

Hi @ajoslin! 👍 👍 for this PR!

I was wondering, have you figured out how to disable the background-color transition during initial loading yet? If not, you could try doing something similar to what ngCloak does and leave the style class that specifies the transition off of your template and add it in the directive's compile function.

If that doesn't work, you could try doing it the way that ngAnimate does. Here is the relevant bit of code with some excellent code commenting from @matsko

      // Wait until all directive and route-related templates are downloaded and
      // compiled. The $templateRequest.totalPendingRequests variable keeps track of
      // all of the remote templates being currently downloaded. If there are no
      // templates currently downloading then the watcher will still fire anyway.
      var deregisterWatch = $rootScope.$watch(
        function() { return $templateRequest.totalPendingRequests; },
        function(val, oldVal) {
          if (val !== 0) return;
          deregisterWatch();

          // Now that all templates have been downloaded, $animate will wait until
          // the post digest queue is empty before enabling animations. By having two
          // calls to $postDigest calls we can ensure that the flag is enabled at the
          // very end of the post digest queue. Since all of the animations in $animate
          // use $postDigest, it's important that the code below executes at the end.
          // This basically means that the page is fully downloaded and compiled before
          // any animations are triggered.
          $rootScope.$$postDigest(function() {
            $rootScope.$$postDigest(function() {
              rootAnimateState.running = false;
            });
          });
        }
      );

Hope that helps. I'm looking forward to this PR getting merged. Keep up the great work.

[marcysutton]

@ajoslin I'm still seeing aria-checked="true" on the second input.

[ajoslin]

@marcysutton We use the same logic for checkbox ng-true-value and ng-false-value that angular does.

It sounds like ngAria should take ng-false-value and ng-true-value into account.

[ajoslin]

@mzbyszynski I just ended up doing this in the link function:

      // no transition on initial load
      $$rAF(function() {
        element.addClass('transition');
      });

[marcysutton]

@ajoslin gotcha! I'll file a bug.

[ajoslin]

Fixed via 8bc9461