Browse files

Merge pull request #342 from spsawchuk/animate-quotes

animate developer quotes.
  • Loading branch information...
2 parents d3d4381 + f4df18b commit faa859eb4a9ee83ea04143c6f622091674f52824 @sindresorhus sindresorhus committed Dec 6, 2012
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 @@
}
}]);
-}());
+}());

0 comments on commit faa859e

Please sign in to comment.