Merge pull request #241 from tagawa/small-tweaks

Fixed rotation in Moz/WebKit and corrected PageVisibility check
pwarocks · Nov 5, 2012 · 3ba9282 · 3ba9282
2 parents 10a5910 + 87d8ea3
commit 3ba9282
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 18 deletions.
diff --git a/config.yaml b/config.yaml
@@ -107,7 +107,7 @@ demos:
 
   - slug: flying-tweets
     title: 'Flying Tweets'
-    legend: 'Watch automatically-updated tweets fly onto your screen and fly off again. Great as a screensaver replacement or at conferences with boring speakers. When the page is not visible, animation stops to save precious CPU cycles.'
+    legend: 'Watch automatically-updated tweets fly onto your screen and fly off again. Great as a screensaver replacement or on displays at events. When the page is not visible, animation stops to save precious CPU cycles. Based on <a href="http://visibletweets.com/">Visible Tweets</a> by <a href="https://twitter.com/themaninblue">@themaninblue</a>.'
     tags: [css3]
     support: [cssanimations, csstransforms, fullscreen, pagevisibility]
 

diff --git a/demos/flying-tweets/index.html b/demos/flying-tweets/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles/screen.css">
     <link rel="stylesheet" href="/styles/panel.css">
 </head>
-<body class="animate">
+<body>
     <div id="container">
         <header>
             <form id="frm_search">
@@ -17,7 +17,7 @@
             <img src="images/resize.svg" alt="Resize icon" id="btn_resize" role="button" title="Resize">
             <!-- Icon source: http://iconmonstr.com/resize-5-icon/ -->
         </header>
-        <div id="content">
+        <div id="content" class="animate">
             <div id="tweet"></div>
         </div>
     </div>

diff --git a/demos/flying-tweets/scripts/script.js b/demos/flying-tweets/scripts/script.js
@@ -1,15 +1,18 @@
 window.addEventListener('DOMContentLoaded', function() {
+    'use strict';
+
     /*
      * Configuration
      */
-    var query = '#css'; // The initial search term
+    var query = '#css3'; // The initial search term
     var updateTime = 2; // The time between updates in minutes
 
     /*
      * Main script
      */
     // Set some global variables
     var container = document.getElementById('container');
+    var content = document.getElementById('content');
     var frm_search = document.getElementById('frm_search');
     var txt_search = document.getElementById('txt_search');
     var btn_search = document.getElementById('btn_search');
@@ -24,18 +27,19 @@ window.addEventListener('DOMContentLoaded', function() {
         var text = tweetData.text;
         var user = tweetData.user;
         var result = '';
-        for (var i = 0, len = text.length; i < len; i++) {
+        for (var i = 0, lenText = text.length; i < lenText; i++) {
             result += '<span class="char' + (i % 10) + '">' + text[i] + '</span>';
         }
         result += '<div id="user"><a href="http://twitter.com/' + user + '">';
         user = '@' + user;
-        for (var j = 0, len = user.length; j < len; j++) {
+        for (var j = 0, lenUser = user.length; j < lenUser; j++) {
             result += '<span class="char' + (j % 10) + '">' + user[j] + '</span>';
         }
         result += '</a></div>';
         return result;
     }
 
+    // Submit search for tweets
     frm_search.onsubmit = function(event) {
         event.preventDefault();
         count = 0;
@@ -46,6 +50,7 @@ window.addEventListener('DOMContentLoaded', function() {
         return false;
     };
 
+    // Loop through and show individual tweets
     function doAnimationIteration() {        
         if (count >= (tweets.length - 1)) {
             count = 0;
@@ -55,11 +60,13 @@ window.addEventListener('DOMContentLoaded', function() {
         showTweet(count);
     }
 
+    // Listen for the end of each animation cycle
     img.addEventListener('webkitAnimationIteration', doAnimationIteration, false);
     img.addEventListener('MSAnimationIteration', doAnimationIteration, false);
     img.addEventListener('oanimationiteration', doAnimationIteration, false);
     img.addEventListener('animationiteration', doAnimationIteration, false);
 
+    // Get tweets and append JSON result to body
     function getTweets(query, callback) {
         var url = 'http://search.twitter.com/search.json?q=' + encodeURIComponent(query) + '&callback=' + callback;
         // Remove any script tag we've used before
@@ -74,11 +81,7 @@ window.addEventListener('DOMContentLoaded', function() {
         document.body.appendChild(jsonScript);
     }
 
-    this.setTweets = function(data) {
-        updateTweets(data);
-        showTweet(0);
-    };
-
+    // Update tweets array with latest data
     this.updateTweets = function(data) {
         tweets = [];
         var results = data.results;
@@ -95,6 +98,12 @@ window.addEventListener('DOMContentLoaded', function() {
         count = 0;
     };
 
+    // High-level function to update & show tweets
+    this.setTweets = function(data) {
+        updateTweets(data);
+        showTweet(0);
+    };
+
     // Do this at the end of every animation iteration
     function showTweet(num) {
         var tweetData = tweets[num];
@@ -117,7 +126,11 @@ window.addEventListener('DOMContentLoaded', function() {
     // Page Visibility API: http://www.w3.org/TR/page-visibility/
     // Stop the animation when the tab is not visible
     document.addEventListener("visibilitychange", function(event) {
-        document.body.classList.toggle('animate');
+        if (document.hidden) {
+            content.classList.remove('animate');
+        } else {
+            content.classList.add('animate');
+        }
     }, false);
 
     // Fullscreen API: http://www.w3.org/TR/fullscreen/

diff --git a/demos/flying-tweets/styles/screen.css b/demos/flying-tweets/styles/screen.css
@@ -16,8 +16,6 @@ body {
 }
 a {
     color:#33c;
-}
-a:hover, a:focus {
     text-decoration:none;
 }
 
@@ -105,6 +103,10 @@ header {
     -moz-transition-duration:0.3s;
     -o-transition-duration:0.3s;
     transition-duration:0.3s;
+    -webkit-transition-property:opacity;
+    -moz-transition-property:opacity;
+    -o-transition-property:opacity;
+    transition-property:opacity;
 }
 #txt_search:focus, #txt_search:hover, #btn_search:focus, #btn_search:hover, #btn_resize:focus, #btn_resize:hover {
     opacity:1;
@@ -135,13 +137,11 @@ header {
     overflow:hidden;
     padding:0 8%;
     vertical-align:middle;
+    white-space:pre-wrap; /* Needed to keep space in empty spans */
 }
 #tweet span, #tweet img {
+    display:inline-block;
     position:relative;
-    -webkit-transform:rotate(-360deg);
-    -moz-transform:rotate(-360deg);
-    -o-transform:rotate(-360deg);
-    transform:rotate(-360deg);
 }
 .animate #tweet span, .animate #tweet img {
     -webkit-animation:char 10s infinite;