From 2055cfaf9a5ad6bd39f9fadd7ed8512dad923b88 Mon Sep 17 00:00:00 2001
From: Wim Brand <fornax@fornaxian.com>
Date: Mon, 13 Jan 2020 16:24:06 +0100
Subject: [PATCH] restore advertisement

---
 res/include/img/spinner.svg           |   2 +-
 res/include/script/Viewer.js          |  43 ++++++++-
 res/include/style/viewer.css          |  21 ++++-
 res/template/admin.html               |   2 +
 res/template/file_viewer.html         |   5 +-
 res/template/fragments/analytics.html |  10 ---
 webcontroller/file_preview.go         |   6 +-
 webcontroller/user_style.go           | 120 +++++++++++++++++---------
 8 files changed, 149 insertions(+), 60 deletions(-)

diff --git a/res/include/img/spinner.svg b/res/include/img/spinner.svg
index df55567..8876a1a 100644
--- a/res/include/img/spinner.svg
+++ b/res/include/img/spinner.svg
@@ -7,7 +7,7 @@
 	viewBox="0 0 80 80"
 	xml:space="preserve">
 	<path
-		fill="#D43B11"
+		fill="#{{.Style.HighlightColor.RGB}}"
 		d="M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1
 		c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1
 		c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1
diff --git a/res/include/script/Viewer.js b/res/include/script/Viewer.js
index 8af345b..27bf36d 100644
--- a/res/include/script/Viewer.js
+++ b/res/include/script/Viewer.js
@@ -14,7 +14,7 @@ var Viewer = {
 		}
 
 		// On small screens the toolbar takes too much space, so it collapses automatically
-		if($("#filepreview").width() > 500 && !Toolbar.visible){
+		if($("#filepreview").width() > 600 && !Toolbar.visible){
 			Toolbar.toggle();
 		}
 
@@ -36,6 +36,8 @@ var Viewer = {
 			ListNavigator.init(data.data);
 		}
 
+		renderSponsors();
+
 		this.initialized = true;
 	},
 	setFile: function(file){
@@ -104,3 +106,42 @@ document.addEventListener("keydown", function(event){
 		break;
 	}
 });
+
+
+window.addEventListener("resize", renderSponsors);
+function renderSponsors() {
+	var scale = 1;
+	var scaleWidth = 1;
+	var scaleHeight = 1;
+	var minWidth = 728;
+	var minHeight = 800;
+
+	if (window.innerWidth < minWidth) {
+		scaleWidth = window.innerWidth/minWidth;
+	}
+	if (window.innerHeight < minHeight) {
+		scaleHeight = window.innerHeight/minHeight;
+	}
+	scale = scaleWidth < scaleHeight ? scaleWidth : scaleHeight;
+
+	console.log(scale, 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.
+	var 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";
+	}
+}
diff --git a/res/include/style/viewer.css b/res/include/style/viewer.css
index 369e333..1f611e5 100644
--- a/res/include/style/viewer.css
+++ b/res/include/style/viewer.css
@@ -24,6 +24,7 @@
 	text-align: left;
 	padding: 8px;
 	z-index: 10;
+	box-shadow: none;
 }
 
 /* Headerbar components */
@@ -68,7 +69,7 @@
 	display: none; /* Becomes visible if the page is a list */
 	width: 100%;
 	background-color: var(--layer_1_color);
-	box-shadow: 0 0 8px var(--shadow_color);
+	/* box-shadow: 0 0 8px var(--shadow_color); */
 	text-align: center;
 	line-height: 1em;
 	overflow-x: scroll;
@@ -105,6 +106,19 @@
 	vertical-align: middle;
 	transition: left 0.5s;
 	overflow: hidden;
+	box-shadow: inset 2px 2px 8px var(--shadow_color);
+}
+
+/* Sponsors (row 4) */
+.file_viewer > .sponsors {
+	background-color: var(--layer_1_color);
+	font-size: 0;
+	line-height: 0;
+}
+.file_viewer > .sponsors > iframe {
+	display: block;
+	margin: auto;
+	transform-origin: 0 0;
 }
 
 /* Toolbars */
@@ -120,7 +134,6 @@
 	top: 0;
 	padding: 0;
 	text-align: left;
