home/rss-visualizer
2
0
Fork 0
mirror of https://github.com/wahyd4/rss-visualizer.git synced 2026-08-09 04:56:25 +10:00
Code Issues Packages Projects Releases Wiki Activity

add more UI tuning

Browse Source
This commit is contained in:
Michael Chen
2011-05-27 00:26:50 +08:00
parent 14319cf647
commit 61925ed6e2
4 changed files with 123 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+34 -1
View File
@@ -31,7 +31,7 @@ article img {
display: block;
width: 50%;
margin: 0 auto;
padding-bottom: 20px;
margin-bottom: 40px;
border: none;
z-index: -1;
-webkit-box-reflect: below 1px
@@ -41,6 +41,7 @@ article img {
.content {
text-shadow: 0px 1px 1px #111;
z-index: 100;
line-height: 160%;
}
article .from {
@@ -58,6 +59,38 @@ article .from {
margin-left: 500px;
}
@keyframes fadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#loading {
font-size: 72px;
width: 100%;
text-align: center;
position: absolute;
top: 200px;
z-index: 50px;
-webkit-transition: opacity 1s ease-in-out;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 3s;
-webkit-animation-direction: alternate;
}
footer {
position: fixed;
bottom: 0;
index.html
+22 -5
View File
@@ -9,13 +9,18 @@
<script src="js/jsapi.js"></script>
</head>
<body>
<div id="container">
<div id="container" class="title_only">
<div id="loading">
RSS Visualizer Loading...
</div>
<div id="main" role="main">
<article id="a1">
<span class="from">SS</span>
<h2>YYY</h2>
<div class="content">ZZZ</div>
<span class="from"></span>
<h2></h2>
<div class="content"></div>
</article>
<article id="a2" class="hide">
@@ -31,7 +36,19 @@
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
google.load("feeds", 1);
$(function() {new RSSVisualizer().start(); })
var urls = [
"http://www.guao.hk/feed",
"http://cn.engadget.com/rss.xml",
"http://news.ycombinator.com/rss",
"http://blogs.thoughtworks.com/rss20.xml"
];
$(function() {
var visualizer = new RSSVisualizer(urls);
visualizer.start(urls);
setInterval(function() {
visualizer.restart();
}, 30 * 60 * 1000);
})
</script>
</body>
</html>
js/main.js
+63 -21
View File
@@ -6,11 +6,11 @@ function Feeds() {
this.add = function(feed) {
this.feeds.push(feed);
}
};
this.empty = function() {
return this.feeds.length == 0;
}
};
this.entries = function() {
var entries = [];
@@ -23,12 +23,29 @@ function Feeds() {
}
}
return entries;
}
};
this.randomizedEntries = function() {
return this.randomize(this.entries());
}
this.randomize = function(myArray) {
var i = myArray.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = myArray[i];
var tempj = myArray[j];
myArray[i] = tempj;
myArray[j] = tempi;
}
return myArray;
}
this.fetch = function(feedUrl, callback) {
var _this = this;
var feed = new google.feeds.Feed(feedUrl);
feed.setNumEntries(1);
feed.setNumEntries(50);
feed.includeHistoricalEntries();
feed.load(function(result) {
if (!result.error) {
@@ -51,26 +68,39 @@ function Feeds() {
}
}
function RSSVisualizer() {
function RSSVisualizer(feedUrls) {
this.feedUrls = ["http://cn.engadget.com/rss.xml", "http://news.ycombinator.com/rss"];
this.feedUrls = feedUrls || ["http://cn.engadget.com/rss.xml", "http://news.ycombinator.com/rss"];
this.F = new Feeds();
this._lastIndex = 0;
this.interval = 3; // every second
this.readingTime = 7; // every second
this.entries = [];
this.lastShow = "a1";
this._interval = -1;
this.start = function(feedUrls) {
var urls = feedUrls || this.feedUrls;
this.start = function() {
var _this = this;
this.F.fetchAll(urls, function() {
_this.entries = _this.F.entries();
setInterval(function() {
this.F.fetchAll(this.feedUrls, function() {
_this.entries = _this.F.randomizedEntries();
this._interval = setInterval(function() {
$("#loading").hide();
_this.playRSS();
}, _this.interval * 1000);
}, _this.readingTime * 1000);
});
};
this.stop = function() {
clearInterval(this._interval);
};
this.restart = function() {
this.stop();
var _this = this;
setTimeout(function() {
_this.start();
}, 100);
};
this.playRSS = function() {
if (this.entries.length == 0) return;
if (this._lastIndex == this.entries.length) this._lastIndex = 0;
@@ -89,16 +119,28 @@ function RSSVisualizer() {
};
this.renderContent = function(entry) {
var bgcolor = "#0576dc";
var content = entry.content;
if (entry.feed_title == "Hacker News") {
return "";
}
var regexp_img = /<img [^>]+>/ig;
var matched = entry.content.match(regexp_img);
var img = "";
if (matched) {
img = matched[0];
//bgcolor = "#F60";
content = "";
} else if (entry.feed_title == "Planet TW") {
bgcolor = "#6C649C";
content = entry.content.substring(0, 500);
} else {
var regexp_img = /<img [^>]+>/ig;
var matched = entry.content.match(regexp_img);
var img = "";
if (matched) {
img = matched[0];
}
content = img + entry.content.replace(/<[^>]+>/img, '').substring(0, 100) + "...";
}
return img + entry.content.replace(/<[^>]+>/img, '');
$("body").css("background-color", bgcolor);
return content;
}
test/unittest.html
+4
View File
@@ -49,6 +49,10 @@ test("should fetch feeds", function() {
});
});
test("should randomize", function() {
var r = this.F.randomize([1, 2, 3, 4, 5, 6]);
ok( r != [1, 2, 3, 4, 5, 6]);
})
});
</script>