Add voucher portal and a-ads skyscraper

2021-10-12 21:07:43 +02:00
parent 3ee6a37319
commit b4c278b970
6 changed files with 165 additions and 71 deletions
--- a/res/include/script/file_viewer/Skyscraper.js
+++ b/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)
+}
--- a/res/include/script/file_viewer/Viewer.js
+++ b/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
--- a/res/include/style/viewer.css
+++ b/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 ==
--- a/res/template/advertisements.html
+++ b/res/template/advertisements.html
@@ -111,10 +111,34 @@
 			</script>
 		</div>
 	{{ else if eq .Other.AdBannerType 15 }}
-	<!-- AuctionX Display platform tag START -->
-	<div id="27517x728x90x4605x_ADSLOT1" clickTrack="%%CLICK_URL_ESC%%" style="display: block; margin: auto;"></div>
-	<script type="text/javascript" async src="https://served-by.pixfuture.com/www/delivery/headerbid.js" slotId="27517x728x90x4605x_ADSLOT1" refreshTime="5" refreshInterval="60"></script>
-	<!-- AuctionX Display platform tag END -->
+		<!-- AuctionX Display platform tag START -->
+		<div id="27517x728x90x4605x_ADSLOT1" clickTrack="%%CLICK_URL_ESC%%" style="display: block; margin: auto;"></div>
+		<script type="text/javascript" async src="https://served-by.pixfuture.com/www/delivery/headerbid.js" slotId="27517x728x90x4605x_ADSLOT1" refreshTime="5" refreshInterval="60"></script>
+		<!-- AuctionX Display platform tag END -->
+	{{ else if eq .Other.AdBannerType 16 }}
+		<div style="text-align: center; line-height: 1.4em; font-size: 22px;">
+			<a href="https://pixeldrain.com/click/QVPk2osE?target=%2Fvouchercodes" class="button button_highlight" style="margin: 8px;">
+				<i class="icon">shopping_cart</i>
+				Click here for online shopping discounts!
+				<i class="icon">shopping_cart</i>
+			</a>
+		</div>
+	{{ else if eq .Other.AdBannerType 17 }}
+		<div style="text-align: center; line-height: 1.4em; font-size: 22px;">
+			<a href="https://pixeldrain.com/click/SrYUqAXy?target=%2Fvouchercodes" class="button button_highlight" style="margin: 8px;">
+				<i class="icon">shopping_cart</i>
+				Check our online shopping discounts!
+				<i class="icon">shopping_cart</i>
+			</a>
+		</div>
+	{{ else if eq .Other.AdBannerType 18 }}
+		<div style="text-align: center; line-height: 1.4em; font-size: 22px;">
+			<a href="https://pixeldrain.com/click/jx4tkNzE?target=%2Fvouchercodes" class="button button_highlight" style="margin: 8px;">
+				<i class="icon">shopping_cart</i>
+				Free coupon codes for online shopping!
+				<i class="icon">shopping_cart</i>
+			</a>
+		</div>
 	{{ end }}
 {{ end }}

--- a/res/template/file_viewer.html
+++ b/res/template/file_viewer.html
@@ -104,18 +104,18 @@
 					<br/>

 					{{ if and .Other.FileAdsEnabled .Other.UserAdsEnabled }}
-					<hr/>
-					Tired of ads?<br/>
-					Files expiring too soon?<br/>
-					<a class="button button_highlight" href="/click/7wy9gg2J?target=%2F%23pro">
-						<svg style="float: left; width: 2em; height: 2em; fill: currentColor; margin-right: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-							<g fill-rule="evenodd">
-								<path d="M64.1102,0.1004 C44.259,0.1004 28.1086,16.2486 28.1086,36.0986 C28.1086,55.8884 44.259,71.989 64.1102,71.989 C83.9,71.989 100,55.8884 100,36.0986 C100,16.2486 83.9,0.1004 64.1102,0.1004"/>
-								<polygon points=".012 95.988 17.59 95.988 17.59 .1 .012 .1"/>
-							</g>
-						</svg>
-						Become a Patron!
-					</a>
+						<hr/>
+						Tired of ads?<br/>
+						Files expiring too soon?<br/>
+						<a class="button button_highlight" href="/click/7wy9gg2J?target=%2F%23pro">
+							<svg style="float: left; width: 2em; height: 2em; fill: currentColor; margin-right: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+								<g fill-rule="evenodd">
+									<path d="M64.1102,0.1004 C44.259,0.1004 28.1086,16.2486 28.1086,36.0986 C28.1086,55.8884 44.259,71.989 64.1102,71.989 C83.9,71.989 100,55.8884 100,36.0986 C100,16.2486 83.9,0.1004 64.1102,0.1004"/>
+									<polygon points=".012 95.988 17.59 95.988 17.59 .1 .012 .1"/>
+								</g>
+							</svg>
+							Become a Patron!
+						</a>
 					{{ end }}

 					<!-- This frame will load the download URL when a download button is pressed -->
@@ -144,6 +144,13 @@
 				<div id="filepreview" class="file_viewer_file_preview checkers">
 					<div class="center" style="width: 100px; height: 100px;">{{template "spinner.svg" .}}</div>
 				</div>
+
+				<div id="skyscraper" class="skyscraper">
+					<button id="btn_skyscraper_close" class="round">
+						<i class="icon">close</i> Close ad
+					</button>
+					<div id="skyscraper_ad_space"></div>
+				</div>
 			</div>

 			<div id="sponsors" class="sponsors">
@@ -159,13 +166,6 @@
 					</div>
 				{{ end }}
 			</div>
-
-			{{ if and (and .Other.FileAdsEnabled .Other.UserAdsEnabled) (ne .Other.AdPopupType 0) }}
-				<div class="popup_warn">
-					You are viewing a large file ( > 250 MB ). Pop-up ads have been
-					enabled to cover bandwidth cost.
-				</div>
-			{{ end }}
 		</div>

 		<template id="tpl_details_popup">
@@ -290,16 +290,6 @@
 					<b>Malware</b>: Software programs designed to cause harm to
 					computer systems.
 				</label>
-				<!--
-				<h3>E-mail address</h3>
-				<p>
-					If you want to be notified when this file gets blocked you
-					can enter your e-mail address here. This is optional, you
-					can leave it empty if you want.
-				</p>
-				<input class="abuse_email_field" type="text" placeholder="e-mail address" style="width: 100%"/>
-				<br/>
-				-->

 				<h3>Send</h3>
 				<div class="abuse_report_notification" style="display: none;"></div>
@@ -335,10 +325,13 @@
 			let embeddedViewer = {{.Other.Embedded}};
 			let userAuthenticated = {{.Authenticated}};
 			let highlightColor = '#{{.Style.HighlightColor.RGB}}';
+			let skyscraperType = "{{.Other.AdSkyscraperType}}"
+
 			{{template `util.js`}}
 			{{template `drawGraph.js`}}
 			{{template `Modal.js`}}
 			{{template `Toolbar.js`}}
+			{{template `Skyscraper.js`}}
 			{{template `EditWindow.js`}}
 			{{template `EmbedWindow.js`}}
 			{{template `QRCodeWindow.js`}}
@@ -366,9 +359,8 @@
 			})
 		</script>

-		{{template "analytics"}}
-
 		{{ if and .Other.FileAdsEnabled .Other.UserAdsEnabled }}
+			{{ template "analytics" }}
 			{{ template "floating_ads" . }}
 		{{ end }}
 	</body>