From c80f75ea1fc1dda4001ab32d52136445abb09b53 Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Sat, 2 Jan 2016 15:29:55 -0500 Subject: Give the logo shapes meaningful IDs --- app/views/shared/_logo.svg | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/views/shared/_logo.svg b/app/views/shared/_logo.svg index da49c48acd3..90f5f4e672b 100644 --- a/app/views/shared/_logo.svg +++ b/app/views/shared/_logo.svg @@ -5,13 +5,13 @@ - - - - - - - + + + + + + + -- cgit v1.2.1 From e5800d65de66aded6178252c4ae5025633eccc5e Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Sat, 2 Jan 2016 15:32:40 -0500 Subject: Use the logo as a loading indicator Closes #5616 --- app/assets/javascripts/logo.js.coffee | 45 +++++++++++++++++++++++++++ app/assets/stylesheets/framework/sidebar.scss | 2 +- 2 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 app/assets/javascripts/logo.js.coffee diff --git a/app/assets/javascripts/logo.js.coffee b/app/assets/javascripts/logo.js.coffee new file mode 100644 index 00000000000..8cd9f865e37 --- /dev/null +++ b/app/assets/javascripts/logo.js.coffee @@ -0,0 +1,45 @@ +NProgress.configure(showSpinner: false) + +defaultClass = 'tanuki-shape' +highlightClass = 'highlight' +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', +] +timeout = null + +clearHighlights = -> + $(".#{defaultClass}").attr('class', defaultClass) + +start = -> + clearHighlights() + work(0) + +stop = -> + window.clearTimeout(timeout) + clearHighlights() + +work = (pieceIndex) => + # jQuery's addClass won't work on an SVG. Who knew! + $piece = $(pieces[pieceIndex]) + $piece.attr('class', "#{defaultClass} #{highlightClass}") + + timeout = setTimeout(=> + $piece.attr('class', defaultClass) + + # 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 + 1 >= pieces.length + nextIndex = 0 + pieces.reverse() + else + nextIndex = pieceIndex + 1 + + work(nextIndex) + , 200) + +$(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 458af76cb75..83243dd2457 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; } -- cgit v1.2.1 From 71c31ecf731ff9f6f1d7107ae03397ec98c9f61f Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Sat, 2 Jan 2016 19:57:21 -0500 Subject: Ensure the sweep always starts from the left --- app/assets/javascripts/logo.js.coffee | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/logo.js.coffee b/app/assets/javascripts/logo.js.coffee index 8cd9f865e37..47135a6c5eb 100644 --- a/app/assets/javascripts/logo.js.coffee +++ b/app/assets/javascripts/logo.js.coffee @@ -1,14 +1,14 @@ NProgress.configure(showSpinner: false) defaultClass = 'tanuki-shape' -highlightClass = 'highlight' 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', + 'path#tanuki-left-eye, path#tanuki-left-ear', + 'path#tanuki-nose', + 'path#tanuki-right-eye, path#tanuki-right-ear', + 'path#tanuki-right-cheek', ] +firstPiece = pieces[0] timeout = null clearHighlights = -> @@ -16,18 +16,19 @@ clearHighlights = -> start = -> clearHighlights() + pieces.reverse() unless pieces[0] == firstPiece work(0) stop = -> window.clearTimeout(timeout) clearHighlights() -work = (pieceIndex) => +work = (pieceIndex) -> # jQuery's addClass won't work on an SVG. Who knew! $piece = $(pieces[pieceIndex]) - $piece.attr('class', "#{defaultClass} #{highlightClass}") + $piece.attr('class', "#{defaultClass} highlight") - timeout = setTimeout(=> + timeout = setTimeout(-> $piece.attr('class', defaultClass) # If we hit the last piece, reset the index and then reverse the array to -- cgit v1.2.1 From 7df3c1e8eafcb071f23ac1f4142e81ce8c1d9def Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Mon, 4 Jan 2016 14:54:56 -0500 Subject: Correct the logo ID names Her left, not ours! --- app/assets/javascripts/logo.js.coffee | 8 ++++---- app/views/shared/_logo.svg | 14 +++++++------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/logo.js.coffee b/app/assets/javascripts/logo.js.coffee index 47135a6c5eb..a8f97bdf3d7 100644 --- a/app/assets/javascripts/logo.js.coffee +++ b/app/assets/javascripts/logo.js.coffee @@ -2,11 +2,11 @@ NProgress.configure(showSpinner: false) defaultClass = 'tanuki-shape' pieces = [ - 'path#tanuki-left-cheek', - 'path#tanuki-left-eye, path#tanuki-left-ear', - 'path#tanuki-nose', - 'path#tanuki-right-eye, path#tanuki-right-ear', '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', ] firstPiece = pieces[0] timeout = null diff --git a/app/views/shared/_logo.svg b/app/views/shared/_logo.svg index 90f5f4e672b..3d279ec228c 100644 --- a/app/views/shared/_logo.svg +++ b/app/views/shared/_logo.svg @@ -5,13 +5,13 @@ - - - - - - - + + + + + + + -- cgit v1.2.1 From 9f46ca444354d4c6b52de3f23ce17c11f705d006 Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Mon, 4 Jan 2016 14:57:11 -0500 Subject: Decrease the logo sweep delay --- app/assets/javascripts/logo.js.coffee | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/logo.js.coffee b/app/assets/javascripts/logo.js.coffee index a8f97bdf3d7..b4dc993dead 100644 --- a/app/assets/javascripts/logo.js.coffee +++ b/app/assets/javascripts/logo.js.coffee @@ -1,5 +1,6 @@ NProgress.configure(showSpinner: false) +delay = 150 defaultClass = 'tanuki-shape' pieces = [ 'path#tanuki-right-cheek', @@ -12,7 +13,7 @@ firstPiece = pieces[0] timeout = null clearHighlights = -> - $(".#{defaultClass}").attr('class', defaultClass) + $(".#{defaultClass}.highlight").attr('class', defaultClass) start = -> clearHighlights() @@ -40,7 +41,7 @@ work = (pieceIndex) -> nextIndex = pieceIndex + 1 work(nextIndex) - , 200) + , delay) $(document).on 'page:fetch', start $(document).on 'page:change', stop -- cgit v1.2.1 From 567d87d90f2ba7195901ea24d240686c6030a4a7 Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Mon, 4 Jan 2016 15:18:04 -0500 Subject: Restructure logo JS to use `setInterval` --- app/assets/javascripts/logo.js.coffee | 46 ++++++++++++++++------------------- 1 file changed, 21 insertions(+), 25 deletions(-) diff --git a/app/assets/javascripts/logo.js.coffee b/app/assets/javascripts/logo.js.coffee index b4dc993dead..e864a674cdd 100644 --- a/app/assets/javascripts/logo.js.coffee +++ b/app/assets/javascripts/logo.js.coffee @@ -1,6 +1,5 @@ NProgress.configure(showSpinner: false) -delay = 150 defaultClass = 'tanuki-shape' pieces = [ 'path#tanuki-right-cheek', @@ -9,39 +8,36 @@ pieces = [ 'path#tanuki-left-eye, path#tanuki-left-ear', 'path#tanuki-left-cheek', ] +pieceIndex = 0 firstPiece = pieces[0] -timeout = null + +currentTimer = null +delay = 150 clearHighlights = -> $(".#{defaultClass}.highlight").attr('class', defaultClass) start = -> clearHighlights() + pieceIndex = 0 pieces.reverse() unless pieces[0] == firstPiece - work(0) + currentTimer = setInterval(work, delay) stop = -> - window.clearTimeout(timeout) + clearInterval(currentTimer) clearHighlights() -work = (pieceIndex) -> - # jQuery's addClass won't work on an SVG. Who knew! - $piece = $(pieces[pieceIndex]) - $piece.attr('class', "#{defaultClass} highlight") - - timeout = setTimeout(-> - $piece.attr('class', defaultClass) - - # 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 + 1 >= pieces.length - nextIndex = 0 - pieces.reverse() - else - nextIndex = pieceIndex + 1 - - work(nextIndex) - , delay) - -$(document).on 'page:fetch', start -$(document).on 'page:change', stop +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) -- cgit v1.2.1