Skip to content

T
tvlokal.ticker
Commit 367d0ede by Wolfgang Berndt
Options

Refactor for new rss format, move styling to parent html.

parent e24b366c
Showing with 130 additions and 164 deletions
demodata/test.xml
......@@ -4,11 +4,24 @@
<title>Newsticker</title>
<item>
<title>Allergisch? Ja, aber nicht gegen Fitness!</title>
<description><![CDATA[Soll ich oder darf ich nicht - wer sich jetzt mit Heuschnupfen oder sonst einer Pollen-Allergie plagt, fragt sich vielleicht, ob ihm Training nicht schaden könnte. Das Gegenteil ist richtig. Körperliches Training ist neben angepasster Ernährung jetzt besonders wichtig. Denn Fitness trainiert nicht nur Muskeln und Herz-Kreislauf, sondern auch das Immunsystem und die Lungenfunktion. Und: Im Fitness-Studio trainieren Pollenallergiker weitgehend reizfrei.\nQuelle: shapeup media\nFoto: AntiMartina, shutterstock]]></description>
<description><![CDATA[Soll ich oder darf ich nicht - wer sich jetzt mit Heuschnupfen oder sonst einer Pollen-Allergie plagt, fragt sich vielleicht, ob ihm Training nicht schaden könnte. Das Gegenteil ist richtig. Körperliches Training ist neben angepasster Ernährung jetzt besonders wichtig. Denn Fitness trainiert nicht nur Muskeln und Herz-Kreislauf, sondern auch das Immunsystem und die Lungenfunktion. Und: Im Fitness-Studio trainieren Pollenallergiker weitgehend reizfrei.
Quelle: shapeup media
Foto: AntiMartina, shutterstock]]></description>
<image>
<url>http://tvlokal.de/customer/rss2files/images/1061_630_1.jpg</url>
</image>
<link/>
</item>
<head/>
<item>
<title>Testtitel</title>
<description>Testtext ohne CDATA. Funktioniert auch, erlaubt dann aber keine Zeilenumbrüche, weil XML jegliches Steuerzeichen als Whitespace interpretiert.</description>
</item>
<item>
<title></title>
<description></description>
</item>
<item>
<title></title>
<description></description>
</item>
</channel>
</rss>
\ No newline at end of file
src/index.html
......@@ -3,7 +3,82 @@
<head>
<meta charset="utf-8">
<title>vertical-ticker</title>
<link rel="stylesheet" href="style.css">
<style>
/* Fonts */
@font-face {
font-family: "tickertitel";
src: url("files/TitilliumWeb-Black.ttf") format("truetype");
}
@font-face {
font-family: "tickertext";
src: url("files/Oswald-Regular.woff") format("woff");
}
/* Hintergrundbild, etc... */
body {
padding: 0;
margin: 0;
background: url("files/demobg.jpg") no-repeat center fixed;
background-size: cover;
}
/* CSS Elemente für den Ticker */
#viewport {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.tickercontainer {
position: fixed;
}
.tickeritem {
margin-left: 5%;
margin-right: 5%;
}
.tickeritem:after {
content: "";
display: table;
clear: both;
}
/* Style für RSS-Title */
h1 {
font-family: tickertitel;
font-size: 80px;
font-weight: normal;
color: #fff;
}
/* Style für RSS-Description */
p {
font-family: tickertext;
font-size: 60px;
text-align: justify;
color: #eee;
}
/* Style für RSS-Image */
img {
float: left;
margin: 15px 3% 0% 0%;
}
/* Style für Platzhalter zwischen den Tickerelementen */
.spacer {
width: 100%;
margin-top: 50px;
margin-bottom: 50px;
font-size: 36px;
color: darkgrey;
text-align: center;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.base64.min.js"></script>
<script src="ticker.min.js"></script>
......@@ -18,57 +93,16 @@
ticker.init({
// URL zum RSS-Feed. Der Feed wird vom Ticker automatisch alle 5 Minuten refreshed, ein Reload der Seite
// ist nicht notwendig.
//
// Testfeeds:
// http://www.tvlokal.de/customer/rss2files/630rss.xml
// https://git.doohcorp.net/wberndt/tvlokal.ticker/raw/master/demodata/5rss/5rss.xml
//
url: "https://git.doohcorp.net/wberndt/tvlokal.ticker/raw/master/demodata/5rss/5rss.xml",
url: "https://git.doohcorp.net/wberndt/tvlokal.ticker/raw/master/demodata/test.xml",
// Proxy benutzen, falls das RSS von einem anderen Server kommt und dieser keinen
// "Access-Control-Allow-Origin"-Header gesetzt hat. Kann auf *.tvlokal.de vermutlich deaktivert werden.
useproxy: true,
// Tickergeschwindigkeit in Sekunden pro 100 Pixel.
speed: "2.5",
// Hintergrund des Tickers. Das Bild halt Priorität vor der Farbe, d.h. wenn beides gesetzt ist, wird
// das Bild angezeigt.
background: {
color: "#000",
// Pfad zum Hintergrundbild. Das Bild wird unter Beibehaltung des Seitenverhältnis auf die Größe
// des Browserfensters skaliert.
image: "files/demobg.jpg"
},
// Schriftart. Der Oxygen-Player zeigt den Ticker mit IE11 an, das Format muss also EOT, WOFF oder
// TTF sein.
font: {
file: "files/TitilliumWeb-Black.ttf",
format: "truetype",
name: "Titillium WebBlack"
},
// Styling der Überschrift. Die Werte werden direkt ins CSS der Seite geschrieben, es sind also z.B.
// auch prozentuale Werte möglich.
headline: {
size: "80px",
color: "#fff",
},
// Styling für den Tickertext.
text: {
size: "60px",
color: "#eee",
align: "justify",
},
// Styling für den Abstandshalter zwischen den Ticker-Elementen. Ist das Feld "text" leer, wird
// kein Abstandshalter eingeblendet.
spacer: {
size: "48px",
color: "#001aab",
text: "- - -",
}
// Text für den Abstandshalter zwischen 2 Tickerelementen. Ist dieses Feld leer oder auskommentiert,
// wird kein Abstandshalter eingeblendet (der Style für die Klasser ".spacer" kann in dem Fall ebenfalls
// weggelassen werden).
spacertext: "- - -"
});
});
</script>
......
src/style.css deleted 100644 → 0
body {
padding: 0;
margin: 0;
background-color: #000000;
font-family: sans-serif;
color: #FFFFFF;
}
#viewport {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.spacer {
width: 100%;
margin-top: 50px;
margin-bottom: 50px;
font-size: 36px;
color: darkgrey;
text-align: center;
}
.tickercontainer {
position: fixed;
}
.tickeritem {
margin-left: 5%;
margin-right: 5%;
}
.tickeritem:after {
content: "";
display: table;
clear: both;
}
h1 {
font-size: 72px;
font-weight: normal;
}
p {
font-size: 36px;
text-align: justify;
}
img {
float: left;
margin: 15px 3% 0% 0%;
}
\ No newline at end of file
src/ticker.js
......@@ -11,31 +11,34 @@ var feedCache = {
return cb(self.data);
}
function rss2html(jqueryEl) {
// try to get some sensible data from this xml-"html"-mess
return jqueryEl.html()
.replace("<![CDATA[", "")
.replace("<!--[CDATA[<p-->", "<p>")
.replace("]]>", "")
.replace("]]&gt;", "")
.replace(/<\/?font[^>]*>/gi, "");
}
// renew cache otherwise
$.ajax({
url: (useproxy) ? 'http://proxy.doohmedia.net/get.php?url=' + $.base64.encode(url) : url,
type: 'GET',
success: function(data){
var rss = $.parseXML(data);
var result = [];
$(data).find("item").each(function () {
$(rss).find("item").each(function () {
var item = $(this);
var title = rss2html(item.find("title"));
var desc = rss2html(item.find("description"));
if (!title && !desc) return false;
if (!title && desc === "<p></p>") return false;
result.push({title: title, desc: desc});
var titleNode = item.find("title");
var descrNode = item.find("description");
var imageNode = item.find("image > url");
// Parse xml fields
var title = (titleNode.length > 0) ? titleNode[0].textContent.replace(/(?:\r\n|\r|\n)/g, '<br/>') : undefined;
var descr = (descrNode.length > 0) ? descrNode[0].textContent.replace(/(?:\r\n|\r|\n)/g, '<br/>') : undefined;
var image = (imageNode.length > 0) ? imageNode[0].textContent : undefined;
// Add to result if any field is set
if(title || descr || image) {
result.push({
title: title,
descr: descr,
image: image
});
}
});
if(result.length > 0) {
......@@ -66,8 +69,6 @@ var ticker = {
if(!config.url) return;
self.config = config;
self._setupStyling();
// get data for first run
feedCache.getdata(self.config.url, self.config.useproxy, function (data) {
self.currentFeedData = data;
......@@ -78,36 +79,6 @@ var ticker = {
window.setInterval(function() { self._updateFeedData(); }, 60*1000);
});
},
_setupStyling: function() {
this.viewportHeight = $('#viewport').height();
if(this.config.font && this.config.font.file && this.config.font.format) {
var fontFamily = this.config.font.name || "customfont";
$('head').prepend('<style type="text/css">@font-face {font-family: "' + fontFamily + '"; src: url("' + this.config.font.file + '") format("' + this.config.font.format + '");}</style>');
$('body').css('font-family', fontFamily);
}
if(this.config.background.color) {
$('body').css('background-color',this.config.background.color);
}
if(this.config.background.image) {
$('body').css('background','url("' + this.config.background.image + '") no-repeat center fixed')
.css('background-size', 'cover');
}
this._styleFonts();
},
_styleFonts: function () {
if(this.config.text.size) $("p").css('font-size', this.config.text.size);
if(this.config.text.color) $("p").css('color', this.config.text.color);
if(this.config.text.align) $("p").css('text-align', this.config.text.align);
if(this.config.headline.size) $("h1").css('font-size', this.config.headline.size);
if(this.config.headline.color) $("h1").css('color', this.config.headline.color);
if(this.config.spacer.color) $(".spacer").css('color', this.config.spacer.color);
if(this.config.spacer.size) $(".spacer").css('font-size', this.config.spacer.size);
},
_updateFeedData: function () {
var self = this;
......@@ -137,7 +108,7 @@ var ticker = {
// Get the top position of the last ticker item (or the bottom position of the viewport for the first ticker)
var lastTicker = $(".tickercontainer:last").get(0);
var top = (lastTicker) ? $(lastTicker).offset().top + $(lastTicker).height() : this.viewportHeight;
var top = (lastTicker) ? $(lastTicker).offset().top + $(lastTicker).height() : $('#viewport').height();
// Add ticker container to DOM
var newContainer = $('<div class="tickercontainer"></div>');
......@@ -145,18 +116,20 @@ var ticker = {
// Add ticker items to the container
for(var i=0;i<this.currentFeedData.length;i++) {
if(this.config.spacer.text.length > 0) {
var newItem = $('<div class="tickeritem"><h1>' + this.currentFeedData[i].title + '</h1>' + this.currentFeedData[i].desc + '</div><div class="spacer">' + this.config.spacer.text + '</div>');
var newItem = '<div class="tickeritem">';
if(this.currentFeedData[i].title) newItem += '<h1>' + this.currentFeedData[i].title + '</h1>';
if(this.currentFeedData[i].image) newItem += '<img src="' + this.currentFeedData[i].image + '"/>';
if(this.currentFeedData[i].descr) newItem += '<p>' + this.currentFeedData[i].descr + '</p>';
if(this.config.spacertext) {
newItem += '</div><div class="spacer">' + this.config.spacertext + '</div>';
} else {
var newItem = $('<div class="tickeritem"><h1>' + this.currentFeedData[i].title + '</h1>' + this.currentFeedData[i].desc + '</div>');
newItem += '</div>';
}
$(newItem).children("p").addClass("text");
$(newContainer).append(newItem);
$(newContainer).append($(newItem));
}
self._styleFonts();
// Set top position
$(newContainer).css('top', top + "px");
......
src/ticker.min.js
var feedCache={validCacheDuration:3e5,lastRequestDate:null,data:[],getdata:function(a,b,c){function d(a){return a.html().replace("<![CDATA[","").replace("\x3c!--[CDATA[<p--\x3e","<p>").replace("]]>","").replace("]]&gt;","").replace(/<\/?font[^>]*>/gi,"")}var e=this,f=new Date;if(this.lastRequestDate&&f-this.lastRequestDate<this.validCacheDuration)return c(e.data);$.ajax({url:b?"http://proxy.doohmedia.net/get.php?url="+$.base64.encode(a):a,type:"GET",success:function(a){var b=[];return $(a).find("item").each(function(){var a=$(this),c=d(a.find("title")),e=d(a.find("description"));return!(!c&&!e)&&(!(!c&&"<p></p>"===e)&&void b.push({title:c,desc:e}))}),b.length>0&&(e.data=b,e.lastRequestDate=new Date),c(e.data)},error:function(a){return console.log("error while getting feed data: ",a),c(e.data)}})}},ticker={currentFeedData:[],currentFeedIndex:-1,config:null,viewportHeight:null,init:function(a){var b=this;a.url&&(b.config=a,b._setupStyling(),feedCache.getdata(b.config.url,b.config.useproxy,function(a){b.currentFeedData=a,b._setupNewTicker(),window.setInterval(function(){b._updateFeedData()},6e4)}))},_setupStyling:function(){if(this.viewportHeight=$("#viewport").height(),this.config.font&&this.config.font.file&&this.config.font.format){var a=this.config.font.name||"customfont";$("head").prepend('<style type="text/css">@font-face {font-family: "'+a+'"; src: url("'+this.config.font.file+'") format("'+this.config.font.format+'");}</style>'),$("body").css("font-family",a)}this.config.background.color&&$("body").css("background-color",this.config.background.color),this.config.background.image&&$("body").css("background",'url("'+this.config.background.image+'") no-repeat center fixed').css("background-size","cover"),this._styleFonts()},_styleFonts:function(){this.config.text.size&&$("p").css("font-size",this.config.text.size),this.config.text.color&&$("p").css("color",this.config.text.color),this.config.text.align&&$("p").css("text-align",this.config.text.align),this.config.headline.size&&$("h1").css("font-size",this.config.headline.size),this.config.headline.color&&$("h1").css("color",this.config.headline.color),this.config.spacer.color&&$(".spacer").css("color",this.config.spacer.color),this.config.spacer.size&&$(".spacer").css("font-size",this.config.spacer.size)},_updateFeedData:function(){var a=this;feedCache.getdata(a.config.url,a.config.useproxy,function(b){a.currentFeedData=b})},_setupNewTicker:function(){var a=this;0!==a.currentFeedData.length&&(a._createTicker(),setTimeout(function(){a._createTicker()},500))},_createTicker:function(){var a=this;if(0!==this.currentFeedData.length){var b=$(".tickercontainer:last").get(0),c=b?$(b).offset().top+$(b).height():this.viewportHeight,d=$('<div class="tickercontainer"></div>');$("#viewport").append(d);for(var e=0;e<this.currentFeedData.length;e++){if(this.config.spacer.text.length>0)var f=$('<div class="tickeritem"><h1>'+this.currentFeedData[e].title+"</h1>"+this.currentFeedData[e].desc+'</div><div class="spacer">'+this.config.spacer.text+"</div>");else var f=$('<div class="tickeritem"><h1>'+this.currentFeedData[e].title+"</h1>"+this.currentFeedData[e].desc+"</div>");$(f).children("p").addClass("text"),$(d).append(f)}a._styleFonts(),$(d).css("top",c+"px");var g=c+$(d).height()+20,h=Math.round(g/100*this.config.speed);$(d).css("transition","transform "+h+"s linear"),$(d).css("transform","translate3d(0px, -"+g+"px ,0px)"),$(d).on("transitionend",function(){a._createTicker(),$(d).remove()})}}};
\ No newline at end of file
var feedCache={validCacheDuration:3e5,lastRequestDate:null,data:[],getdata:function(a,b,c){var d=this,e=new Date;if(this.lastRequestDate&&e-this.lastRequestDate<this.validCacheDuration)return c(d.data);$.ajax({url:b?"http://proxy.doohmedia.net/get.php?url="+$.base64.encode(a):a,type:"GET",success:function(a){var b=$.parseXML(a),e=[];return $(b).find("item").each(function(){var a=$(this),b=a.find("title"),c=a.find("description"),d=a.find("image > url"),f=b.length>0?b[0].textContent.replace(/(?:\r\n|\r|\n)/g,"<br/>"):void 0,g=c.length>0?c[0].textContent.replace(/(?:\r\n|\r|\n)/g,"<br/>"):void 0,h=d.length>0?d[0].textContent:void 0;(f||g||h)&&e.push({title:f,descr:g,image:h})}),e.length>0&&(d.data=e,d.lastRequestDate=new Date),c(d.data)},error:function(a){return console.log("error while getting feed data: ",a),c(d.data)}})}},ticker={currentFeedData:[],currentFeedIndex:-1,config:null,viewportHeight:null,init:function(a){var b=this;a.url&&(b.config=a,feedCache.getdata(b.config.url,b.config.useproxy,function(a){b.currentFeedData=a,b._setupNewTicker(),window.setInterval(function(){b._updateFeedData()},6e4)}))},_updateFeedData:function(){var a=this;feedCache.getdata(a.config.url,a.config.useproxy,function(b){a.currentFeedData=b})},_setupNewTicker:function(){var a=this;0!==a.currentFeedData.length&&(a._createTicker(),setTimeout(function(){a._createTicker()},500))},_createTicker:function(){var a=this;if(0!==this.currentFeedData.length){var b=$(".tickercontainer:last").get(0),c=b?$(b).offset().top+$(b).height():$("#viewport").height(),d=$('<div class="tickercontainer"></div>');$("#viewport").append(d);for(var e=0;e<this.currentFeedData.length;e++){var f='<div class="tickeritem">';this.currentFeedData[e].title&&(f+="<h1>"+this.currentFeedData[e].title+"</h1>"),this.currentFeedData[e].image&&(f+='<img src="'+this.currentFeedData[e].image+'"/>'),this.currentFeedData[e].descr&&(f+="<p>"+this.currentFeedData[e].descr+"</p>"),this.config.spacertext?f+='</div><div class="spacer">'+this.config.spacertext+"</div>":f+="</div>",$(d).append($(f))}$(d).css("top",c+"px");var g=c+$(d).height()+20,h=Math.round(g/100*this.config.speed);$(d).css("transition","transform "+h+"s linear"),$(d).css("transform","translate3d(0px, -"+g+"px ,0px)"),$(d).on("transitionend",function(){a._createTicker(),$(d).remove()})}}};
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment