Add embed button

res/include/script/file_viewer/EmbedWindow.js

@@ -0,0 +1,66 @@
+function EmbedWindow(viewer) {
+	this.viewer = viewer
+	this.visible = false
+	this.modal = new Modal(
+		document.getElementById("file_viewer"),
+		() => { this.toggle() },
+		"Embed file", "850px", "auto",
+	)
+
+	let clone = document.getElementById("tpl_embed_popup").content.cloneNode(true)
+	this.textarea = clone.querySelector(".embed_html_code")
+	this.previewArea = clone.querySelector(".embed_preview_area")
+	this.btnCopyHTML = clone.querySelector(".embed_copy_html")
+	this.btnShowPreview = clone.querySelector(".embed_show_preview")
+	this.modal.setBody(clone)
+
+	this.btnCopyHTML.addEventListener("click", () => { this.copyHTML() })
+	this.btnShowPreview.addEventListener("click", () => { this.showPreview() })
+
+	this.btnEmbed = document.getElementById("btn_embed")
+	this.btnEmbed.addEventListener("click", () => { this.toggle() })
+
+	this.updateCode()
+}
+
+EmbedWindow.prototype.toggle = function () {
+	if (this.visible) {
+		this.modal.close()
+		this.btnEmbed.classList.remove("button_highlight")
+		this.visible = false
+	} else {
+		this.modal.open()
+		this.btnEmbed.classList.add("button_highlight")
+		this.visible = true
+	}
+}
+
+EmbedWindow.prototype.updateCode = function () {
+	let url
+	if (this.viewer.isFile) {
+		url = domainURL() + "/u/" + this.viewer.file.id + "?embed"
+	} else {
+		url = domainURL() + "/l/" + this.viewer.file.id + "?embed"
+	}
+
+	this.textarea.value = `<iframe ` +
+		`src="${url}" ` +
+		`style="border: none; width: 640px; max-width: 100%; height: 400px; border-radius: 6px;"` +
+		`></iframe>`
+}
+
+EmbedWindow.prototype.copyHTML = function () {
+	if (copyText(this.textarea.value)) {
+		console.log('Text copied')
+		this.btnCopyHTML.innerHTML = `<i class="icon">content_copy</i> Copied!`
+		this.btnCopyHTML.classList.add("button_highlight")
+	} else {
+		console.log('Copying not supported')
+		this.btnCopyHTML.innerText = "Error!"
+		alert("Your browser does not support copying text.")
+	}
+}
+
+EmbedWindow.prototype.showPreview = function () {
+	this.previewArea.innerHTML = this.textarea.value
+}

res/include/script/file_viewer/Viewer.js

@@ -12,6 +12,7 @@ function Viewer(type, viewToken, data) {
 	this.isFile = false
 	this.initialized = false
 	this.viewerScript = null
+	this.fullscreen = false
 
 	this.toolbar = new Toolbar(this)
 	this.detailsWindow = new DetailsWindow(this)
@@ -41,6 +42,13 @@ function Viewer(type, viewToken, data) {
 		if (!data.show_ads) {
 			document.getElementById("sponsors").remove()
 		}
+
+		// Show fullscreen button if this browser supports it
+		if (document.documentElement.requestFullscreen) {
+			let btnFullscreen = document.getElementById("btn_fullscreen")
+			btnFullscreen.style.display = ""
+			btnFullscreen.addEventListener("click", () => { this.toggleFullscreen() })
+		}
 	}
 
 	if (type === "file") {
@@ -68,6 +76,8 @@ function Viewer(type, viewToken, data) {
 		this.setFile(fileFromSkyNet(data))
 	}
 
+	this.embedWindow = new EmbedWindow(this)
+
 	this.renderSponsors()
 	window.addEventListener("resize", e => { this.renderSponsors() })
 
@@ -232,12 +242,27 @@ Viewer.prototype.keyboardEvent = function (evt) {
 		case 69: // E to open the edit window
 			this.editWindow.toggle()
 			break
+		case 77: // M to open the embed window
+			this.embedWindow.toggle()
+			break
 		case 81: // Q to close the window
 			window.close()
 			break
 	}
 }
 
+Viewer.prototype.toggleFullscreen = function () {
+	if (!this.fullscreen) {
+		document.documentElement.requestFullscreen()
+		document.getElementById("btn_fullscreen_icon").innerText = "fullscreen_exit"
+		this.fullscreen = true
+	} else {
+		document.exitFullscreen()
+		document.getElementById("btn_fullscreen_icon").innerText = "fullscreen"
+		this.fullscreen = false
+	}
+}
+
 
 // Against XSS attacks
 function escapeHTML(str) {

res/template/file_viewer.html

@@ -38,6 +38,10 @@
 					<div id="file_viewer_list_title"></div>
 					<div id="file_viewer_file_title">loading...</div>
 				</div>
+				<!-- fullscreen button becomes visible on embedded viewer -->
+				<button id="btn_fullscreen" class="btn_fullscreen" style="display: none;">
+					<i class="icon" id="btn_fullscreen_icon">fullscreen</i>
+				</button>
 			</div>
 			<div id="list_navigator" class="list_navigator"></div>
 			<div id="file_viewer_window" class="file_viewer_window">
@@ -73,6 +77,10 @@
 						<i class="icon">help</i>
 						<span>Deta<u>i</u>ls</span>
 					</button>
+					<button id="btn_embed" class="toolbar_button button_full_width">
+						<i class="icon">code</i>
+						<span>E<u>m</u>bed</span>
+					</button>
 					<button id="btn_edit" class="toolbar_button button_full_width" style="display: none;">
 						<i class="icon">edit</i>
 						<span><u>E</u>dit</span>
@@ -271,6 +279,27 @@
 			<br/>
 			<div class="captcha_popup_captcha" style="text-align: center;"></div>
 		</template>
+	</template>
+
+	<template id="tpl_embed_popup">
+		<p>
+			You can embed pixeldrain's file viewer in your own web pages. We
+			have created a special HTML code which renders a minimalistic
+			version of the file viewer where the title bar is a bit thinner and
+			the toolbar is collapsed by default.
+		</p>
+		<p>
+			Unless it was uploaded using a pixeldrain Pro account the embedded
+			file will also show advertisements.
+		</p>
+		<h3>Code</h3>
+		<textarea class="embed_html_code" style="width: 100%; height: 4em; margin: 0;"></textarea>
+		<br/>
+		<button class="embed_copy_html"><i class="icon">content_copy</i> Copy HTML</button>
+		<button class="embed_show_preview"><i class="icon">visibility</i> Show example</button>
+		<h3>Example</h3>
+		<div class="embed_preview_area" style="text-align: center;"></div>
+	</template>
 
 		<script src="/res/script/Chart.min.js"></script>
 		<script>
@@ -284,6 +313,7 @@
 			{{template `Modal.js`}}
 			{{template `Toolbar.js`}}
 			{{template `EditWindow.js`}}
+			{{template `EmbedWindow.js`}}
 			{{template `DetailsWindow.js`}}
 			{{template `ListNavigator.js`}}
 			{{template `Viewer.js`}}

res/template/widgets.html

@@ -61,7 +61,7 @@
 			Color <input type="color" name="favcolor" value="#ff0000">
 
 			<br/><br/>
-			<iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 640px; height: 480px; border-radius: 6px;"></iframe>
+			<iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 640px; max-width: 100%; height: 480px; border-radius: 6px;"></iframe>
 		</div></div>
 		{{template "page_bottom" .}}
 	</body>