switch between amarula and a-ads

res/include/script/file_viewer/Viewer.js

@@ -50,8 +50,8 @@ function Viewer(type, viewToken, data) {
 		this.setFile(fileFromSkyNet(data))
 	}
 
-	this.renderSponsorsSimple()
-	window.addEventListener("resize", e => { this.renderSponsorsSimple() })
+	this.renderSponsors()
+	window.addEventListener("resize", e => { this.renderSponsors() })
 
 	// Register keyboard shortcuts
 	document.addEventListener("keydown", e => { this.keyboardEvent(e) })
@@ -132,12 +132,12 @@ Viewer.prototype.setFile = function(file) {
 	}
 }
 
-Viewer.prototype.renderSponsorsSimple = function() {
+Viewer.prototype.renderSponsors = function() {
 	let scaleWidth      = 1
 	let scaleHeight     = 1
-	let minWindowHeight = 1000
-	let bannerWidth     = 720
-	let bannerHeight    = 120
+	let minWindowHeight = 800
+	let bannerWidth     = document.querySelector(".sponsors_banner").offsetWidth
+	let bannerHeight    = document.querySelector(".sponsors_banner").offsetHeight
 
 	if (window.innerWidth < bannerWidth) {
 		scaleWidth = window.innerWidth/bannerWidth
@@ -146,45 +146,21 @@ Viewer.prototype.renderSponsorsSimple = function() {
 		scaleHeight = window.innerHeight/minWindowHeight
 	}
 
+	// The smaller scale is the scale we'll use
 	let scale = scaleWidth < scaleHeight ? scaleWidth : scaleHeight
-	document.querySelector(".sponsors").style.height = (scale*bannerHeight)+"px"
+
+	// Because of the scale transformation the automatic margins don't work
+	// anymore. So we have to manually calculate the margin. Here we take the
+	// width of the viewport - the width of the ad to calculate the amount of
+	// pixels around the ad. We multiply the ad size by the scale we calcualted
+	// to account for the smaller size.
+	let offset = (window.innerWidth - (bannerWidth*scale)) / 2
+
+	document.querySelector(".sponsors").style.height = (bannerHeight*scale)+"px"
+	document.querySelector(".sponsors_banner").style.marginLeft = offset+"px"
+	document.querySelector(".sponsors_banner").style.transform = "scale("+scale+")"
 }
 
-// Viewer.prototype.renderSponsors = function() {
-// 	let scale       = 1
-// 	let scaleWidth  = 1
-// 	let scaleHeight = 1
-// 	let minWidth    = 728
-// 	let minHeight   = 800
-
-// 	if (window.innerWidth < minWidth) {
-// 		scaleWidth = window.innerWidth/minWidth
-// 	}
-// 	if (window.innerHeight < minHeight) {
-// 		scaleHeight = window.innerHeight/minHeight
-// 	}
-// 	scale = scaleWidth < scaleHeight ? scaleWidth : scaleHeight
-
-// 	// Because of the scale transformation the automatic margins don't work
-// 	// anymore. So we have to maunally calculate the margin. Where we take the
-// 	// width of the viewport - the width of the ad to calculate the amount of
-// 	// pixels around the ad. We multiply the ad size by the scale we calcualted
-// 	// to account for the smaller size.
-// 	let offset = (window.innerWidth - (minWidth*scale)) / 2
-// 	if (offset < 0) {
-// 		offset = 0
-// 	}
-// 	document.querySelector(".sponsors > iframe").style.marginLeft = offset+"px"
-
-// 	if (scale == 1) {
-// 		document.querySelector(".sponsors > iframe").style.transform = "none"
-// 		document.querySelector(".sponsors").style.height = "90px"
-// 	} else {
-// 		document.querySelector(".sponsors > iframe").style.transform = "scale("+scale+")"
-// 		document.querySelector(".sponsors").style.height = (scale*90)+"px"
-// 	}
-// }
-
 Viewer.prototype.keyboardEvent = function(evt) {
 	if (evt.ctrlKey || evt.altKey || evt.metaKey) {
 		return // prevent custom shortcuts from interfering with system shortcuts

res/include/style/viewer.css

@@ -116,7 +116,7 @@
 	font-size: 0;
 	line-height: 0;
 }
-.file_viewer > .sponsors > iframe {
+.file_viewer > .sponsors > * {
 	display: block;
 	margin: auto;
 	transform-origin: 0 0;

res/template/file_viewer.html

@@ -100,9 +100,19 @@
 			</div>
 
 			<div id="sponsors" class="sponsors">
-				<a href="/click/DtZ3hHT9?target=https%3A%2F%2Fwww.amarula-electronics.com/?v=79cba1185463">
-					<img src="/res/img/misc/banner_as.png" style="display: block; margin: auto; height: 100%;" />
+				{{if eq .Other.AdType 0}}
+				<!-- scrolling="no" is not allowed by the W3C, but overflow: hidden doesn't work in chrome, so I have no choice -->
+				<iframe class="sponsors_banner"
+					data-aa="73974"
+					src="//ad.a-ads.com/73974?size=728x90&background_color={{.Style.Layer1Color.RGB}}&text_color={{.Style.TextColor.RGB}}&title_color={{.Style.HighlightColor.RGB}}&title_hover_color={{.Style.HighlightColor.RGB}}&link_color={{.Style.HighlightColor.RGB}}&link_hover_color={{.Style.HighlightColor.RGB}}"
+					style="width:728px; height:90px; border:none; padding:0; overflow:hidden;"
+					scrolling="no">
+				</iframe>
+				{{else if eq .Other.AdType 1}}
+				<a class="sponsors_banner" style="display: inline-block; width: 576px; height: 96px;" href="/click/DtZ3hHT9?target=https%3A%2F%2Fwww.amarula-electronics.com/?v=79cba1185463">
+					<img src="/res/img/misc/banner_as.png" style="width: 100%; height: 100%" />
 				</a>
+				{{end}}
 			</div>
 		</div>