2a5bac2bb3
* major JSDoc write up * removed ESLint `no-bitwise` exception, it only applies to specific functions and not the entire code * the `SVGCubicMorph` component will remove un-necessary `Z` path commands when is the case for better out of the box animation * fixed a minor disambiguation with `filterEffects` and `drop-shadow` property and its `dropshadow` interpolation function * TypeScript strong: all files are modules, easy to implement in any third party app * updated `CubicBezier` and SVGPathCommander * code cleanup
112 lines
4.2 KiB
JavaScript
112 lines
4.2 KiB
JavaScript
// testing grounds
|
|
"use strict";
|
|
|
|
var mobileType = '',
|
|
isMobile = {
|
|
Windows: function() {
|
|
var checkW = /IEMobile|Windows Mobile/i.test(navigator.userAgent);
|
|
mobileType += checkW ? 'Windows Phones.' : '';
|
|
return checkW;
|
|
},
|
|
Android: function() {
|
|
var checkA = /Android/i.test(navigator.userAgent);
|
|
mobileType += checkA ? 'Android Phones.' : '';
|
|
return checkA;
|
|
},
|
|
BlackBerry: function() {
|
|
var checkB = /BlackBerry/i.test(navigator.userAgent);
|
|
mobileType += checkB ? 'BlackBerry.' : '';
|
|
return checkB;
|
|
},
|
|
iOS: function() {
|
|
var checkI = /iPhone|iPad|iPod/i.test(navigator.userAgent);
|
|
mobileType += checkI ? 'Apple iPhone, iPad or iPod.' : '';
|
|
return checkI;
|
|
},
|
|
any: function() {
|
|
return ( isMobile.Windows() || isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() );
|
|
}
|
|
},
|
|
checkMOBS = isMobile.any();
|
|
|
|
// protect phones, older / low end devices
|
|
if (document.body.offsetWidth < 1200 || checkMOBS) {
|
|
var explain = '';
|
|
explain += checkMOBS && mobileType !== '' ? ('For safety reasons, this page does not work with ' + mobileType) : '';
|
|
explain += !checkMOBS && document.body.offsetWidth < 1200 && mobileType === '' ? 'For safety reasons this page does not work on your machine because it might be very old. In other cases the browser window size is not enough for the animation to work properly, so if that\'s the case, maximize the window, refresh and proceed with the tests.' : '';
|
|
var warning = '<div style="padding: 20px;">';
|
|
warning +='<h1 class="text-danger">Warning!</h1>';
|
|
warning +='<p class="lead text-danger">This web page is only for high-end desktop computers.</p>';
|
|
warning +='<p class="text-danger">We do not take any responsibility and we are not liable for any damage caused through use of this website, be it indirect, special, incidental or consequential damages to your devices.</p>';
|
|
warning +='<p class="text-info">'+explain+'</p>';
|
|
warning +='</div>';
|
|
document.body.innerHTML = warning;
|
|
throw new Error('This page is only for high-end desktop computers. ' + explain);
|
|
}
|
|
|
|
// the variables
|
|
var infoContainer = document.getElementById('info');
|
|
var container = document.getElementById('container');
|
|
var tws = [];
|
|
|
|
for (var i=0; i<21; i++){
|
|
container.innerHTML +=
|
|
'<div class="cube">'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'<div class="cube__side"></div>'
|
|
+'</div>'
|
|
}
|
|
|
|
var collection = document.getElementsByClassName('cube');
|
|
var lastIdx = collection.length-1;
|
|
|
|
function complete(){
|
|
infoContainer.style.display = 'block';
|
|
container.style.display = 'none';
|
|
}
|
|
|
|
var engine = document.getElementById('kute'),
|
|
fromCSS = { rotate3d: [ 0, 0,0 ], perspective:600 },
|
|
fromMX = { transform: { rotate3d: [ 0, 0,0 ], perspective:600 }},
|
|
toCSS = { rotate3d: [ 360,0,0 ], perspective:600 },
|
|
toMX = { transform: { rotate3d: [ 0,360,0 ], perspective:600 }},
|
|
ops = { duration: 2000, repeat: 5 }
|
|
|
|
// since our engines don't do sync, we make it our own here
|
|
if (!engine.src.includes('extra')) {
|
|
[].slice.call(collection).map((el,i) => { i===lastIdx && (ops.onComplete = complete); tws.push ( KUTE.fromTo(el,fromCSS,toCSS,ops) ) })
|
|
}
|
|
if (engine.src.includes('extra')) {
|
|
[].slice.call(collection).map((el,i) => { i===lastIdx && (ops.onComplete = complete); tws.push ( KUTE.fromTo(el,fromMX,toMX,ops) ) })
|
|
}
|
|
|
|
|
|
function startTest(){
|
|
infoContainer.style.display = 'none';
|
|
container.style.display = 'block'
|
|
|
|
tws.length && !tws[0].playing && startKUTE();
|
|
}
|
|
|
|
|
|
function startKUTE() {
|
|
var now = window.performance.now(), count = tws.length;
|
|
tws.forEach((t) => t.start(now));
|
|
}
|
|
|
|
// the start button handle
|
|
document.getElementById('start').addEventListener('click', startTest, false);
|