allow using css3 transitions for show/hide in jQuery

Change-Id: I6eb4fca8a021b7f6a061a92f72ec9a8cdd718c25
Reviewed-on: https://gerrit.instructure.com/5445
Reviewed-by: Jacob Fugal <jacob@instructure.com>
Tested-by: Hudson <hudson@instructure.com>

app/coffeescripts/jquery.kylemenu.coffee

@@ -5,7 +5,7 @@
       $menu = $(this).button(opts.buttonOpts).next()
                 .menu(opts.menuOpts)
                 .popup(opts.popupOpts)
-                .addClass("ui-kyle-menu")
+                .addClass("ui-kyle-menu use-css-transitions-for-show-hide")
       $menu.bind "menuselect", -> $(this).removeClass "ui-state-open"
 
   $.fn.kyleMenu.defaults =

app/stylesheets/jquery-ui-menu.scss

@@ -61,10 +61,7 @@ $kyle-menu-border-radius: 10px;
   z-index: 9999;
   @include border-radius($kyle-menu-border-radius);
   @include box-shadow(rgba(0,0,0,0.4), 0px, 2px, 4px, -1px);
-
-  opacity: 0;
   &.ui-state-open{
-    opacity:1;
     -webkit-animation-duration:.5s;
     -webkit-animation-name:kylemenu-bounce;
     /* webkit-transform-origin-x will be set in js and will match the carat position */

public/javascripts/compiled/jquery.kylemenu.js

@@ -4,7 +4,7 @@
       return this.each(function() {
         var $menu, opts;
         opts = $.extend(true, {}, $.fn.kyleMenu.defaults, options);
-        $menu = $(this).button(opts.buttonOpts).next().menu(opts.menuOpts).popup(opts.popupOpts).addClass("ui-kyle-menu");
+        $menu = $(this).button(opts.buttonOpts).next().menu(opts.menuOpts).popup(opts.popupOpts).addClass("ui-kyle-menu use-css-transitions-for-show-hide");
         return $menu.bind("menuselect", function() {
           return $(this).removeClass("ui-state-open");
         });

public/javascripts/instructure_helper.js

@@ -126,6 +126,50 @@ I18n.scoped('instructure', function(I18n) {
     return ret.concat.apply([], ret);
   }
 
+  // add ability to handle css3 opacity transitions on show or hide
+  // if you want to use this just add the class 'use-css-transitions-for-show-hide' to an element.
+  // whenever that element is .show()n or .hide()n it will use a css opacity transition (in non-IE browsers). 
+  // if you want to override the length or details of the transition, just specify it in a css file.
+  if ($.detect(['-moz-transition', '-o-transition', '-webkit-transition'], function(){ return document.body.style[this] !== undefined })) {
+    $(function(){ //have to do it later (on dom ready) because jQuery UI is going to override show and hide as well
+      $.each(['show', 'hide', 'remove'], function(i, showHideOrRemove) {
+        var previousFn = $.fn[showHideOrRemove];
+        $.fn[showHideOrRemove] = function(){
+          if (!arguments.length) {
+            return this.each(function() {
+              var $this = $(this);
+              // if you can't add the class .use-css-transitions-for-show-hide to your element, you can
+              // add it to this selector to have it use css3 transitions.
+              if ($this.is('.use-css-transitions-for-show-hide, .webkit .ui-widget-overlay')) {
+                var oldOpacityCssAttribute = this.style.opacity,
+                    oldComputedOpacity = $this.css('opacity'),
+                    newOpacity = (showHideOrRemove === 'hide' || showHideOrRemove === 'remove') ? 0 : (!oldComputedOpacity || oldComputedOpacity == "0" ? 1 : oldComputedOpacity);
+                if (showHideOrRemove === 'show' && $this.is(':hidden')) {
+                  this.style.opacity = 0;
+                  previousFn.apply($this); //change out of display:none
+                }
+                $this.bind('transitionend oTransitionEnd webkitTransitionEnd', function(event){
+                  if (event.originalEvent.propertyName === 'opacity') {
+                    previousFn.apply($(this)); //change to display:none when we are hiding.
+                    this.style.opacity = oldOpacityCssAttribute;
+                    $(this).unbind(event);
+                  }
+                });
+                setTimeout(function(){
+                  $this.css('opacity', newOpacity);
+                }, 1);
+              } else {
+                previousFn.apply($this);
+              }
+            });
+          } else {
+            return previousFn.apply(this, arguments);
+          }
+        };
+      });
+    });
+  }
+
   // Intercepts the default form submission process.  Uses the form tag's
   // current action and method attributes to know where to submit to.
   // NOTE: because IE only allows form methods to be "POST" or "GET",

public/stylesheets/static/jquery-ui-theme.css

@@ -497,4 +497,12 @@
 /* Progressbar
 ----------------------------------*/
 .ui-progressbar { height:2em; text-align: left; background: url(/images/jqueryui/progress_bar.gif) 0px -50px repeat-x; }
-.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; background: url(/images/jqueryui/progress_bar.gif) 0px 0px repeat-x; }
+.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; background: url(/images/jqueryui/progress_bar.gif) 0px 0px repeat-x; }
+
+
+.use-css-transitions-for-show-hide {
+  -webkit-transition: opacity 1.5s;
+  -moz-transition: opacity 1.5s;
+  -o-transition: opacity 1.5;
+  transition: opacity 1.5s;
+}