Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[fix bug 1122519] Remove UA detection and use feature detect for CSS …
…line animations
  • Loading branch information
alexgibson committed Jan 22, 2015
1 parent 347331c commit ccbe4d6
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 31 deletions.
5 changes: 4 additions & 1 deletion bedrock/settings/base.py
Expand Up @@ -236,6 +236,7 @@ def JINJA_CONFIG():
'firefox_desktop': (
'css/sandstone/sandstone-resp.less',
'css/firefox/desktop/intro-anim.less',
'css/base/svg-animation-check.less',
'css/firefox/desktop/index.less',
),
'firefox_desktop_fast': (
Expand Down Expand Up @@ -314,6 +315,7 @@ def JINJA_CONFIG():
'css/sandstone/sandstone-resp.less',
'css/firefox/menu-resp.less',
'css/base/mozilla-modal.less',
'css/base/svg-animation-check.less',
'css/firefox/hello/index.less',
),
'firefox_new': (
Expand Down Expand Up @@ -725,6 +727,7 @@ def JINJA_CONFIG():
'js/libs/jquery.waypoints.min.js',
'js/firefox/desktop/common.js',
'js/firefox/desktop/speed-graph.js',
'js/base/svg-animation-check.js',
'js/firefox/desktop/intro-anim.js',
'js/firefox/desktop/index.js',
),
Expand Down Expand Up @@ -820,8 +823,8 @@ def JINJA_CONFIG():
),
'firefox_hello': (
'js/firefox/australis/australis-uitour.js',
'js/libs/modernizr.custom.cssanimations.js',
'js/base/mozilla-modal.js',
'js/base/svg-animation-check.js',
'js/firefox/hello/index.js',
),
'firefox_hello_ie9': (
Expand Down
35 changes: 35 additions & 0 deletions media/css/base/svg-animation-check.less
@@ -0,0 +1,35 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

#svg-test {
visibility: hidden;
height: 0;
width: 0;
overflow: hidden;
}

#svg-test-circle {
stroke-dasharray: 117;
stroke-dashoffset: 117;
-webkit-animation: svg-dash-test 0.1s linear forwards;
animation: svg-dash-test 0.1s linear forwards;
}

@-webkit-keyframes svg-dash-test {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}

@keyframes svg-dash-test {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
81 changes: 81 additions & 0 deletions media/js/base/svg-animation-check.js
@@ -0,0 +1,81 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

// create namespace
if (typeof Mozilla == 'undefined') {
var Mozilla = {};
}

/**
* Feature detect for animating SVG line paths using CSS
* Detection:
* 1.) browser supports inline SVG
* 2.) browser supports CSS animations
* 3.) browser can animate stroke-dashoffset via a CSS keyframe animation
*
* Required less file: 'css/base/svg-animation-check.less'
*/
Mozilla.SVGAnimCheck = function() {
if (!Mozilla.SVGAnimCheck.supportsInlineSVG() || !Mozilla.SVGAnimCheck.supportsCSSAnimations()) {
return false;
} else {
return Mozilla.SVGAnimCheck.supportsCSSAnimatedPaths();
}
};

/**
* Detect CSS animation support (only checks for webkit and unprefixed)
*/
Mozilla.SVGAnimCheck.supportsCSSAnimations = function() {
var div = document.createElement('div');

// note we're only checking for Webkit vendor prefix as all other browsers
// now support unprefixed CSS animations
if (div.style.animationName !== undefined || div.style.WebkitAnimationName !== undefined) {
return true;
}

return false;
};

/**
* Detect support for inline SVG elements.
*/
Mozilla.SVGAnimCheck.supportsInlineSVG = function() {
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
};

/**
* Try to animate stroke-dashoffset using CSS and then get the computed value to see if it has changed.
*/
Mozilla.SVGAnimCheck.supportsCSSAnimatedPaths = function() {
var div = document.createElement('div');
var circle;
var offset;

div.id = 'svg-test';
div.innerHTML = '<svg role="presentation" xmlns="http://www.w3.org/2000/svg" version="1.1"><path id="svg-test-circle" fill-opacity="0" d="M33.665530413296274,58.589001490321166C43.94406883919239,58.59306994020939,52.274,66.92651000976564,52.274,77.205C52.274,87.486,43.939,95.821,33.658,95.821C23.377000000000002,95.821,15.042000000000002,87.48599999999999,15.042000000000002,77.205C15.041,66.923,23.376,58.589,33.658,58.589" stroke="#5d7489"></path></svg>';
document.documentElement.appendChild(div);

// try/catch is maybe a little over cautious
// but better to show the fallback than throw an exception
try {
circle = document.getElementById('svg-test-circle');
offset = window.getComputedStyle(circle).getPropertyValue('stroke-dashoffset');

div.parentNode.removeChild(div);

// webkit & blink return a string with px value
if (offset.replace(/\D/g, '') === '0') {
return true;
}
return false;
} catch(e) {
div.parentNode.removeChild(div);
return false;
}
};

16 changes: 3 additions & 13 deletions media/js/firefox/desktop/intro-anim.js
Expand Up @@ -2,26 +2,16 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

(function($) {
(function(Mozilla, $) {
'use strict';

var isIE = /MSIE/.test(navigator.userAgent);
var isTrident = /Trident/.test(navigator.userAgent);
var isOldOpera= /Presto/.test(navigator.userAgent);

function cutsTheMustard() {
// Bug (1083079) fixed but effects Firefox 35
if (window.isFirefox() && window.getFirefoxMasterVersion() === 35 && $('html').hasClass('osx')) {
return false;
}

return supportsInlineSVG() && !isIE && !isTrident && !isOldOpera;
}

function supportsInlineSVG () {
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
return Mozilla.SVGAnimCheck();
}

if (!cutsTheMustard()) {
Expand All @@ -34,4 +24,4 @@
});
}

})(window.jQuery);
})(Mozilla, window.jQuery);
21 changes: 4 additions & 17 deletions media/js/firefox/hello/index.js
Expand Up @@ -2,7 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

;(function(w, $, Modernizr) {
;(function(Mozilla, w, $) {
'use strict';

var $w = $(w);
Expand All @@ -16,30 +16,17 @@
var supportsHTML5Video = !!document.createElement('video').canPlayType;
var isWideViewport = $w.width() >= 740;
var mqIsWide;
var isIE = /MSIE/.test(navigator.userAgent);
var isTrident = /Trident/.test(navigator.userAgent);
var isOldOpera= /Presto/.test(navigator.userAgent);

var supportsSVGAnimation = function() {
return supportsInlineSVG() && !isIE && !isTrident && !isOldOpera;
};

var supportsInlineSVG = function() {
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) === 'http://www.w3.org/2000/svg';
};

if (isWideViewport) {
if (supportsSVGAnimation()) {
if (Mozilla.SVGAnimCheck()) {
$w.on('load', function() {
$animationStage.addClass('animate wide');
});
} else {
$('body').addClass('no-animation');
}
} else {
if (Modernizr.cssanimations) {
if (Mozilla.SVGAnimCheck.supportsCSSAnimations()) {
$w.on('load', function() {
$animationStage.addClass('animate mini');
});
Expand Down Expand Up @@ -199,4 +186,4 @@
$video.on('play', function() {
w.gaTrack(['_trackEvent', '/hello interactions', 'productPage', 'PlayVideo']);
});
})(window, window.jQuery, window.Modernizr);
})(Mozilla, window, window.jQuery);

0 comments on commit ccbe4d6

Please sign in to comment.