Skip to content

Loading…

animate developer quotes. #342

Merged
merged 1 commit into from

4 participants

@stephenplusplus
TasteJS member

I thought the homepage could use a little fanciness. I just made the developer quotes transition between each other more gently, as opposed to the removal/recreating/reinserting of the quotes every 25 seconds. Tried to tighten up the spending on the DOM and elaborate the functionality a bit. First PR, please be patient with me! If I need to do something differently, please let me know.

@sindresorhus
TasteJS member

Congrats on your first PR :tada:

Can you make it random again and follow the existing code style?

Otherwise this looks good to me. Thanks :)

@stephenplusplus
TasteJS member

Thank you!

I forgot to explain why I removed the random functionality in the first place. With only 4 quotes, it seemed to make more sense just to remove it altogether. However, with my last commit, I've added it back in-- kind of. Now, instead of always displaying a random quote, it will only start with a random quote.

So instead of:

Rebecca, Paul, Paul, Rebecca, Justin, Paul, Michael, Rebecca, Paul

it would be:

Michael, Justin, Rebecca, Paul, Michael, Justin, Rebecca, Paul
or
Justin, Rebecca, Paul, Michael, Justin, Rebecca, Paul, Michael
(etc)

If the original functionality is important, I can add that back in, too.

As far as code style, it was hard to detect a pattern in this JS. However, I went through my code and elaborated the variable names a bit, and did some overall less weird stuff, that maybe was hard to look at from my first commit.

If I can do anything else, I'll be happy to.

Thanks for your help!

@sindresorhus sindresorhus commented on an outdated diff
site/js/main.js
((18 lines not shown))
- function update() {
- var el = data[ Math.floor( Math.random() * data.length ) ];
+ text.innerText = quote.quote;
+ link.innerText = quote.person.name;
+ link.setAttribute('href', quote.link);
+ img.setAttribute('src', quote.person.gravatar);
@sindresorhus TasteJS member

Just use the jQuery methods, the speed benefit is moot anyway. Also don't see the point of those temp vars link , img etc, just use them directly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@sindresorhus sindresorhus commented on an outdated diff
site/js/main.js
((61 lines not shown))
+ if (!quoteElems[activeQuoteIndex]) {
+ quoteElems[activeQuoteIndex] = $(quotes[activeQuoteIndex]);
+ }
+
+ var activeQuoteElem = quoteElems[activeQuoteIndex];
+
+ fader(prevQuoteElem, activeQuoteElem);
+
+ ++activeQuoteIndex < quoteCount? activeQuoteIndex : activeQuoteIndex = 0;
+ prevQuoteElem = activeQuoteElem;
+ };
+ return swap();
+ };
+
+ $.fn.quote = function(quoteObjects) {
+ var container = this.parent(),
@sindresorhus TasteJS member

I would prefer it if the element the plugin selected was the container. So this instead of this.parent().

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@sindresorhus sindresorhus commented on an outdated diff
site/js/main.js
((62 lines not shown))
+ quoteElems[activeQuoteIndex] = $(quotes[activeQuoteIndex]);
+ }
+
+ var activeQuoteElem = quoteElems[activeQuoteIndex];
+
+ fader(prevQuoteElem, activeQuoteElem);
+
+ ++activeQuoteIndex < quoteCount? activeQuoteIndex : activeQuoteIndex = 0;
+ prevQuoteElem = activeQuoteElem;
+ };
+ return swap();
+ };
+
+ $.fn.quote = function(quoteObjects) {
+ var container = this.parent(),
+ template = this[0].outerHTML,
@sindresorhus TasteJS member

Again, just use jQuery methods. Speed implications here are moot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@sindresorhus
TasteJS member

If the original functionality is important, I can add that back in, too.

It's not important, but I would prefer to have it fully random. I like it that there's a random quote on each load, and that the following quotes are in random order too. People are likely to stick around for one, or maybe two, and it would be nice if neither of those are the same each time.

@stephenplusplus
TasteJS member

Thank you for taking the time to review the code and the feedback. Hopefully this latest commit has satisfied your requests.

Regarding the random quotes, it should now return a random quote that wasn't one of the last quotesLength quotes to be displayed. So, it isn't entirely random, but almost a hybrid of both of our ideas, which I think is the best option.

Thanks again for all of the feedback, I greatly appreciate it!

@sindresorhus
TasteJS member

Are you sure you pushed the right one? Looks like the first commit.

@stephenplusplus
TasteJS member

Yep, that was a mistake. Just pushed the new update. Thanks again for your patience!

@sindresorhus sindresorhus commented on an outdated diff
site/js/main.js
((29 lines not shown))
- update();
- };
+ if (quoteCount > ++quoteElemCount) createQuoteElems();
@sindresorhus TasteJS member

braces

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@sindresorhus sindresorhus commented on an outdated diff
site/js/main.js
((62 lines not shown))
+ var fader = function (fadeOut, fadeIn) {
+ var fadeOutCallback = function(){
+ fadeIn.fadeIn(500, fadeInCallback);
+ };
+
+ var fadeInCallback = function(){
+ window.setTimeout(swap, animSpeed);
+ };
+
+ fadeOut.fadeOut(500, fadeOutCallback);
+ };
+
+ var quotes = container.children(),
+ selectRandomQuoteIndex = Quotes.random(quotes),
+ quoteElems = {},
+ quoteCount = quotes.length,
@sindresorhus TasteJS member

