docs: wait for GitHub button coloring until CSS transitions are finished #615

This commit is contained in:
Sören Weber 2023-08-12 23:48:40 +02:00
parent a52aee2c70
commit beb284ee87
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D

View file

@ -18,8 +18,7 @@
</span>
<p>Built with <a href="https://github.com/McShelby/hugo-theme-relearn" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
<script>
document.addEventListener( 'themeVariantLoaded', function( e ){
console.log( e );
function githubButtonsScheme(){
var scheme = 'light';
var colorPropertyValue = window.getComputedStyle( document.querySelector( '#sidebar' ) ).getPropertyValue( 'background-color' );
var colorValues = colorPropertyValue.match( /\d+/g ).map( function( e ){ return parseInt(e,10); });
@ -27,17 +26,29 @@
// Luma, https://en.wikipedia.org/wiki/Luma_%28video%29, SMPTE C, Rec. 709 weightings
scheme = 'dark';
}
return scheme;
}
document.addEventListener( 'themeVariantLoaded', function( e ){
// we get the scheme for initial loading
var scheme = githubButtonsScheme();
var githubButtonsHTML = `
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-color-scheme="${scheme}" data-icon="octicon-cloud-download" aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn" data-color-scheme="${scheme}" data-icon="octicon-star" data-show-count="true" aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-color-scheme="${scheme}" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
`;
document.querySelector( '.github-buttons' ).innerHTML = githubButtonsHTML;
document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
window.githubButtons.render( anchor, function( el ){
anchor.parentNode.replaceChild( el, anchor );
});
});
if( window.githubButtons ){
setTimeout( function(){
// we have to wait until the CSS class .default-animation has settled and recalculate the scheme again
var scheme = githubButtonsScheme();
document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
anchor.dataset.colorScheme = scheme;
window.githubButtons.render( anchor, function( el ){
anchor.parentNode.replaceChild( el, anchor );
});
});
}, 400 );
}
});
</script>
<script async src="{{"js/github-buttons.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>