marquee.js

const
	MARQUEE_SPEED_PRECISION = 2;				// defines the number of decimal places for speed calculation
	
function initMarquee(panel) {
	var marquee=$(panel).find('marquee');
	for (var i=0;i<marquee.size();i++) {
		marqueeToCSS(marquee[i]);
	}
}

function marqueeToCSS(marquee) {
	// TODO insert font and font-size
	var
		width = $(marquee).attr("data-width") || "100px",
		height = $(marquee).attr("data-height") || "18px",
		speed = $(marquee).attr("data-speed") || "1.0",
		txt = $(marquee).attr("data-txtcolor") || "black",
		bg = $(marquee).attr("data-bgcolor") || "white",
		font = $(marquee).attr("data-font") || "Arial",
		fsize = $(marquee).attr("data-fsize") || height,
		content = $(marquee).html(),
		result = '';
	// generate css html
	result += '<div data-css-marquee style="position: relative; width:' + width + '; height: ' + height + '; overflow: hidden; display: inline-block; background-color: ' + bg + '; color: ' + txt + ';">';
	result += '<div data-css-marquee-text style="position: absolute; display: table-cell; white-space: nowrap; padding: 0px; cursor:default; font-size: ' + fsize + '; font-family: ' + font + ';">';
	result += content;
	result += '</div>';
	result += '</div>';
	// create html and replace marquee
	var element = document.createElement('hidden');
	$(element).html(result);
	$(marquee).replaceWith(element);
	// corrections
	var text = $(element).find("div[data-css-marquee-text]")[0];
	$($(element).find("div[data-css-marquee]")[0]).css("user-select","none");
	var textWidth = $(text).outerWidth();
	$(text).css("animation",'marquee ' + (textWidth / speed).toFixed(MARQUEE_SPEED_PRECISION) + 's linear infinite');
	$(text).html(repeatString(content, 5));
	$(element).replaceWith($(element).html());
}

function repeatString(str, times) {
	return (new Array(times + 1)).join(str);
}