From 67c8d4b56056ed50164a2aafa38bece7d980d6f3 Mon Sep 17 00:00:00 2001
From: Andrew Rodrigues <psycho.bunny@hotmail.com>
Date: Mon, 9 Apr 2018 11:50:30 -0400
Subject: [PATCH] maximize graph w/ fullscreen API

---
 public/less/admin/general/dashboard.less | 30 ++++++++++++++++++++
 public/src/admin/general/dashboard.js    | 36 ++++++++++++++++++++++++
 src/views/admin/general/dashboard.tpl    |  3 +-
 3 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/public/less/admin/general/dashboard.less b/public/less/admin/general/dashboard.less
index c1f25e8ea1..f2deb950d9 100644
--- a/public/less/admin/general/dashboard.less
+++ b/public/less/admin/general/dashboard.less
@@ -9,6 +9,36 @@
 		padding-right: 50px;
 		position: relative;
 
+		.fa-expand {
+			display: none;
+			position: absolute;
+			right: 20px;
+			padding: 5px;
+			background-color: @gray-lighter;
+			color: @gray-base;
+			cursor: pointer;
+			.transition(all .4s);
+
+			&.active {
+				display: inline;
+			}
+		}
+
+		&:hover {
+			.fa-expand {
+				color: @gray-lighter;
+				background-color: @gray-base;
+			}
+		}
+
+		&.fullscreen {
+			width: 100%;
+			padding: 100px 40px;
+
+			.fa-expand {
+				top: 20px;
+			}
+		}
 
 		&.pie-chart {
 			padding-right: 0px;
diff --git a/public/src/admin/general/dashboard.js b/public/src/admin/general/dashboard.js
index b071e6412f..aa0442081a 100644
--- a/public/src/admin/general/dashboard.js
+++ b/public/src/admin/general/dashboard.js
@@ -48,6 +48,7 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator', 'benchpress'
 			socket.emit('admin.rooms.getAll', Admin.updateRoomUsage);
 			initiateDashboard();
 		});
+		setupFullscreen();
 	};
 
 	Admin.updateRoomUsage = function (err, data) {
@@ -496,5 +497,40 @@ define('admin/general/dashboard', ['semver', 'Chart', 'translator', 'benchpress'
 		}, realtime ? DEFAULTS.realtimeInterval : DEFAULTS.graphInterval);
 	}
 
+	function setupFullscreen() {
+		var container = document.getElementById('analytics-traffic-container');
+		var $container = $(container);
+		var btn = $container.find('.fa-expand');
+		var fsMethod;
+		var exitMethod;
+
+		if (container.requestFullscreen) {
+			fsMethod = 'requestFullscreen';
+			exitMethod = 'exitFullscreen';
+		} else if (container.mozRequestFullScreen) {
+			fsMethod = 'mozRequestFullScreen';
+			exitMethod = 'mozCancelFullScreen';
+		} else if (container.webkitRequestFullscreen) {
+			fsMethod = 'webkitRequestFullscreen';
+			exitMethod = 'webkitCancelFullScreen';
+		} else if (container.msRequestFullscreen) {
+			fsMethod = 'msRequestFullscreen';
+			exitMethod = 'msCancelFullScreen';
+		}
+
+		if (fsMethod) {
+			btn.addClass('active');
+			btn.on('click', function () {
+				if ($container.hasClass('fullscreen')) {
+					document[exitMethod]();
+					$container.removeClass('fullscreen');
+				} else {
+					container[fsMethod]();
+					$container.addClass('fullscreen');
+				}
+			});
+		}
+	}
+
 	return Admin;
 });
diff --git a/src/views/admin/general/dashboard.tpl b/src/views/admin/general/dashboard.tpl
index 7af9513dad..4460022af8 100644
--- a/src/views/admin/general/dashboard.tpl
+++ b/src/views/admin/general/dashboard.tpl
@@ -3,7 +3,8 @@
 		<div class="panel panel-default">
 			<div class="panel-heading">[[admin/general/dashboard:forum-traffic]]</div>
 			<div class="panel-body">
-				<div class="graph-container">
+				<div class="graph-container" id="analytics-traffic-container">
+					<i class="fa fa-expand"></i>
 					<ul class="graph-legend">
 						<li><div class="page-views"></div><span>[[admin/general/dashboard:page-views]]</span></li>
 						<li><div class="unique-visitors"></div><span>[[admin/general/dashboard:unique-visitors]]</span></li>