From d6722401b99c4a82e7fac37a87caa71b0ec01107 Mon Sep 17 00:00:00 2001
From: Muhammad Sulaiman Yusuf <ms.yusuf@outlook.co.id>
Date: Wed, 7 Sep 2022 11:23:03 +0700
Subject: [PATCH] add fullscreen button

---
 src/index.html | 38 ++++++++++++++++----------------------
 1 file changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/index.html b/src/index.html
index 0980458..345511f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -70,25 +70,7 @@
 			<h6 id="project-name-header"></h6>
 		</div>
 		<div class="container-action">
-			<!-- <button title="save" class="btn btn-sm btn-icon-toolbar"><i class="fa fa-save icon-toolbar"></i></button> -->
-			<!-- <button title="print" class="btn btn-sm btn-icon-toolbar"><i class="fa fa-print icon-toolbar"></i></button> -->
-			<!-- <div class="btn-icon-toolbar-label"><span class="icon-toolbar-separator">Zoom: </span></div>
-			<button class="btn btn-sm btn-icon-toolbar" id="zoom-day"><span class="icon-toolbar">Day</span></button>
-			<button class="btn btn-sm btn-icon-toolbar" id="zoom-week"><span class="icon-toolbar">Week</span></button>
-			<button class="btn btn-sm btn-icon-toolbar" id="zoom-month"><span class="icon-toolbar">Month</span></button> -->
-			<!-- <div class="custom-control custom-switch btn-icon-toolbar btn-sm">
-				<input type="checkbox" class="custom-control-input" id="critalPathBox">
-				<label class="custom-control-label icon-toolbar btn-icon-toolbar-label" for="critalPathBox">Critical Path</label>
-			</div>
-			<span class="icon-toolbar-separator">|</span>
-			<div class="custom-control custom-switch btn-icon-toolbar btn-sm">
-				<input type="checkbox" class="custom-control-input" id="autoSchedule">
-				<label class="custom-control-label icon-toolbar btn-icon-toolbar-label" for="autoSchedule">Auto Schedule</label>
-			</div> -->
-			<!-- <span class="icon-toolbar-separator">|</span> -->
 			<div class="btn-icon-toolbar btn-sm"><span class="icon-toolbar-separator">Zoom: </span></div>
-			<!-- <button title="Zoom In" class="btn btn-sm btn-icon-toolbar" id="gantt_zoom_in" onclick="zoomIn()"><i class="fa fa-plus icon-toolbar"></i></button> -->
-			<!-- <button title="Zoom Out" class="btn btn-sm btn-icon-toolbar" id="gantt_zoom_out" onclick="zoomOut()"><i class="fa fa-minus icon-toolbar"></i></button> -->
 			<div class="btn-icon-toolbar text-nowrap">
 				<input type="radio" id="scale1" class="gantt_radio" name="scale" value="day">
 				<label for="scale1" class="icon-toolbar btn-icon-toolbar-label">Days</label>
@@ -111,13 +93,14 @@
 			<button title="Show / Hide Columns" class="btn btn-sm btn-icon-toolbar" id="gantt_toggle_columns_btn"
 				onclick="gantt.$showDropdown(this)"><i class="fa fa-columns icon-toolbar"></i></button>
 			<span class="icon-toolbar-separator">|</span>
-			<!-- <button title="Collapse Activities" class="btn btn-sm btn-icon-toolbar" id="gantt_toggle_task_btn"><i class="fa fa-compress-alt icon-toolbar"></i></button> -->
+			<button title="Gantt Settings" class="btn btn-sm btn-icon-toolbar" id="gantt_setting_btn"><i
+					class="fa fa-cog icon-toolbar"></i></button>
+			<span class="icon-toolbar-separator">|</span>
 			<button title="Expand Activities" class="btn btn-sm btn-icon-toolbar" id="gantt_toggle_task_btn"><i
 					class="fa fa-expand-alt icon-toolbar"></i></button>
 			<span class="icon-toolbar-separator">|</span>
-			<button title="Gantt Settings" class="btn btn-sm btn-icon-toolbar" id="gantt_setting_btn"><i
-					class="fa fa-cog icon-toolbar"></i></button>
-
+			<button id="fullscreen_button" title="Full Screen" class="btn btn-sm btn-icon-toolbar" id="gantt_setting_btn"><i
+					class="fa icon-toolbar fa-expand"></i></button>
 		</div>
 	</div>
 	<div id="gantt_here" style='width:100vw; height:90vh;'></div>
@@ -812,4 +795,15 @@
 <script src="function/holiday.js"></script>
 <script src="function/reportActivity.js"></script>
 <script src="function/activityLocation.js"></script>
+<script>
+var button = document.getElementById("fullscreen_button");
+    button.addEventListener("click", function(){
+        if (!gantt.getState().fullscreen) {
+            gantt.expand();
+        }
+        else {
+            gantt.collapse();
+        }
+    }, false);
+</script>
 </body>