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) {