ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

disable the css3 transitions for kylemenus until they work 

need to get rid of webkit flashing thing
and fix it sometimes appearing incrementally
to the right and bottom of where it should

Change-Id: I4fdd535fe6c0521e431477dff6046f8c2147043c
Reviewed-on: https://gerrit.instructure.com/9513
Tested-by: Hudson <hudson@instructure.com>
Reviewed-by: Jon Jensen <jon@instructure.com>
This commit is contained in:
Ryan Shaw 2012-03-20 14:15:39 -06:00
parent 633356893e
commit 53e7dffa90
2 changed files with 0 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/stylesheets/jquery-ui-menu.scss
View File

@ -94,13 +94,6 @@ $kyle-menu-border-radius: 8px;
z-index: 9999;
@include border-radius($kyle-menu-border-radius);
box-shadow: rgba(0,0,0,.4) 0px 2px 4px -1px;
&.ui-state-open{
-webkit-animation-duration:.5s;
-webkit-animation-name:kylemenu-bounce;
/* webkit-transform-origin-x will be set in js and will match the carat position */
-webkit-transform-origin-y: 0;
}
a { color: #525252}
.ui-menu-item {
@ -127,19 +120,6 @@ $kyle-menu-border-radius: 8px;
}
}
@-webkit-keyframes kylemenu-bounce {
from { opacity:0.0; -webkit-transform:scale(0,0); }
25% { opacity:0.3; -webkit-transform: scale(.1,.1); }
30% { opacity:0.4; -webkit-transform: scale(.3,.3); }
35% { opacity:0.5; -webkit-transform: scale(.6,.6); }
40% { opacity:0.6; -webkit-transform: scale(.7,.7); }
45% { opacity:0.7; -webkit-transform: scale(1,1); }
50% { opacity:0.8; -webkit-transform: scale(1.2,1.2); }
55% { opacity:0.9; -webkit-transform: scale(1.1,1.1); }
60% { opacity:1.0; -webkit-transform: scale(1,1); }
to { opacity:1.0; -webkit-transform: scale(1,1); }
}
.ui-menu-small {
font-size: 11px;
font-weight: normal;

66
public/javascripts/instructure_helper.js
View File

@ -24,72 +24,6 @@ define([
'jquery.instructure_jquery_patches' /* /\.dialog/ */
], function(INST, I18n, $) {
// 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.
// purposely only supporting ff, webkit & opera because they are the only ones that fire the transitionEnd event, add others when supported
if (document.body.style.WebkitTransitionProperty !== undefined || document.body.style.MozTransitionProperty !== undefined || document.body.style.OTransitionProperty !== undefined) {
// if you can't add the class .use-css-transitions-for-show-hide to your element, you need to add it to this
var selectorForThingsToUseCssTransitions = '.use-css-transitions-for-show-hide',
secondsToUseForCssTransition = 0.5,
eventsToBindTo = 'transitionend oTransitionEnd webkitTransitionEnd';
$('<style>' +
selectorForThingsToUseCssTransitions + ' {' +
' -webkit-transition: opacity '+ secondsToUseForCssTransition +'s;' +
' -moz-transition: opacity '+ secondsToUseForCssTransition +'s;' +
' -o-transition: opacity '+ secondsToUseForCssTransition +';' +
' transition: opacity '+ secondsToUseForCssTransition +'s;' +
' }' +
'</style>').prependTo('head');
$.each(['show', 'hide', 'remove'], function(i, showHideOrRemove) {
var previousFn = $.fn[showHideOrRemove];
$.fn[showHideOrRemove] = function(){
if (!arguments.length) {
return this.each(function() {
var $this = $(this);
// this.parentNode is to check to make sure it is on the page. because we don't want this:
// node is not on page, call .remove() on it (sets timeout), put it in page, then afterTransition fires (.remove()ing it from the page again).
if (this.parentNode && $this.is(selectorForThingsToUseCssTransitions)) {
$this.queue(function(){
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
}
var afterTransition = function(event){
// !event means we got here from the setTimout
// firefox actually pases a value to the function from setTimeout
// so also have to check for .originalEvent to make sure that it was passed a
// jQuery Event object.
if (!event || !event.originalEvent || event.originalEvent.propertyName === 'opacity') {
previousFn.apply($this); //change to display:none when we are hiding.
$this[0].style.opacity = oldOpacityCssAttribute;
clearTimeout(timeoutToRunIfTransitionEndNeverFires);
$this.unbind(eventsToBindTo, afterTransition);
$this.dequeue();
}
}
var timeoutToRunIfTransitionEndNeverFires = setTimeout(afterTransition, secondsToUseForCssTransition*1000+100) //100ms after it should have fired
$this.bind(eventsToBindTo, afterTransition);
$this.css('opacity', newOpacity);
});
} else {
previousFn.apply($this);
}
});
} else {
return previousFn.apply(this, arguments);
}
};
});
}
function getTld(hostname){
hostname = (hostname || "").split(":")[0];
var parts = hostname.split("."),