-	box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);
 	transition: left 0.5s;
 }
 .file_viewer > .file_viewer_window > .file_viewer_sharebar{
@@ -133,7 +146,7 @@
 	overflow-x: hidden;
 	float: left;
 	background-color: var(--layer_1_color);
-	box-shadow: 2px 2px 8px var(--shadow_color);
+	/* box-shadow: 2px 2px 8px var(--shadow_color); */
 	text-align: center;
 	z-index: 48;
 	overflow: hidden;
@@ -318,7 +331,7 @@ table > tbody > tr {border: none !important;}
 .bytecounter{
 	color: var(--text_color);
 	font-size: 16px;
-	font-family: 'Ubuntu', sans-serif;
+	font-family: monospace, monospace;
 	line-height: 20px;
 	text-align: right;
 	display: inline-block;
diff --git a/res/template/admin.html b/res/template/admin.html
index 7a21eb5..56c4248 100644
--- a/res/template/admin.html
+++ b/res/template/admin.html
@@ -18,6 +18,8 @@
 					<button onclick="days = 30; interval = 1440; setData();">Month</button>
 					<button onclick="days = 60; interval = 1440; setData();">Two Months</button>
 					<button onclick="days = 91; interval = 1440; setData();">Quarter</button>
+					<button onclick="days = 182; interval = 1440; setData();">Half-year</button>
+					<button onclick="days = 365; interval = 1440; setData();">Year</button>
 				</div>
 				<div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: auto;">
 					<canvas id="bandwidth_chart"></canvas>
diff --git a/res/template/file_viewer.html b/res/template/file_viewer.html
index 115485b..c6c9129 100644
--- a/res/template/file_viewer.html
+++ b/res/template/file_viewer.html
@@ -100,9 +100,12 @@
 
 				<div id="filepreview" class="file_viewer_file_preview">
 					<!-- <img src="{{template `loadthink.gif`}}" style="margin-top: 20%; width: 200px; height: 200px;" /> -->
-					<div class="image" style="margin-top: 20%; width: 100px; height: 100px;">{{template "spinner.svg"}}</div>
+					<div class="image" style="margin-top: 20%; width: 100px; height: 100px;">{{template "spinner.svg" .}}</div>
 				</div>
 			</div>
+			<div id="sponsors" class="sponsors">
+				<iframe data-aa="73974" src="//ad.a-ads.com/73974?size=728x90&background_color={{.Style.Layer1Color.RGB}}&text_color={{.Style.HighlightTextColor.RGB}}&title_color={{.Style.HighlightTextColor.RGB}}&title_hover_color={{.Style.HighlightTextColor.RGB}}&link_color={{.Style.HighlightTextColor.RGB}}&link_hover_color={{.Style.HighlightTextColor.RGB}}" scrolling="no" style="width:728px; height:90px; border:0px; padding:0; overflow:hidden" allowtransparency="true"></iframe>
+			</div>
 		</div>
 
 		<div id="details_popup" class="popup details_popup">
diff --git a/res/template/fragments/analytics.html b/res/template/fragments/analytics.html
index 1b1dedc..86318bb 100644
--- a/res/template/fragments/analytics.html
+++ b/res/template/fragments/analytics.html
@@ -14,14 +14,4 @@
 	fathom('trackPageview');
 </script>
 <!-- / Fathom -->
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-24463738-4"></script>
-<script>
-	window.dataLayer = window.dataLayer || [];
-	function gtag(){dataLayer.push(arguments);}
-	gtag('js', new Date());
-
-	gtag('config', 'UA-24463738-4');
-</script>
-
 {{end}}{{end}}
diff --git a/webcontroller/file_preview.go b/webcontroller/file_preview.go
index beb1cc3..4b332e6 100644
--- a/webcontroller/file_preview.go
+++ b/webcontroller/file_preview.go
@@ -108,9 +108,9 @@ func (f filePreview) image() string {
 
 func (f filePreview) audio() string {
 	return fmt.Sprintf(`<div class="image-container">
-<br/><br/>
+<br/>
 <img src="/res/img/mime/audio.png" alt="Audio"/>
-<br/>%s<br/><br/>
+<br/>%s<br/>
 <audio id="audioPlayer" controls="controls" autoplay="autoplay" style="width:90%%;">
 <source src="%s" />
 </audio>
@@ -222,7 +222,7 @@ seamless="seamless" frameborder="0" allowtransparency="true"
 
 func (f filePreview) def() string {
 	return fmt.Sprintf(
-		`<br/><br/><img src="%s" class="image"><br/><br/>%s<br/>Type: '%s'`,
+		`<br/><img src="%s" class="image"><br/>%s<br/>Type: '%s'`,
 		f.APIURL+f.FileInfo.ThumbnailHREF,
 		f.FileInfo.Name,
 		f.FileInfo.MimeType,
diff --git a/webcontroller/user_style.go b/webcontroller/user_style.go
index b4334a9..6b577e3 100644
--- a/webcontroller/user_style.go
+++ b/webcontroller/user_style.go
@@ -68,60 +68,60 @@ type pixeldrainStyleSheet struct {
 func (s pixeldrainStyleSheet) String() string {
 	return fmt.Sprintf(
 		`:root {
-	--text_color:                 %s;
-	--input_color:                %s;
-	--input_color_dark:           %s;
-	--input_text_color:           %s;
-	--highlight_color:            %s;
-	--highlight_color_dark:       %s;
-	--highlight_text_color:       %s;
-	--danger_color:               %s;
-	--danger_color_dark:          %s;
-	--file_background_color:      %s;
-	--scrollbar_foreground_color: %s;
-	--scrollbar_hover_color:      %s;
-	--scrollbar_background_color: %s;
+	--text_color:                 #%s;
+	--input_color:                #%s;
+	--input_color_dark:           #%s;
+	--input_text_color:           #%s;
+	--highlight_color:            #%s;
+	--highlight_color_dark:       #%s;
+	--highlight_text_color:       #%s;
+	--danger_color:               #%s;
+	--danger_color_dark:          #%s;
+	--file_background_color:      #%s;
+	--scrollbar_foreground_color: #%s;
+	--scrollbar_hover_color:      #%s;
+	--scrollbar_background_color: #%s;
 
-	--background_color:           %s;
-	--body_color:                 %s;
+	--background_color:           #%s;
+	--body_color:                 #%s;
 
-	--layer_1_color:  %s;
+	--layer_1_color:  #%s;
 	--layer_1_shadow: %s;
-	--layer_2_color:  %s;
+	--layer_2_color:  #%s;
 	--layer_2_shadow: %s;
-	--layer_3_color:  %s;
+	--layer_3_color:  #%s;
 	--layer_3_shadow: %s;
-	--layer_4_color:  %s;
+	--layer_4_color:  #%s;
 	--layer_4_shadow: %s;
 
-	--shadow_color:     %s;
+	--shadow_color:     #%s;
 	--shadow_spread:    %s;
 	--shadow_intensity: %s;
 }`,
-		s.TextColor.cssString(),
-		s.InputColor.cssString(),
-		s.InputColor.add(0, 0, -.03).cssString(),
-		s.InputTextColor.cssString(),
-		s.HighlightColor.cssString(),
-		s.HighlightColor.add(0, 0, -.03).cssString(),
-		s.HighlightTextColor.cssString(),
-		s.DangerColor.cssString(),
-		s.DangerColor.add(0, 0, -.03).cssString(),
-		s.FileBackgroundColor.cssString(),
-		s.ScrollbarForegroundColor.cssString(),
-		s.ScrollbarHoverColor.cssString(),
-		s.ScrollbarBackgroundColor.cssString(),
-		s.BackgroundColor.cssString(),
-		s.BodyColor.cssString(),
-		s.Layer1Color.cssString(),
+		s.TextColor.RGB(),
+		s.InputColor.RGB(),
+		s.InputColor.add(0, 0, -.03).RGB(),
+		s.InputTextColor.RGB(),
+		s.HighlightColor.RGB(),
+		s.HighlightColor.add(0, 0, -.03).RGB(),
+		s.HighlightTextColor.RGB(),
+		s.DangerColor.RGB(),
+		s.DangerColor.add(0, 0, -.03).RGB(),
+		s.FileBackgroundColor.RGB(),
+		s.ScrollbarForegroundColor.RGB(),
+		s.ScrollbarHoverColor.RGB(),
+		s.ScrollbarBackgroundColor.RGB(),
+		s.BackgroundColor.RGB(),
+		s.BodyColor.RGB(),
+		s.Layer1Color.RGB(),
 		fmt.Sprintf("%dpx", s.Layer1Shadow),
-		s.Layer2Color.cssString(),
+		s.Layer2Color.RGB(),
 		fmt.Sprintf("%dpx", s.Layer2Shadow),
-		s.Layer3Color.cssString(),
+		s.Layer3Color.RGB(),
 		fmt.Sprintf("%dpx", s.Layer3Shadow),
-		s.Layer4Color.cssString(),
+		s.Layer4Color.RGB(),
 		fmt.Sprintf("%dpx", s.Layer4Shadow),
-		s.ShadowColor.cssString(),
+		s.ShadowColor.RGB(),
 		fmt.Sprintf("%dpx", s.ShadowSpread),
 		fmt.Sprintf("%dpx", s.ShadowIntensity),
 	)
@@ -142,6 +142,46 @@ func (h hsl) cssString() string {
 	)
 }
 
+func (orig hsl) RGB() string {
+	var r, g, b, q, p float64
+	var h, s, l = float64(orig.Hue) / 360, orig.Saturation, orig.Lightness
+
+	if s == 0 {
+		r, g, b = l, l, l
+	} else {
+		var hue2rgb = func(p, q, t float64) float64 {
+			if t < 0 {
+				t++
+			}
+			if t > 1 {
+				t--
+			}
+
+			if t < 1.0/6.0 {
+				return p + (q-p)*6*t
+			} else if t < 1.0/2.0 {
+				return q
+			} else if t < 2.0/3.0 {
+				return p + (q-p)*(2.0/3.0-t)*6
+			}
+			return p
+		}
+
+		if l < 0.5 {
+			q = l * (1 + s)
+		} else {
+			q = l + s - l*s
+		}
+
+		p = 2*l - q
+		r = hue2rgb(p, q, h+1.0/3.0)
+		g = hue2rgb(p, q, h)
+		b = hue2rgb(p, q, h-1.0/3.0)
+	}
+
+	return fmt.Sprintf("%02x%02x%02x", int(r*255), int(g*255), int(b*255))
+}
+
 // Add returns a NEW HSL struct, it doesn't modify the current one
 func (h hsl) add(hue int, saturation float64, lightness float64) hsl {
 	var new = hsl{