Add download button

index.html

@@ -17,6 +17,8 @@
             Ternary Graph Generator
         </div>
         <hr/>
+        <div id="main-content">
+            <div id="controls">
                 <div class="group">
                 <h3>Axis 1</h3>
                     <div class="input">
@@ -81,8 +83,12 @@
                     <button id="tick-size-down">▼</button>
                     <button id="tick-size-up">▲</button>
                 </div>
-        <button onclick="downloadSVG">Download SVG</button>
+                <a id="download-button">
+                    <button>Download SVG</button>
+                </a>
+            </div>
             <div id="svg-container" class="my-class"></div>
+        </div>
     </body>
     <script src="index.js"></script>
 </html>

spago.dhall

@@ -19,6 +19,7 @@ to generate this file without the comments in this block.
   , "exceptions"
   , "foldable-traversable"
   , "integers"
+  , "js-uri"
   , "lists"
   , "maybe"
   , "numbers"

src/Main.purs

@@ -15,6 +15,7 @@ import Effect (Effect)
 import Effect.Console (log)
 import Effect.Class (liftEffect)
 import Effect.Exception (throw)
+import JSURI (encodeURIComponent)
 import TernaryGraph (Dimension, svgTextID, ternaryGraph, ternaryGraphSvg, TextStyle, tickLabelStrings)
 import TernaryGraph as TernaryGraph
 import Web.DOM.Document (contentType
@@ -228,6 +229,15 @@ update = do
   newNode <- importNode svgNode true document
   appendChild newNode svgContainer
 
+  -- Set SVG content to download button
+  downloadButtonEl <- myGetElementById document "download-button"
+  encodedSVG <- case encodeURIComponent mySVG of
+    Nothing -> throw "Failed to encode SVG"
+    Just encoded -> pure encoded
+  let downloadText = "data:xml/svg;charset=utf-8," <> encodedSVG
+  Element.setAttribute "href" downloadText downloadButtonEl
+  Element.setAttribute "download" "ternary-graph.svg" downloadButtonEl 
+
 addUpdateListener :: Document -> String -> Effect Unit
 addUpdateListener doc id = do
   listener <- eventListener updateEvent
@@ -251,8 +261,6 @@ registerInputIncButton doc inputID buttonID inc = do
   element <- myGetElementById doc buttonID
   addEventListener (EventType "click") listener true (Element.toEventTarget element)
 
-
-
 main :: Effect Unit
 main = do
   w <- window

ternary-graph.css

@@ -6,6 +6,11 @@ button {
   border-top-color: #E3E3E3;
 }
 
+#controls {
+  display: flex;
+  flex-direction: column;
+}
+
 .group {
   display: flex;
   flex-direction: column;
@@ -28,10 +33,16 @@ input[type="number"] {
 }
 
 .input {
+  display: flex;
+  flex-direction: row;
   height: 1.5em;
   margin-bottom: 0.4em;
 }
 
+#main-content {
+    flex-direction: row;
+}
+
 p {
     margin: auto;
     margin-right: 0.5em;