85 lines
2.3 KiB
React
85 lines
2.3 KiB
React
|
const HanyuuOAuth2LoadingIcon = function() {
|
||
|
|
const element = <div class="oauth2-loading-icon"/>;
|
||
|
|
for(let i = 0; i < 9; ++i)
|
||
|
|
element.appendChild(<div class="oauth2-loading-icon-block"/>);
|
||
|
|
|
||
|
|
// this is moderately cursed but it'll do
|
||
|
|
const blocks = [
|
||
|
|
element.children[3],
|
||
|
|
element.children[0],
|
||
|
|
element.children[1],
|
||
|
|
element.children[2],
|
||
|
|
element.children[5],
|
||
|
|
element.children[8],
|
||
|
|
element.children[7],
|
||
|
|
element.children[6],
|
||
|
|
];
|
||
|
|
|
||
|
|
let tsLastUpdate;
|
||
|
|
let counter = 0;
|
||
|
|
let playing = false;
|
||
|
|
|
||
|
|
const update = tsCurrent => {
|
||
|
|
try {
|
||
|
|
if(tsLastUpdate !== undefined && (tsCurrent - tsLastUpdate) < 50)
|
||
|
|
return;
|
||
|
|
tsLastUpdate = tsCurrent;
|
||
|
|
|
||
|
|
for(let i = 0; i < blocks.length; ++i)
|
||
|
|
blocks[(counter + i) % blocks.length].classList.toggle('oauth2-loading-icon-block-hidden', i < 3);
|
||
|
|
|
||
|
|
++counter;
|
||
|
|
} finally {
|
||
|
|
if(playing)
|
||
|
|
requestAnimationFrame(update);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const play = () => {
|
||
|
|
if(playing)
|
||
|
|
return;
|
||
|
|
playing = true;
|
||
|
|
requestAnimationFrame(update);
|
||
|
|
};
|
||
|
|
const pause = () => { playing = false; };
|
||
|
|
const stop = () => { pause(); counter = 0; };
|
||
|
|
const restart = () => { stop(); play(); };
|
||
|
|
|
||
|
|
return {
|
||
|
|
get element() { return element; },
|
||
|
|
get playing() { return playing; },
|
||
|
|
|
||
|
|
play: play,
|
||
|
|
pause: pause,
|
||
|
|
stop: stop,
|
||
|
|
restart: restart,
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
const HanyuuOAuth2Loading = function(element) {
|
||
|
|
if(typeof element === 'string')
|
||
|
|
element = document.querySelector(element);
|
||
|
|
if(!(element instanceof HTMLElement))
|
||
|
|
element = <div class="oauth2-loading"/>;
|
||
|
|
|
||
|
|
if(!element.classList.contains('oauth2-loading'))
|
||
|
|
element.classList.add('oauth2-loading');
|
||
|
|
|
||
|
|
let icon;
|
||
|
|
if(element.childElementCount < 1) {
|
||
|
|
icon = new HanyuuOAuth2LoadingIcon;
|
||
|
|
icon.play();
|
||
|
|
element.appendChild(<div class="oauth2-loading-frame">{icon}</div>);
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
get element() { return element; },
|
||
|
|
|
||
|
|
get hasIcon() { return icon !== undefined; },
|
||
|
|
get icon() { return icon; },
|
||
|
|
|
||
|
|
get visible() { return !element.classList.contains('hidden'); },
|
||
|
|
set visible(state) { element.classList.toggle('hidden', !state); },
|
||
|
|
};
|
||
|
|
};
|