GIGA UserScript um die Kacheln auf der Startseite durch eine TeaserBox zu ersetzen

myGIGA.user.js

// ==UserScript==
// @name          myGIGA
// @version       1.0.3
// @include       http://www.giga.de/
// ==/UserScript==

var main = function () {
	var myGIGA = {
		Teaser: function (title, url, image) {
			this.title = title;
			this.url = url;
			this.image = image;
		},
		
		getTeasers: function () {
			var teasers = [];
			
			$(".teaserbox.giga-tv.big li.teaser").each(function () {
				teasers.push(new myGIGA.Teaser(
					$(this).find("h2.colored a").text(),
					$(this).find("h2.colored a").attr("href"),
					$(this).find("a.image img").attr("src")
				));
			});
			
			return teasers;
		},
		
		getNeuBox: function () {
			var boxes = $(".sidebar-box div.headline");
			for (var i in boxes) {
				if ($(boxes[i]).text() == "Neu \\\\ GIGA")
					return $(boxes[i]).parent().parent();
			}
			return null;
		},
		
		init: function () {
			// fetch teasers and hide tiles
			var teasers = myGIGA.getTeasers();
			$(".giga-header-teaserbox").css("display", "none");
			
			// get "Neu \\ GIGA"-box and remove it from document tree
			var neuBox = myGIGA.getNeuBox();
			$(neuBox).remove();
			
			// insert contentblock and "Neu \\ GIGA"-box
			var contentBlock = $("<div class=\"contentblock\">\
				<div class=\"contentblock-left\"></div>\
				<div class=\"contentblock-right\">\
					<div class=\"sidebar sidebar-width slim-sidebar-headers\"></div>\
				</div>\
			</div>");
			contentBlock.find(".sidebar").append(neuBox);
			contentBlock.insertBefore($(".contentblock:first"));
			
			// create tab-slider
			var contentBox = $("<div class=\"content-box listing-width light\">\
				<div id=\"tab-slider\" data-command=\"tabSlider\">\
					<div class=\"tab-slider-content\">\
						<div class=\"tab-slider-controllers\">\
				 			<ul></ul>\
						</div>\
						<div class=\"tab-slider-slides\">\
							<ul></ul>\
						</div>\
					</div>\
				</div>\
			</div>");
			
			// append teasers to tab-slider
			for (var i in teasers) {
				var controller = $("<li><a></a></li>");
				controller.find("a").attr("href", teasers[i].url);
				controller.find("a").text(teasers[i].title);
				controller.appendTo(contentBox.find(".tab-slider-controllers ul"));
				
				var slide = $("<li>\
					<div class=\"tab-slider-slide\">\
						<div class=\"tab-slider-slide-image\">\
							<a>\
								<img alt=\"\" />\
							</a>\
						</div>\
					</div>\
				</li>");
				slide.find(".tab-slider-slide").addClass("tab-slider-slide-"+(i+1));
				slide.find("a").attr("href", teasers[i].url);
				slide.find("img").attr("src", teasers[i].image);
				slide.appendTo(contentBox.find(".tab-slider-slides ul"));
			}
			
			// change height of tab-slider because the images of "GIGA TV"-teasers are smaller than normal teasers
			contentBox.find("#tab-slider").css("min-height", "283px");
			contentBox.find(".tab-slider-slide").css("height", "281px");
			contentBox.find(".tab-slider-slide img").css("width", "530px");
			
			// insert tab-slider
			contentBox.appendTo(contentBlock.find(".contentblock-left"));
			
			// green arrow
			var image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAcCAYAAACzipU4AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wHEhY0H8+RFDAAAAEwSURBVDjLhdM9S0JRHMfx75GSW2lpIFESWEMo9uRQU4MgSAbS0NIsNAe2XChqqbwvIYhexZ0KmqKWhgsVDT1AIJGEiiFaVnh6AXH/98wfDv+nH3Ol3Cwez1du3lx6ovrXayCxn96TWRGtttApKx9y/QlAa6h+vlyICKDcvJ2eOcxmRQRwVzs7TVl5n4i0htZP7VhEAI+Nq8J8aSUqIq2h0n64FhFApfU0mjzIFEQEcF8/P0lZeUNEWsNH580WEUBX/wZEpBSEjfFVEU0OLdqOab+7IqVg0D+yLnY3FVo6cky77YqUgv7e8KY4zHg4ve2Y9rcrUgqMnqAlLjg5nNlwTLv7rwSKaICgP9RpWg1DPLrY4MKaGITITqwqRgpgbCCeExMV3U08e4Yz0jex7IX+AN2nWDhwQ7HOAAAAAElFTkSuQmCC";
			
			// insert css for theming tab-slider
			var css = "#tab-slider .tab-slider-controllers ul li.active,\
						#tab-slider .tab-slider-controllers ul li:hover {\
							background: url("+image+") no-repeat top right;\
						}\
						\
						#tab-slider .tab-slider-controllers ul li.active a,\
						#tab-slider .tab-slider-controllers ul li:hover a,\
						#tab-slider .indicator {\
							background-color: #007200;\
						}";
			$("<style></style>").attr("type", "text/css").html(css).appendTo($("head"));
			
			// activate tab-slider
			(new GigaAjaxManager()).tabSlider(contentBox.find("#tab-slider"));
			
			// trigger scroll for lazyloading images
			$(window).trigger("scroll");
		},
	};
	
	myGIGA.init();
};

var script = document.createElement('script');
script.type = "text/javascript";
script.textContent = '(' + main.toString() + ')();';
document.body.appendChild(script);