From e4daa547c176748949e0da222ef34e24fcb0daf9 Mon Sep 17 00:00:00 2001
From: Anurag Aggarwal <kanurag94@gmail.com>
Date: Sat, 9 May 2020 12:46:57 +0530
Subject: [PATCH] Added browse and capture mode

---
 index.html             | 15 ++++++++++-----
 js/starter-template.js | 24 ++++++++++++++++--------
 starter-template.css   | 17 ++++++++++++++---
 3 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index e788b29..4c1d88d 100644
--- a/index.html
+++ b/index.html
@@ -70,11 +70,16 @@
             </canvas>
         </div>
         <a href="index.html" id ="resetButton" class = "btn btn-danger">Reset</a>
-        <button id ="fullScreenButton" class = "btn btn-success" onclick="fullScreenCanvas();">Open XaoS in Full Screen Mode</button>
-        <input type="button" id = "fullScreenToggleButton" class = "btn btn-warning" value = "X" onclick="fullScreenMessageToggle();">
-        <p>This is a real-time fractal zoomer.  Using it is simple: left-click to zoom in, right-click to zoom out.</p>
-        <p>Touch Devices: Use one finger to zoom in, two fingers to zoom out. Interrupt zoom out with one finger.</p>
-        <p>Please use fullscreen mode to experience full functionality</p>
+        <input type="button" id = "browseButton" class = "btn btn-success" value = "Browse Mode" onclick="browseMenu()">
+        <input type="button" id = "captureMenuButton" class = "btn btn-info" value = "Capture Mode" onclick="captureMenu()">
+        <a href="#" id = "saveCanvasButton" class = "btn btn-success" download="image.png" onclick="saveCanvas()">Capture</a>
+        <div id = "instructions">
+            <p style="font-weight: bold;">Instructions</p>
+            <p>Click on "Browse Mode" to perform zoom</p>
+            <p>Click on "Capture Mode" to export canvas as image</p>
+            <p>Mouse Users: Left-click to zoom in, right-click to zoom out</p>
+            <p>Touch Device Users: Use one finger to zoom in, two fingers to zoom out. Interrupt zoom with one finger.</p>
+        </div>
     </div>
     <div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
diff --git a/js/starter-template.js b/js/starter-template.js
index 8ad58a2..c6065a4 100644
--- a/js/starter-template.js
+++ b/js/starter-template.js
@@ -1,24 +1,32 @@
-function fullScreenMessageToggle(){
-    if(fullScreenButton.style.visibility == "collapse"){
-        fullScreenButton.style.visibility = "visible";
+function captureMenu(){
+    if(browseButton.style.visibility == "collapse"){
+        browseButton.style.visibility = "visible";
         resetButton.style.visibility = "visible";
+        saveCanvasButton.style.visibility = "collapse";
+        instructions.style.visibility = "visible";
         containerCanvas.style.filter = "blur(5px)";
-        fullScreenToggleButton.value = "X";
+        captureMenuButton.value = "Capture Mode";
     }
     else{
-        fullScreenButton.style.visibility = "collapse";
+        browseButton.style.visibility = "collapse";
         resetButton.style.visibility = "collapse";
+        saveCanvasButton.style.visibility = "visible";
+        instructions.style.visibility = "collapse";
         containerCanvas.style.filter = "none";
-        fullScreenToggleButton.value = "<";
+        captureMenuButton.value = "Go Back";
     }
 }
 
-function fullScreenCanvas(){
-    canvas.style.visibility = "visible";
+function browseMenu(){    
     if(canvas.requestFullScreen)    
         canvas.requestFullScreen();
     else if(canvas.webkitRequestFullScreen)
         canvas.webkitRequestFullScreen();
     else if(canvas.mozRequestFullScreen)
         canvas.mozRequestFullScreen();
+}
+
+function saveCanvas(){
+    saveCanvasButton.download = "image.png";
+    saveCanvasButton.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
 }
\ No newline at end of file
diff --git a/starter-template.css b/starter-template.css
index 595aa1c..85369cd 100644
--- a/starter-template.css
+++ b/starter-template.css
@@ -5,12 +5,12 @@ body {
     padding: 40px 15px;
     text-align: center;
 }
-#fullScreenButton {
+#browseButton {
     position: absolute;
     top:1em;
-    right:3em
+    right:10em
 }
-#fullScreenToggleButton {
+#captureMenuButton {
     position: absolute;
     top:1em;
     right:1em;
@@ -19,4 +19,15 @@ body {
     position: absolute;
     top:1em;
     left:1em;
+}
+#saveCanvasButton {
+    position: absolute;
+    top:1em;
+    left:1em;
+    visibility: collapse;
+}
+#instructions {
+    position: absolute;
+    bottom:1em;
+    left: 1em;
 }
\ No newline at end of file