not used

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@sindresorhus
TasteJS member

Also use tab indentation.

Otherwise looks splendid to me. Great work! :)

@stephenplusplus
TasteJS member

Thank you! Think I got it this time :)

@sindresorhus sindresorhus merged commit faa859e into tastejs:gh-pages
@sindresorhus
TasteJS member

Boom :bomb:

@sindresorhus
TasteJS member

Thanks for this :star2:

@passy
TasteJS member

:heart_decoration:

@sindresorhus sindresorhus referenced this pull request in stephenplusplus/ama
Closed

Who were/are your mentors? #23

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 6, 2012
  1. @stephensawchuk
Showing with 94 additions and 14 deletions.
  1. +1 −1 index.html
  2. +93 −13 site/js/main.js
View
2 index.html
@@ -110,7 +110,7 @@ <h2 style="text-align:center;font-weight:300">Scroll down for 30+ more framework
</div>
<hr>
<div class="row">
- <div class="span6">
+ <div class="span6 quotes">
<blockquote class="quote speech-bubble">
<p></p>
<footer>
View
106 site/js/main.js
@@ -35,28 +35,108 @@
});
};
+ var Quotes = {};
+ Quotes.build = function (quotes, template) {
+ var quoteContainer = document.createElement('q'),
+ quoteElemCount = 0,
+ quoteCount = quotes.length;
- $.fn.quote = function( data ) {
- var $this = this;
+ var createQuoteElems = function () {
+ var quote = quotes[quoteElemCount],
+ el = $(template).hide();
- function update() {
- var el = data[ Math.floor( Math.random() * data.length ) ];
+ el.children('p').text(quote.quote);
+ el.find('a').text(quote.person.name).attr('href', quote.link);
+ el.find('img').attr('src', quote.person.gravatar);
- $this.children('p').text( el.quote );
- $this.find('a').text( el.person.name );
- $this.find('a').attr( 'href', el.person.link );
- $this.find('img').attr( 'src', el.person.gravatar );
- setTimeout( update, 25000 );
- }
+ quoteContainer.appendChild(el[0]);
+
+ if (quoteCount > ++quoteElemCount) {
+ createQuoteElems();
+ }
+
+ return quoteContainer.innerHTML;
+ };
+ return createQuoteElems();
+ };
+
+ Quotes.random = function (quotes) {
+ var quoteCount = quotes.length,
+ randomQuotes = [];
+
+ var randomQuote = function () {
+ var randomQuoteIndex = Math.floor(Math.random() * quoteCount);
+
+ if ($.inArray(randomQuoteIndex, randomQuotes) > -1) {
+ return randomQuote();
+ }
+
+ if (randomQuotes.length === quoteCount - 1) {
+ randomQuotes = [];
+ }
+
+ randomQuotes.push(randomQuoteIndex);
+
+ return randomQuoteIndex;
+ };
+ return randomQuote;
+ };
+
+ Quotes.animate = function (container, animSpeed) {
+ var fader = function (fadeOut, fadeIn) {
+ var fadeOutCallback = function(){
+ fadeIn.fadeIn(500, fadeInCallback);
+ };
+
+ var fadeInCallback = function(){
+ window.setTimeout(swap, animSpeed);
+ };
- update();
+ fadeOut.fadeOut(500, fadeOutCallback);
+ };
+
+ var quotes = container.children(),
+ selectRandomQuoteIndex = Quotes.random(quotes),
+ quoteElems = {},
+ activeQuoteIndex = selectRandomQuoteIndex(),
+ prevQuoteElem = $(quotes[activeQuoteIndex]);
+
+ var swap = function () {
+ if (!quoteElems[activeQuoteIndex]) {
+ quoteElems[activeQuoteIndex] = $(quotes[activeQuoteIndex]);
+ }
+
+ var activeQuoteElem = quoteElems[activeQuoteIndex];
+
+ fader(prevQuoteElem, activeQuoteElem);
+
+ activeQuoteIndex = selectRandomQuoteIndex();
+ prevQuoteElem = activeQuoteElem;
+ };
+ return swap();
+ };
+
+ Quotes.init = function (quotes) {
+ var container = $(this),
+ template = $(this).html(),
+ quotesHTML = Quotes.build(quotes, template);
+
+ container.html(quotesHTML);
+
+ Quotes.animate(container, 25000);
+ };
+
+ $.fn.quote = function(quotes) {
+ return this.each(function(){
+ Quotes.init.call(this, quotes);
+ });
};
// Apps popover
$('.applist a').persistantPopover();
// Quotes
- $('.quote').quote([{
+ $('.quotes').quote([{
quote: 'TodoMVC is a godsend for helping developers find what well-developed frameworks match their mental model of application architecture.',
person: {
name: 'Paul Irish',
@@ -86,4 +166,4 @@
}
}]);
-}());
+}());
Something went wrong with that request. Please try again.