I'm trying to set up some code to first test if the Vanilla JavaScript .animate()
API is Supported, then if it's not check if requestAnimationFrame
is supported and if it's not fallback to either setTimeout
, setInterval
or setImmediate
.
I've been reading this e-book on google Smashing Webkit, which says that its always best practice to check for feature support before actually implementing it, so I'm trying to move all my App Animations inside of the checks below, and then implement fallbacks for backwards compatibility and older browsers.
I'm not 100% sure if this has any security concerns as I'm not a web security expert nor am I an expert coder by any standards. I'm still trying to learn JS and am wondering if this code block could be made better, more secure or to run more optimally i.e. removing unnecessary if
statements or reworking the code so it is less verbose.
document.addEventListener("DOMContentLoaded",(()=> {
// ::>>. Notes:: ......................
// ::>>. A Handy Function to get the Browser Prefix ~
// Gets the browser prefix
var brsrPrefix;
navigator.sayswho= (function(){
var N = navigator.appName, ua = navigator.userAgent, tem;
var M = ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
if(M && (tem = ua.match(/version\/([\.\d]+)/i))!= null) M[2] = tem[1];
M = M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
M = M[0];
if(M == "Chrome") { brsrPrefix = "webkit"; }
if(M == "Firefox") { brsrPrefix = "moz"; }
if(M == "Safari") { brsrPrefix = "webkit"; }
if(M == "MSIE") { brsrPrefix = "ms"; }
})();
// ::>>. A Handy Function to get the Browser Prefix ~
try{
if(window.animate){
console.log('.animate() API is Supported')
// My Current Animations will be in here.
}
if(window.requestAnimationFrame){
console.log('RequestAF is Supported')
// 1st fallback in here.
} if(!window.requestAnimationFrame) {
window.requestAnimationFrame = window.setImmediate
} else {
let requestAnimationFrame= window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
return window.setTimeout(callback, 1000/60)
};
console.log(requestAnimationFrame);
}
} // ::>>. Closing Bracket for First Try Catch.............
catch(err){
console.log(err)
} // ::>>. Closing Bracket for First Catch.............
// ::>>. RequestAnimation FramePolyFill
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz', 'ms'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
// ::>>. RequestAnimation FramePolyFill
}))
My concerns with the code is that I copied the first snippet from a blog post and I don't fully understand the RegEx that is used within it. I'm finding Regex very, very difficult to learn and is kinda confusing. Can anyone point out to me what tem
and ua
mean? I'm guessing ua
is shorthand for user-agent.
Also, the code above is repeating itself in that its declaring var brsrPrefix & also var vendors = ['webkit', 'moz', 'ms']; Will look into trying to attempt to merge these two functions and compact the code as much as I can.
In my try catch if else statement it's checking to see if window.requestAnimationFrame
is supported and then if it's not, its setting let requestAnimationFrame
to be any of the browser specific versions. However, if I attempted to call or attach this let to an item it would end up being element.window.requestAnimationFrame
which is the wrong syntax.
Also, Firefox Quantum supports the experimental .animate()
API (not the jQuery version) but it is not console logging anything for this part, only logs that RAF is enabled.
Is this far too much code, just for doing a simple task such as checking browser support?
No errors in console so far. Can anyone help and review this and post meaningful comments so I can learn better and become a better developer?
ideally the code would test support for:
-> .animate()
-> .requestAnimationFrame()
-> .setInterval()
-> .setTimeout()
-> .setImmediate
in that Order, and Append Browser prefix Where necessary, but might have to research a whole lot more.
this post looks like it will be handy for reference Detecting_CSS_animation_support its has a similar implementation with Js, & Another Js Script on GitHub Similar Detect CSS Animation support and provide object of normalised properties
Here is a new question I asked with Similar Theme but A different Implementation to try and Achieve the same end goal, Using Switch statements instead:
Javascript Anime Support Switch Statement for .animate() Api
Why
the code is wriiten the way it is, I understand also why regex has been used, but it is like an alien language to me & struggleing to learn it. \$\endgroup\$All
Code, ever written is or has been previously written by someone else... \$\endgroup\$