Add voucher portal and a-ads skyscraper

res/include/script/file_viewer/Skyscraper.js

@@ -0,0 +1,45 @@
+function Skyscraper() {
+	this.visible = false
+
+	this.divSkyscraper = document.getElementById("skyscraper")
+	this.divAdSpace = document.getElementById("skyscraper_ad_space")
+	this.divFilePreview = document.getElementById("filepreview")
+	this.btnClose = document.getElementById("btn_skyscraper_close")
+	this.btnClose.addEventListener("click", () => { this.close() })
+}
+
+Skyscraper.prototype.open = function () {
+	// If the ad popup was dismissed less than 24 hours ago we don't show it
+	let dismissal = +localStorage.getItem("viewer_skyscraper_ad_dismissed")
+	let now = new Date().getTime()
+
+	if (dismissal > 0 && now - dismissal < 60 * 60 * 24) {
+		console.log("Skyscraper dismissed")
+		return
+	}
+
+	if (skyscraperType === "a-ads") {
+		this.divAdSpace.innerHTML = `<iframe
+				data-aa="1811738"
+				src="//ad.a-ads.com/1811738?size=160x600"
+				style="width:160px; height:600px; border:0px; padding:0; overflow:hidden; background-color: transparent;" >
+			</iframe>`
+	} else {
+		return
+	}
+
+	this.divSkyscraper.style.right = "0"
+	this.divFilePreview.style.right = this.divSkyscraper.offsetWidth + "px"
+	this.visible = true
+}
+
+Skyscraper.prototype.close = function () {
+	this.divSkyscraper.style.right = -this.divSkyscraper.offsetWidth + "px"
+	this.divFilePreview.style.right = "0"
+	this.visible = false
+
+	localStorage.setItem("viewer_skyscraper_ad_dismissed", +new Date())
+
+	// Remove the ad from the DOM to save memory
+	setTimeout(() => { this.divSkyscraper.remove() }, 1000)
+}

res/include/script/file_viewer/Viewer.js

@@ -18,6 +18,7 @@ function Viewer(type, viewToken, data) {
 	this.detailsWindow = new DetailsWindow(this)
 	this.editWindow = new EditWindow()
 	this.qrCodeWindow = new QRCodeWindow(this)
+	this.skyscraper = new Skyscraper()
 
 	this.divFilepreview = document.getElementById("filepreview")
 
@@ -26,6 +27,9 @@ function Viewer(type, viewToken, data) {
 	if (this.divFilepreview.clientWidth > 600 && !this.toolbar.visible) {
 		this.toolbar.toggle()
 	}
+	if (this.divFilepreview.clientWidth > 1000) {
+		this.skyscraper.open()
+	}
 
 	if (embeddedViewer) {
 		// Remove padding from the headerbar

res/include/style/viewer.css

@@ -113,7 +113,7 @@
 	min-width: 100px;
 	text-align: center;
 	vertical-align: middle;
-	transition: left 0.5s;
+	transition: left 0.5s, right 0.5s;
 	overflow: hidden;
 	box-shadow: inset 2px 2px 10px 2px var(--shadow_color);
 	border-radius: 16px;
@@ -143,7 +143,6 @@
 	width: 8em;
 	z-index: 49;
 	overflow: hidden;
-	float: left;
 	left: -9em;
 	bottom: 0;
 	top: 0;
@@ -160,7 +159,6 @@
 	top: 0;
 	overflow-y: scroll;
 	overflow-x: hidden;
-	float: left;
 	box-shadow: inset 1px 1px 5px var(--shadow_color);
 	background-color: var(--layer_1_color);
 	border-radius: 16px;
@@ -169,6 +167,19 @@
 	overflow: hidden;
 	transition: left 0.5s;
 }
+.file_viewer > .file_viewer_window > .skyscraper {
+	position: absolute;
+	width: 160px;
+	z-index: 49;
+	overflow: hidden;
+	right: -170px;
+	bottom: 0;
+	top: 0;
+	padding: 0;
+	text-align: center;
+	transition: right 0.5s;
+	background-color: var(--layer_2_color);
+}
 
 /* =====================
    == FILE CONTAINERS ==