Skip to content
This repository
Browse code

Merge pull request #342 from spsawchuk/animate-quotes

animate developer quotes.
  • Loading branch information...
commit faa859eb4a9ee83ea04143c6f622091674f52824 2 parents d3d4381 + f4df18b
Sindre Sorhus authored December 06, 2012
2  index.html
@@ -110,7 +110,7 @@ <h2 style="text-align:center;font-weight:300">Scroll down for 30+ more framework
110 110
 		</div>
111 111
 		<hr>
112 112
 		<div class="row">
113  
-			<div class="span6">
  113
+			<div class="span6 quotes">
114 114
 				<blockquote class="quote speech-bubble">
115 115
 					<p></p>
116 116
 					<footer>
106  site/js/main.js
@@ -35,28 +35,108 @@
35 35
 		});
36 36
 	};
37 37
 
  38
+	var Quotes = {};
  39
+	Quotes.build = function (quotes, template) {
  40
+		var quoteContainer = document.createElement('q'),
  41
+			quoteElemCount = 0,
  42
+			quoteCount = quotes.length;
38 43
 
39  
-	$.fn.quote = function( data ) {
40  
-		var $this = this;
  44
+		var createQuoteElems = function () {
  45
+			var quote = quotes[quoteElemCount],
  46
+				el = $(template).hide();
41 47
 
42  
-		function update() {
43  
-			var el = data[ Math.floor( Math.random() * data.length ) ];
  48
+			el.children('p').text(quote.quote);
  49
+			el.find('a').text(quote.person.name).attr('href', quote.link);
  50
+			el.find('img').attr('src', quote.person.gravatar);
44 51
 
45  
-			$this.children('p').text( el.quote );
46  
-			$this.find('a').text( el.person.name );
47  
-			$this.find('a').attr( 'href', el.person.link );
48  
-			$this.find('img').attr( 'src', el.person.gravatar );
49  
-			setTimeout( update, 25000 );
50  
-		}
  52
+			quoteContainer.appendChild(el[0]);
  53
+
  54
+			if (quoteCount > ++quoteElemCount) {
  55
+				createQuoteElems();
  56
+			}
  57
+
  58
+			return quoteContainer.innerHTML;
  59
+		};
  60
+		return createQuoteElems();
  61
+	};
  62
+
  63
+	Quotes.random = function (quotes) {
  64
+		var quoteCount = quotes.length,
  65
+			randomQuotes = [];
  66
+
  67
+		var randomQuote = function () {
  68
+			var randomQuoteIndex = Math.floor(Math.random() * quoteCount);
  69
+
  70
+			if ($.inArray(randomQuoteIndex, randomQuotes) > -1) {
  71
+				return randomQuote();
  72
+			}
  73
+
  74
+			if (randomQuotes.length === quoteCount - 1) {
  75
+				randomQuotes = [];
  76
+			}
  77
+
  78
+			randomQuotes.push(randomQuoteIndex);
  79
+
  80
+			return randomQuoteIndex;
  81
+		};
  82
+		return randomQuote;
  83
+	};
  84
+
  85
+	Quotes.animate = function (container, animSpeed) {
  86
+		var fader = function (fadeOut, fadeIn) {
  87
+			var fadeOutCallback = function(){
  88
+				fadeIn.fadeIn(500, fadeInCallback);
  89
+			};
  90
+
  91
+			var fadeInCallback = function(){
  92
+				window.setTimeout(swap, animSpeed);
  93
+			};
51 94
 
52  
-		update();
  95
+			fadeOut.fadeOut(500, fadeOutCallback);
  96
+		};
  97
+
  98
+		var quotes = container.children(),
  99
+			selectRandomQuoteIndex = Quotes.random(quotes),
  100
+			quoteElems = {},
  101
+			activeQuoteIndex = selectRandomQuoteIndex(),
  102
+			prevQuoteElem = $(quotes[activeQuoteIndex]);
  103
+
  104
+		var swap = function () {
  105
+			if (!quoteElems[activeQuoteIndex]) {
  106
+				quoteElems[activeQuoteIndex] = $(quotes[activeQuoteIndex]);
  107
+			}
  108
+
  109
+			var activeQuoteElem = quoteElems[activeQuoteIndex];
  110
+
  111
+			fader(prevQuoteElem, activeQuoteElem);
  112
+
  113
+			activeQuoteIndex = selectRandomQuoteIndex();
  114
+			prevQuoteElem = activeQuoteElem;
  115
+		};
  116
+		return swap();
  117
+	};
  118
+
  119
+	Quotes.init = function (quotes) {
  120
+		var container = $(this),
  121
+			template = $(this).html(),
  122
+			quotesHTML = Quotes.build(quotes, template);
  123
+
  124
+		container.html(quotesHTML);
  125
+
  126
+		Quotes.animate(container, 25000);
  127
+	};
  128
+
  129
+	$.fn.quote = function(quotes) {
  130
+		return this.each(function(){
  131
+			Quotes.init.call(this, quotes);
  132
+		});
53 133
 	};
54 134
 
55 135
 	// Apps popover
56 136
 	$('.applist a').persistantPopover();
57 137
 
58 138
 	// Quotes
59  
-	$('.quote').quote([{
  139
+	$('.quotes').quote([{
60 140
 		quote: 'TodoMVC is a godsend for helping developers find what well-developed frameworks match their mental model of application architecture.',
61 141
 		person: {
62 142
 			name: 'Paul Irish',
@@ -86,4 +166,4 @@
86 166
 		}
87 167
 	}]);
88 168
 
89  
-}());
  169
+}());

0 notes on commit faa859e

Please sign in to comment.
Something went wrong with that request. Please try again.