diff --git a/app/assets/javascripts/logo.js.coffee b/app/assets/javascripts/logo.js.coffee new file mode 100644 index 0000000000000000000000000000000000000000..e864a674cdd70ba615327f1968702b0b522fcbb4 --- /dev/null +++ b/app/assets/javascripts/logo.js.coffee @@ -0,0 +1,43 @@ +NProgress.configure(showSpinner: false) + +defaultClass = 'tanuki-shape' +pieces = [ + 'path#tanuki-right-cheek', + 'path#tanuki-right-eye, path#tanuki-right-ear', + 'path#tanuki-nose', + 'path#tanuki-left-eye, path#tanuki-left-ear', + 'path#tanuki-left-cheek', +] +pieceIndex = 0 +firstPiece = pieces[0] + +currentTimer = null +delay = 150 + +clearHighlights = -> + $(".#{defaultClass}.highlight").attr('class', defaultClass) + +start = -> + clearHighlights() + pieceIndex = 0 + pieces.reverse() unless pieces[0] == firstPiece + currentTimer = setInterval(work, delay) + +stop = -> + clearInterval(currentTimer) + clearHighlights() + +work = -> + clearHighlights() + $(pieces[pieceIndex]).attr('class', "#{defaultClass} highlight") + + # If we hit the last piece, reset the index and then reverse the array to + # get a nice back-and-forth sweeping look + if pieceIndex == pieces.length - 1 + pieceIndex = 0 + pieces.reverse() + else + pieceIndex++ + +$(document).on('page:fetch', start) +$(document).on('page:change', stop) diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 458af76cb75a5f463208a23fc9a3f43e327f56cc..83243dd24576d4464f4861c9755954d6cc5aeb69 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -105,7 +105,7 @@ .tanuki-shape { transition: all 0.8s; - &:hover { + &:hover, &.highlight { fill: rgb(255, 255, 255); transition: all 0.1s; } diff --git a/app/views/shared/_logo.svg b/app/views/shared/_logo.svg index da49c48acd3f54b15148477140c9d82e9b79fd33..3d279ec228cccba9d8b0bb85e2659a003295b3c7 100644 --- a/app/views/shared/_logo.svg +++ b/app/views/shared/_logo.svg @@ -5,13 +5,13 @@ - - - - - - - + + + + + + +